/* Shared layout: generated into final static pages via scripts/build_pages.py */
:root {
  --font-menu:'Bebas Neue', Inter, system-ui, sans-serif;
  --font-sub:Inter, system-ui, -apple-system, sans-serif;
  --bg:#eef4fd; --bg2:#ffffff; --text:#1f2937; --text2:#111827; --text3:#44566f;
  --border:rgba(63,135,245,.18); --card:#ffffff; --hover:rgba(63,135,245,.06);
  --shadow:rgba(17,24,39,.06); --accent:#3F87F5; --accent-text:#fff;
  --active:#e11d48; --active-text:#e11d48; --active-soft:rgba(225,29,72,.12);
  --scrollbar:#c7c3bb; --scrollbar-hover:#a8a49c; --scrollbar-track:transparent;
}
[data-theme="dark"] {
  --bg:#050608; --bg2:#0e1016; --text:#e8eaef; --text2:#f2f2f2; --text3:rgba(255,255,255,.55);
  --border:rgba(255,255,255,.08); --card:#12151d; --hover:rgba(255,255,255,.06);
  --shadow:rgba(0,0,0,.35); --accent:#F31E4E; --accent-text:#fff;
  --active:#F31E4E; --active-text:#ff6b8a; --active-soft:rgba(243,30,78,.16);
  --scrollbar:#333844; --scrollbar-hover:#4a5160; --scrollbar-track:transparent;
}

/* Global themed scrollbars (page + nested overflow) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) var(--scrollbar-track);
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Font dasar seluruh halaman. Tanpa ini, semua teks yang tidak di-set
   eksplisit per-class jatuh ke default peramban (serif / Times New Roman)
   dan tidak sesuai tema. Bebas Neue tetap dipakai untuk elemen menu/header
   lewat --font-menu di tiap class-nya. */
html { font-family: var(--font-sub); }
body { font-family: var(--font-sub); }
button, input, select, textarea { font-family: inherit; }
.scrollbar-hide {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
/* Header kotak mengapung. `max-width` diambil dari lebar konten (`1440px`)
   DIKURANGI padding kotak konten (`2 x 18px`), jadi tepi header plek sejajar
   sama tepi kotak konten di layar lebar — tapi karena `box-sizing:border-box`,
   yang menyusut cuma isinya, tepinya tetap di x=80px sama seperti konten.
   Di bawah 1404px `width:auto` bikin header selebar layar (mentok tepi) —
   itu disengaja: layar sempit tak punya ruang buat celah mengapung.
   `top:8px` bikin dia mengapung di tengah saat digulir; latar semi-transparan
   + blur supaya isi halaman terlihat lewat di belakangnya. */
.header { width:auto; max-width:1440px; margin:0 auto; background:var(--bg2); background:color-mix(in srgb, var(--bg2) 88%, transparent); border:1px solid var(--border); border-radius:26px; box-shadow:0 16px 48px var(--shadow); padding:12px 22px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; position:sticky; top:8px; z-index:50; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-sizing:border-box; }
/* Header melebar penuh (tanpa kotak) = harus keluar dari padding body.
   Puluhan berkas halaman menyetel `body { padding: 18px 18px 40px }`, jadi
   padding itu dipindah ke .container/.shell — isi konten tidak bergeser
   sedikit pun, tapi header & footer bisa menyentuh tepi layar.
   `margin:0` WAJIB: tanpa itu margin bawaan peramban (8px) kepakai di halaman
   yang tidak punya reset `*{margin:0}` (mis. member-stats) dan header menyisakan
   celah 8px di kiri/kanan walau lebarnya sudah 100%.
   Berkas ini dimuat paling akhir, jadi menang atas aturan body per halaman. */
body { padding: 0 !important; margin: 0; }
/* CATATAN: jangan pasang `overflow` apa pun di html/body. Elemen leluhur
   ber-`overflow` selain `visible` mematikan `position: sticky`, jadi header
   tidak lagi menempel saat halaman digulir. */
.container, .shell { padding-left: 18px; padding-right: 18px; }
/* Tersembunyi tapi tetap ada di DOM (dibaca skrip statistik lama). */
.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; }
/* Isi header dibatasi biar sejajar sama .container, tapi LATAR-nya tetap
   selebar layar (gak ada kotak yang ngekang). */
/* Keep main shell width in sync with header across pages (Stories/Calendar/etc). */
.container, .shell { width:100%; max-width:1440px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.header-left { text-align:left; flex:0 0 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.header-home { text-decoration:none; display:inline-flex; align-items:flex-start; max-width:100%; }
.header-home:hover h1, .header-home:hover .logo-text { color:var(--active-text); }
.header h1, .header-left h1, .header .logo-text, .header-left .logo-text { font-family:var(--font-menu); font-size:34px; font-weight:400; color:var(--text2); letter-spacing:.03em; line-height:.95; margin:0; }
.header .subtitle { font-size:12px; color:var(--text3); margin:0; line-height:1.35; max-width:min(100%, 560px); white-space:normal; overflow:visible; word-break:break-word; }
.header-right { display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:nowrap; flex:0 0 auto; }
.icon-btn { background:var(--hover); border:1px solid var(--border); color:var(--text); width:36px; height:36px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all .15s; padding:0; }
.icon-btn:hover { background:var(--border); }
.header-menu-wrap { position:relative; display:inline-flex; }
.header-menu-btn { width:36px; }
.header-menu-dropdown { display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:200; min-width:190px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 30px var(--shadow); padding:6px; }
.header-menu-dropdown.show { display:block; }
.header-menu-link { font-family:var(--font-menu); width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:17px; font-weight:400; letter-spacing:.03em; color:var(--text2); text-decoration:none; transition:background .15s,color .15s; border:0; background:transparent; cursor:pointer; text-align:left; box-sizing:border-box; }
.header-menu-link:hover { background:var(--hover); }
.header-menu-link.active { background:var(--active-soft); color:var(--active-text); }
.header-menu-group { display:block; }
.header-menu-parent { justify-content:flex-start; }
.header-menu-parent .header-menu-caret { margin-left:auto; font-size:12px; opacity:.7; transition:transform .15s; }
.header-menu-group.open > .header-menu-parent .header-menu-caret { transform:rotate(180deg); }
.header-menu-sub { display:none; padding:2px 0 4px 8px; }
.header-menu-group.open > .header-menu-sub { display:block; }
.header-menu-sub .header-menu-link { font-size:16px; padding:8px 12px 8px 18px; }
/* hidden attr loses to .header-menu-link { display:flex } — force hide */
a.header-menu-link[href*="api.html"][hidden],
a.header-menu-link[href*="stories.html"][hidden] { display: none !important; }

/* ---------- nav mendatar di desktop (gaya IDLIX, token kita sendiri) ----------
   Wujud header jadi dua, ditukar di 1100px (media query di rombak-ui.css):
     >=1100px : <nav class="header-nav"> tautan mendatar + dropdown "Lainnya"
     <1100px  : tombol burger + .header-menu-dropdown melipat
   Putusannya di shared-layout karena kelas-kelas ini (header,
   header-menu-dropdown) memang berkas ini yang punya; wujud desktop-nya yang
   baru, jadi baris lama tidak perlu diubah.
   `display` default ada DI SINI (bukan di app/rombak-ui.css) karena berkas ini
   dimuat paling akhir — lihat catatan di rombak-ui.css. */
.header-nav { display: none; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
.header-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  font-family: var(--font-menu); font-size: 14px; font-weight: 500;
  letter-spacing: .02em; color: var(--text2);
  text-decoration: none; white-space: nowrap; box-sizing: border-box;
  border: 0; background: transparent; cursor: pointer;
  transition: background .15s, color .15s;
}
.header-nav-link > i:first-child { font-size: 12px; opacity: .8; }
.header-nav-link:hover { background: var(--hover); color: var(--text); }
.header-nav-link.active { background: var(--active-soft); color: var(--active-text); }
.header-nav-link.active > i:first-child { opacity: 1; }
.header-nav-caret { font-size: 10px; opacity: .65; margin-left: -1px; transition: transform .18s; }

.header-more-wrap { position: relative; display: inline-flex; }
/* Panel "Lainnya" digeser sedikit ke kiri dari cara .header-menu-dropdown
   dipakai di mobile (right:0); di desktop panelnya menggantung dari tombol
   yang ada di TENGAH baris, jadi jangan dipaku ke kanan baris. */
.header-nav .header-menu-dropdown { right: auto; left: 0; min-width: 224px; margin-top: 10px; }

/* Wujud desktop. Ditulis di berkas INI, bukan di app/rombak-ui.css, karena
   shared-layout.css dimuat SESUDAH bundle CSS Next: aturan di bundle kalah
   oleh .header-nav { display:none } kalau ditulis di sana (nav tak pernah muncul). */
@media (min-width: 1100px) {
  .header { padding: 8px 20px; gap: 12px; }
  .header .header-mobile-only { display: none !important; }
  /* Grid 1fr auto 1fr: nav di kolom tengah = benar-benar center layar,
     bukan center sisa ruang (dulu meleset 47px karena logo & tombol kanan
     lebarnya beda). */
  .header .header-left { flex: 0 0 auto; justify-self: start; }
  .header .header-left h1 { font-size: 23px; }
  .header-nav { display: flex; margin: 0; justify-self: center; }
  .header .header-right { justify-self: end; }
}
.header-donate-link { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:linear-gradient(135deg, rgba(225,29,72,.16), rgba(225,29,72,.08)); border:1px solid rgba(225,29,72,.25); color:var(--text2); text-decoration:none; font-family:var(--font-menu); font-size:15px; letter-spacing:.02em; white-space:nowrap; }
.header-donate-link:hover { text-decoration:none; background:linear-gradient(135deg, rgba(225,29,72,.22), rgba(225,29,72,.12)); }
.site-footer { max-width:1440px; margin:18px auto 0; padding:16px 20px; color:var(--text); color:color-mix(in srgb, var(--text) 72%, var(--text3)); font-size:13px; text-align:center; line-height:1.65; }
.site-footer strong { font-family:var(--font-menu); display:block; color:var(--text2); font-size:22px; font-weight:400; letter-spacing:.04em; line-height:1.1; margin-bottom:2px; }
.site-footer a { color:var(--text2); font-weight:700; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
@media (max-width:900px) {
  .header { padding:10px 14px; align-items:center; gap:10px; margin:0; border-radius:0; }
  .header h1, .header-left h1, .header .logo-text, .header-left .logo-text { font-size:25px; }
  .header .subtitle {
    line-height:1.35;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    display:block;
    word-break:break-word;
  }
  .header-donate-link { padding:7px 10px; font-size:14px; gap:6px; }
  /* Di layar sempit tombol Donate duduk di BARIS SENDIRI di atas deretan ikon
     (bulan/bendera/menu). Kalau ikut sebaris, deretan kanan jadi ~226px dan
     judul+subjudul terjepit jadi kolom sempit. flex-basis:100% memaksa Donate
     mengambil satu baris penuh; urutan DOM sudah lebih dulu, jadi tanpa `order`. */
  /* Layar sempit: Donate + tiga ikon tidak boleh berbagi satu baris (deretan jadi
     ~226px dan judul header terjepit). Solusinya BUKAN flex-wrap: dengan basis
     170px, tombol bulan masih kebetulan muat di baris Donate sehingga pecahannya
     jadi tidak karuan. Grid 3 kolom: Donate membentang penuh di baris atas
     (rata kanan), tiga ikon duduk di baris bawah. */
  .header-right:has(.header-donate-link) {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: end;
    gap: 6px;
  }
  .header-right:has(.header-donate-link) .header-donate-link {
    grid-column: 1 / -1;
    justify-self: end;
  }
  .header-right { gap:6px; }
}
@media (max-width:520px) {
  .header { padding:10px 12px; gap:8px; }
  .header h1, .header-left h1, .header .logo-text, .header-left .logo-text { font-size:22px; }
  .header .subtitle { font-size:11px; line-height:1.4; }
  .header-donate-link { padding:6px 9px; }
}

/* ===== Ad tidy: frame manual slots, keep auto-ads in flow ===== */
.ad-slot {
  box-sizing: border-box;
  width: 100%;
  max-width: 728px;
  margin: 14px auto 8px;
  min-height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg2, #161d31); background:color-mix(in srgb, var(--bg2, #161d31) 55%, transparent);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
  overflow: hidden;
}
.ad-slot iframe {
  border-radius: 8px;
  display: block;
}
@media (max-width: 767px) {
  .ad-slot { margin: 12px auto 16px; min-height: 100px; }
}
/* Google auto-ads injected units (in-article / in-feed / matched content):
   stay inside container flow, rounded, never overlap menus */
ins.adsbygoogle[data-ad-format="auto"] {
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
/* Stray AdSense auto-ads placements get injected into arbitrary containers
   (e.g. #pagination-info) seconds after load — they overflow the section and
   shift the grid below. Hide ONLY the injected stray units; manual .ad-slot
   units (explicit <ins class="adsbygoogle"> inside .ad-slot) must stay visible. */
.google-auto-placed {
  display: none !important;
}

/* ---------- Panel menu HP: LEMBAR SATU LAYAR PENUH ----------
   Di bawah 1100px bar atas cuma menyisakan logo (kiri) + tombol burger
   (kanan). Tautan menu, pemilih tema/bahasa, dan tombol Donasi pindah ke
   dalam panel (lihat .header-sheet-*). Di >=1100px panel tak pernah tampil
   (aturannya `.header-mobile-only { display:none !important }`), jadi wujud
   desktop yang sudah ada tidak tersentuh sama sekali. */
@media (max-width: 1099px) {
  /* Baris kanan header menyusut jadi burger saja.
     `blur` di .header dilepas khusus di HP: backdrop-filter membuat .header
     jadi containing block, sehingga `position:fixed` panel di bawah ini akan
     menempel ke kotak header (panel cuma setinggi header) alih-alih ke layar.
     Tanpa blur, latar header dibuat pekat supaya isi halaman tidak tembus. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg2);
    /* Di HP header NEMPEL/MENYATU dengan halaman selama belum digulir:
       mentok tepi atas, sudut rata, tanpa garis & bayangan. Wujud mengapung
       (rounded + bayangan) menyala setelah digulir — lihat .header-terapung. */
    top: 0;
    margin: 0;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: border-radius .22s ease, box-shadow .22s ease,
                border-color .22s ease, margin .22s ease, top .22s ease;
  }
  /* Sudah digulir: bar mengapung dengan sudut membulat. Diberi jarak tepi
     sedikit supaya bentuk "kartu" mengapungnya kelihatan. */
  .header.header-terapung {
    top: 6px;
    margin: 0 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 14px 34px var(--shadow);
  }
  /* Grid header di HP dipaku eksplisit. Tanpa ini .header-right jatuh ke
     kolom 2 (auto-placement) begitu jumlah anak .header berbeda antar
     halaman — mis. halaman tanpa badge streak bikin burger nyangkut di
     TENGAH bar, bukan di kanan. `sr-only` & `.header-nav` bukan grid item
     (absolute / display:none), jadi jangan diandalkan mengisi kolom. */
  .header .header-left { grid-column: 1; grid-row: 1; }
  .header .header-right { grid-column: 3; grid-row: 1; justify-self: end; }

  .header .header-right > .header-donate-link,
  .header .header-right > #theme-toggle,
  .header .header-right > .lang-wrap,
  .header .header-right > #header-more-btn { display: none !important; }
  /* Baris kanan bukan lagi grid 3 kolom (aturan grid Donate di <=900px masih
     menyalak walau tombolnya disembunyikan lewat :has dan menyisakan baris
     kosong setinggi ikon). */
  .header .header-right,
  .header .header-right:has(.header-donate-link) {
    display: flex;
    grid-template-columns: none;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* Panel menempel viewport (bukan lagi dropdown kecil di bawah burger).
     `.header-menu-wrap` dinetralkan supaya tidak jadi containing block. */
  .header .header-menu-wrap { position: static; }
  .header .header-menu-dropdown {
    position: fixed; inset: 0; z-index: 300;
    width: auto; min-width: 0; height: auto;
    /* Padding samping 18px = napas yang sama dengan .header-sheet-aksi,
       supaya pill menu tidak mentok tepi layar. Baris judul & baris aksi
       dikembalikan selebar layar lewat margin negatif (lihat di bawah). */
    margin: 0; padding: 0 18px;
    border: 0; border-radius: 0; box-shadow: none;
    background: var(--bg);
    /* Dua kolom seperti drawer IDLIX: tautan utama mengisi grid, grup
       "Lainnya" membongkar isinya (`display:contents`) ke grid yang sama. */
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    align-content: start;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .header .header-menu-dropdown.show { display: grid; }

  /* Baris-baris yang harus selebar layar (bukan ikut padding 18px panel):
     judul + badge + tutup, dan baris aksi. Margin negatif membatalkan
     padding panel; padding dalamnya tetap 18px supaya isinya sejajar. */
  .header-sheet-top,
  .header-sheet-aksi { grid-column: 1 / -1; margin: 0 -18px; }

  /* "Lainnya" di HP = akordeon, bukan daftar dibongkar. Grup & sub jadi
     `display: contents` supaya tombol induk menempati SATU sel grid seperti
     tautan lain (5 tautan + Lainnya = 3 baris 2 kolom, tanpa lubang), dan
     saat dibuka anak-anaknya turun jadi baris LEBAR PENUH — label panjang
     seperti "Kebijakan Privasi" tidak terpotong di kolom sempit. */
  .header .header-menu-dropdown .header-menu-group { display: contents; }
  .header .header-menu-dropdown .header-menu-group.open > .header-menu-sub { display: contents; }
  .header .header-menu-dropdown .header-menu-parent { justify-content: flex-start; }
  html .header .header-menu-dropdown .header-menu-sub > .header-menu-link {
    grid-column: 1 / -1;
    font-size: 15px; padding: 11px 18px 11px 38px; gap: 10px;
  }

  /* Bar atas lembar: nama situs + (badge streak, dijejalkan inline.js) + tutup. */
  .header-sheet-top {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .header-sheet-judul {
    /* margin-auto yang mendorong badge + tombol tutup ke kanan. */
    margin-right: auto;
    font-family: var(--font-menu); font-size: 22px; font-weight: 400;
    letter-spacing: .03em; color: var(--text2);
  }
  /* Baris menu & aksi dibuat setinggi jempol, bukan baris rapat.
     Padding kiri/kanan 18px = sama dengan .sheet-aksi-btn & .header-sheet-judul,
     jadi tepi teks ketiga baris lurus. */
  .header .header-menu-dropdown .header-menu-link { font-size: 17px; padding: 13px 18px; }
  .header-sheet-aksi {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 8px; padding: 8px 18px 26px;
    border-top: 1px solid var(--border);
  }
  /* Tema + bahasa sebaris, dua kolom sama lebar, supaya tombolnya sejajar
     (dulu masing-masing selebar baris sehingga saling menumpuk ke bawah). */
  .header-sheet-aksi .sheet-aksi-pasangan {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    width: 100%; box-sizing: border-box;
  }
  .header-sheet-aksi .sheet-aksi-pasangan > * { min-width: 0; }
  .header-sheet-aksi .sheet-aksi-pasangan .sheet-aksi-btn { width: 100%; }
  .header-sheet-aksi .sheet-aksi-btn {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box;
    padding: 13px 12px; border-radius: 10px;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font-family: var(--font-menu); font-size: 17px; letter-spacing: .03em;
    color: var(--text2); text-decoration: none;
  }
  .header-sheet-aksi .sheet-aksi-btn:hover { background: var(--hover); color: var(--text); }
  /* Pemilih bahasa jadi baris yang mengembang di tempat, bukan popup
     mengambang — di dalam lembar scroll, popup absolut gampang terpotong. */
  .header-sheet-aksi .lang-wrap { display: flex; flex-direction: column; }
  .header-sheet-aksi .header-lang-btn { width: 100%; box-sizing: border-box; justify-content: flex-start; padding: 13px 12px; height: auto; border: 0; background: transparent; font-size: 17px; }
  .header-sheet-aksi .header-lang-btn:hover { background: var(--hover); }
  .header-sheet-aksi .lang-dropdown { position: static; min-width: 0; margin: 2px 0 4px; grid-column: 1 / -1; }
  /* Badge streak dijejalkan inline.js. Di HP tempatnya di bar atas lembar,
     di sebelah kiri tombol tutup (X) — jadi gaya compact-nya harus dinetralkan.
     Selektor diawali `html` + `>` karena public/css/home.css (dan
     components/beranda-gaya.js) punya `.header.streak-compact .streak-badge
     { grid-column:2; justify-self:end; align-self:start; z-index:6 }` —
     empat kelas, jadi aturan di sini kalah dan badge nyangkut di kolom grid. */
  html .header .header-sheet-top > .streak-badge {
    grid-column: auto; grid-row: auto;
    justify-self: auto; align-self: center;
    position: static; z-index: auto;
    flex: 0 0 auto; height: 32px; padding: 0 8px; margin: 0;
  }
  /* Progress "0/60m" tidak muat berjejer dengan tombol tutup. */
  html .header .header-sheet-top > .streak-badge .streak-meta { display: none; }

  /* Lembar terbuka: halaman di belakangnya tidak ikut tergulir.
     Murni CSS (:has) — tidak perlu kelas tambahan dari JS yang bisa bocor. */
  html:has(.header-menu-dropdown.show) { overflow: hidden; }

  /* Beranda memasang .streak-compact (grid 2 baris: badge streak di atas,
     baris ikon di bawah) sehingga bar header jadi ~94px padahal isinya cuma
     logo + badge + burger. Di HP rapatkan jadi SATU baris.
     Selektor diawali `html` karena public/css/home.css dimuat SESUDAH berkas
     ini di <head> — tanpa tambahan kekhususan, aturan di sana yang menang. */
  html .header.streak-compact {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    align-items: center;
  }
  html .header.streak-compact .header-left { grid-column: 1; grid-row: 1; align-self: center; }
  /* `>` penting: tanpa itu aturan ini ikut mengenai badge yang sudah dipindah
     ke dalam lembar menu (align-self:center bikin pill-nya di tengah baris). */
  html .header.streak-compact > .streak-badge { grid-column: 2; grid-row: 1; align-self: center; }
  html .header.streak-compact .header-right { grid-column: 3; grid-row: 1; align-self: center; }
}