/* =====================================================================
   anggaran.guntur.place: gaya bersama semua halaman
   ---------------------------------------------------------------------
   Arah: teknokratik, minimal, apa adanya, satu keluarga dengan Notes on
   Nusantara (NoN). Warna kerangka dan grafik diambil dari grafik NoN:
   biru petrol dan jingga. Judul dan antarmuka memakai Roboto (huruf
   grafik Datawrapper NoN), teks bacaan memakai Roboto Serif. Tanpa kartu,
   tanpa bayangan besar, tanpa foto.

   Isi berkas:
   1. Token warna (terang, lalu gelap)
   2. Dasar dan huruf
   3. Bilah atas, pencarian, tombol bahasa dan tema
   4. Kepala halaman dan angka pokok
   5. Bagian, grafik (gaya Datawrapper NoN), tabel
   6. Kontrol: tombol pilihan, select, isian
   7. Sankey dan blok anggaran
   8. Formulir kontak, daftar tulisan, kaki halaman
   9. Ponsel
   ===================================================================== */

/* ---------- 1. Token warna ------------------------------------------ */
:root {
  /* Kerangka (warna NoN) */
  --utama: #15607a;         /* biru petrol: garis bawah bilah, kepala tabel, garis tebal, tombol aktif */
  --utama-2: #0f4a5f;       /* petrol lebih gelap untuk hover */
  --pada-utama: #ffffff;    /* teks di atas latar petrol */
  --aksen: #fa8c00;         /* jingga: penanda menu aktif, garis sorot, fokus */
  --aksen-teks: #15607a;    /* label kecil (jejak, nomor grafik); jingga terlalu pucat untuk teks */
  --bilah-bg: #ffffff;
  --bilah-teks: #1d1d1d;
  --bilah-redup: #616161;
  --bilah-garis: #cfcfcf;   /* bingkai kotak cari, tombol bahasa dan tema */

  /* Permukaan dan teks */
  --bg: #ffffff;
  --bg-2: #f5f5f5;          /* baris zebra, latar kaki */
  --fg: #1d1d1d;
  --muted: #616161;
  --garis: #e0e0e0;         /* garis bantu grafik, pemisah */
  --garis-kuat: #1d1d1d;    /* sumbu x, garis bawah kepala tabel */
  --tautan: #15607a;

  /* Palet grafik NoN, urutan tetap. Sudah diuji buta warna untuk pasangan
     yang bersebelahan. s3 (jingga) dan s4 (biru muda) kontrasnya di bawah
     3:1 terhadap putih, dan s1 (petrol) sengaja agak redup: selalu
     sertakan label langsung atau tabel. */
  --s1: #15607a;   /* biru petrol */
  --s2: #009076;   /* hijau */
  --s3: #fa8c00;   /* jingga */
  --s4: #18a1cd;   /* biru muda */
  --s5: #c71e1d;   /* merah */
  --abu: #a3a3a3;  /* "lainnya" dan pembanding */
  --pivot: #1d1d1d;         /* simpul "Total Anggaran" di Sankey */
  --naik: var(--s1);
  --turun: var(--s5);
  --aliran-op: .42;         /* kepekatan pita Sankey */
  --rencana-op: .5;         /* batang angka rencana dibuat lebih pudar dari realisasi */

  /* Huruf */
  --sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --serif: "Roboto Serif", Georgia, "Times New Roman", serif;

  /* Ukuran */
  --lebar: 1200px;          /* lebar isi */
  --baca: 70ch;             /* lebar teks bacaan */
}
/* Mode gelap: latar abu gelap seperti NoN, palet dipilih ulang untuk latar gelap
   (bukan sekadar dibalik) dan diuji ulang. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --utama: #5fb3d1; --utama-2: #86c7de; --pada-utama: #0c1e25; --aksen: #f29a2e; --aksen-teks: #7cc3dc;
    --bilah-bg: #191919; --bilah-teks: #ececec; --bilah-redup: #a3a3a3; --bilah-garis: #3d3d3d;
    --bg: #191919; --bg-2: #222222; --fg: #ececec; --muted: #a3a3a3;
    --garis: #333333; --garis-kuat: #d0d0d0; --tautan: #7cc3dc;
    --s1: #2f7fc8; --s2: #22a06b; --s3: #d07c0c; --s4: #1fa3b8; --s5: #d9534a; --abu: #6e6e6e;
    --pivot: #cfcfcf; --aliran-op: .5; --rencana-op: .45;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --utama: #5fb3d1; --utama-2: #86c7de; --pada-utama: #0c1e25; --aksen: #f29a2e; --aksen-teks: #7cc3dc;
  --bilah-bg: #191919; --bilah-teks: #ececec; --bilah-redup: #a3a3a3; --bilah-garis: #3d3d3d;
  --bg: #191919; --bg-2: #222222; --fg: #ececec; --muted: #a3a3a3;
  --garis: #333333; --garis-kuat: #d0d0d0; --tautan: #7cc3dc;
  --s1: #2f7fc8; --s2: #22a06b; --s3: #d07c0c; --s4: #1fa3b8; --s5: #d9534a; --abu: #6e6e6e;
  --pivot: #cfcfcf; --aliran-op: .5; --rencana-op: .45;
  color-scheme: dark;
}

/* ---------- 2. Dasar dan huruf ------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 var(--serif);
  font-feature-settings: "kern";
}
h1, h2, h3, h4, .sans, button, input, select, textarea, table, figcaption, .dw, nav { font-family: var(--sans); }
h1, h2, h3, h4 { line-height: 1.22; text-wrap: balance; margin: 0; color: var(--fg); }
h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
a { color: var(--tautan); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.in {
  max-width: var(--lebar); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.prosa { max-width: var(--baca); display: grid; gap: 14px; }
.redup { color: var(--muted); }
.kecil { font: 13px/1.5 var(--sans); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Teks dua bahasa: tulis <span data-bhs="id">…</span><span data-bhs="en">…</span>.
   Yang tidak sesuai bahasa aktif disembunyikan. */
:root:not([data-bahasa="en"]) [data-bhs="en"],
:root[data-bahasa="en"] [data-bhs="id"] { display: none !important; }

/* ---------- 3. Bilah atas ------------------------------------------ */
body::before { /* menutup pita aman di atas layar ponsel berponi */
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bilah-bg); z-index: 10;
}
.bilah { background: var(--bilah-bg); color: var(--bilah-teks); border-bottom: 4px solid var(--utama); }
.bilah .in { display: flex; align-items: center; gap: 8px 24px; min-height: 58px; flex-wrap: wrap; padding-block: 8px; }
.merek { display: flex; align-items: center; gap: 10px; color: var(--bilah-teks); text-decoration: none; font: 700 16px/1.2 var(--sans); white-space: nowrap; }
/* Lambang: dua titik, petrol dan jingga, seperti legenda grafik NoN */
.merek .lambang { width: 12px; height: 12px; border-radius: 50%; background: var(--utama); box-shadow: 7px 0 0 var(--aksen); margin-right: 7px; flex: none; }
.merek small { display: block; font-weight: 400; font-size: 11.5px; color: var(--bilah-redup); letter-spacing: .02em; }
.menu { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.menu a { color: var(--bilah-teks); text-decoration: none; font: 500 14.5px/1 var(--sans); padding: 10px 0 8px; border-bottom: 3px solid transparent; }
.menu a:hover { border-bottom-color: var(--garis); }
.menu a[aria-current="page"] { border-bottom-color: var(--aksen); }
.bilah-kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.cari { position: relative; }
.bilah .cari input {
  width: 240px; height: 34px; padding: 0 10px 0 30px; border: 1px solid var(--bilah-garis); border-radius: 2px;
  background: var(--bg); color: var(--fg); font: 14px var(--sans);
}
.cari input::placeholder { color: var(--bilah-redup); }
.cari svg { position: absolute; left: 9px; top: 10px; width: 14px; height: 14px; stroke: var(--bilah-redup); fill: none; stroke-width: 2; pointer-events: none; }
.cari-hasil {
  position: absolute; right: 0; top: 40px; width: min(440px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto; z-index: 30;
  background: var(--bg); color: var(--fg); border: 1px solid var(--garis); border-top: 3px solid var(--utama);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14); font: 14px/1.35 var(--sans);
}
.cari-hasil a { display: grid; grid-template-columns: 66px 1fr; gap: 2px 10px; padding: 8px 12px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--garis); }
.cari-hasil a:hover, .cari-hasil a:focus { background: var(--bg-2); outline: none; }
.cari-hasil .jenis { grid-row: span 2; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 2px; }
.cari-hasil .ket { font-size: 12.5px; color: var(--muted); }
.cari-hasil p { padding: 10px 12px; color: var(--muted); }

.saklar { display: flex; border: 1px solid var(--bilah-garis); border-radius: 2px; }
.saklar button { background: none; border: 0; color: var(--bilah-redup); font: 700 12.5px/1 var(--sans); padding: 9px 9px; cursor: pointer; }
.saklar button[aria-pressed="true"] { background: var(--utama); color: var(--pada-utama); }
.tombol-tema { background: none; border: 1px solid var(--bilah-garis); border-radius: 2px; color: var(--bilah-teks); height: 34px; padding: 0 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; font: 12.5px var(--sans); }
.tombol-tema svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- 4. Kepala halaman dan angka pokok ---------------------- */
.kepala-hal { padding-block: 34px 22px; border-bottom: 1px solid var(--garis); }
.kepala-hal .in { display: grid; gap: 12px; }
.jejak { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--aksen-teks); }
.lede { max-width: var(--baca); font-size: 18px; color: var(--fg); }
.meta { font: 13px/1.5 var(--sans); color: var(--muted); }

/* Angka pokok: satu baris angka dengan garis pemisah tipis, bukan kartu */
.angka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--utama); border-bottom: 1px solid var(--garis); margin-top: 6px; }
.angka > div { padding: 12px 14px 12px 0; display: grid; gap: 2px; align-content: start; }
.angka > div + div { padding-left: 14px; border-left: 1px solid var(--garis); }
.angka dt { font: 600 11.5px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.angka dd { margin: 0; font: 600 25px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.angka dd small { font-size: 13px; font-weight: 400; color: var(--muted); }
.angka .sub { font: 12.5px/1.35 var(--sans); color: var(--muted); }

/* ---------- 5. Bagian, grafik, tabel ------------------------------- */
main { counter-reset: grafik tabel; }
.bagian { padding-block: 40px; border-bottom: 1px solid var(--garis); }
.bagian > .in { display: grid; gap: 16px; }
.bagian-kepala { display: grid; gap: 8px; max-width: 860px; }
.bagian-kepala p { max-width: var(--baca); }
.dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.dua > * { min-width: 0; }

/* Grafik bergaya Datawrapper (seperti di tulisan Notes on Nusantara):
   nomor, judul tebal, satu baris satuan, legenda kotak kecil, garis bantu
   abu tipis, catatan, lalu kaki "Grafik: … • Sumber: …". */
figure { margin: 0; }
.dw { display: grid; gap: 8px; min-width: 0; }
.dw-nomor { font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--aksen-teks); }
.dw.grafik { counter-increment: grafik; }
.dw.tabel { counter-increment: tabel; }
.dw.grafik .dw-nomor::before { content: "Grafik " counter(grafik); }
.dw.tabel .dw-nomor::before { content: "Tabel " counter(tabel); }
:root[data-bahasa="en"] .dw.grafik .dw-nomor::before { content: "Figure " counter(grafik); }
:root[data-bahasa="en"] .dw.tabel .dw-nomor::before { content: "Table " counter(tabel); }
.dw-judul { font: 700 17px/1.3 var(--sans); }
.dw-desk { font: 14px/1.45 var(--sans); color: var(--muted); }
.dw-plot { min-height: 40px; }
.dw-plot svg { display: block; overflow: visible; font-family: var(--sans); }
.dw-catat { font: italic 13px/1.5 var(--sans); color: var(--muted); max-width: 900px; }
.dw-kaki { font: 12.5px/1.5 var(--sans); color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; border-top: 1px solid var(--garis); padding-top: 8px; }
.dw-kaki b { color: var(--fg); font-weight: 600; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 13px/1.4 var(--sans); color: var(--fg); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; display: inline-block; flex: none; }
.legenda i.pudar { opacity: var(--rencana-op); }
.legenda i.bulat { border-radius: 50%; border: 2px solid var(--muted); width: 10px; height: 10px; }

.tautan { background: none; border: 0; padding: 0; font: inherit; color: var(--tautan); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.kutip { font: 12.5px/1.5 var(--sans); color: var(--muted); }

/* Tabel: kepala tebal, garis tebal di bawah kepala, baris zebra */
.gulir { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.gulir-y { max-height: 460px; overflow: auto; min-width: 0; border-bottom: 1px solid var(--garis); }
.tbl { width: 100%; border-collapse: collapse; font: 13.5px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-weight: 700; padding: 7px 10px; border-bottom: 2px solid var(--garis-kuat); vertical-align: bottom; background: var(--bg); position: sticky; top: 0; z-index: 1; }
.tbl td { padding: 6px 10px; vertical-align: top; }
.tbl tbody tr:nth-child(even) td { background: var(--bg-2); }
.tbl .n { text-align: right; white-space: nowrap; }
.tbl tr.tebal td { font-weight: 700; }
.tbl tr.pilih td { box-shadow: inset 0 -2px 0 var(--aksen); }
.tbl td.ind1 { padding-left: 24px; } .tbl td.ind2 { padding-left: 40px; }
.tbl .isi { display: inline-block; height: 9px; background: var(--s1); margin-right: 8px; vertical-align: middle; }
.meter { display: inline-block; position: relative; width: 90px; height: 9px; background: var(--garis); margin-right: 8px; vertical-align: middle; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--s1); }
.meter u { position: absolute; left: 66.7%; top: -3px; bottom: -3px; width: 1px; background: var(--fg); }
.tbl-sumber td { font-size: 12.5px; }

details.data { font: 14px/1.5 var(--sans); }
details.data summary { cursor: pointer; color: var(--tautan); text-decoration: underline; text-underline-offset: 2px; width: max-content; max-width: 100%; }
details.data[open] summary { margin-bottom: 10px; }

/* ---------- 6. Kontrol --------------------------------------------- */
.alat { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font: 14px var(--sans); }
.alat .lbl { color: var(--muted); font-size: 13px; }
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; }
.chip button {
  font: 500 13.5px/1 var(--sans); padding: 8px 11px; cursor: pointer;
  background: var(--bg); color: var(--fg); border: 1px solid var(--garis); margin: 0 -1px -1px 0; border-radius: 0;
}
.chip button:hover { border-color: var(--muted); position: relative; }
.chip button[aria-pressed="true"] { background: var(--utama); border-color: var(--utama); color: var(--pada-utama); position: relative; }
.chip button:disabled { color: var(--muted); cursor: not-allowed; background: var(--bg-2); text-decoration: line-through; text-decoration-color: var(--garis); }
.chip .thn { font: 600 12px/1 var(--sans); color: var(--muted); padding: 0 8px 0 14px; }
.chip .thn:first-child { padding-left: 0; }
select, input[type="search"], input[type="text"], input[type="email"], textarea {
  font: 14px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--garis); border-radius: 2px; padding: 7px 9px; max-width: 100%;
}
select { padding-right: 26px; }
input[type="search"] { width: 260px; }
label.cek { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- 7. Sankey dan blok ------------------------------------- */
.sankey-wadah { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.sankey-wadah .in { max-width: var(--lebar); }
#sankey { display: block; margin: 0 auto; font-family: var(--sans); }
.simpul.bisa { cursor: pointer; }
.simpul.bisa:hover rect { stroke: var(--fg); stroke-width: 1; }
.simpul:focus-visible { outline: none; }
.simpul:focus-visible rect { stroke: var(--aksen); stroke-width: 2; }
.geser { display: none; font: 12.5px var(--sans); color: var(--muted); }
.waffle { display: grid; grid-template-columns: repeat(auto-fill, 15px); gap: 2px; max-width: 100%; }
.waffle b { width: 15px; height: 15px; display: block; }

/* ---------- 8. Kontak, tulisan, kaki ------------------------------- */
.daftar-tulisan { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--utama); max-width: 860px; }
.daftar-tulisan li { border-bottom: 1px solid var(--garis); padding: 12px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; }
.daftar-tulisan a { font: 600 16.5px/1.35 var(--sans); text-decoration: none; color: var(--fg); }
.daftar-tulisan a:hover { color: var(--tautan); text-decoration: underline; }
.daftar-tulisan .topik { font: 12px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.formulir { display: grid; gap: 12px; max-width: 560px; font: 14px var(--sans); }
.formulir label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.formulir input, .formulir textarea, .formulir select { width: 100%; }
.formulir textarea { min-height: 120px; resize: vertical; font: 15px/1.5 var(--serif); }
.tombol { font: 600 14px/1 var(--sans); background: var(--utama); color: var(--pada-utama); border: 1px solid var(--utama); border-radius: 2px; padding: 11px 18px; cursor: pointer; text-decoration: none; display: inline-block; width: max-content; }
.tombol:hover { background: var(--utama-2); }
.tombol.garis { background: none; color: var(--fg); border-color: var(--garis-kuat); }
.tombol[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
:root[data-theme="dark"] .tombol:not(.garis) { background: var(--s1); border-color: var(--s1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tombol:not(.garis) { background: var(--s1); border-color: var(--s1); } }
.pesan { font: 14px/1.5 var(--sans); border-left: 3px solid var(--aksen); padding: 6px 12px; background: var(--bg-2); }

.kaki { background: var(--bg-2); border-top: 3px solid var(--utama); padding-block: 30px 36px; font: 14px/1.6 var(--sans); color: var(--muted); }
.kaki .in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px 40px; }
.kaki h4 { font: 600 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--fg); margin-bottom: 10px; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kaki a { color: var(--fg); }

.tip {
  position: fixed; z-index: 50; pointer-events: none; max-width: 320px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--garis); border-top: 2px solid var(--utama);
  box-shadow: 0 4px 14px rgba(10, 20, 40, .16); padding: 8px 10px; font: 13px/1.45 var(--sans);
}

/* ---------- 9. Ponsel ---------------------------------------------- */
@media (max-width: 900px) {
  .dua { grid-template-columns: minmax(0, 1fr); }
  .angka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .angka > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .angka > div:nth-child(n+4) { border-top: 1px solid var(--garis); }
  .kaki .in { grid-template-columns: 1fr 1fr; }
  .kaki .in > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .bilah .in { gap: 6px 14px; }
  .menu { order: 3; width: 100%; gap: 2px 14px; }
  .menu a { font-size: 14px; padding: 8px 0 7px; }
  .bilah-kanan { margin-left: auto; }
  .bilah .cari input { width: 150px; }
  .tombol-tema span { display: none; }
  .angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angka > div:nth-child(n) { padding-left: 0; border-left: 0; padding-right: 10px; }
  .angka > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--garis); }
  .angka > div:nth-child(n+3) { border-top: 1px solid var(--garis); }
  .angka dd { font-size: 21px; }
  .geser { display: block; }
  .bagian { padding-block: 30px; }
  input[type="search"] { width: 100%; }
  .kaki .in { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .merek small { display: none; }
  .bilah .cari input { width: 120px; }
}

/* Kolom grid boleh menyempit di bawah lebar isinya (select panjang, tabel lebar),
   supaya halaman tidak melebar di ponsel; tabel menggulir di wadahnya sendiri. */
.bagian > .in, .kepala-hal .in, .dw, .bagian-kepala, .prosa, #dukung, #kontak { grid-template-columns: minmax(0, 1fr); }
.sr { left: 0; top: 0; }
/* Label grafik diberi tepi warna latar supaya tetap terbaca di atas garis bantu */
.dw-plot svg text { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }