/* Buku — satu sistem tampilan untuk rtrw · kelurahan · kecamatan · kabupaten · provinsi ·
   nasional · sekolah · siswa. Tak ada gaya per tingkat: yang berbeda cuma kata kerja dan angkanya.

   Angka yang dipegang berkas ini (dan diuji uji/walk_portal.mjs):
     selokan 16          — tiap tepi kiri/kanan di satu layar sama
     dalam 12 · antar 8  — jarak di dalam kartu, jarak antar baris
     sudut 12            — satu radius; pil 999 hanya untuk pil
     bayang satu tingkat — --naik, tak ada tingkat kedua
     huruf 28/22/17/15/13 — bobot 700/600/500/400, satu keluarga huruf, angka tabular
     sasaran 44          — tiap yang bisa diketuk; kartu aksi 64; bar bawah 49
     tekan 80 ms         — baris tersentuh 8% aksen; lembar naik 200 ms ease-out
   Tidak ada emoji di layar: tiap tanda adalah satu ikon garis dari ui-bersama/ikon.js —
   satu tebal, satu kotak, mengambil warna barisnya (`currentColor`).
   Muat SESUDAH ui.css/ruang.css (paket ui-bersama): berkas ini hanya memasang warna,
   ukuran, dan tata letak di atas token paket itu. */

:root {
  /* ---- warna: satu aksen, sisanya netral ---- */
  --aksen: #0A58CA;
  --aksen-tekan: #08429B;
  --aksen-lembut: #E9F0FD;
  --aksen-8: rgba(10, 88, 202, .08);
  --aksen-teks: #FFFFFF;   /* tulisan di atas aksen; di malam hari aksen menjadi terang */
  --tinta: #111318;
  --tinta-2: #61656E;
  --tinta-3: #8A8F98;
  --latar: #F2F2F5;
  --kartu: #FFFFFF;
  --kartu-tekan: #F0F1F4;
  --garis: #E4E5E9;
  --garis-halus: #ECEDF0;
  --kaca: rgba(255, 255, 255, .82);
  --ubin-latar: #F0F1F4;
  --merah: #C4362C;
  --merah-lembut: #FBEAE8;
  --hijau: #1B7F45;
  --hijau-lembut: #E6F4EC;

  /* ---- ruang ---- */
  --selokan: 16px;
  --dalam: 12px;
  --antar: 8px;
  --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --bar: 52px;              /* tinggi bar atas, diukur ulang oleh UI.jalur */
  --kaki-h: 0px;            /* tinggi bar bawah; hanya di ponsel jadi bukan nol */

  /* ---- sudut ---- */
  --r: 12px;
  --r-kecil: 8px;
  --r-pil: 999px;

  /* ---- bayang: satu tingkat ---- */
  --naik: 0 1px 2px rgba(17, 19, 24, .05), 0 4px 14px rgba(17, 19, 24, .05);
  --naik-lembar: 0 -2px 28px rgba(17, 19, 24, .18);

  /* ---- gerak ---- */
  --tekan: 80ms ease-out;
  --m: 160ms cubic-bezier(.2, .8, .2, 1);
  --lembar-m: 200ms cubic-bezier(.2, .8, .2, 1);

  /* ---- token paket ui-bersama diselaraskan ke aksen portal ---- */
  --ui-acc: #0A58CA;
  --ui-ink: #111318;
  --ui-line: #E4E5E9;
  --ui-bahaya: #C4362C;
  --ui-panel: #FFFFFF;
  --sentuh-min: 44px;   /* HIG; ruang.css memberi 40px untuk konsol layar lebar */
}

/* Malam. Petugas RT mengetuk buku ini jam tujuh malam; layar putih penuh menyilaukan.
   Yang berubah hanya nilai token — satu susunan layar, dua terang. */
@media (prefers-color-scheme: dark) {
  :root {
    --aksen: #4C93FF;
    --aksen-tekan: #6BA6FF;
    --aksen-lembut: #17233A;
    --aksen-8: rgba(76, 147, 255, .12);
    --aksen-teks: #0B0C0F;
    --tinta: #F2F3F5;
    --tinta-2: #A0A5AE;
    --tinta-3: #767B85;
    --latar: #0B0C0F;
    --kartu: #17181C;
    --kartu-tekan: #202126;
    --garis: #2C2E34;
    --garis-halus: #24262B;
    --kaca: rgba(17, 18, 22, .82);
    --ubin-latar: #24262B;
    --merah: #FF6B5E;
    --merah-lembut: #2A1614;
    --hijau: #46C97F;
    --hijau-lembut: #10251A;
    --naik: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --naik-lembar: 0 -2px 28px rgba(0, 0, 0, .5);
    --ui-acc: #4C93FF;
    --ui-ink: #24262B;
    --ui-line: #2C2E34;
    --ui-bahaya: #FF6B5E;
    --ui-panel: #17181C;
  }
}

@media (min-width: 720px) { :root { --selokan: 24px; --bar: 56px; } }

/* ------------------------------------------------------------------ dasar */
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--latar); color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* satu keluarga huruf; angka rata tanpa monospace */
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-align: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; border-radius: var(--r-kecil); }
:focus:not(:focus-visible) { outline: none; }
.ikon { flex: none; display: block; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ huruf */
.t22 { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.t17 { font-size: 17px; line-height: 1.3; font-weight: 500; }
.t15 { font-size: 15px; line-height: 1.35; font-weight: 400; color: var(--tinta-2); }
.t13 { font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--tinta-2); }

/* Judul besar (pola iOS): judulnya duduk DI HALAMAN, dan pindah ke bar hanya setelah
   tergulung. Satu tempat judul dibaca — tak pernah dua-duanya sekaligus. */
.judul-besar { margin: 2px 0 var(--s5); }
.judul-besar h1 {
  font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.judul-besar .bawah {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--antar);
  margin-top: 6px; font-size: 15px; color: var(--tinta-2);
}
@media (min-width: 720px) { .judul-besar h1 { font-size: 32px; } }

.bagian {
  font-size: 13px; font-weight: 600; color: var(--tinta-3); letter-spacing: .01em;
  margin: var(--s6) 0 var(--antar); padding: 0 4px;
}
.bagian:first-child { margin-top: 0; }

/* -------------------------------------------------------------- kerangka */
.kepala {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--antar);
  min-height: var(--bar); padding: 0 var(--selokan);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--kaca);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--m);
}
.kepala.turun { border-bottom-color: var(--garis-halus); }
.kepala-kiri { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--antar); }
/* pil dan judul bar duduk di kotak yang SAMA dan bertukar tempat: satu identitas terbaca
   sekaligus, tak pernah dua. Judul muncul hanya ketika judul besar sudah tergulung ke atas. */
.kepala-tengah { position: relative; flex: 1 1 auto; min-width: 0; display: grid; align-items: center; }
.kepala-tengah > * { grid-area: 1 / 1; justify-self: start; max-width: 100%; }
.kepala-judul {
  min-width: 0; opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--m), transform var(--m);
  font-size: 17px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kepala.turun .kepala-judul { opacity: 1; transform: none; }
.plang {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--aksen-lembut); color: var(--aksen); border-radius: var(--r-pil);
  padding: 4px 10px; font-size: 13px; font-weight: 600; line-height: 1.25;
  transition: opacity var(--m);
}
.kepala.turun .plang, .kepala.dgn-kembali .plang { opacity: 0; pointer-events: none; }
.lain, .kepala-kembali {
  flex: none; min-width: 44px; height: 44px; border-radius: var(--r-pil);
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  color: var(--aksen); transition: background var(--tekan), opacity var(--m);
}
.lain { color: var(--tinta-2); }
.lain:hover, .kepala-kembali:hover { background: var(--garis-halus); }
.lain:active, .kepala-kembali:active { background: var(--aksen-8); }
.kepala-kembali { margin-left: -10px; padding: 0 10px 0 4px; font-size: 15px; font-weight: 500; }
.kepala-kembali .tks { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.buku { display: block; }
.halaman {
  padding: var(--s4) var(--selokan) calc(var(--s7) + var(--kaki-h) + env(safe-area-inset-bottom, 0px));
  max-width: 680px;
}

.sisi { display: none; }
@media (min-width: 720px) {
  /* sisi kiri sudah memuat kelompok — daftar "Semua" di beranda hanya untuk ponsel */
  #semua-kelompok { display: none; }
  .verba { max-width: 460px; }
  .buku { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
  .sisi {
    display: block; position: sticky; top: var(--bar); height: calc(100svh - var(--bar));
    overflow-y: auto; padding: var(--s4) var(--dalam) var(--s7) var(--dalam);
    border-right: 1px solid var(--garis-halus);
  }
  /* layar lebar punya ruang: pil tetap terlihat walau judul sudah naik ke bar — keduanya
     berdampingan, bukan bertumpuk. Judul tetap naik hanya setelah judul besar tergulung, jadi
     judul yang sama tak pernah terbaca dua kali di satu layar. */
  .kepala-tengah { display: flex; gap: var(--dalam); align-items: center; }
  .kepala-tengah > * { grid-area: auto; }
  .kepala.turun .plang { opacity: 1; }
  .kepala .plang { flex: none; }
}
@media (min-width: 1240px) {
  .buku { grid-template-columns: 260px minmax(0, 1fr) 360px; }
}

.sisi-butir {
  display: flex; align-items: center; gap: var(--dalam); width: 100%;
  min-height: 44px; padding: 0 var(--dalam); border-radius: var(--r-kecil);
  font-size: 15px; font-weight: 500; color: var(--tinta); transition: background var(--tekan);
}
.sisi-butir + .sisi-butir { margin-top: 1px; }
.sisi-butir:hover { background: var(--garis-halus); }
.sisi-butir:active { background: var(--aksen-8); }
.sisi-butir[aria-selected="true"] { background: var(--aksen-lembut); color: var(--aksen); font-weight: 600; }
.sisi-butir .em { flex: none; color: var(--tinta-3); display: flex; }
.sisi-butir[aria-selected="true"] .em { color: var(--aksen); }
.sisi-butir .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sisi-butir .jml { flex: none; font-size: 13px; color: var(--tinta-3); }
.sisi-butir[aria-selected="true"] .jml { color: var(--aksen); }
.sisi-butir.sepi .nm, .sisi-butir.sepi .jml { color: var(--tinta-3); }
/* lema cabang di sisi kiri: menjorok di bawah kelompoknya, sedikit lebih kecil — ia bagian dari
   kelompok itu, bukan kelompok kedua */
.sisi-cabang { margin: 2px 0 var(--antar); }
.sisi-butir.kecil {
  min-height: 38px; padding-left: 34px; font-size: 14px; font-weight: 400; color: var(--tinta-2);
}
.sisi-butir.kecil .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sisi-butir.kecil[aria-selected="true"] { font-weight: 600; }
.sisi-lipat {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px;
  padding: 0 var(--dalam); margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--tinta-3);
}
.sisi-lipat .tanda { transition: transform var(--m); display: inline-flex; }
.sisi-lipat[aria-expanded="true"] .tanda { transform: rotate(90deg); }

/* --------------------------------------------------------- bar bawah (ponsel) */
.kaki { display: none; }
@media (max-width: 719px) {
  body:not(.semat) { --kaki-h: 49px; }
  body:not(.semat) .kaki {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--kaca);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--garis-halus);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
.kaki-butir {
  flex: 1 1 0; min-width: 0; height: 49px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 500; color: var(--tinta-3);
  transition: color var(--tekan);
}
.kaki-butir[aria-selected="true"] { color: var(--aksen); }
.kaki-butir:active { color: var(--aksen); }
.kaki-butir .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* -------------------------------------------------------------- tombol */
.tombol-utama, .tombol-halus, .tombol-luar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 var(--s5); border-radius: var(--r);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background var(--tekan), transform var(--tekan), border-color var(--tekan);
}
.tombol-utama { background: var(--aksen); color: var(--aksen-teks); }
.tombol-utama:hover { background: var(--aksen-tekan); }
.tombol-utama:active { background: var(--aksen-tekan); transform: scale(.97); }
.tombol-utama:disabled { background: var(--garis); color: var(--tinta-3); cursor: default; transform: none; }
.tombol-halus { background: var(--garis-halus); }
.tombol-halus:hover { background: var(--garis); }
.tombol-halus:active { background: var(--garis); transform: scale(.97); }
.tombol-luar { border: 1px solid var(--garis); background: var(--kartu); color: var(--aksen); }
.tombol-luar:hover { border-color: var(--aksen); }
.tombol-luar:active { transform: scale(.97); background: var(--aksen-lembut); }
.tombol-penuh { width: 100%; }
/* tombol judul: tindakan halaman duduk di sebelah judulnya, bukan sebagai balok penuh layar */
.judul-baris { display: flex; align-items: flex-start; gap: var(--dalam); }
.judul-baris .judul-besar { flex: 1 1 auto; min-width: 0; }
.judul-baris .tombol-luar { flex: none; margin-top: 2px; padding: 0 var(--s4); }

/* ------------------------------------------------------- kotak cari (48) */
.cari {
  position: relative; display: flex; align-items: center;
  background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik);
  margin-bottom: var(--s4); transition: box-shadow var(--m);
}
.cari input {
  flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: none;
  padding: 0 var(--s4) 0 42px; border-radius: var(--r); font-size: 17px; color: var(--tinta);
}
.cari input::placeholder { color: var(--tinta-3); }
.cari input::-webkit-search-cancel-button { display: none; }
.cari .lup {
  position: absolute; left: 14px; color: var(--tinta-3); pointer-events: none; display: flex;
}
.cari .bersih {
  flex: none; width: 44px; height: 44px; color: var(--tinta-3);
  display: flex; align-items: center; justify-content: center;
}
.cari .bersih:active { color: var(--tinta); }
.cari:focus-within { box-shadow: var(--naik), 0 0 0 2px var(--aksen); }

/* ------------------------------------------- satu baris angka (bukan kartu) */
/* margin negatif membatalkan tepi dalam butir pertama, jadi angka pertama rata pada selokan
   yang sama dengan judul dan kartu — bukan menjorok delapan piksel sendirian */
.angka-garis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px;
  font-size: 15px; color: var(--tinta-2); margin: 0 0 var(--s5) -6px;
}
/* sasaran 44px tanpa menggemukkan barisnya: tinggi ketuk 44, tinggi tampak tetap 32 */
.angka-garis .satu {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  margin: -6px 0; padding: 0 6px; border-radius: var(--r-kecil);
  color: var(--tinta-2); transition: background var(--tekan);
}
.angka-garis .satu:hover { background: var(--garis-halus); }
.angka-garis .satu:active { background: var(--aksen-8); }
.angka-garis .satu b { font-weight: 600; color: var(--tinta); font-size: 17px; letter-spacing: -.01em; }
.angka-garis .titik { color: var(--tinta-3); align-self: center; user-select: none; }
/* baris keterangan biasa (bukan angka) memakai kotak yang sama tapi tanpa sasaran ketuk */
.garis-ket { font-size: 15px; color: var(--tinta-2); margin: -12px 0 var(--s5); padding: 0 2px; }

/* ------------------------------------------------- tiga kata kerja (64 pt) */
.verba { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--antar); margin-bottom: var(--s6); }
.verba-satu {
  height: 64px; border-radius: var(--r); background: var(--kartu); box-shadow: var(--naik);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--tinta);
  transition: background var(--tekan), transform var(--tekan);
}
.verba-satu .em { color: var(--aksen); display: flex; }
.verba-satu .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.verba-satu:active { transform: scale(.97); background: var(--kartu-tekan); }
.verba-satu.utama { background: var(--aksen); color: var(--aksen-teks); box-shadow: none; }
.verba-satu.utama .em { color: var(--aksen-teks); }
.verba-satu.utama:active { background: var(--aksen-tekan); }

/* -------------------------------------------------------------- daftar */
.daftar { background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik); overflow: hidden; }
.daftar + .bagian { margin-top: var(--s6); }
.daftar + .daftar { margin-top: var(--antar); }
.baris {
  display: flex; align-items: center; gap: var(--dalam); width: 100%;
  min-height: 56px; padding: var(--antar) var(--s4); position: relative;
  color: var(--tinta); transition: background var(--tekan);
}
/* pembatas menjorok: sejajar dengan tulisan, bukan menyentuh tepi kartu */
.baris + .baris::before {
  content: ""; position: absolute; left: var(--s4); right: 0; top: 0; height: 1px; background: var(--garis-halus);
}
.baris.dgn-tanda + .baris::before { left: calc(var(--s4) + 24px + var(--dalam)); }
.baris.dgn-potret + .baris::before { left: calc(var(--s4) + 36px + var(--dalam)); }
.baris:hover { background: var(--kartu-tekan); }
.baris:active { background: var(--aksen-8); }
.baris:disabled { cursor: default; }
/* tanda register = ikon garis polos, bukan ubin berwarna: nama barisnya yang membedakan */
.baris .em { flex: none; color: var(--tinta-3); display: flex; align-items: center; justify-content: center; }
.baris .potret {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-pil); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--aksen-lembut); color: var(--aksen); font-size: 13px; font-weight: 600;
}
.baris .potret img { width: 100%; height: 100%; object-fit: cover; }
.baris .isi { flex: 1 1 auto; min-width: 0; }
.baris .isi b {
  display: block; font-size: 17px; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.baris .isi span { display: block; font-size: 13px; color: var(--tinta-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris .kanan { flex: none; font-size: 15px; color: var(--tinta-2); }
.baris .pil { flex: none; white-space: nowrap; }
.baris .lanjut { flex: none; color: var(--tinta-3); margin-left: -4px; display: flex; }
.baris.rendah { min-height: 48px; padding-top: 4px; padding-bottom: 4px; }
.baris.sepi .isi b, .baris.sepi .kanan { color: var(--tinta-3); font-weight: 400; }
.baris.sepi .em { opacity: .55; }

/* ------------------------------------------------------------ kartu (ubin) */
.ubin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--dalam); align-items: stretch;
}
/* satu kartu tidak boleh melar selebar layar — kolom tetap selebar kolom */
.ubin-grid.satu { grid-template-columns: repeat(auto-fill, minmax(158px, 200px)); }
@media (min-width: 560px) { .ubin-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.ubin {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--antar);
  height: 100%; min-height: 124px; padding: var(--s4) var(--dalam) var(--dalam);
  background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik); color: var(--tinta);
  transition: transform var(--tekan), background var(--tekan);
}
.ubin:hover { background: var(--kartu-tekan); }
.ubin:active { transform: scale(.98); background: var(--kartu-tekan); }
.ubin .em { flex: none; color: var(--aksen); display: flex; }
.ubin .nm {
  font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ubin .jm { margin-top: auto; font-size: 13px; color: var(--tinta-2); }
.ubin .jm b { color: var(--tinta); font-weight: 600; font-size: 15px; }
.ubin.sepi { box-shadow: none; background: transparent; border: 1px solid var(--garis-halus); }
.ubin.sepi .em { color: var(--tinta-3); }
.ubin.sepi .nm { color: var(--tinta-2); font-weight: 500; }
.ubin.sepi .jm, .ubin.sepi .jm b { color: var(--tinta-3); font-weight: 400; font-size: 13px; }

/* pengungkap: satu baris, bukan tulisan yang melayang tanpa rumah */
.lipat {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: 44px; margin-top: var(--dalam); padding: 0 4px;
  font-size: 15px; font-weight: 500; color: var(--tinta-2);
  border-radius: var(--r-kecil); transition: background var(--tekan);
}
.lipat:hover { background: var(--garis-halus); }
.lipat:active { background: var(--aksen-8); }
.lipat .tanda { transition: transform var(--m); display: inline-flex; color: var(--tinta-3); }
.lipat[aria-expanded="true"] .tanda { transform: rotate(90deg); }
.lipat + .ubin-grid, .lipat + .daftar { margin-top: var(--antar); }

/* --------------------------------------------------------------- fakta */
.fakta { background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik); overflow: hidden; }
.fakta-baris { display: flex; gap: var(--s4); padding: 11px var(--s4); align-items: baseline; position: relative; }
.fakta-baris + .fakta-baris::before {
  content: ""; position: absolute; left: var(--s4); right: 0; top: 0; height: 1px; background: var(--garis-halus);
}
.fakta-baris b { flex: none; width: 42%; max-width: 190px; font-size: 15px; font-weight: 400; color: var(--tinta-2); }
.fakta-baris span { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--tinta); overflow-wrap: anywhere; }

/* ----------------------------------------------------------- orang kepala */
.orang-kepala { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.orang-kepala .potret {
  flex: none; width: 64px; height: 64px; border-radius: var(--r-pil); object-fit: cover;
  background: var(--ubin-latar);
}
/* tanpa foto: monogram, bukan kotak abu kosong */
.orang-kepala .monogram {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 600; color: var(--aksen); background: var(--aksen-lembut);
}
.orang-kepala .isi { min-width: 0; }
.orang-kepala .isi b {
  display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.orang-kepala .isi span { display: block; font-size: 15px; color: var(--tinta-2); margin-top: 2px; }

/* ------------------------------------------------- nomor surat yang terbit */
/* Yang dilihat petugas sesudah menekan Simpan: nomornya, besar, bisa dibaca dari jarak satu meja. */
.surat-nomor {
  background: var(--aksen-lembut); border-radius: var(--r);
  padding: var(--s5) var(--s4); margin-bottom: var(--s4); text-align: center;
}
.surat-nomor b {
  display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  color: var(--aksen); line-height: 1.2; overflow-wrap: anywhere;
}
.surat-nomor span { display: block; font-size: 13px; color: var(--tinta-2); margin-top: 6px; }

/* ------------------------------------------------------------------ pil */
.pil { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pil);
  font-size: 13px; font-weight: 600; background: var(--garis-halus); color: var(--tinta-2); }
.pil-sesuai { background: var(--hijau-lembut); color: var(--hijau); }
.pil-beda { background: var(--merah-lembut); color: var(--merah); }
.pil-kosong { background: var(--garis-halus); color: var(--tinta-3); }
.pil-baris { display: flex; gap: var(--antar); flex-wrap: wrap; margin-bottom: var(--s4); }
.pil-baris:empty, .pil-baris.kosong-pil { display: none; }

/* ------------------------------------------------------------- kosong */
.kosong {
  display: flex; flex-direction: column; align-items: center; gap: var(--dalam);
  padding: var(--s7) var(--s4); text-align: center;
  background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik);
}
.kosong .em { color: var(--tinta-3); opacity: .7; }
.kosong .t { font-size: 15px; color: var(--tinta-2); }

/* --------------------------------------------- rangka (tanpa fade-in) */
@keyframes kilau { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rangka {
  background: linear-gradient(90deg, var(--garis-halus) 25%, var(--kartu) 37%, var(--garis-halus) 63%);
  background-size: 200% 100%; animation: kilau 1.3s linear infinite; border-radius: var(--r);
}
.rangka-daftar { background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik); overflow: hidden; }
.rangka-baris { display: flex; align-items: center; gap: var(--dalam); min-height: 56px; padding: var(--antar) var(--s4); }
.rangka-baris + .rangka-baris { box-shadow: inset 0 1px 0 var(--garis-halus); }
.rangka-baris .b1 { width: 24px; height: 24px; border-radius: var(--r-kecil); }
.rangka-baris .b2 { flex: 1 1 auto; height: 12px; border-radius: 6px; max-width: 60%; }
.rangka-ubin { height: 124px; }

/* -------------------------------------------------------------- lembar */
.tirai {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(17, 19, 24, .34); align-items: flex-end; justify-content: center;
}
.tirai.buka { display: flex; animation: tirai-masuk var(--lembar-m); }
@keyframes tirai-masuk { from { background: rgba(17, 19, 24, 0); } }
.lembar {
  width: 100%; max-height: 92svh; background: var(--kartu);
  border-radius: var(--r) var(--r) 0 0; box-shadow: var(--naik-lembar);
  padding: 6px var(--selokan) calc(var(--s7) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  animation: lembar-naik var(--lembar-m);
}
@keyframes lembar-naik { from { transform: translateY(100%); } }
.pegangan { width: 36px; height: 5px; border-radius: var(--r-pil); background: var(--garis); margin: 6px auto var(--dalam); }
.lembar-kepala { display: flex; align-items: flex-start; gap: var(--dalam); margin-bottom: var(--s4); }
.lembar-kepala .tks { flex: 1 1 auto; min-width: 0; }
.lembar h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; }
.lembar .asal { font-size: 15px; color: var(--tinta-2); margin-top: 3px; }
/* sasaran ketuk 44, lingkaran tampak 30: tombol tutup tak boleh menggemukkan kepala lembar */
.lembar-tutup {
  flex: none; position: relative; width: 44px; height: 44px; margin: -7px -10px -7px 0;
  display: flex; align-items: center; justify-content: center; color: var(--tinta-2);
}
.lembar-tutup::before {
  content: ""; position: absolute; width: 30px; height: 30px; border-radius: var(--r-pil);
  background: var(--garis-halus); transition: background var(--tekan);
}
.lembar-tutup .ikon { position: relative; }
.lembar-tutup:hover::before { background: var(--garis); }
.lembar-tutup:active { color: var(--aksen); }
.lembar-tutup:active::before { background: var(--aksen-8); }

@media (min-width: 720px) {
  .tirai { align-items: stretch; justify-content: flex-end; }
  .lembar { width: min(460px, 100%); max-height: none; height: 100%; border-radius: 0; animation: lembar-geser var(--lembar-m); }
  @keyframes lembar-geser { from { transform: translateX(100%); } }
  .pegangan { display: none; }
  .lembar { padding-top: var(--s5); }
}
@media (min-width: 1240px) {
  .tirai {
    position: sticky; top: var(--bar); inset: auto; z-index: 1; height: calc(100svh - var(--bar));
    background: none; display: block; border-left: 1px solid var(--garis-halus);
  }
  .lembar { width: 100%; height: 100%; box-shadow: none; background: var(--latar); animation: none; padding: var(--s5) var(--s5) var(--s7); }
  .tirai:not(.buka) .lembar > *:not(.rel-kosong) { display: none; }
  .tirai.buka .rel-kosong { display: none; }
  .lembar-tutup { display: none; }
}
.rel-kosong { display: none; height: 100%; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; gap: var(--dalam); color: var(--tinta-3); }
@media (min-width: 1240px) { .tirai:not(.buka) .rel-kosong { display: flex; } }

/* -------------------------------------------------------------- formulir */
.seksi + .seksi { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--garis-halus); }
.seksi-kepala { font-size: 13px; font-weight: 600; color: var(--tinta-3); margin-bottom: var(--dalam); }
.seksi .lipat { margin-top: var(--dalam); }
.medan { margin-top: var(--s4); }
.medan:first-child { margin-top: 0; }
.medan > label { display: block; font-size: 13px; font-weight: 500; color: var(--tinta-2); margin-bottom: 6px; }
.medan > label .wajib { color: var(--merah); }
.lembar input:not([type=checkbox]):not([type=radio]):not([type=file]),
.lembar select, .lembar textarea {
  width: 100%; min-height: 44px; border: 1px solid var(--garis); border-radius: var(--r);
  padding: 10px var(--dalam); background: var(--kartu); font-size: 17px; color: var(--tinta);
  transition: border-color var(--tekan), box-shadow var(--tekan);
}
.lembar select { appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%), linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.lembar textarea { min-height: 84px; resize: vertical; }
.lembar input:focus, .lembar select:focus, .lembar textarea:focus {
  outline: none; border-color: var(--aksen); box-shadow: 0 0 0 3px var(--aksen-lembut);
}
.medan.salah > input, .medan.salah > select, .medan.salah > textarea, .medan.salah .cari-bungkus input { border-color: var(--merah); }
.medan .galat-medan { font-size: 13px; color: var(--merah); margin-top: 6px; }
.pilih-baris { display: flex; flex-direction: column; }
.pilih-baris label { display: flex; align-items: center; gap: var(--dalam); min-height: 44px; font-size: 17px; font-weight: 400; }
.pilih-baris input { accent-color: var(--aksen); width: 20px; height: 20px; }
/* tombol menempel di dasar lembar; ruang di bawah medan terakhir supaya tak pernah tertutupi */
.lembar form { padding-bottom: 4px; }
.aksi-lembar {
  display: flex; gap: var(--antar); margin-top: var(--s5);
  position: sticky; bottom: -1px; padding: var(--dalam) 0;
  background: var(--kartu); box-shadow: 0 -1px 0 var(--garis-halus);
}
.aksi-lembar .tombol-utama { flex: 1 1 auto; }
@media (min-width: 1240px) { .aksi-lembar { background: var(--latar); } }

/* berkas: satu tombol dan nama berkasnya — bukan "Choose File / No file chosen" bawaan peramban */
.berkas { display: flex; align-items: center; gap: var(--dalam); flex-wrap: wrap; }
.berkas input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.berkas .pilih {
  flex: none; min-height: 44px; padding: 0 var(--s5); border-radius: var(--r);
  background: var(--garis-halus); font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background var(--tekan);
}
.berkas .pilih:hover { background: var(--garis); }
.berkas .nama-berkas { font-size: 15px; color: var(--tinta-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galat { font-size: 15px; color: var(--merah); margin-top: var(--dalam); background: var(--merah-lembut); border-radius: var(--r); padding: var(--dalam); }
.galat:empty { display: none; }

.cari-bungkus { position: relative; }
.cari-saran {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--kartu); border-radius: var(--r); box-shadow: var(--naik);
  border: 1px solid var(--garis); max-height: 260px; overflow-y: auto;
}
.cari-saran button { display: flex; width: 100%; justify-content: space-between; gap: var(--dalam); min-height: 44px; align-items: center; padding: var(--antar) var(--dalam); font-size: 15px; }
.cari-saran button:hover { background: var(--garis-halus); }
.cari-saran .kecil { font-size: 13px; color: var(--tinta-3); }
.tanda-pilih { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--hijau); margin-top: 6px; min-height: 1.1em; }

.peta-pilih { position: relative; border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; background: var(--ubin-latar); }
.peta-kanvas { height: 200px; }
.peta-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--merah); pointer-events: none; display: flex; }
.peta-ket { position: absolute; left: 0; right: 0; bottom: 0; background: var(--kaca); font-size: 13px; padding: 6px var(--dalam); color: var(--tinta-2); }
.foto-pra { display: none; max-width: 140px; border-radius: var(--r); margin-top: var(--antar); }

/* -------------------------------------------------------------- masuk */
.masuk-bungkus { min-height: 100svh; display: grid; place-items: center; padding: var(--s6) var(--selokan); }
.masuk-kotak { width: 100%; max-width: 400px; }
.masuk-judul { text-align: center; margin-bottom: var(--s6); }
.masuk-judul h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.masuk-judul p { font-size: 15px; color: var(--tinta-2); margin-top: 4px; }
.masuk-form { display: flex; gap: var(--antar); margin-top: var(--s4); }
.masuk-form input { flex: 1; min-height: 44px; border: 1px solid var(--garis); border-radius: var(--r); padding: 0 var(--dalam); background: var(--kartu); min-width: 0; font-size: 17px; color: var(--tinta); }
.masuk-form input:focus { outline: none; border-color: var(--aksen); box-shadow: 0 0 0 3px var(--aksen-lembut); }
.masuk-galat { text-align: center; color: var(--merah); margin-top: var(--dalam); min-height: 1.3em; font-size: 15px; }

/* ---------------------------------------------------------- ?semat=1 */
body.semat .kepala, body.semat .sisi, body.semat .kaki { display: none; }
body.semat .buku { display: block; }
body.semat .halaman { padding: var(--s4) var(--selokan) var(--s5); max-width: none; }
body.semat .tirai { position: fixed; inset: 0; z-index: 50; background: rgba(17, 19, 24, .34); border: 0; height: auto; top: 0; }
body.semat .tirai:not(.buka) { display: none; }
body.semat .tirai.buka { display: flex; align-items: flex-end; }
body.semat .lembar { width: 100%; height: 100%; max-height: 100%; border-radius: 0; background: var(--kartu); }

/* --------------------------------------------------- gerak dikurangi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}