/* ══════════════════════════════════════════════════════════════════════
   /peta-masalah — lembar gaya
   ══════════════════════════════════════════════════════════════════════
   DUA BAGIAN, SEPERTI assets/demografi-dpt/demografi.css.

   1 · KERANGKA SITUS. Token, header, menu ponsel disalin dari index.html —
       nilai yang sama, kelas yang sama. Situs pemasaran tidak punya lembar
       gaya bersama, jadi yang dijaga bukan satu berkas melainkan kesamaan:
       alat/uji-peta-masalah.mjs mengadu tautan header di sini dengan
       index.html dan dengan atlas-demografi.html, dan
       alat/uji-header-seragam-browser.mjs mengadu RUPANYA di peramban.

   2 · BAHAN & DAFTAR. Tiga blok yang membentuk satu bahan — boleh, tidak
       boleh, bantahan — yang harus terbaca sebagai SATU objek, bukan tiga
       kartu berdampingan; serta daftar dan kolom kerja yang memuatnya.

       SEJAK RUANG KERJA ATLAS, /peta-masalah TIDAK LAGI MEMAKAI BAGIAN INI:
       tata letaknya pindah ke assets/peta-masalah/atlas.css, dan halaman
       memuat KEDUA lembar — yang ini untuk kerangka situs, yang itu untuk
       ruang kerjanya. Bagian 2 sempat dipertahankan utuh karena /naskah
       meminjamnya; sesudah /naskah pindah ke dalam /app, yang tersisa cuma
       hero dan kaki yang masih dipakai /atlas dan halaman modul.

   TEMA. Situs pemasaran terbit terang saja; color-scheme light dinyatakan.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · KERANGKA SITUS ════════════════════════════════════════════════ */
:root{
  --paper:#f9f4ea;--white:#fffdf8;--ink:#171a17;--muted:#5b655e;--green:#174c3c;--green2:#23624e;
  --orange:#c8551f;--line:#ded5c4;--wash:#f0e9dc;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --accent-text:#8e3a12;--night:#132c23;
  --warn-soft:#f7eedb;--warn-ink:#6f521b;--ok-soft:#e6eedc;--bad-soft:#fbe9e5;--bad-ink:#9b251e;
  --line-strong:#c2b79f;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
button,input,select{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a.btn{cursor:pointer}
button{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.12;letter-spacing:-.04em}
[hidden]{display:none!important}
.wrap{width:min(1180px,calc(100% - 64px));margin:auto}
.eyebrow{font:600 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;background:var(--green);border:1px solid var(--green);border-radius:6px;color:#fff;font-size:14px;font-weight:650;padding:12px 18px;text-decoration:none;min-height:46px}
.btn:hover{background:var(--green2)}
.skip{position:fixed;left:12px;top:-80px;background:var(--green);color:#fff;z-index:100;padding:12px}
.skip:focus{top:10px}
.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}

/* HEADER = HEADER BERANDA, NILAI DEMI NILAI, DAN YANG MENGADU RUPANYA PERAMBAN.
 *
 * Sampai 26 Sep 2026 blok ini mengaku "disalin dari index.html" padahal sudah
 * lama tidak: header 67 px lawan 79 px di beranda, merek 19 px/800 lawan
 * 21 px/900, pita edisi jadi pil berbingkai, tautan nav abu-abu tipis, dan di
 * ponsel tombol Masuk hilang — cuma ikon menu yang tersisa. Berpindah dari
 * beranda ke /atlas atau /pahami-wilayahmu/ terasa seperti pindah situs.
 * Uji statis tidak pernah melihatnya: yang ia adu tautannya, bukan rupanya.
 *
 * Maka yang ditulis di sini adalah aturan header index.html dengan ambang
 * yang sama (1200, 1000, 760, 350), dicakup ke `header` supaya <nav> kaki
 * halaman tidak ikut. Pita 761–1400 px datang dari assets/navigasi.css, yang
 * dimuat kedua halaman sesudah lembar ini. Dua hal sengaja berbeda:
 *   · z-index 40, bukan 20 — ruang kerja /peta-masalah dan /atlas menaruh
 *     lapisan peta di bawahnya; itu urutan tumpuk, bukan rupa.
 *   · penanda bagian (aria-current) — beranda tidak berada di bagian mana
 *     pun, jadi tidak punya; rupanya diambil dari demografi.css.
 * alat/uji-header-seragam-browser.mjs mengadu gaya terhitung header tiap
 * halaman peminjam dengan beranda di delapan lebar. Kalau salah satu sisi
 * digeser, ia merah — geser keduanya. */
header{position:sticky;top:0;z-index:40;background:rgba(249,244,234,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);font:16px/1.6 var(--sans);color:var(--ink)}
header .top{min-height:78px;display:flex;align-items:center;gap:30px}
.brand{font-size:21px;font-weight:900;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--orange)}
.edition{border-left:1px solid var(--line);padding-left:22px;font-size:12px;color:var(--muted);font-family:var(--mono)}
header nav{display:flex;gap:clamp(15px,1.85vw,27px);margin-left:auto;align-items:center}
.top nav a{white-space:nowrap;flex-shrink:0}
header nav>a:not(.btn){font-size:14px;text-decoration:none;font-weight:600}
header nav>a:hover{color:var(--orange)}
/* Garis bawah jingga tebal, bukan warna saja — sama dengan demografi.css.
   Nilai aria-current sengaja tidak disebut; alasannya di bawah. */
header nav>a[aria-current]{color:var(--green);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:9px}
header nav .btn{gap:16px}
.mobile-menu,.nav-mobile-label{display:none}
/* PENANDA AKTIF DI MENU PONSEL. Aturan di atasnya (`header nav>a[aria-current]`)
 * tidak menjangkau daftar ini: butirnya tinggal di <details>, bukan di <nav>.
 * Sampai butir Atlas lahir, kelalaian itu tidak terlihat — markupnya benar dan
 * penandanya terpasang, tapi di layar ponsel tidak ada satu pun butir yang
 * tampak aktif, dan tidak ada galat yang lahir. assets/demografi-dpt/demografi.css
 * sudah punya aturan ini; lembar ini tertinggal. Sekarang keduanya dijaga
 * alat/uji-atlas.mjs, di kedua daftar sekaligus.
 *
 * NILAI aria-current SENGAJA TIDAK DISEBUT: di /atlas sendiri penandanya
 * "page" (tautannya memang halaman yang terbuka), di halaman modul "true"
 * (halaman itu ada DI DALAM bagian /atlas). Selektor yang memaku salah satu
 * akan mematikan rupanya di separuh halaman tanpa berbunyi. */
.mobile-menu-links a[aria-current]{background:var(--wash);color:var(--green);font-weight:700;box-shadow:inset 3px 0 0 var(--orange)}
/* PITA EDISI PERGI LEBIH DULU DARIPADA NAVIGASI, dan jaraknya bukan selera.
 *
 * Di antara 1001 dan 1124 px, pita "OPERASI KAMPANYE" (±120 px berikut
 * jaraknya) pernah membuat brand + pita + navigasi melebihi lebar .wrap:
 * tombol Masuk Dasbor terdorong melewati tepi kanan, dan di bawah 1101 px
 * halamannya benar-benar bergulir mendatar. Terukur 19 September 2026 pada
 * halaman yang meminjam kerangka ini di 1024 × 768 — scrollWidth 1101 untuk
 * innerWidth 1024.
 *
 * Pitanya hiasan; navigasinya bukan. Jadi yang disembunyikan pitanya, di
 * ambang yang MENDAHULUI ambang tautan nav (760 px, sama dengan beranda);
 * navigasi.css bahkan menyembunyikannya sampai 1400 px. Di 761–1200 px
 * header ringkas beranda berlaku di sini juga: tombol berbunyi "Masuk" dan
 * jarak nav menyempit.
 *
 * Lembar ini dipinjam /atlas, /pahami-wilayahmu/, /pelajaran-2024/ (lihat
 * bangun-dist.py); alat/uji-peta-masalah.mjs mengadu urutan kedua ambang,
 * dan alat/uji-peta-masalah-browser.mjs mengukur header muat di peramban. */
@media(max-width:1000px){.edition{display:none}}
@media(min-width:761px) and (max-width:1200px){header .top{gap:18px}.top nav{gap:16px}.top .edition{display:none}.top .nav-desktop-label{display:none}.top .nav-mobile-label{display:inline}.top nav .btn{padding:10px 13px}}
/* PONSEL — dari blok @media(max-width:760px) index.html. Tautan nav turun ke
 * menu, tombol Masuk TETAP di header (itu satu-satunya jalan masuk Dasbor
 * yang terlihat tanpa membuka menu), dan .wrap memakai tepi 16 px dan batas
 * 600 px beranda — di tablet kecil (iPad mini tegak, 744 px) beranda
 * memusatkan header selebar 600 px, dan header yang selebar layar di halaman
 * sebelahnya membuat merek melompat 72 px. .wrap GLOBAL, bukan header saja:
 * isi di bawahnya harus lurus dengan merek di atasnya. */
@media(max-width:760px){
  .wrap{width:calc(100% - 32px);max-width:600px}
  header{padding-top:env(safe-area-inset-top,0px)}
  header .top{min-height:64px;gap:12px;position:relative}
  .top .brand{font-size:1.2rem;letter-spacing:0}
  header nav{margin-left:auto;gap:0}
  header nav>a:not(.btn){display:none}
  .nav-desktop-label{display:none}.nav-mobile-label{display:inline}
  header nav .btn{min-height:44px;padding:10px 13px;gap:9px;font-size:.875rem}
  .mobile-menu{display:block;margin:0;padding:0;border:0;position:static}
  .mobile-menu>summary{list-style:none;display:grid;place-items:center;min-width:44px;min-height:44px;margin:0!important;padding:0;border:1px solid var(--line);border-radius:6px;cursor:pointer}
  .mobile-menu>summary::-webkit-details-marker{display:none}
  .mobile-menu>summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .mobile-menu[open]>summary{background:var(--wash)}
  .mobile-menu-links{position:absolute;left:0;right:0;top:calc(100% + 5px);padding:8px;background:var(--white);border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 26px #17251b20}
  .mobile-menu-links a{display:block;padding:12px;min-height:48px;font-size:1rem;text-decoration:none;border-radius:5px}
  .mobile-menu-links a:hover,.mobile-menu-links a:focus-visible{background:var(--wash)}
}
@media(max-width:350px){.wrap{width:calc(100% - 28px)}header .top{gap:9px}.top .brand{font-size:1.125rem}}

/* ══ 2 · HERO & KAKI — dipakai /atlas dan kaki halaman modul ══════════
   Bagian ini dulu memuat seluruh ruang kerja bahan: pemilih dapil, panel
   bahan, kartu klaim, dan kakinya. /peta-masalah berhenti memakainya saat
   tata letaknya pindah ke atlas.css, dan yang menahannya tetap hidup cuma
   /naskah — yang meminjam lembar ini dari akar situs.

   22 Sep 2026 /naskah pindah jadi app/naskah.html dan membawa gayanya
   sendiri (app/naskah.css, di atas token jaring.css). Yang tersisa di sini
   24 Sep 2026 /insights ikut dicabut. Yang tersisa di sini karena itu cuma
   yang masih benar-benar dipakai, dan itu DIUKUR bukan diandaikan: `.hero`
   dipakai atlas.html, `.kaki` dipakai atlas-demografi.html dan
   peta-masalah.html. Keduanya tidak ikut mati bersama halaman yang dulu
   meminjamnya.
   Sisanya — .lingkup, .kerja, .pilih, .item, .panel, .bahan, .blok, .salin,
   .sidik dan kawan-kawannya — dibuang bersama halaman yang memakainya. */
.hero{padding:40px 0 30px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(28px,4.6vw,44px);max-width:19ch;margin:12px 0 0}
.hero .intro{margin:16px 0 0;font-size:17.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.hero .intro strong{color:var(--ink);font-weight:600}

.kaki{border-top:1px solid var(--line);background:var(--wash);padding:26px 0 40px;margin:0}
.kaki .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:baseline}
.kaki p{font:12px/1.7 var(--mono);color:var(--muted);max-width:76ch}
.kaki a{font-size:13.5px;color:var(--muted);text-decoration:none;white-space:nowrap}
.kaki a:hover{color:var(--green)}