/*
Theme Name: JK Tech News
Theme URI: https://tech.jejak-kriminal.com
Author: Aufar Widjaya
Description: Lightweight Tech News Theme
Version: 1.0
*/

/* =================================
PORTAL GAMING INDONESIA - FINAL CSS
================================= */

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#0b0903;
color:#eee;
line-height:1.6;
}

/* ROOT COLOR */

:root{
--gold:#FFD700;
--gold2:#ffcc33;
--bg:#0b0903;
--card:#141106;
--border:#3b2f0b;
}

/* CONTAINER */

.container{
max-width:1100px;
margin:auto;
padding:0 20px;
}

/* =========================
NAVBAR
========================= */

.navbar{
background:#120f05;
border-bottom:1px solid var(--gold);
position:sticky;
top:0;
z-index:999;
backdrop-filter:blur(6px);
}

.nav-inner{
display:grid;
grid-template-columns:180px 1fr 180px;
align-items:center;
height:70px;
}

.nav-left{
display:flex;
align-items:center;
}

#menu-toggle{
background:none;
border:none;
color:var(--gold);
font-size:16px;
cursor:pointer;
font-weight:bold;
letter-spacing:.5px;
}

.nav-center{
text-align:center;
}

.nav-center img{
height:44px;
transition:.3s;
}

.nav-center img:hover{
transform:scale(1.05);
}

.nav-right{
text-align:right;
}

.nav-right a{
color:var(--gold);
text-decoration:none;
font-weight:600;
font-size:15px;
}

.nav-right a:hover{
text-shadow:0 0 10px var(--gold);
}

/* =========================
HERO SECTION
========================= */

.hero{
height:65vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
background:linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.7)
),
url(hero.png) center/cover no-repeat;
}

.hero h1{
font-size:48px;
color:var(--gold);
margin-bottom:15px;
}

.hero p{
font-size:18px;
margin-bottom:20px;
}

/* =========================
BUTTON
========================= */

.btn{
display:inline-block;
margin-top:20px;
padding:14px 34px;
background:linear-gradient(45deg,var(--gold),var(--gold2));
color:black;
border-radius:50px;
text-decoration:none;
font-weight:700;
letter-spacing:.5px;
transition:.3s;
box-shadow:0 0 15px rgba(255,215,0,.6);
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 0 25px rgba(255,215,0,.9);
}

/* =========================
KATEGORI
========================= */

.kategori{
margin:50px 0;
text-align:center;
}

.kategori a{
display:inline-block;
margin:6px;
padding:8px 16px;
border:1px solid var(--gold);
color:var(--gold);
text-decoration:none;
border-radius:20px;
font-size:14px;
}

.kategori a:hover{
background:var(--gold);
color:black;
}

/* =========================
GRID ARTIKEL
========================= */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
margin-bottom:50px;
}

/* =========================
CARD
========================= */

.card{
background:var(--card);
border:1px solid rgba(255,215,0,.4);
border-radius:14px;
overflow:hidden;
transition:.3s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 0 25px rgba(255,215,0,.4);
}

.card img{
width:100%;
height:170px;
object-fit:cover;
}

.card h3{
padding:15px;
font-size:18px;
line-height:1.4;
color:var(--gold);
}

/* =========================
ARTICLE PAGE
========================= */

article{
max-width:780px;
margin:auto;
font-size:18px;
line-height:1.9;
padding:20px 0;
}

article h1{
font-size:36px;
margin-bottom:20px;
color:var(--gold);
}

article p{
margin:22px 0;
color:#ddd;
}

article h2{
margin-top:40px;
font-size:28px;
color:var(--gold);
border-left:4px solid var(--gold);
padding-left:12px;
}

article h3{
margin-top:30px;
font-size:22px;
color:var(--gold2);
}

article ul,
article ol{
margin:20px 0 20px 25px;
}

article li{
margin:8px 0;
}

article a{
color:var(--gold);
text-decoration:none;
border-bottom:1px dashed var(--gold);
}

article a:hover{
opacity:.8;
}

/* =========================
IMAGE ARTICLE
========================= */

article img{
width:100%;
border-radius:14px;
margin:30px 0;
box-shadow:0 10px 40px rgba(0,0,0,.7);
}

/* =========================
BLOCKQUOTE
========================= */

blockquote{
border-left:4px solid var(--gold);
padding:15px 20px;
margin:30px 0;
background:#0d0b03;
font-style:italic;
}

/* =========================
TABLE OF CONTENTS
========================= */

.toc{
background:#0f0c03;
border:1px solid var(--border);
padding:20px;
border-radius:12px;
margin:35px 0;
}

.toc strong{
display:block;
margin-bottom:10px;
color:var(--gold);
}

.toc a{
color:var(--gold);
text-decoration:none;
font-size:15px;
}

.toc li{
margin:6px 0;
}

/* =========================
FOOTER
========================= */

footer{
margin-top:80px;
padding:30px;
text-align:center;
border-top:1px solid var(--border);
font-size:14px;
color:#aaa;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.hero{
height:55vh;
}

.hero h1{
font-size:34px;
}

.grid{
grid-template-columns:1fr;
}

.nav-inner{
grid-template-columns:1fr 1fr 1fr;
}

article{
font-size:17px;
}

}