/* ==========================================================================
   SHARED — RESET & BASE
   Dipakai bersama oleh index.html dan seluruh halaman formulir
   (kelahiran.html, lahir-mati.html, kematian.html, dst.)
   ========================================================================== */

/* ---- Webfont: Poppins (statis per-berat, subset latin, self-host —
   tampilan konsisten di semua OS/perangkat & tetap jalan saat offline).
   Font aplikasi utama untuk SELURUH halaman UI — TIDAK dipakai di
   isi dokumen preview/*.html, print/*.html (output cetak/PDF resmi pakai Tahoma), atau
   logo (assets/logo-forcapil.svg), yang sengaja tidak disentuh. ---- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../font/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../font/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../font/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../font/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../font/poppins-latin-800-normal.woff2") format("woff2"); }

/* ---- Legacy webfont retained for compatibility with older cached pages.
   Current website UI and preview toolbars use Poppins; documents keep Tahoma. ---- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* HANYA html yang dipatok height:100% — body TIDAK ikut, cukup pakai
   min-height:100vh di bawah. body{height:100%} membuat body jadi kontainer
   scroll tersendiri (nested) begitu kontennya lebih tinggi dari satu layar
   (mis. beranda), menambah scrollbar KEDUA yang tidak ikut dihitung oleh
   "overflow-y:scroll" pada html di bawah — akibatnya lebar efektif beranda
   beda ~10px dari halaman pendek (mis. stasiun-cetak/) yang tidak butuh
   scroll, dan .app-header (width: calc(100% - 32px)) jadi tidak sejajar
   antar halaman. */
html { height: 100%; }
/* Selalu sediakan ruang scrollbar vertikal, dipakai atau tidak — tanpa ini,
   halaman pendek (mis. stasiun-cetak/) yang tidak butuh scroll punya viewport
   efektif sedikit lebih lebar daripada halaman panjang (mis. beranda) yang
   scrollbar-nya aktif, sehingga .app-header (width: calc(100% - 32px)) jadi
   sedikit berbeda lebar antar halaman. scrollbar-gutter adalah cara modern
   yang sama persis tujuannya; overflow-y:scroll dipertahankan sebagai
   fallback untuk browser yang belum mendukung scrollbar-gutter (mis. Safari
   versi lama). */
html { overflow-y: scroll; scrollbar-gutter: stable; }
:root { color-scheme: light; }
body.dark, :root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  transition: background-color .3s ease-in-out, color .3s ease-in-out;
  overflow-x: hidden;
  touch-action: manipulation;
}
/* input/select/textarea TIDAK mewarisi font halaman secara default —
   tanpa ini semua isian dirender memakai font sistem, bukan Poppins */
button, input, select, textarea { font-family: inherit; }
img, svg { display: block; }

/* ==========================================================================
   SHARED — THEME VARIABLES (LIGHT / DARK)
   ========================================================================== */
:root {
  --bg-page:
    radial-gradient(640px circle at -6% -12%, rgba(52, 199, 89, 0.16), transparent 60%),
    radial-gradient(680px circle at 106% 112%, rgba(10, 132, 255, 0.14), transparent 60%),
    linear-gradient(160deg, #EEF2F8 0%, #E9EEF6 40%, #EFF3EE 100%);
  --bg-header: rgba(255, 255, 255, 0.68);
  --bg-card: #FFFFFF;
  --bg-card-body: #FBFBFD;
  --bg-input: #FFFFFF;
  --text-primary: #1C1C1E;
  --text-secondary: #6E6E73;
  --text-tertiary: #767676; /* dinaikkan dari #8E8E93 — versi lama hanya 3.25:1 terhadap putih, gagal WCAG AA (4.5:1); dipakai luas di label opsional/hint/placeholder */
  --border-color: rgba(60, 60, 67, 0.12);
  --border-color-strong: rgba(60, 60, 67, 0.22);
  --shadow-color: rgba(30, 41, 59, 0.14);
  --tab-bg: rgba(120, 120, 128, 0.14);
  --tab-active-bg: #FFFFFF;
  --tab-text: #48484A;
  --tab-text-active: #1C1C1E;
  --accent-primary: #0A84FF;
  --accent-primary-strong: #0066CC;
  --success: #248A3D;
  --success-bg: #E3F7E9;
  --danger: #D70015;
  --danger-bg: #FDECEC;
  --logo-badge-bg: rgba(255, 255, 255, 0.55);
  --logo-badge-pad: 8px;
  --footer-text: #8E8E93;
  --scrollbar: rgba(0,0,0,0.18);
}

/* :root[data-theme="dark"] disamakan di sini (bukan cuma body.dark) supaya
   variabel warna ini sudah aktif SEBELUM <body> ada/di-render — dataset.theme
   di-set lewat script anti-flash di <head> tiap halaman (sebelum stylesheet
   ini dievaluasi), sedangkan body.dark baru terpasang belakangan lewat JS
   (initTheme/applyTheme di shared.js). Tanpa ini, halaman sempat kelihatan
   terang sesaat sebelum "melompat" ke gelap. */
body.dark, :root[data-theme="dark"] {
  --bg-page:
    radial-gradient(640px circle at -6% -12%, rgba(52, 199, 89, 0.10), transparent 60%),
    radial-gradient(680px circle at 106% 112%, rgba(10, 132, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #08090C 0%, #0E1013 45%, #0B0F0D 100%);
  --bg-header: rgba(28, 28, 30, 0.62);
  --bg-card: #1C1C1E;
  --bg-card-body: #201F22;
  --bg-input: #26262A;
  --text-primary: #F2F2F7;
  --text-secondary: #C7C7CC;
  --text-tertiary: #8E8E93;
  --border-color: rgba(255, 255, 255, 0.10);
  --border-color-strong: rgba(255, 255, 255, 0.20);
  --shadow-color: rgba(0, 0, 0, 0.55);
  --tab-bg: rgba(120, 120, 128, 0.24);
  --tab-active-bg: #2C2C2E;
  --tab-text: #AEAEB2;
  --tab-text-active: #F2F2F7;
  --accent-primary: #409CFF;
  --accent-primary-strong: #64B5FF;
  --success: #30D158;
  --success-bg: #16281B;
  --danger: #FF453A;
  --danger-bg: #2C1416;
  --logo-badge-bg: #FFFFFF;
  --logo-badge-pad: 8px;
  --footer-text: #8E8E93;
  --scrollbar: rgba(255,255,255,0.2);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 10px; }

/* ==========================================================================
   HEADER / CLOCK
   ========================================================================== */
.app-header {
  position: sticky;
  top: 12px;
  z-index: 100;
  /* Sejajar PERSIS dengan kotak hero/kartu: kontainer konten 1180px dikurangi
     padding 16px kiri+kanan = 1148px (di ≥1400px: 1320 - 32 = 1288px). */
  max-width: 1148px;
  width: calc(100% - 32px);
  margin: 12px auto 0 auto;
  padding: 12px 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-header);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px var(--shadow-color);
  transition: background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background: var(--tab-bg);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color .2s ease-in-out, transform .15s ease-in-out, border-color .2s ease-in-out;
  min-height: 44px;
}
.back-btn:hover { background: var(--border-color); }
.back-btn:active { transform: scale(0.96); }
.back-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.back-btn span { white-space: nowrap; }

.logo-badge {
  background: var(--logo-badge-bg);
  padding: var(--logo-badge-pad);
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 10px var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease-in-out, padding .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out;
  flex-shrink: 0;
}
.logo-badge img {
  height: 46px;
  width: auto;
  max-width: 62px;
  object-fit: contain;
}

.header-title-group { min-width: 0; flex: 1; }
.header-title-group h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Wordmark FORCAPIL dua warna: "FOR" warna teks biasa, "CAPIL" warna aksen —
   garis bawah pakai text-decoration (BUKAN border-bottom) supaya tidak
   menambah tinggi kotak <h1> sama sekali dan tidak berisiko terpotong oleh
   overflow:hidden di parent-nya; otomatis ikut skala font-size & tema
   gelap/terang tanpa perlu aset gambar terpisah. */
.header-title-group h1 .fc-for {
  text-decoration: underline;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}
.header-title-group h1 .fc-capil {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
}
.header-title-group p {
  margin: 2px 0 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: nowrap; /* toggle tema selalu menempel kanan; pil membungkus DI DALAM nav */
}

/* ---- Menu navigasi DI DALAM header (seragam untuk semua halaman) ---- */
.app-header .app-nav {
  padding-bottom: 0;
  overflow: visible;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  row-gap: 6px;
}
.app-header .app-nav a {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 11.5px;
  gap: 6px;
  background: var(--tab-bg);
  border-color: transparent;
}
.app-header .app-nav a svg { width: 15px; height: 15px; }
.app-header .app-nav a:hover { border-color: var(--accent-primary); }
.app-header .app-nav a.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* ---- Header ringkas untuk halaman formulir: ada tombol back di kiri,
   logo + judul brand mengecil supaya semua muat satu baris ---- */
.header-compact .logo-badge { --logo-badge-pad: 6px; border-radius: 11px; }
.header-compact .logo-badge img { height: 34px; max-width: 46px; }
.header-compact .header-title-group h1 { font-size: 15px; }
.header-compact .header-title-group p { font-size: 10.5px; }
.header-compact .back-btn { font-size: 13px; padding: 9px 14px; min-height: 40px; }

.clock-block { text-align: right; line-height: 1.25; }
.clock-time {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.clock-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.theme-toggle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--tab-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .25s ease-in-out, transform .15s ease-in-out, border-color .25s ease-in-out;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--border-color); }
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle svg {
  width: 22px;
  height: 22px;
  color: var(--text-primary);
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease-in-out;
}
.icon-sun { display: none; }
body.dark .icon-moon { display: none; }
body.dark .icon-sun { display: block; }

/* ---- Tombol menu (hamburger) — hanya tampil di mobile/tablet lewat media
   query di bawah (lihat "RESPONSIVE — HEADER"); dirender oleh initAppNav()
   di shared.js supaya tidak perlu menambah markup di tiap halaman. ---- */
.nav-toggle-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--tab-bg);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-primary);
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease-in-out;
}
.nav-toggle-btn:hover { border-color: var(--accent-primary); }
.nav-toggle-btn:active { transform: scale(0.94); }
.nav-toggle-btn.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.nav-toggle-btn svg { width: 22px; height: 22px; }
.nav-toggle-btn .icon-nav-close { display: none; }
.nav-toggle-btn.active .icon-nav-hamburger { display: none; }
.nav-toggle-btn.active .icon-nav-close { display: block; }

/* ==========================================================================
   BUTTONS (aksi umum)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent-primary);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.35);
}
.btn-primary:hover { background: var(--accent-primary-strong); }

.btn-outline {
  background: transparent;
  border-color: var(--border-color-strong);
  color: var(--text-primary);
}
body.dark .btn-outline { background: var(--tab-bg); }
.btn-outline:hover { background: var(--tab-bg); }

.btn-secondary {
  background: linear-gradient(135deg, #A855F7, #7E22CE);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.32);
}
.btn-secondary:hover { background: linear-gradient(135deg, #9333EA, #6B21A8); }

.btn-teal {
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.32);
}
.btn-teal:hover { background: linear-gradient(135deg, #0D9488, #0F766E); }

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-bg); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ==========================================================================
   MODAL KONFIRMASI (custom, menggantikan confirm() native browser)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 12, 16, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-in-out;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }

.modal-card {
  background: var(--bg-card);
  border-radius: 26px;
  border: 1px solid var(--border-color);
  box-shadow: 0 24px 70px var(--shadow-color);
  max-width: 460px;
  width: 100%;
  padding: 30px 28px 26px 28px;
  transform: scale(0.9) translateY(14px);
  transition: transform .3s cubic-bezier(.34,1.3,.4,1);
  /* modal bisa muncul di halaman cetak yang body-nya ber-font Tahoma —
     kunci ke font aplikasi supaya konsisten di mana pun */
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.modal-overlay.show .modal-card { transform: scale(1) translateY(0); }

.modal-title {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 24px;
}
.modal-highlight {
  color: var(--accent-primary);
}
/* Penjelasan singkat di bawah pertanyaan utama modal (opsional) — ukuran
   lebih kecil, TIDAK ikut uppercase/bold seperti .modal-title, supaya
   terasa sebagai keterangan tambahan, bukan bagian dari pertanyaan. */
.modal-hint {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-btn {
  flex: 1;
  min-width: 130px;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 14px;
  background: var(--tab-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color-strong);
  box-shadow: none;
}
.modal-btn:hover { background: var(--border-color); }
.modal-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Varian warna tombol konfirmasi modal (via opsi confirmClass) ---- */
.modal-btn.modal-btn-teal {
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  border-color: transparent;
  color: #FFFFFF;
}
.modal-btn.modal-btn-teal:hover { background: linear-gradient(135deg, #0D9488, #0F766E); }
.modal-btn.modal-btn-danger {
  background: var(--danger);
  border-color: transparent;
  color: #FFFFFF;
}
.modal-btn.modal-btn-danger:hover { filter: brightness(0.92); background: var(--danger); }
/* Aksi utama netral (biru brand) — dipakai saat pilihan "confirm" pada
   modal adalah pilihan default/dianjurkan, TANPA memakai teal (teal
   dipakai khusus untuk aksen kategori Akta Kelahiran, bukan warna aksi
   generik — lihat .btn-teal). */
.modal-btn.modal-btn-primary {
  background: var(--accent-primary);
  border-color: transparent;
  color: #FFFFFF;
}
.modal-btn.modal-btn-primary:hover { background: var(--accent-primary-strong); }

@media (max-width: 480px) {
  .modal-card { padding: 24px 20px 20px 20px; }
  .modal-actions { flex-direction: column; }
}

/* ==========================================================================
   MODAL AJAKAN SURVEI — memakai .modal-overlay/.modal-card/.modal-actions/
   .modal-btn yang SAMA dengan showConfirmModal di atas (backdrop gelap
   rgba identik, posisi tengah layar, kontras sudah teruji di kedua tema),
   ditambah elemen khusus (ikon, tombol tutup pojok). Lihat pemicunya di
   shared.js (showSurveyPromoModal), dikontrol via
   KONFIG_SURVEI.tampilkanBannerCetak (assets/pengaturan.js).
   TIDAK auto-hilang — harus ditutup eksplisit (×, Nanti Saja, Isi Survei,
   atau Escape). Klik backdrop SENGAJA tidak menutup, mengikuti pola
   allowDismiss:false yang dipakai di semua pemanggilan showConfirmModal
   lain di situs ini. ========================================================================== */
.survey-modal-card { position: relative; text-align: center; padding-top: 44px; }

.survey-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}
.survey-modal-close:hover { background: var(--tab-bg); color: var(--text-primary); }
.survey-modal-close svg { width: 16px; height: 16px; }

.survey-modal-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.survey-modal-icon svg { width: 26px; height: 26px; }

.survey-modal-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  color: var(--text-primary);
}
.survey-modal-text { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

.survey-modal-cta {
  text-decoration: none;
  animation: survey-modal-pulse 2.4s ease-in-out 1s infinite;
}
@keyframes survey-modal-pulse {
  0%, 100% { box-shadow: 0 8px 20px var(--shadow-color); }
  50% { box-shadow: 0 8px 26px var(--shadow-color), 0 0 0 5px var(--tab-bg); }
}

@media (prefers-reduced-motion: reduce) {
  .survey-modal-cta { animation: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.app-footer {
  text-align: center;
  padding: 30px 16px 36px 16px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--footer-text);
  max-width: 680px;
  margin: 0 auto;
}
.app-footer::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0 auto 16px auto;
  border-radius: 3px;
  background: linear-gradient(90deg, #34C759, #0A84FF);
}

/* ==========================================================================
   RESPONSIVE — HEADER
   ========================================================================== */
@media (max-width: 720px) {
  .app-header { flex-direction: column; align-items: stretch; }
  .header-left, .header-right { width: 100%; min-width: 0; }
  .header-right { justify-content: center; }
  .header-title-group h1 { font-size: 16px; }
  .clock-block { text-align: left; }
  .back-btn span { display: none; }
  .back-btn { padding: 10px; }
}

/* ---- Menu navigasi jadi dropdown di mobile & tablet — pil menu (Beranda/
   Panduan/dst.) yang di layar sempit membungkus jadi 2-3 baris dan bikin
   header "floating" jadi tinggi/banyak makan tempat, diringkas jadi satu
   tombol hamburger. Panel dropdown muncul di BAWAH header (position:absolute
   terhadap .app-header yang sudah position:sticky), bukan menambah tinggi
   header itu sendiri. ---- */
@media (max-width: 1024px) {
  .nav-toggle-btn { display: flex; }
  .app-header .app-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 18px;
    right: 18px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    background: var(--bg-header);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 8px 32px var(--shadow-color);
    z-index: 99;
  }
  .app-header .app-nav.nav-open { display: flex; }
  .app-header .app-nav a { justify-content: flex-start; min-height: 46px; padding: 11px 14px; font-size: 13px; }
}

/* ==========================================================================
   NAVIGASI SITUS (Beranda / Tentang / Panduan / Syarat & Kontak / Review)
   Markup dirender oleh initAppNav() di shared.js ke <nav id="appNav">.
   ========================================================================== */
.app-nav-wrap {
  max-width: 1180px;
  margin: 18px auto 0 auto;
  padding: 0 16px;
}
.app-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease-in-out;
}
.app-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }
.app-nav a:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.app-nav a:active { transform: scale(0.97); }
.app-nav a.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.3);
}
@media (min-width: 1400px) {
  .app-nav-wrap { max-width: 1320px; }
  .app-header { max-width: 1288px; }
}

/* ==========================================================================
   PERSYARATAN LAYANAN — dipakai informasi-layanan.html, accordion di halaman
   formulir (psAccordionHtml), dan panel langkah selanjutnya di halaman cetak.
   ========================================================================== */
.info-section { padding: 0; }
.info-section > summary { list-style: none; cursor: pointer; }
.info-section > summary::-webkit-details-marker { display: none; }
.info-section .form-section-header { cursor: pointer; }
.info-chevron { margin-left: auto; flex-shrink: 0; transition: transform .25s ease-in-out; opacity: 0.65; }
.info-chevron svg { width: 20px; height: 20px; }
.info-section[open] .info-chevron { transform: rotate(180deg); }

.info-form-group { margin-bottom: 22px; }
.info-form-group:last-child { margin-bottom: 0; }
.info-form-title {
  font-size: 14.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.info-form-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: none;
}
.info-list { margin: 10px 0 0 0; padding: 0; list-style: none; }
/* Grid 2 kolom (ikon | teks) dengan garis pemisah antar butir — sama dengan
   treatment yang sudah terbukti rapi di checklist wizard (service-wizard.css/
   birth-refinement.css), sekarang jadi gaya DASAR untuk semua pemakaian
   .info-list (halaman Persyaratan, dialog wizard, dll) supaya konsisten. */
.info-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.info-list li:last-child { border-bottom: 0; }
.info-list li > span:not(.info-check) { grid-column: 2; min-width: 0; }
/* Penanda butir dokumen — ikon dokumen kecil dalam badge bulat, BUKAN
   checkbox: daftar ini murni informatif (tidak ada state "dicentang" yang
   tersimpan), jadi bentuknya sengaja dibedakan dari kotak centang biasa. */
.info-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(205, 85%, 50%, 0.12);
  color: hsl(205, 80%, 40%);
}
.info-list li > .info-check { grid-column: 1; grid-row: 1; margin-top: 4px; }
.info-check svg { width: 13px; height: 13px; }
body.dark .info-check { background: hsla(205, 85%, 65%, 0.18); color: hsl(205, 85%, 74%); }
.info-cond {
  font-size: 11.5px;
  font-weight: 700;
  color: #B45309; /* amber — penanda syarat kondisional "(*JIKA ADA)" */
  text-transform: uppercase;
  white-space: nowrap;
}
body.dark .info-cond { color: #FBBF24; }

/* "ASLI" dalam teks persyaratan — merah tebal, dokumen asli wajib dibawa */
.ps-asli { color: var(--danger); font-weight: 800; }

/* Link kecil "Belum punya? Unduh template" pada item checklist Persyaratan
   Dokumen (disisipkan lewat JS per halaman — lihat masing-masing halaman
   untuk kondisi penyisipannya — bukan bagian dari data persyaratan itu
   sendiri di assets/persyaratan.js, supaya tidak otomatis bocor/duplikat ke
   halaman lain yang berbagi item persyaratan yang sama).
   .ps-template-link-wrap adalah <span> anak .info-list li lainnya, jadi ikut
   aturan grid li>span:not(.info-check) di atas (grid-column:2) — otomatis
   sejajar di bawah teks utama, tanpa perlu margin-left manual lagi. */
.ps-template-link-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
}
.ps-template-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-primary);
  white-space: nowrap;
}
.ps-template-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.ps-template-link:hover { text-decoration: underline; }
/* Catatan kecil di bawah link template — tanda tangan basah diperlukan.
   white-space normal (bukan nowrap) supaya teks catatan yang cukup panjang
   bisa membungkus ke baris berikutnya di layar sempit, bukan meluber. */
.ps-template-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: normal;
}

/* ---- Accordion persyaratan di atas isian formulir ---- */
.ps-accordion { margin-bottom: 20px; }
.ps-accordion-note {
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Tabel-mini per field pada dokumen cetak (print-flex.js): baris-baris bertumpuk
   saling menimpa border 1px supaya garis antar baris tetap tunggal, persis seperti
   border-collapse satu tabel besar — berlaku di pratinjau layar maupun cetak.
   Harus px bulat (bukan mm) dan sama persis dengan tebal border .kft-box, supaya
   tepi tabel selalu jatuh di piksel utuh dan tinggi baris tidak bergantian 18/19px
   akibat pembulatan subpixel Chromium ---- */
.kft-section > .kft-table:not(:first-child),
.kft-section > .kft-rowgroup:not(:first-child) > .kft-table:first-child,
.kft-rowgroup > .kft-table + .kft-table {
  margin-top: -1px;
}

@media print {
  .app-nav-wrap { display: none !important; }
  .print-page { transform: none !important; }
  /* pengganjal toolbar fixed (padding-top di body, diset JS) tidak boleh ikut tercetak;
     latar gelap pratinjau juga dipaksa putih — kalau pengguna menyalakan opsi
     "Background graphics" di dialog cetak, sisa halaman tidak ikut menghitam */
  body { padding-top: 0 !important; background: #fff !important; }
  /* html,body { height: 100% } (dipakai UI interaktif) diam-diam membatasi tinggi
     dokumen cetak ke SATU halaman saja — isi yang seharusnya berlanjut ke halaman
     2/3/dst malah terpotong hilang, bukan pindah halaman. Bug ini baru ketahuan
     lewat pengujian langsung (headless Chrome --print-to-pdf): dokumen panjang
     tanpa override ini selalu berhenti di 1 halaman meski aturan page-break di
     bawah sudah benar. Reset ke auto khusus saat cetak supaya dokumen boleh
     sepanjang apa pun. */
  html, body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* A scroll container is printed as one clipped viewport by Chromium.
       Reset both axes: overflow-x:hidden otherwise computes overflow-y:auto. */
    overflow: visible !important;
    scrollbar-gutter: auto !important;
  }
  .print-scale-wrap {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }

  /* ---- Pemenggalan halaman dokumen cetak: section BOLEH terbelah antar
     halaman (menghindari celah kosong besar saat kertas tidak pas, mis. A4),
     tapi patahan hanya boleh jatuh DI ANTARA baris — satu baris kotak
     karakter/checkbox tidak pernah terpotong tengah ---- */
  .kft-table tr,
  .kf-persyaratan-table tr,
  .kf-row,
  .kf-row2,
  .kf-plain-row,
  .kf-jenis-row,
  .kf-kop {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* judul section menempel pada baris pertamanya — tidak yatim di dasar halaman */
  .kft-title {
    break-after: avoid;
    page-break-after: avoid;
  }
  /* kelompok baris satu field (baris kotak + baris lanjutan label multi-baris, atau
     baris-baris checkbox sambungan satu field) tidak boleh terbelah — label panjang
     tidak terpotong pindah halaman, melainkan pindah utuh ke lembar berikutnya */
  .kft-rowgroup {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* section pendek (ditandai builder lewat class kft-keep) pindah utuh ke halaman
     berikutnya — bingkainya tidak pernah terbelah; hanya section panjang yang boleh */
  .kft-section.kft-keep {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* setiap field = satu tabel-mini utuh — tidak pernah terbelah antar lembar, sehingga
     tidak ada garis border-collapse yang bocor di batas kertas; section panjang terbelah
     DI ANTARA tabel-mini dengan bingkai kiri/kanan memanjang terbuka (tanpa garis
     penutup) sebagai tanda section masih bersambung ke lembar berikutnya */
  .kft-table {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .kft-title-tbl {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* ---- Layar sempit: menu navigasi membungkus ke beberapa baris (semua item
   terlihat, tanpa scroll tersembunyi) dan tombol toolbar pratinjau cetak
   menyusut rata agar tidak meluber keluar layar ---- */
@media (max-width: 640px) {
  .app-nav { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
  .app-nav a {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .app-nav a svg { width: 15px; height: 15px; }

  .toolbar { padding: 10px 12px; gap: 10px; }
  .toolbar .actions { flex: 1 1 100%; flex-wrap: wrap; }
  .toolbar .actions .btn {
    flex: 1 1 0;
    min-width: 0;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .toolbar .actions .btn svg { width: 16px; height: 16px; }
}

/* ---- Ukuran tombol toolbar cetak menyusut MULUS mengikuti lebar viewport
   (tanpa lompatan breakpoint) ---- */
.toolbar .actions .btn {
  font-size: clamp(11.5px, 1.6vw, 15px);
  padding: clamp(10px, 1.3vw, 14px) clamp(8px, 1.8vw, 24px);
}

/* Sangat sempit: teks tombol hilang, tinggal ikon (seperti tombol kembali) —
   semuanya muat satu baris */
@media (max-width: 520px) {
  .toolbar .actions { flex: 0 0 auto; flex-wrap: nowrap; }
  .toolbar .actions .btn {
    flex: 0 0 auto;
    width: 48px;
    min-width: 48px;
    padding: 0;
    justify-content: center;
  }
  .toolbar .actions .btn span { display: none; }
  .toolbar .actions .btn svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   PENYESUAIAN LAYAR LEBAR — kolom konten kini 1148px+, ukuran judul section
   & ikon dinaikkan sedikit supaya proporsional
   ========================================================================== */
@media (min-width: 1200px) {
  .form-section-title { font-size: 17px; }
  .form-section-icon { width: 44px; height: 44px; }
  .form-section-icon svg { width: 24px; height: 24px; }
  .info-list li { font-size: 14.5px; }
  .info-form-title { font-size: 15px; }
}

/* ==========================================================================
   TOMBOL FLOATING NAIK/TURUN HALAMAN (kanan bawah) — disisipkan otomatis
   oleh initScrollFabs() di shared.js. Diangkat lebih tinggi (di atas bilah
   tombol aksi bawah .form-actions) khusus di halaman formulir.
   ========================================================================== */
.scroll-fab-group {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scroll-fab-group-above-actions { bottom: 100px; }
.scroll-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-header);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 20px var(--shadow-color);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, transform .15s ease-in-out;
}
.scroll-fab:hover { border-color: var(--accent-primary); }
.scroll-fab:active { transform: scale(0.92); }
.scroll-fab svg { width: 20px; height: 20px; }
.scroll-fab[hidden] { display: none; }
@media print { .scroll-fab-group { display: none !important; } }

/* ==========================================================================
   AKSESIBILITAS — hormati preferensi "kurangi gerakan" milik pengguna
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}