/* ============================================================
   GamesReviews - Tema gelap dengan aksen hijau neon.
   Token warna/spacing di :root; komponen memakai token, bukan hex acak.
   ============================================================ */

:root {
    --bg:         #090d0c;
    --bg-2:       #0d1312;
    --surface:    #131a19;
    --surface-2:  #1a2322;
    --border:     #26302e;
    --border-2:   #334040;
    --accent:     #9be600;
    --accent-2:   #c6ff4a;
    --accent-deep:#2e4a00;
    --text:       #f1f5f3;
    --muted:      #9aa6a3;
    --heading-font: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body-font:  'Inter', system-ui, -apple-system, sans-serif;
    --radius:     14px;
    --radius-sm:  9px;
    --container:  1240px;
    --gap:        26px;
    --shadow:     0 10px 30px rgba(0,0,0,.35);
    --shadow-accent: 0 8px 26px rgba(155,230,0,.14);

    /* Warna kategori (badge) */
    --cat-news: #4db5ff;
    --cat-reviews: #9be600;
    --cat-pc: #ffa14d;
    --cat-playstation: #5c7cff;
    --cat-xbox: #57d977;
    --cat-nintendo: #ff5470;
    --cat-a: #c86bff; --cat-b: #ffc24d; --cat-c: #4dd4d4; --cat-d: #ff7eb0; --cat-e: #7c9cff;
}

/* Aksesibilitas: indikator fokus keyboard yang jelas (tak mengganggu mouse). */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.searchbox:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }

/* ---------- Reset ringan ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    color: var(--text);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.65;
    /* Latar dengan glow aksen sangat halus di atas, bukan hitam datar */
    background:
        radial-gradient(1200px 600px at 70% -10%, rgba(155,230,0,.06), transparent 60%),
        linear-gradient(180deg, var(--bg-2), var(--bg) 480px);
    background-attachment: fixed;
    background-color: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--heading-font); line-height: 1.08; margin: 0; }
::selection { background: var(--accent); color: #0a0f0d; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
.container--narrow { max-width: 760px; }
.container--article { max-width: 1120px; }
.site-main { min-height: 60vh; }

/* ---------- Ikon ---------- */
.icon { width: 22px; height: 22px; flex: none; }
.icon--sm { width: 16px; height: 16px; }

/* ---------- Topbar ---------- */
.topbar { background: #070b09; border-bottom: 1px solid var(--border); font-size: 13px; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.topbar__tagline { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.topbar__links { display: flex; gap: 20px; }
.topbar__links a { color: var(--muted); font-weight: 600; }
.topbar__links a:hover { color: var(--accent); }

/* ---------- Header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
    display: inline-grid; place-items: center; width: 40px; height: 40px;
    background: var(--accent); color: #0a0f0d; font-family: var(--heading-font);
    font-weight: 800; font-size: 22px; border-radius: 8px;
}
.brand__name { font-family: var(--heading-font); font-weight: 800; font-size: 26px; letter-spacing: .02em; }
/* Dua bagian nama brand berwarna (mis. "Gogo" putih, "Film" hijau) tanpa spasi berlebih. */
.brand__word + .brand__word { margin-left: 2px; }
.brand__img { height: 40px; width: auto; display: block; }

/* ---------- Slot iklan ---------- */
.ad-container { margin: 24px auto; }
/* Slot iklan: mepet ke ukuran iklan, tidak memberi ruang kosong berlebih. */
.ad-slot { display: flex; flex-direction: column; align-items: center; width: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px; }
.ad-slot__label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
/* Pembungkus iklan: center; bila iklan lebih lebar dari layar (mobile) -> scroll
   horizontal di dalam kotak, TIDAK memotong/menggeser layout. */
.ad-slot__inner { max-width: 100%; overflow-x: auto; line-height: 0; text-align: center; -webkit-overflow-scrolling: touch; }
.ad-slot__inner iframe { display: inline-block; border: 0; }
.ad-slot img { max-width: 100%; height: auto; margin: 0 auto; }
.article__content .ad-slot { margin: 28px 0; }

.mainnav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.mainnav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mainnav__link {
    display: block; padding: 8px 12px; font-weight: 600; color: var(--text);
    border-radius: var(--radius-sm); font-size: 15px;
}
.mainnav__link:hover { color: var(--accent); background: var(--surface); }

.searchbox { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 4px 4px 14px; }
.searchbox__input { background: transparent; border: 0; color: var(--text); outline: none; width: 120px; font-size: 14px; }
.searchbox__input::placeholder { color: var(--muted); }
.searchbox__btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: var(--accent); color: #0a0f0d; cursor: pointer; }
.searchbox__btn:hover { background: var(--accent-2); }

.nav-toggle { display: none; background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 44px; height: 44px; border-radius: var(--radius-sm); margin-left: auto; cursor: pointer; }
.nav-toggle__close { display: none; }

/* ---------- Badge ---------- */
.badge {
    display: inline-flex; align-items: center; padding: 4px 11px; font-size: 11.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; border-radius: 999px;
    background: rgba(255,255,255,.08); color: var(--text); backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.08);
}
.badge--accent { background: var(--accent); color: #0a0f0d; border-color: transparent; box-shadow: 0 2px 14px rgba(155,230,0,.35); }

/* Badge kategori berwarna: titik berwarna + teks, latar gelap transparan */
.badge[class*="cat--"] { background: rgba(9,13,12,.72); border: 1px solid rgba(255,255,255,.12); color: #fff; }
.badge[class*="cat--"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--muted); }
.cat--news::before { background: var(--cat-news); } .cat--news:hover { border-color: var(--cat-news); }
.cat--reviews::before { background: var(--cat-reviews); } .cat--reviews:hover { border-color: var(--cat-reviews); }
.cat--pc::before { background: var(--cat-pc); } .cat--pc:hover { border-color: var(--cat-pc); }
.cat--playstation::before { background: var(--cat-playstation); } .cat--playstation:hover { border-color: var(--cat-playstation); }
.cat--xbox::before { background: var(--cat-xbox); } .cat--xbox:hover { border-color: var(--cat-xbox); }
.cat--nintendo::before { background: var(--cat-nintendo); } .cat--nintendo:hover { border-color: var(--cat-nintendo); }
.cat--a::before { background: var(--cat-a); } .cat--b::before { background: var(--cat-b); }
.cat--c::before { background: var(--cat-c); } .cat--d::before { background: var(--cat-d); } .cat--e::before { background: var(--cat-e); }

.dot-sep { opacity: .4; margin: 0 2px; }

/* ---------- Tag chips ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.tag-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 600; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.tag-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft, rgba(155,230,0,.1)); }

/* ---------- Hero ---------- */
.hero-wrap { padding: 32px 0; }
.hero-grid { display: grid; grid-template-columns: 2.4fr 1.1fr 1.1fr; gap: var(--gap); align-items: stretch; }

.hero {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: var(--surface); box-shadow: var(--shadow);
    min-height: 480px; max-height: 560px;
    /* Kolom: konten menempel ke bawah & melebar penuh (bukan row). */
    display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__media { position: absolute; inset: 0; display: block; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.hero:hover .hero__img { transform: scale(1.05); }
.hero__body {
    position: relative; width: 100%; padding: 40px 34px 30px; z-index: 2;
    background: linear-gradient(to top, rgba(6,9,8,.98) 10%, rgba(6,9,8,.86) 42%, rgba(6,9,8,.25) 76%, rgba(6,9,8,0));
}
.hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hero__title {
    font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.12;
    letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0,0,0,.6);
    /* Batasi judul maks 3 baris agar hero tak memanjang ke bawah. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero__title a { transition: color .2s ease; }
.hero__title a:hover { color: var(--accent); }
.hero__excerpt { color: #d6ddda; font-size: 16px; line-height: 1.55; margin: 14px 0 0; max-width: 620px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__author { color: #fff; font-weight: 600; }
.hero__meta, .feature-card__meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-top: 16px; }

.hero-side { display: flex; flex-direction: column; gap: var(--gap); }
.feature-card { position: relative; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; flex: 1; display: flex; flex-direction: column; }
.feature-card:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: var(--shadow); }
.feature-card__media { position: relative; aspect-ratio: 16 / 10; display: block; overflow: hidden; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feature-card:hover .feature-card__media img { transform: scale(1.06); }
.feature-card__badge { position: absolute; top: 12px; left: 12px; }
.feature-card__title { font-size: 20px; font-weight: 700; line-height: 1.15; padding: 16px 18px 0; }
.feature-card__title a { transition: color .2s ease; }
.feature-card__title a:hover { color: var(--accent); }
.feature-card__meta { padding: 0 18px 18px; margin-top: 10px; }

/* ---------- News rail (Trending) ---------- */
.news-rail { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.news-rail__head { display: flex; align-items: center; gap: 8px; font-family: var(--heading-font); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.news-item { display: flex; align-items: center; gap: 12px; border-radius: var(--radius-sm); padding: 8px; transition: background .18s ease; }
.news-item:hover { background: var(--surface-2); }
.news-item__rank { flex: none; width: 24px; font-family: var(--heading-font); font-weight: 800; font-size: 22px; color: var(--border-2); text-align: center; transition: color .18s ease; }
.news-item:hover .news-item__rank { color: var(--accent); }
.news-item__thumb { width: 76px; height: 56px; object-fit: cover; border-radius: 7px; flex: none; }
.news-item__body { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.news-item__title { font-weight: 600; font-size: 13.5px; line-height: 1.3; transition: color .2s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item:hover .news-item__title { color: var(--accent); }
.news-item__time { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }

/* QR widget di dalam rail trending */
.qr-widget { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.qr-widget__code { flex: none; width: 92px; height: 92px; background: #fff; border-radius: 8px; padding: 6px; line-height: 0; }
.qr-widget__code svg { width: 100%; height: 100%; display: block; }
.qr-widget__title { font-family: var(--heading-font); font-weight: 800; font-size: 14px; margin: 0 0 4px; }
.qr-widget__desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 0; }
.qr-widget__desc strong { color: var(--text); word-break: break-word; }

/* ---------- Section + grid ---------- */
.section { padding: 32px 0; }
.section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; border-left: 4px solid var(--accent); padding-left: 12px; }
.section__title { position: relative; font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; padding-bottom: 8px; }
.section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.section__more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 14px; transition: gap .2s ease, color .2s ease; }
.section__more:hover { gap: 10px; color: var(--accent-2); }
/* Judul seksi beraksen + titik warna kategori pada baris kategori. */
.section__title--accent { color: var(--accent); }
.section__title { display: inline-flex; align-items: center; gap: 10px; }
.section__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.section--category + .section--category { padding-top: 0; }

/* Aksesibilitas: sembunyikan visual tapi tetap terbaca screen reader. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Blok Terpopuler ---------- */
.popular { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; counter-reset: pop; }
.popular__item { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.popular__rank { font-family: var(--heading-font); font-size: 30px; font-weight: 800; color: var(--accent); min-width: 32px; text-align: center; flex: none; }
.popular__media { flex: none; width: 92px; height: 62px; border-radius: 8px; overflow: hidden; display: block; }
.popular__media img { width: 100%; height: 100%; object-fit: cover; }
.popular__body { min-width: 0; }
.popular__title { font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.popular__title a:hover { color: var(--accent); }
.popular__meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.popular__cat { color: var(--accent); font-weight: 600; }

/* ---------- Newsletter CTA ---------- */
.newsletter {
    display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border-2); border-radius: var(--radius); padding: 34px 38px;
    position: relative; overflow: hidden;
}
.newsletter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 180px at 100% 0%, rgba(155,230,0,.12), transparent 70%); pointer-events: none; }
.newsletter__title { font-size: 26px; font-weight: 800; }
.newsletter__desc { color: var(--muted); margin-top: 8px; max-width: 460px; line-height: 1.55; }
.newsletter__desc--ok { color: var(--accent); font-weight: 600; }
.newsletter__desc--err { color: #ff7a90; font-weight: 600; }
.newsletter__form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 460px; }
.newsletter__input { flex: 1; padding: 13px 16px; background: var(--bg); border: 1px solid var(--border-2); border-radius: 10px; color: var(--text); font: inherit; }
.newsletter__input:focus { outline: none; border-color: var(--accent); }
.newsletter__btn { flex: none; white-space: nowrap; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.2); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card:hover { border-color: var(--border-2); transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.card:hover .card__img { transform: scale(1.07); }
.card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,9,8,.5), transparent 45%); opacity: 0; transition: opacity .25s ease; }
.card:hover .card__media::after { opacity: 1; }
.card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.card__body { padding: 18px; }
.card__title { font-size: 20px; font-weight: 700; line-height: 1.22; }
.card__title a { transition: color .2s ease; }
.card__title a:hover { color: var(--accent); }
.card__excerpt { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 9px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.card__author { color: var(--text); font-weight: 600; }

/* ---------- Article ---------- */
.article { padding: 28px 0 0; }
.breadcrumb { display: flex; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--accent); }

.article__header { margin-bottom: 8px; max-width: 820px; }
.article__title { font-size: clamp(30px, 4.4vw, 50px); font-weight: 800; line-height: 1.08; margin: 14px 0; }
.article__lead { font-size: 20px; line-height: 1.5; color: var(--muted); margin: 0 0 22px; }

/* Byline: avatar inisial + nama + tanggal + waktu baca */
.article__byline { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.article__author-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #0a0f0d; font-family: var(--heading-font); font-weight: 800; font-size: 20px; flex: none; }
.article__byline-text { display: flex; flex-direction: column; gap: 2px; }
.article__author { font-weight: 700; }
.article__byline-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.article__readtime { display: inline-flex; align-items: center; gap: 5px; }
.article__meta-sep { opacity: .5; }

/* Share bar */
.share { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; }
.share__label { color: var(--muted); font-size: 13px; font-weight: 600; margin-right: 2px; }
.share__btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s; }
.share__btn:hover { color: var(--accent); border-color: var(--accent); }
.share__btn.is-copied { color: var(--accent); border-color: var(--accent); }

/* Hero */
/* ---------- Loading spinner gambar ---------- */
/* Kontainer gambar menampilkan spinner sampai gambar selesai dimuat. */
.card__media, .hero__media, .feature-card__media, .news-item, .article__hero {
    position: relative;
}
.img-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px;
    margin: -13px 0 0 -13px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent);
    animation: imgspin .8s linear infinite; z-index: 1; pointer-events: none;
}
.img-loading img { opacity: 0; transition: opacity .3s ease; }
.img-loaded img { opacity: 1; }
@keyframes imgspin { to { transform: rotate(360deg); } }
.news-item.img-loading::after { width: 18px; height: 18px; margin: -9px 0 0 -9px; left: 46px; }

.article__hero { margin: 26px auto; max-width: 1000px; }
/* Rasio tetap 16:9 agar gambar apa pun (termasuk portrait dari Bing) di-crop
   ke landscape konsisten, tidak jadi terlalu tinggi di mobile.
   Catatan: TANPA max-height agar aspect-ratio tidak di-override. */
.article__hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: var(--radius); display: block; }

/* Layout artikel: konten utama + sidebar daftar isi (desktop) */
.article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; max-width: 1120px; margin: 0 auto; }
.article__main { min-width: 0; }
.article__aside { position: relative; }

/* Daftar isi (TOC) */
.toc { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 18px 22px; }
.toc__title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.toc__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.toc__list a { color: var(--text); }
.toc__list a:hover { color: var(--accent); }

/* TOC sticky di sidebar (desktop); versi inline (mobile) disembunyikan di desktop */
.toc--sticky { position: sticky; top: 92px; }
.toc--inline { display: none; margin: 0 0 28px; }

/* Konten kaya */
.article__content { font-size: 18px; line-height: 1.85; }
.article__content > *:first-child { margin-top: 0; }
.article__content h2 { font-size: 30px; font-weight: 800; margin: 40px 0 14px; scroll-margin-top: 90px; }
.article__content h3 { font-size: 23px; font-weight: 700; margin: 28px 0 10px; }
.article__content p { margin: 0 0 20px; }
.article__content a { color: var(--accent); text-decoration: underline; }
.article__content ul, .article__content ol { padding-left: 24px; margin: 0 0 20px; }
.article__content li { margin-bottom: 8px; }
.article__content img { width: 100%; border-radius: var(--radius); margin: 24px 0; }
.article__content figure { margin: 24px 0; }
.article__content figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 8px; }
.article__content blockquote { margin: 24px 0; padding: 4px 20px; border-left: 4px solid var(--accent); color: var(--text); font-size: 20px; font-style: italic; background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.article__content blockquote p { margin: 12px 0; }
.article__content strong { color: var(--text); }
.article__content hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.article__content table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.article__content th, .article__content td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.article__content th { background: var(--surface-2); font-weight: 700; }

/* Kotak bio penulis */
.author-bio { display: flex; gap: 18px; margin: 40px 0 8px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.author-bio__avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #0a0f0d; font-family: var(--heading-font); font-weight: 800; font-size: 28px; flex: none; }
.author-bio__eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; margin: 0; }
.author-bio__name { font-size: 22px; font-weight: 800; margin: 2px 0 8px; }
.author-bio__desc { color: var(--muted); margin: 0 0 12px; }
.author-bio__name a { color: inherit; text-decoration: none; }
.author-bio__name a:hover { color: var(--accent); }
.author-bio__link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; }
.author-bio__link:hover { text-decoration: underline; }

/* Halaman profil penulis */
.author-head { display: flex; gap: 22px; align-items: center; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.author-head__avatar { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--accent); color: #0a0f0d; font-family: var(--heading-font); font-weight: 800; font-size: 40px; flex: none; }
.author-head__name { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 2px 0 6px; }
.author-head__meta { color: var(--accent); font-weight: 700; font-size: 14px; margin: 0 0 10px; }
.author-head__bio { color: var(--muted); margin: 0; max-width: 640px; }

/* ---------- Page head / empty / error ---------- */
.page-head { margin-bottom: 24px; border-left: 4px solid var(--accent); padding-left: 14px; }
.page-head__eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 13px; margin: 0; }
.page-head__title { font-size: 36px; font-weight: 800; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* ---------- Pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination__link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; transition: border-color .15s, color .15s, background .15s; }
.pagination__link:hover { border-color: var(--accent); color: var(--accent); }
.pagination__link.is-active { background: var(--accent); border-color: var(--accent); color: #0a0f0d; }
.pagination__link--nav { padding: 0 16px; }
.pagination__link.is-disabled { opacity: .4; pointer-events: none; }
.pagination__gap { color: var(--muted); padding: 0 4px; }
@media (max-width: 560px) {
    .pagination__link--nav span, .pagination__link--nav { font-size: 13px; padding: 0 10px; }
}

.error-page { text-align: center; padding: 60px 0; }
.error-page__code { font-family: var(--heading-font); font-size: 96px; font-weight: 800; color: var(--accent); margin: 0; line-height: 1; }
.error-page__title { font-size: 32px; font-weight: 800; margin: 8px 0 12px; }
.error-page__text { color: var(--muted); margin-bottom: 24px; }
.btn { display: inline-block; padding: 12px 22px; border-radius: var(--radius-sm); font-weight: 700; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn--accent { background: var(--accent); color: #0a0f0d; }
.btn--accent:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(155,230,0,.22); }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(180deg, #070b09, #04060500); background-color: #070b09; border-top: 1px solid var(--border); margin-top: 48px; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px var(--gap); padding: 52px 16px 44px; }
.site-footer__brand { max-width: 340px; }
.site-footer__desc { color: var(--muted); margin: 14px 0 18px; line-height: 1.6; font-size: 14.5px; }
.social { display: flex; gap: 10px; }
.social__link { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); transition: .18s; }
.social__link:hover { color: #0a0f0d; background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.site-footer__heading { position: relative; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin-bottom: 18px; padding-bottom: 10px; }
.site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; border-radius: 2px; background: var(--accent); }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.site-footer__links a { color: var(--muted); font-size: 14.5px; transition: color .18s, padding-left .18s; }
.site-footer__links a:hover { color: var(--accent); padding-left: 4px; }

.site-footer__bottom { border-top: 1px solid var(--border); padding: 20px 0; color: var(--muted); font-size: 13px; }
.site-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin: 0; padding: 0; }
.site-footer__legal a { color: var(--muted); position: relative; }
.site-footer__legal a:hover { color: var(--accent); }
.site-footer__legal a:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: var(--border-2, var(--border)); }
.site-footer__copy { margin: 0; }

/* ---------- Responsif ---------- */
@media (max-width: 1000px) {
    /* Hero penuh di atas; featured + trending di bawah berdampingan. */
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .hero { grid-column: 1 / -1; min-height: 400px; }
    .hero-side { flex-direction: row; }
    .hero-side .feature-card { flex: 1; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    /* Footer: brand penuh di atas, lalu 3 kolom link. */
    .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer__brand { grid-column: 1 / -1; max-width: none; }
    .popular { grid-template-columns: 1fr; }
    .newsletter__form { max-width: none; }

    /* Artikel: satu kolom; sidebar TOC disembunyikan, TOC inline muncul di atas konten. */
    .article__layout { grid-template-columns: 1fr; gap: 0; max-width: 820px; }
    .article__aside { display: none; }
    .toc--inline { display: block; }
}
@media (max-width: 680px) {
    .nav-toggle { display: grid; place-items: center; }
    .mainnav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; }
    .mainnav.is-open { display: flex; }
    .mainnav__list { flex-direction: column; align-items: stretch; gap: 2px; }
    .searchbox { margin-top: 10px; }
    .searchbox__input { width: 100%; }
    body.nav-open .nav-toggle__open { display: none; }
    body.nav-open .nav-toggle__close { display: block; }
    .hero-grid { grid-template-columns: 1fr; }
    .hero { min-height: 360px; }
    .hero__body { padding: 28px 20px 22px; }
    .hero-side { flex-direction: column; }
    .grid { grid-template-columns: 1fr; }
    .topbar__links { display: none; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
    .site-footer__bottom-inner { flex-direction: column; text-align: center; gap: 10px; }
    .newsletter { flex-direction: column; align-items: stretch; padding: 24px 22px; }
    .newsletter__form { flex-direction: column; min-width: 0; }
    .popular__media { width: 72px; height: 52px; }
    .popular__rank { font-size: 24px; min-width: 26px; }
    .author-bio { flex-direction: column; }
    .author-head { flex-direction: column; text-align: center; gap: 14px; }
    .author-head__bio { margin-inline: auto; }
    .article__content { font-size: 17px; }
    .article__lead { font-size: 18px; }
}