/* ==========================================================================
   WebGIS Senggi — Sistem Informasi Pelayanan Dasar
   style.css — Sistem Desain Visual (Bagian 9 rancangan)

   Prinsip: warna senada saturasi rendah dari alam Distrik Senggi
   (hutan pegunungan, tanah, air). Tanpa gradient dekoratif, tanpa bayangan
   tebal, radius sedang konsisten. Elemen signature: garis kontur tipis
   (ikon situs); header putih polos.

   Font sengaja memakai tumpukan font sistem — aplikasi harus tetap tampil
   benar tanpa internet (tidak boleh memuat Google Fonts).
   ========================================================================== */

:root {
  /* ── Palet inti (Bagian 9) ───────────────────────────────────────────── */
  --color-forest:   #4A6B4F;   /* utama: tombol aksi, tautan                 */
  --color-moss:   #8B9E7E;   /* aksen lembut: latar sekunder, hover        */
  --color-earth: #8A7458;   /* pendidikan                                 */
  --color-river:     #5B7C8D;   /* kesehatan, elemen air                      */
  --color-mist:    #F2EFE9;   /* latar belakang utama                       */
  --color-stone:      #5C5A53;   /* teks sekunder, garis pembatas              */

  /* ── Turunan (tetap dalam rentang saturasi & value yang berdekatan) ──── */
  --color-forest-dark:     #3A5540;
  --color-forest-light:    #5E8064;
  --color-cream:   #FAF8F4;
  --color-cream-edge:     #E6E1D6;
  --color-text:          #2E2C28;
  --color-text-secondary:   #5C5A53;
  --color-text-muted:    #6F6B62;   /* ≥4,5:1 di latar krem (WCAG AA); #8A867C hanya 3,2:1 */
  --color-border:         rgba(92, 90, 83, 0.20);
  --color-border-subtle:   rgba(92, 90, 83, 0.11);

  /* Status kondisi sarana — tetap senada, tidak memakai merah-kuning tajam */
  --color-condition-good:         #4A6B4F;
  --color-condition-minor-damage: #7C9673;
  --color-condition-moderate-damage: #A08A63;
  --color-condition-severe-damage:  #8A5F4F;

  /* ── Bentuk & jarak ──────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Bayangan sangat tipis saja — hanya untuk elemen melayang di atas peta */
  --shadow-raised: 0 1px 3px rgba(46, 44, 40, 0.10), 0 4px 12px rgba(46, 44, 40, 0.06);

  --font-body: "Inter", "Source Sans 3", "Source Sans Pro", system-ui,
               -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeric: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas,
                "Liberation Mono", monospace;

  --header-height: 56px;
  --sidebar-width: 340px;   /* panel kerja kanan (Layer | Legenda) & kartu Rincian kiri */

  /* Lembar cetak peta — muat di A4 maupun Letter mendatar. Ukuran peta tetap
     (bukan persen) karena Leaflet harus menggambar ulang pada ukuran ini
     sebelum dialog cetak dibuka; lihat body.print-ready. */
  --print-sheet-width: 956px;
  --print-map-width:   700px;
  --print-map-height:  530px;
}

/* ── Dasar ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-mist);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;            /* aplikasi satu layar; tiap tampilan menggulir sendiri */
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.75rem; letter-spacing: -0.015em; }
h2 { font-size: 1.3rem;  letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.9rem; }
p  { margin: 0 0 var(--space-3); }
a  { color: var(--color-forest); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-forest-dark); }

.numeric { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }

/* ── Kerangka aplikasi ─────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100%; }

.header {
  flex: 0 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  background: #FFF;          /* putih polos: hijau + garis kontur terasa ramai (28 Okt 2026) */
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  position: relative;
  z-index: 900;
}

/* Tautan "Lompat ke isi" (papan ketik & pembaca layar): di luar layar sampai
   difokus, lalu tampil sesaat menempel di pojok kiri atas setinggi header —
   kotak hijau berteks putih bergaris bawah, seperti "Skip to content" GitHub.
   Kotak yang muncul itu sendiri penanda fokusnya, jadi tanpa garis fokus. */
.skip-link {
  position: fixed; left: 0; top: 0; z-index: 3000;
  display: flex; align-items: center; height: var(--header-height); padding: 0 var(--space-4);
  background: var(--color-forest); color: #FFF; font-size: 0.88rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  transform: translateY(-100%);
}
.skip-link:hover { color: #FFF; }   /* a:hover umum mewarnainya hijau tua = tak terbaca */
.skip-link:focus { transform: none; outline: none; }

/* Nama situs = tautan ke Beranda: nama di atas, kepanjangan di bawahnya.
   Warnanya tetap saat disorot (menimpa a:hover umum) dan tanpa garis bawah. */
.brand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--color-forest-dark); text-decoration: none; border-radius: var(--radius-sm);
}
.brand:hover { color: var(--color-forest-dark); }
.brand:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 3px; }
.brand__icon { flex: 0 0 auto; display: block; width: 32px; height: 32px; border-radius: 7px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name { font-weight: 700; font-size: 0.94rem; white-space: nowrap; }
.brand__tagline {
  font-size: 0.72rem; color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav { display: flex; gap: var(--space-1); margin-left: auto; }
.nav__link {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-secondary);   /* 6,9:1 di atas putih */
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav__link:hover { background: #F1F4F0; color: var(--color-text); }
/* Halaman aktif: latar hijau muda */
.nav__link[aria-current="page"] { background: #E6EEE4; color: var(--color-forest-dark); }

/* Tautan masuk petugas: dipisahkan dari tautan halaman publik agar terbaca
   sebagai tindakan, bukan sebagai salah satu tab isi. Ditampilkan sebagai
   tombol ikon saja supaya menu tetap ringkas di semua lebar layar. */
.nav__link--admin {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--space-3);
  padding: 7px 10px;
  border-color: var(--color-border);
}
/* Label tetap ada di DOM sebagai nama yang terbaca pembaca layar (dan tetap
   diperbarui admin.js saat sesi berubah), tetapi disembunyikan secara visual. */
.nav__link--admin .nav__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}
.nav__icon { flex: 0 0 auto; display: block; }

/* Tombol menu (hamburger) — hanya dipakai di layar sempit, lihat @media 720px */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: transparent; color: var(--color-text); cursor: pointer;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] {
  background: #F1F4F0; color: var(--color-forest-dark);
}

/* Status koneksi = ikon saja: daring → sinyal hijau menyala; luring → abu-abu
   bergaris miring (bentuknya ikut berubah, tidak hanya warnanya). Kata
   Daring/Luring tetap ada untuk pembaca layar dan di tooltip (offline.js). */
.header__status {
  display: inline-flex; align-items: center;
  padding-left: var(--space-3); border-left: 1px solid var(--color-border);
  color: var(--color-forest);
}
.header__status[data-mode="offline"] { color: #8A867C; }   /* 3,6:1 di atas putih */
.header__status-icon { display: block; }
.header__status-slash { display: none; }
.header__status[data-mode="offline"] .header__status-slash { display: inline; }
.header__status-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}

/* ── Tampilan (view) ───────────────────────────────────────────────────── */
.app-main { flex: 1 1 auto; position: relative; min-height: 0; }
.view { position: absolute; inset: 0; display: none; overflow: auto; }
.view.is-active { display: block; }
/* Fokus dipindah ke tampilan saat berpindah halaman (app.js); wadah itu
   bukan kendali, jadi tidak perlu cincin fokus. */
.view:focus { outline: none; }
.view--map.is-active { display: block; overflow: hidden; }

.container { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }

/* Teks khusus pembaca layar, mis. "(membuka tab baru)" pada tautan kartu berita */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}

/* Kaki halaman (Beranda, Statistik, Tentang) — tidak dipakai di tab Peta dan
   Admin agar tidak memakan tinggi peta. Section disusun kolom supaya kaki
   selalu menempel di dasar walau isinya pendek. */
.view--page.is-active { display: flex; flex-direction: column; }
.view--page > .container { flex: 1 0 auto; width: 100%; }

.site-footer {
  flex: 0 0 auto;
  background: var(--color-forest-dark);
  color: rgba(238, 242, 234, 0.80);
  font-size: 0.84rem;
}
.site-footer__inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
.site-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-5) 0 var(--space-4);
}
.site-footer__brand { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center; }
/* Logo Kementerian Transmigrasi & UNDIP lalu ikon situs: lingkaran putih sama besar */
.site-footer__logos { display: flex; gap: var(--space-2); }
.site-footer__logo { width: 40px; height: 40px; padding: 3px; border-radius: 50%; background: #FFF; object-fit: contain; display: block; }
.site-footer__icon { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: block; }
.site-footer__icon img { width: 100%; height: 100%; display: block; }
.site-footer__name { display: flex; flex-direction: column; line-height: 1.15; color: #FFF; }
.site-footer__name b { font-size: 1.05rem; font-weight: 600; }
.site-footer__name span { font-size: 0.72rem; opacity: 0.75; }
.site-footer__brand p { grid-column: 1 / -1; margin: var(--space-1) 0 0; max-width: 44ch; }
.site-footer__pill {
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.10); color: #FFF; text-decoration: none; font-size: 0.8rem;
}
.site-footer__pill:hover { background: rgba(255, 255, 255, 0.18); color: #FFF; }
.site-footer__title { color: #FFF; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.site-footer a { color: #EEF2EA; text-decoration: none; }
.site-footer a:hover { color: #FFF; text-decoration: underline; }
.site-footer__bottom {
  border-top: 1px solid rgba(238, 242, 234, 0.16);
  padding: 10px 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4);
  font-size: 0.74rem; color: rgba(238, 242, 234, 0.75);
}
/* Pintu admin di kaki halaman & baris tipis Beranda; labelnya diganti admin.js
   menjadi "Panel Admin" selama sesi aktif. Di sebelahnya tautan "Pasang aplikasi"
   (offline.js) — tombol bergaya tautan, disembunyikan bila situs dibuka sebagai aplikasi */
.site-footer__actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.admin-link, .install-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(238, 242, 234, 0.8); }
.install-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.install-link:hover { color: #FFF; text-decoration: underline; }
.install-link[hidden] { display: none; }

/* ── Beranda ───────────────────────────────────────────────────────────── */
/* Sampul setinggi tampilan dikurangi 96 px (section Beranda adalah kolom flex
   yang bergulir, lihat .view--page.is-active): judul bagian Berita mengintip di
   bawahnya sebagai tanda halaman masih berlanjut. Foto lapangan sebagai latar
   dengan tirai gelap netral (bukan hijau) yang memudar ke kanan; teks rata kiri
   seperti mockup. */
.hero {
  flex: 1 0 auto;
  min-height: calc(100% - 96px);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  color: #FFF;
  padding: var(--space-6) var(--space-7) var(--space-7);
  background: #1E2820 url("../img/sampul-sp1.webp") center 58% / cover no-repeat;
}
/* Pekat di belakang teks (±600 px pertama) di semua lebar layar, lalu cepat
   memudar: foto udara SP 1 diambil sore berawan, jadi sisi kanan dibiarkan
   terang supaya permukiman tetap terlihat */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 30, 22, 0.82) 0, rgba(20, 30, 22, 0.62) 600px, rgba(20, 30, 22, 0.22) 940px, rgba(20, 30, 22, 0.1) 100%);
}
.hero__content { width: 100%; max-width: 544px; margin: auto 0; }   /* tengah tegak, rata kiri; lebar = mockup */
.hero__label {
  display: inline-block; margin-bottom: 10px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.9);
}
.hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; margin-bottom: 14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.hero__summary {
  max-width: 58ch; margin: 0 0 22px;
  font-size: 1.03rem; color: rgba(255, 255, 255, 0.95);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Kredit foto sampul: label kecil di pojok kanan bawah. Baris tipis selebar foto
   (hak cipta, Instagram, pintu admin) dibuang 3 Nov 2026 — isinya kini di kaki
   halaman di bawah bagian Berita. */
.hero__credit {
  position: absolute; right: 0; bottom: 0;
  padding: 3px 10px; border-top-left-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.92);
}

/* Kegiatan Tim (data/kegiatan.json) dan Berita (data/berita.json): kartu disusun
   home.js, senada dengan Area Fokus di Tentang Kami; aturan dasarnya dipakai
   bersama. Kartu berita seluruhnya dapat diklik lewat tautan judul (::after
   menutupi kartu; tautan "Juga dimuat di" diangkat di atasnya). Kartu kegiatan
   tidak, karena tujuannya dua: halaman situs terkait dan unggahan Instagram. */
.home-activities, .home-news { flex: 0 0 auto; }
.home-activities__inner, .home-news__inner { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-7); }
/* Berita sesudah Kegiatan Tim: garis tipis pemisah, jarak atas dirapatkan */
.home-activities + .home-news .home-news__inner { border-top: 1px solid var(--color-border-subtle); }
.home-activities .home-activities__inner { padding-bottom: var(--space-6); }
.home-activities__label, .home-news__label {
  display: block; margin-bottom: var(--space-1);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.home-activities__title, .home-news__title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-forest-dark); margin: 0;
}
/* Judul bagian + tombol geser ‹ › (muncul hanya bila baris kartunya bisa digeser) */
.home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.row-buttons { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.row-buttons[hidden] { display: none; }
.row-button {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-cream);
  color: var(--color-forest-dark); cursor: pointer;
}
.row-button:hover:not(:disabled) { border-color: var(--color-moss); background: #FFF; }
.row-button:disabled { opacity: 0.4; cursor: default; }
.row-button:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; }
/* Baris kartu bergeser (Kegiatan Tim & Berita): 3 kartu selebar isi di layar lebar, 2 di tablet,
   1 di HP. Bila kartunya lebih banyak, baris bisa digeser ke samping (geser jari, Shift + roda, atau
   tombol ‹ ›) dan kartu berikutnya mengintip di tepi kanan sebagai tanda masih ada lanjutannya. */
.card-row {
  --gap: var(--space-5);
  --visible: 3;
  list-style: none; margin: 0; padding: 0 0 var(--space-3);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--color-moss) transparent;
}
.card-row > li { min-width: 0; scroll-snap-align: start; }
.card-row:has(> li:nth-child(4)) { --visible: 3.3; }
.activity-card, .news-card {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: var(--color-cream); border: 1px solid var(--color-cream-edge); border-radius: var(--radius-lg);
  overflow: hidden;
}
.news-card:hover { border-color: var(--color-moss); }
.activity-card__image, .news-card__image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--color-cream-edge); }
.activity-card__body, .news-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); }
.activity-card__meta, .news-card__meta { margin: 0; font-size: 0.78rem; color: var(--color-text-muted); }
.activity-card__title, .news-card__title { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.activity-card__summary { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
/* Kelompok kegiatan (mengikuti sorotan Instagram tim) di atas judul */
.activity-card__group {
  margin: 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-forest);
}
/* Kaki kartu kegiatan: halaman situs terkait, lalu unggahan Instagram */
.activity-card__links {
  margin: auto 0 0; padding-top: var(--space-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4);
  font-size: 0.82rem;
}
.activity-card__links a { color: var(--color-forest); }
.activity-card__links a:hover { color: var(--color-forest-dark); }
.activity-card__page { font-weight: 600; text-decoration: none; }
.activity-card__page:hover { text-decoration: underline; }
.activity-card__instagram { color: var(--color-text-muted); }
.activity-card__links svg { margin-left: 2px; vertical-align: -1px; }
.home-activities__status { margin: 0; color: var(--color-text-muted); font-style: italic; }
.news-card__title a { color: var(--color-text); text-decoration: none; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card:hover .news-card__title a { color: var(--color-forest-dark); text-decoration: underline; }
.news-card__title a:focus-visible { outline: none; }
.news-card__title a:focus-visible::after { outline: 2px solid var(--color-forest); outline-offset: -2px; border-radius: var(--radius-lg); }
.news-card__summary { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.news-card__more { margin: auto 0 0; padding-top: var(--space-1); font-size: 0.8rem; color: var(--color-text-muted); }
.news-card__more a { position: relative; z-index: 1; color: var(--color-forest); }
.news-card__more svg { margin-left: 2px; vertical-align: -1px; }
.home-news__status { margin: 0; color: var(--color-text-muted); font-style: italic; }
@media (max-width: 900px) {
  .card-row { --visible: 2; }
  .card-row:has(> li:nth-child(3)) { --visible: 2.3; }
}
@media (max-width: 600px) {
  .card-row { --visible: 1; --gap: var(--space-4); }
  .card-row:has(> li:nth-child(2)) { --visible: 1.15; }
  .activity-card__image, .news-card__image { aspect-ratio: 16 / 9; }
}

.button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 9px 18px;
  font: inherit; font-weight: 500; font-size: 0.92rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-forest);
  background: var(--color-forest);
  color: #F4F7F0;
  cursor: pointer;
  text-decoration: none;
}
.button:hover { background: var(--color-forest-dark); border-color: var(--color-forest-dark); color: #FFF; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button--outline {
  background: transparent; color: var(--color-forest); border-color: var(--color-border);
}
.button--outline:hover { background: rgba(74, 107, 79, 0.08); color: var(--color-forest-dark); border-color: var(--color-moss); }
/* Tombol sampul berbentuk pil: utama hijau, lainnya bening bergaris putih */
.hero .button { min-height: 40px; padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; }
.hero .button--outline { background: rgba(255, 255, 255, 0.14); color: #FFF; border-color: rgba(255, 255, 255, 0.7); }
.hero .button--outline:hover { background: rgba(255, 255, 255, 0.26); border-color: #FFF; color: #FFF; }
.button--small { padding: 5px 11px; font-size: 0.82rem; }
.button--full-width { width: 100%; justify-content: center; }

/* ── Tentang Kami (halaman bertab) ─────────────────────────────────────── */
.placeholder-text { color: var(--color-text-muted); font-style: italic; font-weight: 400; }

.about-header, .page-header { border-bottom: 1px solid var(--color-border); }
.about-header__label, .page-header__label {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.about-header h1, .page-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em;
  max-width: 36ch; color: var(--color-forest-dark); margin: 0 0 var(--space-5);
}
.tab-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.tab-list button {
  appearance: none; background: none; border: 0; padding: var(--space-3) 0; margin: 0 0 -1px; cursor: pointer;
  font: inherit; font-size: 0.98rem; font-weight: 500; color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
}
.tab-list button:hover { color: var(--color-forest-dark); }
.tab-list button[aria-selected="true"] { color: var(--color-forest-dark); font-weight: 600; border-bottom-color: var(--color-forest); }

.tab-panel { padding: var(--space-6) 0 var(--space-5); }
.tab-panel__intro { font-size: 1.08rem; line-height: 1.6; color: var(--color-text); margin-bottom: var(--space-6); }
.tab-panel h2 {
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0 0 var(--space-4);
}

/* Tab Siapa Kami: pengantar + foto */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.intro p { font-size: 1.08rem; line-height: 1.6; max-width: 54ch; }
.intro p + p { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 0; }
.intro__photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px var(--space-3) var(--space-2);
  background: linear-gradient(180deg, rgba(46, 44, 40, 0) 0%, rgba(46, 44, 40, 0.7) 100%);
  color: #EEF2EA; font-size: 0.74rem;
}

/* Tab Apa yang Kami Kerjakan */
.focus-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-7); }
.focus-areas article { background: var(--color-cream); border: 1px solid var(--color-cream-edge); border-radius: var(--radius-lg); overflow: hidden; }
.focus-areas img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.focus-areas__image { position: relative; margin: 0; }
.focus-areas__image figcaption {
  position: absolute; right: 0; bottom: 0; padding: 3px 8px;
  background: rgba(46, 44, 40, 0.6); color: #EEF2EA; font-size: 0.62rem; border-top-left-radius: var(--radius-sm);
}
.focus-areas article > div { padding: var(--space-4) var(--space-4) var(--space-5); }
.focus-areas h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.focus-areas p { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); }
.scope-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.scope-list h3 { font-size: 1rem; margin-bottom: var(--space-1); padding-top: var(--space-3); border-top: 2px solid var(--color-moss); }
.scope-list p { margin: 0; font-size: 0.88rem; color: var(--color-text-secondary); }

/* Tab Hubungi Kami */
.contact-instagram {
  display: inline-grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-cream); border: 1px solid var(--color-cream-edge); color: var(--color-forest-dark); text-decoration: none;
}
.contact-instagram:hover { border-color: var(--color-moss); background: #FFF; color: var(--color-forest-dark); }
.contact-instagram b { font-size: 1.05rem; font-weight: 600; }

@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; gap: var(--space-5); }
  .focus-areas { grid-template-columns: 1fr; }
  .scope-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .scope-list { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.card h3 { margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }

.section { margin-bottom: var(--space-6); }
.section__title {
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Pita peringatan data contoh */
.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: rgba(138, 116, 88, 0.10);
  border: 1px solid rgba(138, 116, 88, 0.30);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: #6B5943;
  margin-bottom: var(--space-5);
}
.notice strong { color: #5A4A36; }

/* ── Peta interaktif ───────────────────────────────────────────────────── */
/* Peta selalu selebar tampilan. Layar lebar: dua kartu melayang di atas peta
   (pola mockup & BhumiATR) — Rincian di kiri di bawah kotak cari, Layer |
   Legenda di kanan — jadi membuka, menutup, atau menciutkan kartu tidak
   mengubah ukuran peta dan peta tidak bergeser. Tepi peta yang tertutup kartu
   (map.js mapInsetLeft/mapInsetRight): --map-inset-left = kartu Rincian,
   --map-inset-right = kartu kanan (0 bila diciutkan), --map-tools-right =
   kartu kanan walau diciutkan (baris tabnya tetap di pojok kanan atas).
   Kendali Leaflet dan bilah ukur ditaruh di sisa peta yang terlihat. */
.view--map { --map-search-height: 42px; }   /* kartu Rincian mulai tepat di bawah kotak cari */
.map-container { position: absolute; inset: 0; --map-inset-left: 0px; --map-inset-right: 0px; --map-tools-right: 0px; }
#map { position: absolute; inset: 0; background: #DCD9D0; }
#map .leaflet-left { left: var(--map-inset-left); }
#map .leaflet-right { right: var(--map-inset-right); }
#map .leaflet-top.leaflet-right { right: var(--map-tools-right); }
/* Atribusi panjang (citra + ortofoto) membungkus jadi 2–3 baris di HP dan
   menutupi skala: map.js keepScaleClearOfAttribution menaikkan pojok kiri bawah
   setinggi atribusi bila keduanya bertabrakan. */
#map .leaflet-bottom.leaflet-left { bottom: var(--scale-clearance, 0px); }

/* Di atas kartu panel (1010): daftar hasil cari menutupinya, bukan sebaliknya */
.map-search {
  position: absolute; top: var(--space-3); left: var(--space-3);
  z-index: 1020; width: min(330px, calc(100vw - 96px));
}
.map-search__box {
  display: flex; align-items: center; gap: var(--space-2); height: var(--map-search-height);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 var(--space-3);
  box-shadow: var(--shadow-raised);
}
.map-search__box:focus-within {
  border-color: var(--color-forest);
  box-shadow: var(--shadow-raised), 0 0 0 3px rgba(74, 107, 79, 0.3);
}
/* [type="text"] supaya menang atas gaya isian umum (bingkai putih di dalam kotak) */
.map-search input[type="text"] {
  flex: 1 1 auto; width: auto; height: 100%; border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none;
  font: inherit; font-size: 0.9rem; padding: 0; color: var(--color-text); min-width: 0;
}
.map-search input::placeholder { color: var(--color-text-muted); }
.map-search__icon { flex: 0 0 auto; color: var(--color-text-muted); display: flex; }
.map-search__clear {
  border: 0; background: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 1.1rem; line-height: 1; padding: 2px 4px; display: none;
}
.map-search__results {
  margin-top: var(--space-2);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  max-height: 320px; overflow: auto;
  display: none;
}
.map-search__results.is-visible { display: block; }
.search-result {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  font: inherit; padding: 8px var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result.is-highlighted { background: rgba(139, 158, 126, 0.18); }
.search-result__name { font-size: 0.88rem; color: var(--color-text); }
.search-result__type { font-size: 0.74rem; color: var(--color-text-muted); }
.search-result__empty { padding: var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); }

/* Panel kerja kanan (Bagian 9a): kepala tab tetap, isi tab yang bergulir.
   Di atas kendali Leaflet (1000) karena menutupi tepi kanan peta. */
.sidebar {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 1010;
  width: var(--sidebar-width);
  background: var(--color-cream);
  border-left: 1px solid var(--color-border);
  box-shadow: -2px 0 10px rgba(46, 44, 40, 0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Satu kartu bertab Layer | Legenda (2 Nov 2026; 29 Okt sempat bertumpuk): baris
   tab tetap di atas, isi tab yang terbuka mengisi kartu dan bergulir sendiri. */
.workbench__head { flex: 0 0 auto; display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border-subtle); }
.workbench__tabs { flex: 1 1 auto; min-width: 0; display: flex; }
.workbench__tab {
  flex: 1 1 0; min-width: 0; margin: 0 0 -1px; padding: 12px var(--space-2) 10px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 500; color: var(--color-text-secondary);
}
.workbench__tab:hover { color: var(--color-forest-dark); background: rgba(139, 158, 126, 0.08); }
.workbench__tab[aria-selected="true"] { color: var(--color-forest-dark); font-weight: 600; border-bottom-color: var(--color-forest); }
.workbench__tab:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -3px; }
.workbench__layers {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
}
.workbench__legend {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.workbench__legend:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -2px; }
.workbench__empty { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.workbench__foot {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0 var(--space-4);
  padding: var(--space-1) var(--space-4); border-top: 1px solid var(--color-border);
}
.link-button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--color-forest-dark);
  text-decoration: underline; text-decoration-color: rgba(58, 85, 64, 0.35); text-underline-offset: 3px;
}
.link-button:hover { text-decoration-color: currentColor; }
.link-button:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; border-radius: 2px; }

/* Tombol ciutkan panel (layar lebar): kartu menyusut jadi baris judul saja */
.workbench__collapse {
  flex: 0 0 auto; width: 40px; align-self: stretch; display: grid; place-items: center;
  border: 0; border-left: 1px solid var(--color-border-subtle); background: none; cursor: pointer;
  color: var(--color-text-secondary);
}
.workbench__collapse:hover { background: rgba(139, 158, 126, 0.12); color: var(--color-forest-dark); }
.workbench__collapse:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -3px; }
.workbench__collapse svg { transition: transform 0.2s ease; }
@media (min-width: 721px) {
  .map-search { width: var(--sidebar-width); }
  .sidebar {
    top: var(--space-3); right: var(--space-3); bottom: var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);
  }
  .map-container {
    --map-inset-right: calc(var(--space-3) + var(--sidebar-width));
    --map-tools-right: calc(var(--space-3) + var(--sidebar-width));
  }
  /* Diciutkan: kartu tinggal baris tab Layer | Legenda + tombol buka */
  .sidebar.is-collapsed { bottom: auto; }
  .sidebar.is-collapsed ~ .map-container { --map-inset-right: 0px; }
  .sidebar.is-collapsed .workbench__layers,
  .sidebar.is-collapsed .workbench__legend,
  .sidebar.is-collapsed .workbench__foot { display: none; }
  .sidebar.is-collapsed .workbench__head { border-bottom: 0; }
  .sidebar.is-collapsed .workbench__tab { border-bottom-color: transparent; }
  .sidebar.is-collapsed .workbench__collapse svg { transform: rotate(180deg); }
  .detail-panel:not([hidden]) ~ .map-container { --map-inset-left: calc(var(--space-3) + var(--sidebar-width)); }
  #map .leaflet-left, #map .leaflet-right, .measure-bar { transition: left 0.2s ease, right 0.2s ease; }
}

.form-field { display: block; margin-bottom: var(--space-3); }
.form-field:last-child { margin-bottom: 0; }
.form-field__label {
  display: block; font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: var(--space-1);
}
select, input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="file"], textarea {
  width: 100%;
  font: inherit; font-size: 0.88rem;
  color: var(--color-text);
  background: #FFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 9px;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--color-forest);
  box-shadow: 0 0 0 3px rgba(74, 107, 79, 0.3);
}
textarea { resize: vertical; min-height: 74px; font-family: var(--font-numeric); font-size: 0.8rem; }

.note { font-size: 0.76rem; color: var(--color-text-muted); margin-top: var(--space-1); }

/* Legenda */
.legend__row {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.8rem; color: var(--color-text-secondary);
  padding: 2px 0;
}
.legend__swatch {
  /* inline-block: di sel tabel (Statistik, Admin) span inline mengabaikan
     width/height dan hanya tampil sebagai garis tipis */
  display: inline-block; vertical-align: -2px;
  width: 15px; height: 15px; flex: 0 0 auto;
  border-radius: 3px; border: 1px solid rgba(46, 44, 40, 0.18);
}
.legend__symbol { flex: 0 0 18px; display: inline-grid; place-items: center; }
/* Poligon & garis tanpa kategori (mis. batas wilayah): kotak bergaris tepi / garis pendek */
.legend__swatch--area { border-width: 2px; }
.legend__swatch--line { height: 0; border-width: 2px 0 0; border-radius: 0; }
.legend__note { margin: 4px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--color-text-muted); }
/* Bagian Legenda (map.js renderLegend): satu kelompok per layer yang tampil */
.legend-group + .legend-group { margin-top: var(--space-4); }
.legend-group__title { margin: 0 0 var(--space-1); font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.legend-group__title + .legend__note { margin: -2px 0 var(--space-1); }
.legend__symbol .symbol-svg { display: block; overflow: visible; }
.legend__subheading {
  font-size: 0.76rem; color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-1);
}
.legend__subheading:first-child { margin-top: 0; }

/* Checkbox layer */
.checkbox-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.85rem; color: var(--color-text);
  padding: 4px 0; cursor: pointer;
}
.checkbox-label input { accent-color: var(--color-forest); width: 15px; height: 15px; cursor: pointer; margin: 0; flex: 0 0 auto; }
.checkbox-label__swatch {
  width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto;
  border: 1px solid rgba(46, 44, 40, 0.20);
}
.checkbox-label__count {
  margin-left: auto; font-family: var(--font-numeric);
  font-size: 0.74rem; color: var(--color-text-muted);
}

/* Bagian Layer (map.js populateLayerList): satu baris per layer — tanda ▸,
   centang, nama, jumlah; simbolnya cukup di Legenda tepat di bawahnya — dan
   isinya di bawah tanda itu: kategori bercentang atau "Warnai menurut" (rumah). */
.layer-item__row { display: flex; align-items: center; gap: 2px; }
.layer-item__row > .checkbox-label { flex: 1 1 auto; min-width: 0; }
.layer-item__toggle, .layer-item__spacer { flex: 0 0 24px; height: 28px; }
.layer-item__toggle {
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer;
  color: var(--color-text-secondary);
}
.layer-item__toggle:hover { background: rgba(46, 44, 40, 0.06); color: var(--color-text); }
.layer-item__toggle:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -2px; }
.layer-item__toggle svg { transition: transform 0.15s ease; }
.layer-item__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
/* Isi menjorok: centang anak sejajar nama induknya (24 + 2 + 15 + 8 px) */
.layer-item__children { padding: 0 0 var(--space-2) 49px; }
.layer-item__children .checkbox-label { font-size: 0.82rem; padding: 3px 0; }
.layer-item__divider { margin: 4px 0; border-top: 1px dashed var(--color-border); }
.layer-options { margin: 0; padding: 0; border: 0; min-width: 0; }
.layer-options__title { padding: 2px 0; font-size: 0.74rem; color: var(--color-text-muted); }
.radio-label {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 3px 0; font-size: 0.82rem; color: var(--color-text); cursor: pointer;
}
.radio-label input { accent-color: var(--color-forest); width: 15px; height: 15px; margin: 0; flex: 0 0 auto; cursor: pointer; }

/* Tombol kelompok */
.button-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Sakelar buka/tutup sidebar (layar sempit) */
.sidebar-toggle {
  display: none;
  position: absolute; right: var(--space-3); top: var(--space-3); z-index: 750;
  background: var(--color-cream); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer;
  font: inherit; font-size: 0.84rem; font-weight: 500; color: var(--color-text);
  box-shadow: var(--shadow-raised);
}

/* Kepala sidebar (tombol tutup) dan tirai peta: hanya berarti di layar
   sempit, saat sidebar meluncur menutupi peta dan tombol Panel. */
.sidebar__header { display: none; }
.sidebar-backdrop { display: none; }

/* Popup Leaflet disesuaikan dengan sistem desain */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius); background: var(--color-cream);
  box-shadow: var(--shadow-raised); border: 1px solid var(--color-border);
}
.leaflet-popup-content { margin: 0; width: 262px !important; font-family: var(--font-body); }
.leaflet-popup-tip { background: var(--color-cream); border: 1px solid var(--color-border); }
.leaflet-container { font-family: var(--font-body); background: #DCD9D0; }
.leaflet-bar a {
  background: var(--color-cream); color: var(--color-text); border-bottom-color: var(--color-border);
}
.leaflet-bar a:hover { background: rgba(139, 158, 126, 0.22); color: var(--color-text); }
/* Latar krem di bawah tombol: rona hover di atas tetap pekat, tidak tembus ke
   citra satelit hijau (dulu nama tombol Woslay/Keerom tak terbaca saat disorot) */
.leaflet-bar { background: var(--color-cream); }
.leaflet-control-attribution { font-size: 10px; background: rgba(250, 248, 244, 0.82); }

/* Tombol tampilan Woslay / Seluruh Keerom (map.js, addViewPresetControl):
   seukuran tombol Leaflet di bawahnya, ikon tetap di kanan. Di layar bertetikus
   nama melebar ke kiri saat kursor mendekat (zona ::before) dan menutup lagi
   0,4 detik sesudah kursor pergi; di layar sentuh hanya ikon, nama muncul di
   __hint sesudah diketuk. */
.view-presets__button {
  display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-start;
  width: 100%; min-width: 30px; height: 30px; margin: 0; padding: 0 7px;
  border: 0; border-bottom: 1px solid var(--color-border);
  background: var(--color-cream); color: var(--color-text);
  font: inherit; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.view-presets__button:first-of-type { border-radius: 2px 2px 0 0; }
.view-presets__button:last-of-type { border-bottom: 0; border-radius: 0 0 2px 2px; }
.view-presets__button:hover { background: rgba(139, 158, 126, 0.22); }
.view-presets__button[aria-pressed="true"] { background: var(--color-forest-dark); color: #FFF; }
.view-presets__button[aria-pressed="true"]:hover { background: var(--color-forest); }
.view-presets__button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.view-presets__button svg { flex: 0 0 auto; }
.view-presets__label {
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width 0.18s ease 0.4s, opacity 0.18s ease 0.4s, margin 0.18s ease 0.4s;
}
.view-presets:has(:focus-visible) .view-presets__label {
  max-width: 12rem; margin-right: 7px; opacity: 1; transition-delay: 0s;
}
@media (hover: hover) {
  /* z-index -1: di belakang tombol, tetap di dalam konteks tumpukan .leaflet-control */
  .view-presets::before { content: ""; position: absolute; z-index: -1; inset: -16px -10px -8px -16px; }
  .view-presets:hover .view-presets__label {
    max-width: 12rem; margin-right: 7px; opacity: 1; transition-delay: 0s;
  }
}
.view-presets__hint {
  position: absolute; right: calc(100% + 8px);
  display: flex; align-items: center; height: 30px; padding: 0 10px;
  border-radius: var(--radius-sm); background: var(--color-text); color: #FFF;
  font-size: 0.82rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.view-presets__hint::after {
  content: ""; position: absolute; right: -4px; top: 11px;
  width: 8px; height: 8px; background: inherit; transform: rotate(45deg);
}

.popup__header {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.popup__type {
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600;
}
.popup__name { font-size: 0.98rem; font-weight: 600; margin-top: 1px; }
.popup__body { padding: var(--space-2) var(--space-4) var(--space-3); }
.popup__row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: 0.82rem; padding: 2px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.popup__row:last-child { border-bottom: 0; }
.popup__key { color: var(--color-text-secondary); }
.popup__value { font-family: var(--font-numeric); font-size: 0.8rem; text-align: right; }
.popup__footer { padding: 0 var(--space-4) var(--space-3); }
/* Tombol berupa tautan di popup (mis. Buka di Google Maps): Leaflet mewarnai semua tautan peta biru */
.leaflet-container a.button--outline { color: var(--color-forest); }
.leaflet-container a.button--outline:hover { color: var(--color-forest-dark); }

.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 0.72rem; font-weight: 500; color: #FFF;
}
.badge--good         { background: var(--color-condition-good); }
/* Dua warna kondisi tengah terlalu terang untuk teks putih (±3,3:1); lencana
   memakai versi lebih gelap dengan rona yang sama supaya ≥4,5:1. */
.badge--minor-damage { background: #667B5E; }
.badge--moderate-damage { background: #806E4F; }
.badge--severe-damage  { background: var(--color-condition-severe-damage); }
.badge--neutral       { background: var(--color-stone); }

/* Lencana kumpulan bertanda kode (config.js marker: "badge", mis. Sekolah):
   satu warna per sektor, jenjang dibaca dari tulisannya — bukan dari warna.
   Bingkai krem 2 px menjaga kontras di atas citra satelit maupun latar polos;
   bingkai putus-putus = lokasi perkiraan. */
.map-badge-anchor { background: none; border: 0; }
.map-badge {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-block; white-space: nowrap;
  padding: 1px 5px; min-width: 24px; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: 0.03em;
  color: #FFF;
  border: 2px solid var(--color-cream); border-radius: 4px;
  box-shadow: 0 1px 3px rgba(46, 44, 40, 0.45);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.map-badge--approximate { background: #FFF; border-style: dashed; }
.map-badge--selected {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 0 2px #2E2C28, 0 0 0 5px rgba(250, 248, 244, 0.9);
}
.map-badge--legend {
  position: static; transform: none; flex: 0 0 auto;
  min-width: 30px; padding: 0 3px; font-size: 9px;
  border-width: 1.5px; box-shadow: none;
}
/* Bilah alat kanan atas (map.js addMapToolsControl): peta dasar, ukur, cetak */
.map-tools { position: relative; }
.map-tools__bar {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-cream); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-raised);
}
.map-tool {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px;
  border: 0; border-bottom: 1px solid var(--color-border-subtle); background: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 500; color: var(--color-text); text-align: left;
}
.map-tool:last-child { border-bottom: 0; }
.map-tool:hover { background: rgba(139, 158, 126, 0.18); }
.map-tool[aria-pressed="true"], .map-tool[aria-expanded="true"] { background: var(--color-forest-dark); color: #FFF; }
.map-tool:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -3px; }
.map-tool svg { flex: 0 0 auto; }

/* Gambar mini peta dasar (bukan petak sungguhan: tanpa unduhan) */
.basemap-thumb {
  flex: 0 0 auto; display: inline-block; width: 22px; height: 22px;
  border: 1px solid rgba(46, 44, 40, 0.28); border-radius: 4px; background: #DCD9D0;
}
.basemap-thumb--satellite { background: linear-gradient(135deg, #3E5A33 0%, #6E8B4E 42%, #4B6B3B 62%, #8C7B57 100%); }
.basemap-thumb--streets {
  background: linear-gradient(90deg, transparent 44%, #FFF 45%, #FFF 55%, transparent 56%),
              linear-gradient(0deg, transparent 58%, #F6CF8F 59%, #F6CF8F 67%, transparent 68%), #EDE8DC;
}
.basemap-thumb--topographic { background: repeating-radial-gradient(circle at 72% 72%, #CFDDB8 0 3px, #A9BD8D 3px 4px); }
.basemap-thumb--plain { background: #E7E3D8; }

/* Panel Peta Dasar: terbuka di kiri bilah alat */
.basemap-panel {
  position: absolute; top: 0; right: calc(100% + 8px); width: 252px; padding: 10px 12px 12px;
  background: var(--color-cream); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-raised);
}
.basemap-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.86rem; font-weight: 600; }
.basemap-panel__close { padding: 2px 6px; border: 0; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--color-text-muted); }
.basemap-panel__close:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 1px; }
.basemap-panel__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.basemap-option {
  display: grid; justify-items: center; gap: 4px; padding: 6px 2px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: inherit; font-size: 0.72rem; line-height: 1.2; color: var(--color-text); text-align: center;
}
.basemap-option .basemap-thumb { width: 100%; height: 46px; }
.basemap-option__name { font-size: 0.76rem; }
.basemap-option__provider { margin-top: -3px; font-size: 0.66rem; font-weight: 400; color: var(--color-text-muted); }
.basemap-option:hover { background: rgba(139, 158, 126, 0.12); }
.basemap-option[aria-pressed="true"] { border-color: var(--color-forest); background: rgba(139, 158, 126, 0.16); font-weight: 600; }
.basemap-option:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 1px; }
.basemap-panel__label { margin: 10px 0 6px; font-size: 0.74rem; color: var(--color-text-muted); }
.basemap-panel__opacity { display: flex; gap: 4px; }
.basemap-panel__opacity button {
  flex: 1 1 0; padding: 4px 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #FFF; cursor: pointer; font: inherit; font-size: 0.72rem; color: var(--color-text);
}
.basemap-panel__opacity button[aria-pressed="true"] { background: var(--color-forest-dark); border-color: var(--color-forest-dark); color: #FFF; }
.basemap-panel__opacity button:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 1px; }
.basemap-panel__note { margin: 8px 0 0; font-size: 0.7rem; line-height: 1.4; color: var(--color-text-muted); }

/* Label hasil ukur jarak di tengah garis */
.leaflet-tooltip.measure-label {
  font-size: 0.78rem; line-height: 1.35; text-align: center; color: var(--color-text);
  border-color: #5B7C8D; border-radius: var(--radius-sm);
}
/* Bilah ukur jarak (map.js setMeasureBar): di dasar bagian peta yang terlihat,
   di atas atribusi; petunjuk saat mengukur, lalu hasil + Ukur lagi / Hapus */
.measure-bar {
  position: absolute; bottom: 30px; z-index: 1005;
  left: calc(var(--map-inset-left) + (100% - var(--map-inset-left) - var(--map-inset-right)) / 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-2);
  max-width: calc(100% - var(--map-inset-left) - var(--map-inset-right) - 24px);
  padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--color-cream); border: 1px solid var(--color-border); box-shadow: var(--shadow-raised);
  font-size: 0.84rem; color: var(--color-text);
}
.measure-bar__text { min-width: 0; }
.measure-bar .button { border-radius: 999px; white-space: nowrap; }

/* Zoom jauh (map.js BADGE_TEXT_MIN_ZOOM): lencana jadi kotak kecil tanpa tulisan */
.map--compact-badges .map-badge:not(.map-badge--selected) {
  min-width: 0; width: 11px; height: 11px; padding: 0;
  font-size: 0; line-height: 0; border-width: 1.5px;
}

/* Simbol titik Perka BIG (config.js marker: "symbol", symbols.js), juga di peta
   Cerita Peta. Kode huruf di bawah simbol: warna jenjang tidak terbedakan
   oleh sebagian penyandang buta warna. Zoom jauh: simbol mengecil tanpa kode. */
.map-symbol { background: none; border: 0; }
.map-symbol .symbol-svg {
  display: block; overflow: visible; transition: transform 0.15s ease;
  filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, 0.45));
}
.map-symbol__code {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; padding: 1px 3px;
  border-radius: 3px; background: rgba(255, 255, 255, 0.94); color: #111;
  font-size: 9px; font-weight: 700; line-height: 1.1; white-space: nowrap; pointer-events: none;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.map-symbol--selected .symbol-svg {
  transform: scale(1.35);
  filter: drop-shadow(0 0 1.5px #FAF8F4) drop-shadow(0 0 2px #2E2C28) drop-shadow(0 0 3px #2E2C28);
}
.map--small-facilities .map-symbol--facility:not(.map-symbol--selected) .symbol-svg { transform: scale(0.75); }
.map--compact-badges .map-symbol:not(.map-symbol--selected) .symbol-svg { transform: scale(0.6); }
.map--compact-badges .map-symbol:not(.map-symbol--selected) .map-symbol__code { display: none; }
/* Cerita Peta: kode di atas simbol bila tepat di bawahnya ada simbol lain (story.js spreadSymbols) */
.map-symbol--code-above .map-symbol__code { top: auto; bottom: 100%; margin: 0 0 1px; }

/* ── Statistik ─────────────────────────────────────────────────────────── */
/* Grafik HTML/CSS (statistics.js): batang ≤ 24 px berujung bulat 4 px, celah 2 px
   antarsegmen, teks memakai warna teks (bukan warna seri), angka besar tanpa
   tabular-nums; tabular hanya di kolom angka yang berjajar. */
/* Teks pembuka selebar wadah (dulu 70ch = 560 px: kalimat patah di tengah halaman, tampak terpotong).
   balance = di layar sempit baris terakhir tidak tinggal satu kata (Firefox belum mendukung pretty). */
.page-header__lead { color: var(--color-text-secondary); text-wrap: balance; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }

.stats-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.stats-filter[hidden] { display: none; }
.stats-filter__label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-right: var(--space-1); }
.chip {
  appearance: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 5px 13px;
  background: var(--color-cream); color: var(--color-text-secondary);
  font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--color-moss); color: var(--color-forest-dark); }
.chip[aria-pressed="true"] { background: var(--color-forest); border-color: var(--color-forest); color: #FFF; }
.chip:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; }
.stats-panel { padding-top: var(--space-5); }

.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi-row--inner { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.kpi {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.kpi-row--inner .kpi { background: var(--color-mist); border-color: var(--color-border-subtle); }
.kpi__label { font-size: 0.8rem; font-weight: 600; line-height: 1.3; color: var(--color-text-secondary); }
.kpi__value { font-size: 1.85rem; font-weight: 600; line-height: 1.15; color: var(--color-forest-dark); }
.kpi__sub { font-size: 0.74rem; line-height: 1.35; color: var(--color-text-muted); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.chart-card {
  background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5) var(--space-5); min-width: 0;
}
.stats-card--wide { margin-bottom: var(--space-4); }
.stats-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.stats-card h3 { font-size: 1rem; margin: 0; }
.stats-card__sub { margin: 2px 0 0; font-size: 0.78rem; color: var(--color-text-muted); }
.stats-card__toggle { flex: 0 0 auto; padding: 2px 0; }
.stats-card__table { margin-top: var(--space-3); }
.stats-card__note { margin: var(--space-3) 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--color-text-muted); }
.stats-empty { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }

.stats-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin: 0 0 var(--space-3); padding: 0; font-size: 0.78rem; color: var(--color-text-secondary); }
.stats-legend li { display: inline-flex; align-items: center; gap: 6px; }
.stats-legend__swatch { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 3px; }

/* Tanda grafik: terangkat saat ditunjuk/difokus; cincin fokus terlihat di papan ketik */
[data-tip-value] { cursor: default; outline: none; }
[data-tip-value]:hover, [data-tip-value]:focus-visible { filter: brightness(1.12); }
[data-tip-value]:focus-visible { box-shadow: 0 0 0 2px var(--color-cream), 0 0 0 4px var(--color-forest-dark); }

.stack-chart { display: grid; gap: var(--space-3); }
.stack-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: 0.84rem; }
.stack-row__label { font-weight: 600; }
.stack-row__note { font-size: 0.72rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stack { display: flex; gap: 2px; height: 22px; min-width: 0; }
.stack__segment { display: flex; align-items: center; justify-content: center; flex-basis: 0; min-width: 3px; }
.stack__segment:last-child { border-radius: 0 4px 4px 0; }
.stack__label { font-size: 0.7rem; font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none; }
.stack__label[hidden] { display: none; }

.bar-chart { display: grid; gap: var(--space-2); }
.bar-row { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: var(--space-3); align-items: center; font-size: 0.84rem; }
.bar-row__bars { display: grid; gap: 2px; min-width: 0; }
.bar-row__track { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: var(--space-2); align-items: center; }
.bar { display: block; height: 18px; min-width: 2px; border-radius: 0 4px 4px 0; }
.bar--zero { min-width: 0; }
.bar-chart--grouped .bar { height: 12px; }
.bar-row__value { text-align: right; font-size: 0.8rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bar-row__value small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--color-text-muted); }
/* Grafik kolom (kelompok umur) & meter (kebutuhan fasilitas) dibuang 3 Nov 2026 bersama kartu kuesioner */

/* Tooltip: nilai dulu (tebal), label kemudian dengan garis kunci warna seri */
.chart-tip {
  position: fixed; z-index: 4000; max-width: 260px; padding: 6px 10px; pointer-events: none;
  background: #1F231F; color: #FFF; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.78rem; line-height: 1.35;
}
.chart-tip[hidden] { display: none; }
.chart-tip strong { display: block; font-size: 0.86rem; }
.chart-tip__label { display: flex; align-items: center; gap: 6px; color: #D4D2C8; }
.chart-tip__key { flex: 0 0 auto; width: 12px; height: 3px; border-radius: 2px; }

.stats-school-table__symbol { display: inline-block; margin-right: 6px; vertical-align: -3px; }
table.data-table th.numeric { text-align: right; }
/* Judul baris (nama sekolah, layanan, wilayah) = teks biasa, bukan gaya judul kolom */
.stats-panel table.data-table tbody th[scope="row"] {
  position: static; background: none; text-align: left;
  font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text);
}

.stats-prose {
  max-width: 820px; padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-cream); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.stats-prose h2 { margin: var(--space-5) 0 var(--space-2); font-size: 1.05rem; }
.stats-prose h2:first-child { margin-top: 0; }
.stats-prose ul { margin: 0; padding-left: 1.2em; }
.stats-prose li { margin-bottom: var(--space-2); font-size: 0.92rem; line-height: 1.55; }

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kpi-row--inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__value { font-size: 1.5rem; }
  .stack-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-2); }
  .stack-row__label { grid-column: 1 / -1; }
  .bar-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .stats-prose { padding: var(--space-4); }
}
/* Ctrl+P di Statistik: grafik satu lajur selebar kertas. Angka di dalam batang
   bertumpuk dipilih statistics.js menurut lebar di layar; dua lajur di kertas
   lebih sempit dari layar sehingga angka segmen kecil terpotong. */
@media print {
  .stats-panel, .stats-filter { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tabel */
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-cream); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.data-table th, table.data-table td {
  padding: 7px var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}
table.data-table th {
  font-size: 0.73rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  background: rgba(139, 158, 126, 0.10);
  position: sticky; top: 0;
}
table.data-table td.numeric { font-family: var(--font-numeric); text-align: right; font-variant-numeric: tabular-nums; }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table tbody tr:hover { background: rgba(139, 158, 126, 0.10); }

/* ── Daftar rapi/polos (dipakai Admin) ──────────────────────────────── */
.bullet-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.bullet-list li { margin-bottom: var(--space-1); }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle);
  display: flex; justify-content: space-between; gap: var(--space-4); font-size: 0.88rem;
}
.plain-list li:last-child { border-bottom: 0; }
.plain-list .plain-list__key { color: var(--color-text-secondary); }

/* ── Admin (rute tersembunyi) ──────────────────────────────────────────── */
.login-container { max-width: 380px; margin: 8vh auto; padding: 0 var(--space-4); }
.login-card {
  background: var(--color-cream); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.login-card h2 { margin-bottom: var(--space-1); }
.login-card__subtitle { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.login-card .button--full-width { margin-top: var(--space-2); }
.login-card__note {
  font-size: 0.78rem; color: var(--color-text-secondary); text-align: center;
  margin: var(--space-4) 0 0;
}

/* Rincian akun di tab Pengaturan */
.definition-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: 0.9rem; }
.definition-list dt { color: var(--color-text-secondary); }
.definition-list dd { margin: 0; }

.message {
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-size: 0.85rem; margin-bottom: var(--space-4);
  border: 1px solid; border-left-width: 3px;
}
.message--error   { background: rgba(138, 95, 79, 0.10); border-color: rgba(138, 95, 79, 0.42); color: #6E4B3E; }
.message--success{ background: rgba(74, 107, 79, 0.10); border-color: rgba(74, 107, 79, 0.40); color: #3A5540; }
.message--info    { background: rgba(91, 124, 141, 0.10); border-color: rgba(91, 124, 141, 0.38); color: #46606D; }
.message:empty { display: none; }

.admin-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); flex-wrap: wrap; }
.admin-tabs button {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.88rem;
  padding: 8px var(--space-3); color: var(--color-text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs button:hover { color: var(--color-text); }
.admin-tabs button[aria-selected="true"] { color: var(--color-forest-dark); border-bottom-color: var(--color-forest); font-weight: 600; }
.admin-panel { display: none; }
.admin-panel.is-active { display: block; }

.drop-zone {
  border: 1px dashed var(--color-moss);
  border-radius: var(--radius); padding: var(--space-5);
  text-align: center; background: rgba(139, 158, 126, 0.07);
  cursor: pointer;
}
.drop-zone.is-highlighted { background: rgba(139, 158, 126, 0.18); border-color: var(--color-forest); }
.drop-zone__title { font-size: 0.92rem; font-weight: 500; }
.drop-zone__hint { font-size: 0.79rem; color: var(--color-text-muted); margin-top: var(--space-1); }

.admin-header {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-5);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border);
}
.admin-header h1 { margin: 0; font-size: 1.35rem; }
.admin-header .admin-header__actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

kbd {
  font-family: var(--font-numeric); font-size: 0.78rem;
  background: #FFF; border: 1px solid var(--color-border);
  border-bottom-width: 2px; border-radius: var(--radius-sm);
  padding: 1px 5px; color: var(--color-text-secondary);
}
code {
  font-family: var(--font-numeric); font-size: 0.84em;
  background: rgba(92, 90, 83, 0.09); border-radius: 3px; padding: 1px 4px;
}

/* ── Pemberitahuan ringan ──────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: var(--color-forest-dark); color: #F1F5EE;
  padding: 10px var(--space-4); border-radius: var(--radius);
  font-size: 0.87rem; box-shadow: var(--shadow-raised);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 2000; max-width: min(520px, calc(100vw - 32px));
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--error { background: #6E4B3E; }

.loading-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(242, 239, 233, 0.90); z-index: 1200; font-size: 0.9rem; color: var(--color-text-secondary);
}
.loading-overlay[hidden] { display: none; }

/* ── Layar sempit ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sidebar-width: 300px; }
  .brand__tagline { display: none; }
  .header { gap: var(--space-2); padding: 0 var(--space-3); }
  .nav__link { padding: 6px 9px; font-size: 0.82rem; }
  .nav__link--admin { margin-left: var(--space-1); padding: 6px 8px; }
  .header__status { display: none; }
}

@media (max-width: 720px) {
  /* Nav lima tautan tidak muat di lebar HP (~360px): disembunyikan di balik
     tombol menu dan dijatuhkan sebagai panel di bawah header. Header dinaikkan
     di atas kendali Leaflet (z-index 1000) supaya panel tidak tertutup tombol
     zoom peta; tetap di bawah galeri (1200) dan toast (2000). */
  .header { z-index: 1100; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px; margin: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
    background: #FFF;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(46, 44, 40, 0.18);
  }
  .nav.is-open { display: flex; }
  .nav__link { display: block; padding: 11px 12px; font-size: 0.95rem; }
  .nav__link--admin {
    display: flex; justify-content: flex-start; gap: var(--space-2);
    margin: var(--space-2) 0 0; padding: 11px 12px;
    border-color: var(--color-border);
  }
  /* Di panel jatuh ada ruang: label tautan petugas ditampilkan kembali */
  .nav__link--admin .nav__label {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; white-space: nowrap; clip-path: none;
  }

  /* Sidebar dinaikkan di atas kendali Leaflet (1000) supaya tombol zoom /
     lokasi tidak menimpa isi panel; tetap di bawah header (1100). */
  /* Panel tertutup ikut disembunyikan dari Tab & pembaca layar (visibility),
     baru setelah geser keluar selesai supaya animasinya tetap terlihat. */
  .sidebar {
    width: min(320px, 88vw); z-index: 1050;
    transform: translateX(100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    box-shadow: -2px 0 12px rgba(46, 44, 40, 0.14);
  }
  .sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform .2s ease; }
  .sidebar-toggle { display: block; }

  .sidebar__header {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    background: var(--color-forest-dark); color: #EEF2EA;
  }
  .sidebar__header-title {
    font-size: 0.73rem; letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 600;
  }
  .sidebar__close {
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 1.3rem; line-height: 1; cursor: pointer;
    color: #EEF2EA; background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .sidebar__close:hover, .sidebar__close:focus-visible {
    background: rgba(255, 255, 255, 0.24);
  }
  .sidebar__close:focus-visible { outline: 2px solid #F2E3A6; outline-offset: 2px; }

  /* Tirai transparan di sisi kiri laci: sisa peta yang masih terlihat
     tetap tampak, tapi ketukan di sana menutup panel alih-alih menggeser
     peta. Sedikit digelapkan agar terasa panel sedang "di atas" peta. */
  .sidebar-backdrop {
    display: block; position: absolute; inset: 0; z-index: 1040;
    background: rgba(46, 44, 40, 0.18);
  }
  .sidebar-backdrop[hidden] { display: none; }
  .workbench__collapse { display: none; }   /* HP: panel kerja sudah berupa laci */
  /* Bilah alat hanya ikon (nama tetap terbaca pembaca layar); turun di bawah tombol Panel */
  .map-tool { justify-content: center; padding: 8px; }
  .map-tool__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #map .leaflet-top.leaflet-right { top: 46px; }
  .map-search { width: calc(100vw - 132px); }
  /* Kiri-kanan menyisakan lajur tombol zoom & lokasi di kanan bawah */
  .measure-bar { left: var(--space-3); right: 56px; transform: none; max-width: none; flex-wrap: wrap; border-radius: var(--radius-lg); }
  .hero { background-image: url("../img/sampul-sp1-960.webp"); padding: var(--space-6) var(--space-4) var(--space-7); }
  /* Teks selebar layar: tirai rata, tidak memudar ke kanan */
  .hero::before { background: linear-gradient(180deg, rgba(20, 30, 22, 0.72) 0%, rgba(20, 30, 22, 0.58) 60%, rgba(20, 30, 22, 0.66) 100%); }
  .home-activities__inner, .home-news__inner { padding: var(--space-5) var(--space-3) var(--space-6); }
  .container { padding: var(--space-5) var(--space-3) var(--space-6); }
  .site-footer__inner { padding: 0 var(--space-3); }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
}
/* HP pendek (mis. 360 × 640): rapatkan jarak agar isi sampul Beranda muat di atas judul Berita */
@media (max-width: 720px) and (max-height: 700px) {
  .hero { padding-top: var(--space-4); }
  .hero__label { margin-bottom: var(--space-3); }
  .hero .button { padding: 9px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kumpulan data — panel layer, popup foto, dan galeri layar penuh
   ══════════════════════════════════════════════════════════════════════════ */

/* Beberapa komponen memakai display:flex sehingga menimpa perilaku bawaan
   atribut [hidden]; aturan ini mengembalikannya. */
[hidden] { display: none !important; }

.data-table__subrow td { color: var(--color-text-secondary); font-size: 0.86em; }

.legend__count {
  margin-left: auto; font-family: var(--font-numeric);
  font-size: 0.74rem; color: var(--color-text-muted);
}

/* Katalog Data: daftar satuan yang belum digambar (map.js renderCatalog) */
.catalog__note { display: block; margin-top: 2px; font-size: 0.86em; color: var(--color-text-secondary); }
.catalog__unlocated { margin-top: 2px; font-size: 0.86em; color: var(--color-text-secondary); }
.catalog__unlocated summary { cursor: pointer; }
.catalog__unlocated ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }

.detail__link { color: var(--color-forest); text-decoration: underline; text-underline-offset: 2px; }
.detail__link:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; }

/* ── Popup titik kumpulan ──────────────────────────────────────────────── */
.popup__type--dataset {
  display: inline-block;
  color: var(--color-cream);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.06em;
}
.layer-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: baseline;
  border: 1px solid rgba(46, 44, 40, 0.18);
}

/* Deret thumbnail di dalam popup */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.photo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0; overflow: hidden; cursor: pointer;
  background: var(--color-cream-edge);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.photo-tile:hover, .photo-tile:focus-visible {
  border-color: var(--color-forest);
  transform: translateY(-1px);
}
.photo-tile:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 2px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile--failed::after {
  content: "?"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-cream-edge); color: var(--color-text-muted); font-size: 1rem;
}
.photo-tile--more {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-numeric); font-size: 0.82rem;
  color: var(--color-text-secondary); background: var(--color-mist);
}

/* ── Galeri foto layar penuh ───────────────────────────────────────────── */
body.gallery-open { overflow: hidden; }

.gallery {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column;
  background: rgba(26, 25, 22, 0.94);
}

.gallery__stage {
  flex: 1 1 auto; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5) var(--space-7) var(--space-4);
}
.gallery__image {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  background: rgba(250, 248, 244, 0.05);
}
.gallery--loading .gallery__image { opacity: 0.35; transition: opacity .15s ease; }

.gallery__message {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--color-cream); font-size: 0.9rem; text-align: center;
  max-width: 34ch; line-height: 1.5;
}

/* Tombol lingkaran: tutup, sebelumnya, berikutnya */
.gallery__button {
  position: absolute; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-cream); cursor: pointer;
  background: rgba(46, 44, 40, 0.55);
  border: 1px solid rgba(250, 248, 244, 0.28);
  transition: background .15s ease, border-color .15s ease;
}
.gallery__button:hover, .gallery__button:focus-visible {
  background: rgba(74, 107, 79, 0.85);
  border-color: rgba(250, 248, 244, 0.55);
}
.gallery__button:focus-visible { outline: 2px solid #F2E3A6; outline-offset: 2px; }
.gallery__button--close   { top: var(--space-4); right: var(--space-4); font-size: 1.3rem; line-height: 1; }
.gallery__button--previous { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.gallery__button--next { right: var(--space-3); top: 50%; transform: translateY(-50%); }

/* Keterangan di bawah foto */
.gallery__footer {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5) var(--space-5);
  color: var(--color-cream);
  border-top: 1px solid rgba(250, 248, 244, 0.12);
}
.gallery__title { font-size: 0.95rem; font-weight: 600; }
.gallery__layer {
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(250, 248, 244, 0.62);
}
.gallery__file-name {
  font-family: var(--font-numeric); font-size: 0.74rem;
  color: rgba(250, 248, 244, 0.52);
}
.gallery__counter {
  margin-left: auto; font-family: var(--font-numeric); font-size: 0.8rem;
  color: rgba(250, 248, 244, 0.75);
}

@media (max-width: 720px) {
  .gallery__stage { padding: var(--space-6) var(--space-2) var(--space-3); }
  .gallery__footer { padding: var(--space-3) var(--space-4) var(--space-4); }
  .gallery__counter { margin-left: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Kartu Rincian kiri — pasangan kartu Layer | Legenda di kanan
   ══════════════════════════════════════════════════════════════════════════ */
/* Melayang di bawah kotak cari, setinggi isinya (paling tinggi sampai dasar
   peta); kepala tetap, isinya yang bergulir. HP: lembar dari bawah (@media 720px). */
.detail-panel {
  position: absolute; z-index: 1010;
  top: calc(var(--space-3) * 2 + var(--map-search-height)); left: var(--space-3);
  width: var(--sidebar-width);
  max-height: calc(100% - var(--space-3) * 3 - var(--map-search-height));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-cream);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.detail-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Foto titik (detail-panel.js renderPhotos): pertama selebar kartu tepat di bawah
   kepala, sisanya deret kecil; mengklik foto membuka galeri layar penuh. Thumbnail
   320 px ≈ lebar kartu, jadi tidak perlu mengunduh foto ukuran penuh. */
.detail-panel__photos { border-bottom: 1px solid var(--color-border-subtle); }
.detail-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
  border: 0; background: var(--color-cream-edge); cursor: zoom-in;
}
.detail-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-photo:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -3px; }
.detail-photo.photo-tile--failed { cursor: default; }
.detail-panel__photos .photo-strip { grid-template-columns: repeat(4, 1fr); margin: 0; padding: var(--space-2) var(--space-4); }
@media (max-width: 720px) {
  .detail-photo { aspect-ratio: 16 / 9; }   /* lembar HP: foto tidak menghabiskan tinggi lembar */
}
@media (max-width: 720px) {
  /* Lembar dari bawah (map.js showDetails); peta di atasnya tetap bisa digeser.
     Di atas kendali Leaflet (1000), di bawah daftar hasil cari (1020) dan tirai laci (1040). */
  .detail-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62%; z-index: 1015;
    border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 16px rgba(46, 44, 40, 0.18);
  }
}

.detail-panel__header {
  position: relative; flex: 0 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-3) var(--space-4);
  background: var(--color-forest-dark);
  color: #EEF2EA;
}
.detail-panel__source {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(238, 242, 234, 0.75);
}
.detail-panel__name {
  font-size: 1.02rem; font-weight: 600; line-height: 1.25;
  margin: 2px 0 0; color: #FFF;
}
.detail-panel__badges {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2);
}
.detail__category {
  display: inline-block;
  font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  font-weight: 600; color: #FFF;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.detail-panel__close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 1.15rem; line-height: 1;
  color: #EEF2EA; cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.detail-panel__close:hover, .detail-panel__close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}
.detail-panel__close:focus-visible { outline: 2px solid #F2E3A6; outline-offset: 2px; }

.detail-panel__tools {
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.detail-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.detail-panel__content { padding: 0 var(--space-4) var(--space-6); }

.detail__section { margin-top: var(--space-4); }
.detail__section-title {
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}
.detail__row {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: 0.8rem; padding: 3px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.detail__row:last-child { border-bottom: 0; }
.detail__key { color: var(--color-text-secondary); flex: 0 1 auto; }
.detail__value {
  color: var(--color-text); text-align: right; font-weight: 500;
  overflow-wrap: anywhere;
}
.detail__privacy-note {
  margin-top: var(--space-5); padding: var(--space-3);
  font-size: 0.72rem; line-height: 1.5; color: #5A4A36;
  background: rgba(138, 116, 88, 0.10);
  border: 1px solid rgba(138, 116, 88, 0.30);
  border-left-width: 3px;
  border-radius: var(--radius);
}


/* Baris jumlah pada tabel rekap */
table.data-table tr.data-table__total td {
  font-weight: 600; color: var(--color-text);
  border-top: 1px solid var(--color-border);
  background: rgba(139, 158, 126, 0.10);
}

/* ── Lembar cetak peta ─────────────────────────────────────────────────── */
.print-header, .print-sidebar, .print-north-arrow, .print-details { display: none; }

/* Selama cetak disiapkan (map.js) peta diubah ke ukuran lembar kertas pilihan
   supaya Leaflet memuat petak dan menggambar vektor untuk ukuran itu, lalu
   dipaskan ke bagian yang tampil di layar (kertas besar = zoom lebih rinci). */
body.print-ready #map {
  right: auto; bottom: auto;
  width: var(--print-map-width); height: var(--print-map-height);
}

/* Keterangan lembar cetak (map.js fillPrintSheet). Di luar @media print supaya
   tingginya bisa diukur sebelum dialog cetak dibuka (body.print-measure: dirender
   sesaat di luar layar). --pls = skala huruf keterangan: membesar di kertas besar,
   mengecil (sampai 70%) bila keterangan terlalu panjang. */
body.print-measure .print-sidebar {
  display: block; position: fixed; left: -40000px; top: 0;
  width: var(--print-side-width); visibility: hidden;
}
/* Kepala lembar juga diukur (map.js printLayout): judul panjang bisa dua baris */
body.print-measure .print-header {
  display: flex; position: fixed; left: -40000px; top: 0;
  width: var(--print-sheet-width); visibility: hidden;
}
.print-header {
  align-items: flex-end; justify-content: space-between; gap: calc(16px * var(--ps, 1));
  padding-bottom: calc(8px * var(--ps, 1));
  border-bottom: calc(2px * var(--ps, 1)) solid var(--color-forest);
}
.print-header__label { font-size: calc(0.68rem * var(--ps, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.print-header__title { font-size: calc(1.25rem * var(--ps, 1)); font-weight: 600; line-height: 1.25; }
.print-header__date { font-size: calc(0.75rem * var(--ps, 1)); color: var(--color-text-secondary); white-space: nowrap; }
.print-heading {
  font-size: calc(0.7rem * var(--pls, 1)); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  margin: 0 0 calc(8px * var(--pls, 1)); padding-bottom: calc(4px * var(--pls, 1));
  border-bottom: 1px solid var(--color-border);
}
.print-heading ~ .print-heading { margin-top: calc(16px * var(--pls, 1)); }
.print-sidebar__point { font-size: calc(0.85rem * var(--pls, 1)); font-weight: 600; line-height: 1.3; margin: 0; }
.print-sidebar .note { font-size: calc(0.72rem * var(--pls, 1)); }
.print-sidebar .legend__row { font-size: calc(0.76rem * var(--pls, 1)); padding: calc(1px * var(--pls, 1)) 0; gap: calc(8px * var(--pls, 1)); }
.print-sidebar .legend__swatch { width: calc(13px * var(--pls, 1)); height: calc(13px * var(--pls, 1)); }
.print-sidebar .legend__symbol { flex-basis: calc(15px * var(--pls, 1)); }
.print-sidebar .legend__symbol .symbol-svg { width: calc(15px * var(--pls, 1)); height: calc(15px * var(--pls, 1)); }
.print-sidebar .legend__subheading { font-size: calc(0.76rem * var(--pls, 1)); margin: calc(8px * var(--pls, 1)) 0 calc(2px * var(--pls, 1)); }
.print-sidebar .legend__note { font-size: calc(0.68rem * var(--pls, 1)); }
.print-legend__group { break-inside: avoid; }
.print-legend__group--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(8px * var(--pls, 1)); }
.print-legend__group--columns .legend__row { font-size: calc(0.68rem * var(--pls, 1)); line-height: 1.2; min-width: 0; }
.print-legend__group--columns .legend__label { min-width: 0; overflow-wrap: break-word; }
.print-legend__group--columns .legend__subheading,
.print-legend__group--columns .legend__note { grid-column: 1 / -1; }
/* Kertas tegak: keterangan selebar lembar, 3 lajur; kelompok tidak terbelah */
body.print-portrait .print-legend { columns: 3; column-gap: calc(18px * var(--pls, 1)); }
/* Kelompok panjang (mis. 14 jenis fasilitas umum) boleh berlanjut ke lajur berikutnya */
body.print-portrait .print-legend__group--columns { display: block; break-inside: auto; }
.print-legend .legend__subheading { break-after: avoid; }
.print-legend .legend__row { break-inside: avoid; }

/* ── Cerita Peta (cerita peta bergulir, story.js) ──────────────────────── */
/* Wadah gulir = #view-story. --story-height diisi story.js dari tinggi
   wadah (cadangan: layar dikurangi header) supaya peta dan panel teks selalu
   diukur dari ruang yang sama. Layar lebar (2 Nov 2026, ala cerita peta Muhaimin):
   peta di kolom kiri menempel (sticky), teks bab bergulir di panel putih kanan. */
.view--story {
  --story-height: calc(100vh - var(--header-height));
  --story-panel-width: clamp(360px, 30vw, 480px);
  background: #FFF;
}
.story { display: grid; grid-template-columns: minmax(0, 1fr) var(--story-panel-width); }
.story__stage, .story__chapters { grid-row: 1; min-width: 0; }
.story__stage { grid-column: 1; position: sticky; top: 0; z-index: 1; height: var(--story-height); align-self: start; }
.story__map { position: absolute; inset: 0; background: #E7E3D8; }
.story__map.story__map--light { background: #EFEFEF; }   /* = warna darat peta dasar abu-abu */
/* Sambungan petak pada zoom pecahan: plus-lighter bawaan Leaflet 1.9 (penambal celah di Chromium)
   menjumlahkan petak yang bertumpuk sub-piksel → garis putih. Gantinya: campuran normal + petak
   dilebihkan 0,5 px supaya celah tertutup tanpa garis terang. */
.story__map.leaflet-container img.leaflet-tile { mix-blend-mode: normal; width: 256.5px !important; height: 256.5px !important; }
/* Jalan putih di peta dasar abu-abu digelapkan (filter SVG di index.html; latar #EFEFEF tetap) */
.story__map .story-basemap img.leaflet-tile { filter: url(#story-road-filter); }
/* Bab berjalan OSM (story.js scene.roads): jalan peta dasar tidak ditegaskan supaya tidak dobel */
.story__map.story__map--osm-roads .story-basemap img.leaflet-tile { filter: none; }
.story__filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.story__loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 600;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--radius);
  background: rgba(250, 248, 244, 0.94); box-shadow: var(--shadow-raised); font-size: 0.86rem; color: var(--color-text-secondary);
}
.story__chapters {
  grid-column: 2; position: relative; z-index: 2; padding: 0 clamp(24px, 2.6vw, 44px);
  background: #FFF; border-left: 1px solid var(--color-border);
}
/* Gulir berhenti per bab (masukan Muhaimin 3 Nov 2026, seperti cerita petanya): setiap bab
   setinggi panel dengan isi di tengah, jadi satu gulir langsung memusatkan bab berikutnya;
   "always" = roda mouse & papan ketik tidak melompati bab (touchpad: docs/catatan-teknis.md).
   Tambatannya tepi atas bab: bab setinggi panel
   tetap tampak di tengah, bab yang lebih tinggi (mis. tabel di layar pendek) dimulai dari
   judulnya dan sisanya bisa digulir di dalam bab itu. HP: gulir bebas (lihat @media di bawah). */
.view--story { scroll-snap-type: y mandatory; }
.story-chapter {
  min-height: var(--story-height); display: flex; align-items: center; padding-block: var(--space-6);
  scroll-snap-align: start; scroll-snap-stop: always;
}
.story__end-spacer { display: none; }

/* Teks bab seperti kolom artikel, tanpa kotak; bab yang tidak aktif dipudarkan */
.story-card { width: 100%; display: grid; gap: 12px; opacity: 0.35; transition: opacity 0.35s ease; }
.story-chapter.is-active .story-card { opacity: 1; }
.story-card .story-card__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-forest); }
.story-card h2 { margin: -6px 0 0; font-size: 1.5rem; line-height: 1.25; text-wrap: balance; color: var(--color-text); }
.story-card p { margin: 0; font-size: 0.97rem; line-height: 1.6; }
.story-number { font-weight: 650; color: var(--color-forest-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-card__hint { font-size: 0.8rem; color: var(--color-text-muted); }
.story-card__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.story-card__photos figure { margin: 0; display: grid; gap: 4px; align-content: start; }
.story-card__photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); display: block; background: var(--color-cream-edge); }
.story-card__photos figcaption { font-size: 0.72rem; line-height: 1.3; color: var(--color-text-secondary); }
.story-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* .story-card agar mengalahkan .story-card p (sumber juga berupa <p>) */
.story-card .story-card__source { font-size: 0.74rem; line-height: 1.45; color: var(--color-text-muted); border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-2); }
.story-card__terms { margin: 0; display: grid; gap: 4px; font-size: 0.95rem; line-height: 1.5; }
.story-card__terms div { display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; }
.story-card__terms dt { font-weight: 650; color: var(--color-forest-dark); }
.story-card__terms dd { margin: 0; }
.story-card__table { overflow-x: auto; }
.story-card__table table { width: 100%; border-collapse: collapse; font-size: 0.8rem; line-height: 1.35; }
.story-card__table th, .story-card__table td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border-subtle); }
.story-card__table thead th { font-weight: 650; color: var(--color-text-secondary); border-bottom-color: var(--color-border); vertical-align: bottom; }
.story-card__table tbody th { font-weight: 500; }
.story-card__table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.story-card__table thead .is-numeric { white-space: normal; }

/* Di kiri titik navigasi bab, supaya legenda panjang tidak menimpanya */
.story__legend {
  position: absolute; right: 44px; bottom: 28px; z-index: 500; max-width: 250px; max-height: calc(100% - 56px); overflow-y: auto;
  display: grid; gap: 4px; padding: 9px 11px; font-size: 0.76rem;
  background: rgba(250, 248, 244, 0.94); border: 1px solid var(--color-cream-edge); border-radius: var(--radius); box-shadow: var(--shadow-raised);
}
.story__legend:empty { display: none; }
.story-legend__title { font-weight: 600; color: var(--color-text); margin-bottom: 2px; }
.story-legend__row { display: flex; align-items: center; gap: 7px; color: var(--color-text-secondary); }
.story-legend__count { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; color: var(--color-text); }
.story-legend__swatch { flex: 0 0 auto; width: 14px; height: 10px; border-radius: 2px; border: 1.5px solid transparent; }
.story-legend__symbol { flex: 0 0 18px; display: grid; place-items: center; }
.story-legend__symbol .symbol-svg { display: block; overflow: visible; }
.story-legend__line { flex: 0 0 auto; width: 16px; height: 0; }
.story-legend__ring { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--color-text-secondary); background: rgba(46, 44, 40, 0.05); }


/* Tombol 24×24 px (ukuran target minimum WCAG 2.5.8); titik 12 px digambar
   ::before, pusatnya tetap 20 px dari tepi kanan seperti sebelumnya. */
.story__chapter-nav { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 500; display: grid; }
.story__chapter-nav button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.story__chapter-nav button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--color-forest); background: rgba(250, 248, 244, 0.9); }
.story__chapter-nav button[aria-current="step"]::before { background: var(--color-forest); transform: scale(1.2); }

.story-label { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--color-text-secondary); font-size: 11px; font-weight: 600; text-shadow: 0 0 3px var(--color-cream), 0 0 3px var(--color-cream), 0 0 2px var(--color-cream); }
.story-label::before, .story-settlement-label::before { display: none; }
.story-label--highlight { color: var(--color-forest-dark); font-size: 13px; font-weight: 700; }
/* Kabupaten/kota Papua: nama lain lebih kecil; Keerom (diarsir hijau tua) berhalo krem tebal */
.story-label--regency { font-size: 10.5px; }
.story-label--regency.story-label--highlight { font-size: 13px; }
/* Label SP: teks gelap berhalo putih di atas peta abu-abu (dulu putih untuk latar foto drone) */
.story-settlement-label { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--color-forest-dark); font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 2px #FFF; }
.hide-district-labels .story-label--district, .hide-village-labels .story-label--village { display: none; }
.plain-district-labels .story-label--district.story-label--highlight { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.leaflet-tooltip.story-tooltip { font-size: 12px; border-radius: var(--radius-sm); border-color: var(--color-cream-edge); color: var(--color-text); }

/* Layar sempit: peta di atas (46% tinggi), panel teks putih bergulir di bawahnya.
   Teks tidak dipudarkan: bab baru aktif saat melewati 72% tinggi layar, jadi sebelum itu
   teksnya sudah terbaca di bawah peta. */
@media (max-width: 900px) {
  .story { display: block; }
  .story__stage { height: calc(var(--story-height) * 0.46); z-index: 3; box-shadow: 0 1px 0 var(--color-border); }
  .story__chapters { padding: 0 var(--space-5); border-left: 0; }
  /* Gulir bebas: ruang teks di bawah peta pendek, hampir semua bab lebih panjang daripadanya */
  .view--story { scroll-snap-type: none; }
  .story-chapter {
    min-height: calc(var(--story-height) * 0.62); align-items: flex-start;
    padding-block: var(--space-5) calc(var(--story-height) * 0.22);
  }
  .story__end-spacer { display: block; height: calc(var(--story-height) * 0.35); }
  .story-card { opacity: 1; }
  .story-card h2 { font-size: 1.3rem; }
  .story__chapter-nav { display: none; }
  /* Legenda = pita di dasar peta, tepat di atas baris atribusi (story.js mengisi
     --story-attribution-height; story.js juga menyisakan ruang peta di atas pita). Item tersusun
     dalam kolom sama lebar, jumlah rata kanan; nama panjang memakai nama pendek (story.js). */
  .story__legend {
    left: 8px; right: 8px; bottom: calc(var(--story-attribution-height, 22px) + 6px);
    max-width: none; max-height: 52%; overscroll-behavior: contain;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 3px 14px; align-content: start;
    padding: 7px 10px; font-size: 0.7rem; line-height: 1.3;
  }
  .story-legend__title { grid-column: 1 / -1; margin-bottom: 0; }
  .story-legend__count { padding-left: 6px; }
  /* Simbol 16 px & baris 1,3: legenda 14 jenis sarana umum muat tanpa digulir di HP 360 px */
  .story-legend__symbol { flex-basis: 16px; }
  .story-legend__symbol .symbol-svg { width: 16px; height: 16px; }
}

/* ── Dialog Peta Interaktif: Penafian & Privasi, Katalog Data ─────────── */
.dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-cream); color: var(--color-text);
  box-shadow: 0 18px 48px rgba(46, 44, 40, 0.28);
}
.dialog--wide { width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(28, 33, 29, 0.45); }
.dialog__card { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.dialog__eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-forest); }
.dialog h2 { margin: 0; font-size: 1.25rem; }
.dialog__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); font-size: 0.9rem; line-height: 1.5; }
.dialog__note { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--color-text-secondary); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.dialog__text { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.install-dialog__confirm[hidden] { display: none; }
/* Pilihan cetak (map.js openPrintDialog) */
.print-form__field { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; font-size: 0.82rem; color: var(--color-text-secondary); }
.print-form__field select, .print-form__field input[type="text"] {
  padding: 7px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #FFF; font: inherit; font-size: 0.9rem; color: var(--color-text);
}
.print-form__field select:focus-visible, .print-form__field input:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 1px; }
.print-form__choices { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); }
.print-form__choices legend, .print-form__size legend { width: 100%; padding: 0; margin-bottom: 2px; }
.print-form__size { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.print-form__size label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--color-text); }
.print-form__size input {
  width: 6.5em; padding: 7px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #FFF; font: inherit; font-size: 0.9rem; color: var(--color-text);
}
.print-form__size input:focus-visible { outline: 2px solid var(--color-forest); outline-offset: 1px; }
.print-form__choices label, .print-form__check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--color-text); cursor: pointer; }
.print-form__choices input, .print-form__check input { accent-color: var(--color-forest); width: 16px; height: 16px; margin: 0; }
.print-form__check:has(input:disabled) { color: var(--color-text-muted); cursor: default; }
.dialog .data-table th[scope="row"] { font-weight: 600; text-align: left; }
/* Katalog Data: isi & sumber boleh membungkus (catatan cakupan, daftar belum digambar) */
.dialog .data-table td { white-space: normal; min-width: 11em; }

/* ── Cetak (ekspor laporan PDF via dialog cetak) ───────────────────────── */
@media print {
  html, body { height: auto; }
  body { overflow: visible; background: #FFF; }
  #app { display: block; height: auto; }
  .header, .sidebar, .map-search, .sidebar-toggle, .stats-card__toggle, .chart-tip, .button, .map-tools,
  .measure-bar, .skip-link, .toast, .drop-zone, .gallery { display: none !important; }
  .view { position: static; display: none; overflow: visible; }
  .view.is-active { display: block; }
  .app-main { position: static; }
  .card, .chart-card, .kpi, .table-scroll {
    break-inside: avoid; border-color: #BBB;
  }
  .container { max-width: none; padding: 0; }
  .site-footer { background: none; border-color: #BBB; }
  .site-footer__pill, .admin-link, .install-link, .site-footer nav { display: none; }
  .site-footer__inner { max-width: none; padding: var(--space-3) 0 0; }
  a { text-decoration: none; color: inherit; }

  /* Lembar peta: kepala, lalu peta + keterangan. Kertas dipaksa lewat @page yang
     dipasang map.js hanya selama tab Peta dicetak; tinggi lembar = tinggi area
     cetak dengan margin @page itu (margin "Default" di jendela cetak peramban).
     Sengaja TIDAK memakai 100vh: Floorp/Firefox menghitung vh pratinjau pertama
     dari kertas cetakan sebelumnya, sehingga A3–A0 tampak terpotong sampai
     pengaturan diubah. Aturan di sini juga menimpa tata letak layar sempit (≤720px). */
  .view--map.is-active {
    display: grid;
    grid-template-columns: minmax(0, var(--print-map-width)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, var(--print-map-height));
    grid-template-areas: "kepala kepala" "peta samping";
    align-content: start;
    gap: calc(14px * var(--ps, 1)) calc(18px * var(--ps, 1));
    width: var(--print-sheet-width); max-width: 100%;
    height: var(--print-sheet-height); margin: 0 auto;
    overflow: hidden;
  }
  /* Kotak warna legenda, latar skala & atribusi tetap tercetak walau opsi
     "grafik latar belakang" di dialog cetak tidak dicentang. */
  .view--map, .print-details {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .detail-panel, .sidebar-backdrop, .loading-overlay, .leaflet-bar, .leaflet-popup-pane { display: none !important; }

  /* Kartu kiri & kanan tidak tercetak: skala & atribusi kembali ke tepi peta */
  .map-container {
    grid-area: peta; position: relative; inset: auto; min-height: 0;
    --map-inset-left: 0px !important; --map-inset-right: 0px !important; --map-tools-right: 0px !important;
    overflow: hidden; outline: 1px solid var(--color-stone);
  }
  #map .leaflet-bottom.leaflet-left { bottom: 0 !important; }
  /* Peta digambar Leaflet pada ukuran lembar (body.print-ready di layar); di
     kertas ia mengikuti bingkainya supaya skala & atribusi tetap di sudutnya */
  body.print-ready #map { right: 0; bottom: 0; width: auto; height: auto; }
  /* Kertas tegak: kepala, peta, keterangan (3 lajur) */
  body.print-portrait .view--map.is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, var(--print-map-height)) auto;
    grid-template-areas: "kepala" "peta" "samping";
  }
  /* Kertas besar: simbol, kode huruf, skala, atribusi, & panah utara ikut membesar */
  body.print-large #map .map-symbol .symbol-svg { transform: scale(var(--ps, 1)); }
  body.print-large #map .map-symbol__code { font-size: calc(9px * var(--ps, 1)); margin-top: calc(1px + 11px * (var(--ps, 1) - 1)); }
  body.print-large .leaflet-control-scale { transform: scale(var(--ps, 1)); transform-origin: bottom left; }
  body.print-large .leaflet-control-attribution { font-size: calc(10.5px * var(--ps, 1)); }
  body.print-large .print-north-arrow { transform: scale(var(--ps, 1)); transform-origin: top right; }
  .print-north-arrow {
    display: block; position: absolute; top: calc(12px * var(--ps, 1)); right: calc(12px * var(--ps, 1)); z-index: 1000;
    padding: 4px 6px 2px; line-height: 0;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  }

  /* Gaya kepala lembar ada di luar @media print (ikut diukur map.js) */
  .print-header { grid-area: kepala; display: flex; }
  .print-details__source { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

  /* Tinggi keterangan dibatasi (map.js menghitungnya) supaya lembar tetap satu
     halaman; clip (bukan hidden) supaya baris keterangan kertas tegak tetap
     setinggi isinya dan baris petalah yang menyusut bila hitungan meleset */
  .print-sidebar {
    grid-area: samping; display: block;
    max-height: var(--print-side-height); overflow: hidden; overflow: clip;
  }

  /* Halaman kedua: rincian titik terpilih, foto selebar halaman lalu data dua lajur */
  .print-details:not([hidden]) {
    display: block; break-before: page;
    width: var(--print-sheet-width); margin: 0 auto;
  }
  /* Kertas besar: halaman rincian diperbesar utuh (lebar dibagi agar tetap selembar) */
  body.print-large .print-details:not([hidden]) { zoom: var(--ps, 1); width: calc(var(--print-sheet-width) / var(--ps, 1)); }
  .print-details__name {
    font-size: 1.2rem; margin: 2px 0 0; padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-forest);
  }
  .print-details .photo-strip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .print-details__content { columns: 2; column-gap: var(--space-6); margin-top: var(--space-4); }
  .print-details__content .detail__section { margin: 0 0 var(--space-4); }
  .print-details .detail__section-title { break-after: avoid; }
  .print-details .detail__row { break-inside: avoid; }
}

/* Animasi JS Leaflet (zoom, geser, terbang antarbab) dimatikan terpisah di
   map.js dan story.js — aturan CSS ini tidak menjangkaunya. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important; animation: none !important; scroll-behavior: auto !important;
  }
  /* Kecuali kartu Cerita Peta: tetap memudar seperti petanya yang tetap terbang (story.js) */
  .story-card { transition: opacity 0.35s ease !important; }
}