/* ==========================================================================
   CERDAS v2 — Komponen
   Hanya memakai token dari tokens.css. Jangan menulis warna/ukuran langsung di sini,
   di HTML, maupun di JavaScript.
   ========================================================================== */

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

body {
  margin: 0;
  background-color: var(--warna-latar);
  color: var(--warna-teks);
  font-family: var(--font-dasar);
}

a { color: var(--warna-aksen-teks); text-decoration: none; }
a:hover { color: var(--warna-aksen-gelap); text-decoration: underline; }
a:focus-visible, button:focus-visible, select:focus-visible, .nav-link:focus-visible {
  outline: none;
  box-shadow: var(--fokus-cincin);
}

.wrapper {
  max-width: var(--lebar-maks);
  margin: 0 auto;
  padding: var(--jarak-7) var(--jarak-10) var(--jarak-10);
}

.lompat-konten {
  position: absolute;
  left: var(--jarak-4);
  top: calc(-1 * var(--jarak-12) * 2);
  background: var(--warna-aksen-gelap);
  color: var(--warna-teks-terbalik);
  padding: var(--jarak-4) var(--jarak-6);
  border-radius: var(--radius-sedang);
  z-index: 2000;
}
.lompat-konten:focus { top: var(--jarak-4); color: var(--warna-teks-terbalik); }

/* ---------- Navbar ---------- */
.navbar-cerdas {
  background: var(--warna-permukaan);
  border-radius: var(--radius-navbar);
  padding: var(--jarak-4) var(--jarak-10);
  margin-bottom: var(--jarak-9);
  box-shadow: var(--bayangan-navbar);
}
.navbar-cerdas__merek { display: flex; align-items: center; padding: var(--jarak-1) 0; margin-right: var(--jarak-8); line-height: 0; }
.navbar-cerdas__merek img { display: block; height: var(--tinggi-logo-navbar); width: auto; }
.navbar-cerdas__merek:focus-visible { outline: none; box-shadow: var(--fokus-cincin); border-radius: var(--radius-sedang); }
.navbar-cerdas .nav-link {
  position: relative;
  color: var(--warna-teks-nav);
  font-size: var(--ukuran-nav);
  font-weight: var(--tebal-sedang);
  padding: var(--jarak-5) var(--jarak-6);
  border-radius: var(--radius-sedang);
  transition: color var(--transisi), background var(--transisi);
}
.navbar-cerdas .nav-link:hover,
.navbar-cerdas .nav-link:focus-visible,
.navbar-cerdas .nav-link.show { color: var(--warna-merek); background: transparent; text-decoration: none; }
.navbar-cerdas .nav-link:focus-visible { box-shadow: var(--fokus-cincin); }
.navbar-cerdas .dropdown-toggle.nav-link::after { vertical-align: middle; }
/* Penanda halaman aktif: garis biru di bawah teks menu (digambar sebagai latar agar panah dropdown tetap ada). */
.navbar-cerdas .nav-link.active,
.navbar-cerdas .nav-link[aria-current="page"] {
  color: var(--warna-merek); font-weight: var(--tebal-semi);
  background: linear-gradient(var(--warna-merek), var(--warna-merek)) no-repeat center bottom /
              calc(100% - 2 * var(--jarak-6)) var(--tinggi-indikator-nav);
}
.navbar-cerdas .navbar-toggler { border-color: var(--warna-garis-kuat); }
.navbar-cerdas .navbar-toggler:focus { box-shadow: var(--fokus-cincin); }

/* Tombol aksi warga & menu akun */
.navbar-cerdas__aksi { display: flex; align-items: center; gap: var(--jarak-4); margin-left: auto; }
.navbar-cerdas__kanan { display: flex; align-items: center; flex-wrap: wrap; gap: var(--jarak-4); }
.navbar-cerdas .tombol--kecil { min-height: var(--tinggi-tombol-nav); white-space: nowrap; }
.navbar-cerdas__lapor.aktif { background: var(--warna-tombol-hover); }
.navbar-cerdas__nama-akun { display: inline-block; max-width: var(--lebar-maks-nama-akun); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Menu turun (Data, akun petugas) */
.menu-turun {
  min-width: var(--lebar-menu-turun);
  padding: var(--jarak-3);
  border: var(--garis-tipis) solid var(--warna-garis);
  border-radius: var(--radius-besar);
  box-shadow: var(--bayangan-menu);
}
.menu-turun__item {
  display: flex; align-items: flex-start; gap: var(--jarak-5);
  padding: var(--jarak-4) var(--jarak-5);
  border-radius: var(--radius-sedang);
  color: var(--warna-teks); white-space: normal;
}
.menu-turun__item:hover, .menu-turun__item:focus { background: var(--warna-permukaan-hover); color: var(--warna-judul); }
.menu-turun__item.active, .menu-turun__item:active { background: var(--warna-permukaan-aktif); color: var(--warna-judul); }
.menu-turun__ikon { width: var(--ukuran-ikon-menu); margin-top: var(--jarak-1); text-align: center; color: var(--warna-aksen); flex-shrink: 0; }
.menu-turun__judul { display: block; font-size: var(--ukuran-md); font-weight: var(--tebal-sedang); }
.menu-turun__keterangan { display: block; font-size: var(--ukuran-xs); color: var(--warna-teks-samar); }
.menu-turun__kepala { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); text-transform: uppercase; letter-spacing: var(--spasi-huruf-label); }

@media (min-width: 992px) {
  .navbar-cerdas__aksi { margin-left: var(--jarak-4); }
  .navbar-cerdas__kanan { margin-left: var(--jarak-6); padding-left: var(--jarak-8); border-left: var(--garis-tipis) solid var(--warna-garis); }
}
@media (max-width: 991.98px) {
  .navbar-cerdas .navbar-collapse { padding-top: var(--jarak-4); }
  .navbar-cerdas__merek img { height: var(--tinggi-logo-navbar-ponsel); }
  .navbar-cerdas { padding: var(--jarak-3) var(--jarak-6); }
  .navbar-cerdas .navbar-nav .nav-link { padding: var(--jarak-4) var(--jarak-5); }
  .navbar-cerdas .nav-link.active, .navbar-cerdas .nav-link[aria-current="page"] {
    background: linear-gradient(var(--warna-merek), var(--warna-merek)) no-repeat left center / var(--tinggi-indikator-nav) 60%,
                var(--warna-merek-latar);
  }
  .navbar-cerdas__kanan { padding: var(--jarak-4) 0 var(--jarak-2); border-top: var(--garis-tipis) solid var(--warna-garis); margin-top: var(--jarak-3); }
  .navbar-cerdas .menu-turun { box-shadow: none; border: 0; padding-left: var(--jarak-5); }
}

/* ---------- Kaki halaman ---------- */
.kaki-situs {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--jarak-4);
  padding: var(--jarak-6) var(--jarak-3) 0;
  font-size: var(--ukuran-sm); color: var(--warna-teks-samar);
}
.kaki-situs a { color: var(--warna-teks-sekunder); }

/* ---------- Banner ---------- */
.banner { border-radius: var(--radius-banner); overflow: hidden; line-height: 0; }
.banner img { width: 100%; height: auto; display: block; }
.banner--bawah { margin-top: var(--jarak-9); }

/* ---------- Hero Beranda ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jarak-9);
  background-color: var(--hero-warna-dasar);
  background-image: var(--hero-gambar), var(--hero-latar);
  /* Posisi vertikal sedikit di atas "bottom" agar awan & gelombang bawah turun sedikit dari versi awal. */
  background-size: cover; background-position: center var(--hero-gambar-posisi-y); background-repeat: no-repeat;
  border-radius: var(--radius-kartu); box-shadow: var(--bayangan-kartu);
  padding: var(--padding-hero-ponsel); margin-bottom: var(--jarak-11);
}
.hero__wilayah { font-size: var(--ukuran-xs); font-weight: var(--tebal-semi); color: var(--warna-merek-teks-redup); text-transform: uppercase; letter-spacing: var(--spasi-huruf-label); margin: 0 0 var(--jarak-3); }
.hero__judul { font-size: var(--ukuran-hero-judul); font-weight: var(--tebal-tebal); line-height: var(--tinggi-baris-hero-judul); color: var(--warna-teks-terbalik); margin: 0 0 var(--jarak-6); }
.hero__desk { font-size: var(--ukuran-hero-desk); color: var(--warna-merek-teks-redup); line-height: var(--tinggi-baris-longgar); max-width: var(--lebar-maks-hero-teks); margin: 0; }
.jalur {
  display: flex; flex-direction: column; gap: var(--jarak-5);
  background: var(--warna-permukaan); border-radius: var(--radius-besar);
  padding: var(--jarak-9) var(--jarak-9) var(--jarak-7); color: inherit; margin: 0;
}
.jalur__judul { font-size: var(--ukuran-xl); font-weight: var(--tebal-tebal); color: var(--warna-judul); margin: 0; }
.jalur__judul i { color: var(--warna-merek); margin-right: var(--jarak-2); }
.jalur__baris { display: flex; gap: var(--jarak-4); }
.jalur__baris .input { flex: 1; min-width: 0; min-height: var(--tinggi-input-hero); font-size: var(--ukuran-hero-input); }
.jalur__baris .tombol { min-height: var(--tinggi-input-hero); padding-inline: var(--jarak-8); font-size: var(--ukuran-hero-input); }
.jalur__lain {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jarak-2) var(--jarak-4);
  border-top: var(--garis-tipis) solid var(--warna-garis); padding-top: var(--jarak-5); margin: 0;
  font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder);
}
.jalur__tautan { font-weight: var(--tebal-semi); color: var(--warna-merek); white-space: nowrap; }
.jalur__tautan i { margin-left: var(--jarak-1); transition: transform var(--transisi); }
.jalur__tautan:hover { color: var(--warna-merek-gelap); }
.jalur__tautan:hover i { transform: translateX(var(--jarak-1)); }
@media (min-width: 576px) {
  .hero__judul-baris { display: block; }
}
@media (min-width: 992px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--jarak-12); padding: var(--padding-hero-lebar); min-height: var(--tinggi-min-hero); }
}

/* ---------- Kontrol & legenda peta ---------- */
.kontrol-peta__tombol {
  display: flex; align-items: center; justify-content: center;
  width: var(--ukuran-tombol-peta); height: var(--ukuran-tombol-peta);
  background: var(--warna-permukaan); border: 0; color: var(--warna-judul); cursor: pointer;
}
.kontrol-peta__tombol:hover { background: var(--warna-permukaan-hover); }
.legenda-peta {
  background: var(--warna-permukaan); border-radius: var(--radius-sedang); box-shadow: var(--bayangan-kartu);
  padding: var(--jarak-3) var(--jarak-4); max-width: var(--lebar-maks-legenda);
  font-family: var(--font-dasar);
}
.legenda-peta__judul { font-size: var(--ukuran-2xs); font-weight: var(--tebal-tebal); color: var(--warna-judul); text-transform: uppercase; letter-spacing: var(--spasi-huruf-label); margin-bottom: var(--jarak-1); }
.legenda-peta__item {
  display: flex; align-items: center; gap: var(--jarak-3); width: 100%;
  background: none; border: 0; border-radius: var(--radius-kecil);
  padding: var(--jarak-1) var(--jarak-2); text-align: left; cursor: pointer;
  font-size: var(--ukuran-xs); color: var(--warna-teks);
}
.legenda-peta__item:hover { background: var(--warna-permukaan-hover); }
.legenda-peta__item[aria-pressed="true"] { background: var(--warna-permukaan-aktif); font-weight: var(--tebal-semi); color: var(--warna-judul); }
.legenda-peta:has([aria-pressed="true"]) .legenda-peta__item[aria-pressed="false"] { opacity: var(--opasitas-legenda-redup); }
.peta--popup-terbuka .legenda-peta { visibility: hidden; }
.legenda-peta__nama { flex: 1; min-width: 0; line-height: var(--tinggi-baris-rapat); }
.legenda-peta__jumlah { color: var(--warna-teks-samar); font-size: var(--ukuran-2xs); }
.leaflet-container.leaflet-gesture-handling-touch-warning::after,
.leaflet-container.leaflet-gesture-handling-scroll-warning::after { font-family: var(--font-dasar); font-size: var(--ukuran-lg); text-align: center; }

/* ---------- Kartu ---------- */
.kartu {
  background: var(--warna-permukaan);
  border-radius: var(--radius-kartu);
  box-shadow: var(--bayangan-kartu);
  overflow: hidden;
  margin-bottom: var(--jarak-9);
}
.kartu__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jarak-4);
  background: var(--warna-permukaan-redup);
  padding: var(--jarak-5) var(--jarak-8);
  border-bottom: var(--garis-tipis) solid var(--warna-garis);
  color: var(--warna-judul);
  font-size: var(--ukuran-lg);
  font-weight: var(--tebal-semi);
}
.kartu__kepala h2 { font-size: inherit; font-weight: inherit; margin: 0; }
.kartu__kepala > i { color: var(--warna-aksen); font-size: var(--ukuran-xl); }
.kartu__tambahan {
  margin-left: auto;
  font-size: var(--ukuran-xs);
  font-weight: var(--tebal-normal);
  color: var(--warna-teks-samar);
}
.kartu__isi { padding: var(--jarak-6) var(--jarak-8); }
.kartu__isi--rapat { padding: var(--jarak-3) var(--jarak-5); }
.kartu__isi--gulir { max-height: var(--tinggi-maks-panel); overflow-y: auto; }

.teks-pengantar {
  font-size: var(--ukuran-md);
  color: var(--warna-teks-sekunder);
  line-height: var(--tinggi-baris-longgar);
  margin-bottom: var(--jarak-8);
}
.catatan-kecil {
  font-size: var(--ukuran-xs);
  color: var(--warna-teks-samar);
  line-height: var(--tinggi-baris-normal);
}
.catatan-kecil i { color: var(--warna-aksen); }

/* ---------- Peta ---------- */
.peta {
  height: var(--tinggi-peta);
  width: 100%;
  background: var(--warna-permukaan-redup);
}
.catatan-info {
  font-size: var(--ukuran-xs);
  color: var(--warna-teks-catatan);
  background: var(--warna-permukaan-info);
  border-left: var(--garis-aksen) solid var(--warna-aksen);
  border-radius: var(--radius-sedang);
  padding: var(--jarak-3) var(--jarak-5);
  margin-top: var(--jarak-5);
  line-height: var(--tinggi-baris-normal);
}
.pesan-gagal {
  font-size: var(--ukuran-sm);
  color: var(--warna-error-teks);
  background: var(--warna-error-latar);
  border-radius: var(--radius-sedang);
  padding: var(--jarak-4) var(--jarak-5);
  margin-top: var(--jarak-5);
}

/* Popup peta (Leaflet) */
.leaflet-popup-content {
  font-family: var(--font-dasar);
  font-size: var(--ukuran-md);
  line-height: var(--tinggi-baris-normal);
  min-width: var(--lebar-min-popup);
}
.popup__judul {
  font-size: var(--ukuran-xl);
  font-weight: var(--tebal-tebal);
  color: var(--warna-judul);
  margin-bottom: var(--jarak-2);
}
.popup__bagian {
  font-size: var(--ukuran-2xs);
  font-weight: var(--tebal-tebal);
  color: var(--warna-judul);
  text-transform: uppercase;
  letter-spacing: var(--spasi-huruf-label);
  margin: var(--jarak-4) 0 var(--jarak-2);
}
.popup__bagian i { margin-right: var(--jarak-2); }
.popup__bagian--baik i { color: var(--warna-baik-teks); }
.popup__bagian--perhatian i { color: var(--warna-perhatian-teks); }
.popup__baris {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--jarak-4);
  padding: var(--jarak-1) 0;
  font-size: var(--ukuran-xs);
}
.popup__teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.popup__label { color: var(--warna-teks); line-height: var(--tinggi-baris-rapat); }
.popup__banding { font-size: var(--ukuran-2xs); color: var(--warna-teks-samar); line-height: var(--tinggi-baris-rapat); }
.popup__nilai {
  font-size: var(--ukuran-2xs);
  font-weight: var(--tebal-tebal);
  padding: var(--jarak-1) var(--jarak-3);
  border-radius: var(--radius-kecil);
  white-space: nowrap;
  cursor: help;
}
.popup__nilai--baik { background: var(--warna-baik-latar); color: var(--warna-baik-teks); }
.popup__nilai--perhatian { background: var(--warna-perhatian-latar); color: var(--warna-perhatian-teks); }
.popup__nilai[data-ekstrem="true"] { box-shadow: inset 0 0 0 var(--garis-sedang) currentColor; }
.popup__catatan {
  font-size: var(--ukuran-2xs);
  color: var(--warna-teks-samar);
  font-style: italic;
  margin-top: var(--jarak-2);
  line-height: var(--tinggi-baris-normal);
}
.popup__deskripsi {
  font-size: var(--ukuran-2xs);
  color: var(--warna-teks-samar);
  border-top: var(--garis-tipis) solid var(--warna-garis);
  margin-top: var(--jarak-3);
  padding-top: var(--jarak-3);
}

/* ---------- Warna kawasan & kelompok (dari token) ---------- */
[data-warna="cluster-1"] { --warna-item: var(--cluster-1); }
[data-warna="cluster-2"] { --warna-item: var(--cluster-2); }
[data-warna="cluster-3"] { --warna-item: var(--cluster-3); }
[data-warna="cluster-4"] { --warna-item: var(--cluster-4); }
[data-warna="cluster-5"] { --warna-item: var(--cluster-5); }
[data-warna="cluster-6"] { --warna-item: var(--cluster-6); }
[data-warna="cluster-7"] { --warna-item: var(--cluster-7); }
[data-warna="cluster-8"] { --warna-item: var(--cluster-8); }
[data-warna="cluster-lain"] { --warna-item: var(--cluster-lain); }

[data-aksen="kelompok-1"] { --warna-item: var(--kelompok-1); }
[data-aksen="kelompok-2"] { --warna-item: var(--kelompok-2); }
[data-aksen="kelompok-3"] { --warna-item: var(--kelompok-3); }
[data-aksen="kelompok-4"] { --warna-item: var(--kelompok-4); }
[data-aksen="kelompok-5"] { --warna-item: var(--kelompok-5); }
[data-aksen="kelompok-lain"] { --warna-item: var(--kelompok-lain); }

.swatch {
  display: inline-block;
  flex-shrink: 0;
  width: var(--ukuran-swatch);
  height: var(--ukuran-swatch);
  border-radius: var(--radius-kecil);
  background: var(--warna-item, var(--cluster-lain));
  margin-right: var(--jarak-2);
  vertical-align: middle;
}
.swatch--besar { width: var(--ukuran-swatch-besar); height: var(--ukuran-swatch-besar); margin-top: var(--jarak-1); }

/* Label kawasan (pil). Latar terang + titik warna agar teks tetap kontras AA. */
.pil-kawasan {
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-2);
  padding: var(--jarak-1) var(--jarak-4);
  border-radius: var(--radius-sedang);
  border: var(--garis-tipis) solid var(--warna-item, var(--cluster-lain));
  background: var(--warna-permukaan-redup);
  color: var(--warna-judul);
  font-size: var(--ukuran-xs);
  font-weight: var(--tebal-sedang);
  margin-bottom: var(--jarak-3);
}
.pil-kawasan .swatch { margin-right: 0; }

/* ---------- Profil & rekomendasi kawasan (panel Beranda) ---------- */
.profil { padding: var(--jarak-4) 0; border-bottom: var(--garis-tipis) solid var(--warna-garis-lembut); }
.profil:last-child { border-bottom: none; }
.profil__judul { margin: 0; font-size: inherit; }
.profil__kepala {
  display: flex; align-items: flex-start; gap: var(--jarak-5); width: 100%;
  background: none; border: 0; padding: var(--jarak-2) var(--jarak-3); margin: 0 calc(-1 * var(--jarak-3));
  border-radius: var(--radius-sedang); text-align: left; cursor: default; color: inherit;
}
.profil__kepala-teks { flex: 1; min-width: 0; }
.profil__penanda { color: var(--warna-item); margin-top: var(--jarak-2); opacity: 0; transition: opacity var(--transisi); }
.profil__nama { display: block; font-weight: var(--tebal-semi); color: var(--warna-judul); font-size: var(--ukuran-md); margin: 0; }
.profil__detail { padding-left: calc(var(--ukuran-swatch-besar) + var(--jarak-5)); }
.profil__desk { color: var(--warna-teks-sekunder); font-size: var(--ukuran-xs); line-height: var(--tinggi-baris-normal); margin: var(--jarak-2) 0 0; }
.profil__anggota { font-size: var(--ukuran-xs); color: var(--warna-teks-sekunder); margin: var(--jarak-3) 0 0; line-height: var(--tinggi-baris-normal); }
.profil__anggota-label { font-weight: var(--tebal-sedang); color: var(--warna-judul); }
.panel-kawasan__petunjuk { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); margin: 0 0 var(--jarak-2); }
/* Semua kawasan tampil lengkap; panel bergulir di dalam kartu. Klik wilayah/legenda → panel bergulir ke kawasannya. */
.panel-kawasan { position: relative; overflow-y: auto; max-height: var(--tinggi-maks-panel); overscroll-behavior: contain; }
.profil { scroll-margin-top: var(--jarak-4); }
.profil__kepala[data-pilih-kawasan] { cursor: pointer; }
.profil__kepala[data-pilih-kawasan]:hover { background: var(--warna-permukaan-hover); }
.profil__kepala[data-pilih-kawasan]:hover .profil__penanda { opacity: 1; }
.profil--terpilih .profil__kepala { background: var(--warna-merek-latar); box-shadow: inset var(--garis-aksen-tebal) 0 0 var(--warna-item); }
.profil--terpilih .profil__penanda { opacity: 1; }
.badge-jumlah {
  display: inline-block;
  background: var(--warna-badge-latar);
  color: var(--warna-badge-teks);
  padding: var(--jarak-1) var(--jarak-3);
  border-radius: var(--radius-pil);
  font-size: var(--ukuran-2xs);
  font-weight: var(--tebal-sedang);
  margin-top: var(--jarak-1);
}
.rekomendasi {
  background: var(--warna-permukaan-info);
  border-radius: var(--radius-sedang);
  border-left: var(--garis-aksen) solid var(--warna-aksen);
  padding: var(--jarak-4) var(--jarak-5);
  margin-top: var(--jarak-4);
}
.rekomendasi__label {
  font-size: var(--ukuran-2xs);
  font-weight: var(--tebal-tebal);
  color: var(--warna-judul);
  text-transform: uppercase;
  letter-spacing: var(--spasi-huruf-label);
  margin-bottom: var(--jarak-2);
}
.rekomendasi__fokus { font-size: var(--ukuran-xs); font-weight: var(--tebal-semi); color: var(--warna-judul); margin-bottom: var(--jarak-1); }
.rekomendasi__opd { font-size: var(--ukuran-2xs); color: var(--warna-aksen-teks); font-weight: var(--tebal-sedang); margin-bottom: var(--jarak-2); line-height: var(--tinggi-baris-rapat); }
.rekomendasi ul { padding-left: var(--jarak-8); margin: 0; }
.rekomendasi li { font-size: var(--ukuran-xs); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-normal); padding: var(--jarak-1) 0; }

/* ---------- Kartu kelompok indikator ---------- */
.grid-kelompok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--lebar-min-kartu-kelompok), 1fr));
  gap: var(--jarak-8);
  margin: var(--jarak-2) 0 var(--jarak-9);
}
.kartu-kelompok {
  background: var(--warna-permukaan-redup);
  border-radius: var(--radius-besar);
  border-left: var(--garis-aksen-tebal) solid var(--warna-item);
  padding: var(--jarak-6) var(--jarak-7);
  height: 100%;
  transition: transform var(--transisi), box-shadow var(--transisi);
}
.kartu-kelompok:hover { transform: translateY(calc(-1 * var(--jarak-1))); box-shadow: var(--bayangan-angkat); }
.kartu-kelompok__judul { font-weight: var(--tebal-tebal); color: var(--warna-judul); font-size: var(--ukuran-md); line-height: var(--tinggi-baris-rapat); margin: 0; }
.kartu-kelompok__judul i { color: var(--warna-item); margin-right: var(--jarak-2); }
.kartu-kelompok__ket { font-size: var(--ukuran-xs); color: var(--warna-teks-sekunder); margin-top: var(--jarak-2); line-height: var(--tinggi-baris-normal); }
.kartu-kelompok__jumlah { font-size: var(--ukuran-sm); font-weight: var(--tebal-semi); color: var(--warna-aksen-teks); margin-top: var(--jarak-3); }

/* ---------- Baris kartu setara: kartu bersebelahan sama tinggi ----------
   Kolom dijadikan flex agar kartu memenuhi tinggi baris; peta dan grafik ikut mengisi sisa ruang. */
@media (min-width: 768px) {
  .baris-setara > [class*="col-"] { display: flex; flex-direction: column; }
  .baris-setara .kartu { flex: 1 1 auto; display: flex; flex-direction: column; }
  .baris-setara .kartu__isi { flex: 1 1 auto; display: flex; flex-direction: column; }
  .baris-setara .grafik { flex: 1 1 auto; height: auto; min-height: var(--tinggi-grafik); }
  .baris-setara .grafik canvas { position: absolute; inset: 0; }
  .baris-setara .peta { flex: 1 1 auto; height: auto; min-height: var(--tinggi-peta-tablet); }
}
@media (min-width: 992px) {
  .baris-setara .peta { min-height: var(--tinggi-peta); }
  /* Panel kawasan tidak ikut menentukan tinggi baris: tingginya mengikuti kartu peta, sisanya digulir. */
  .baris-setara .panel-kawasan { flex: 1 1 0; min-height: 0; max-height: none; }
}

/* ---------- Grafik ---------- */
.grafik { position: relative; height: var(--tinggi-grafik); width: 100%; }
.pilih-indikator {
  width: auto;
  min-width: var(--lebar-min-pilih);
  max-width: 100%;
  font-size: var(--ukuran-xs);
  padding: var(--jarak-1) var(--jarak-4);
  border: var(--garis-tipis) solid var(--warna-garis-kuat);
  border-radius: var(--radius-sedang);
  color: var(--warna-teks-tabel);
  background: var(--warna-permukaan);
}
.legenda-garis { display: inline-block; width: var(--jarak-8); border-top: var(--garis-sedang) dashed var(--warna-judul); vertical-align: middle; margin-right: var(--jarak-2); }

/* ---------- Tabel ---------- */
.tabel-gulir { overflow-x: auto; }
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ukuran-sm);
  white-space: nowrap;
  margin: 0;
}
.tabel th {
  background: var(--warna-permukaan-redup);
  color: var(--warna-judul);
  font-weight: var(--tebal-semi);
  border-bottom: var(--garis-sedang) solid var(--warna-garis-kuat);
  padding: var(--jarak-3) var(--jarak-3);
  text-align: left;
  vertical-align: bottom;
}
.tabel td {
  padding: var(--jarak-2) var(--jarak-3);
  border-bottom: var(--garis-tipis) solid var(--warna-garis-lembut);
  color: var(--warna-teks-tabel);
  vertical-align: middle;
}
.tabel tbody th {
  background: transparent;
  border-bottom: var(--garis-tipis) solid var(--warna-garis-lembut);
  padding: var(--jarak-2) var(--jarak-3);
  vertical-align: middle;
}
.tabel--bungkus tbody th { vertical-align: top; }
.tabel tbody tr:hover { background: var(--warna-permukaan-redup); }
.tabel .angka { text-align: right; font-variant-numeric: tabular-nums; }
.tabel .kosong { color: var(--warna-teks-samar); }
.tabel__satuan { display: block; font-size: var(--ukuran-2xs); font-weight: var(--tebal-normal); color: var(--warna-teks-samar); }
.tabel--bungkus { white-space: normal; }
.tabel--bungkus td { vertical-align: top; }

/* ---------- Kamus ---------- */
.kode {
  display: inline-block;
  min-width: var(--lebar-min-kode);
  text-align: center;
  background: var(--warna-permukaan-aktif);
  color: var(--warna-aksen-teks);
  font-weight: var(--tebal-tebal);
  font-size: var(--ukuran-2xs);
  padding: var(--jarak-1) var(--jarak-3);
  border-radius: var(--radius-kecil);
}
.badge-domain {
  display: inline-block;
  padding: var(--jarak-1) var(--jarak-3);
  border-radius: var(--radius-kecil);
  font-size: var(--ukuran-2xs);
  font-weight: var(--tebal-semi);
  white-space: nowrap;
}
.badge-domain[data-domain="kes"] { background: var(--warna-naik-latar); color: var(--warna-naik-teks); }
.badge-domain[data-domain="pend"] { background: var(--warna-info-latar); color: var(--warna-info-teks); }
.badge-domain[data-domain="hidup"] { background: var(--warna-turun-latar); color: var(--warna-turun-teks); }
.badge-domain[data-domain="lain"] { background: var(--warna-badge-latar); color: var(--warna-badge-teks); }
.arah { font-weight: var(--tebal-tebal); white-space: nowrap; }
.arah--positif { color: var(--warna-turun-teks); }
.arah--negatif { color: var(--warna-naik-teks); }
.arah--belum { color: var(--warna-teks-samar); font-weight: var(--tebal-sedang); }

/* ---------- Matriks ---------- */
.matriks th { text-align: center; vertical-align: middle; }
.matriks td:first-child { font-weight: var(--tebal-semi); color: var(--warna-judul); }
.matriks ul { padding-left: var(--jarak-7); margin: 0; }
.matriks li { font-size: var(--ukuran-xs); line-height: var(--tinggi-baris-normal); padding: var(--jarak-1) 0; }

/* ---------- Tombol ---------- */
.tombol {
  display: inline-flex;
  align-items: center;
  gap: var(--jarak-3);
  background: var(--warna-tombol);
  color: var(--warna-teks-terbalik);
  border: none;
  border-radius: var(--radius-sedang);
  padding: var(--jarak-4) var(--jarak-9);
  font-size: var(--ukuran-md);
  font-weight: var(--tebal-sedang);
  transition: background var(--transisi), transform var(--transisi);
  cursor: pointer;
}
.tombol:hover { background: var(--warna-tombol-hover); color: var(--warna-teks-terbalik); text-decoration: none; transform: translateY(calc(-1 * var(--jarak-1) / 2)); }

/* ---------- Daftar info (Unduh) ---------- */
.daftar-info { font-size: var(--ukuran-md); margin: 0; }
.daftar-info div { margin-bottom: var(--jarak-6); }
.daftar-info dt { display: inline; font-weight: var(--tebal-tebal); }
.daftar-info dd { display: inline; margin: 0; }
.daftar-info dt::after { content: ": "; }

/* ---------- Tentang ---------- */
.tentang__judul { color: var(--warna-judul); font-size: var(--ukuran-xl); font-weight: var(--tebal-tebal); margin-bottom: var(--jarak-4); }
.tentang__teks { font-size: var(--ukuran-base); line-height: var(--tinggi-baris-longgar); color: var(--warna-teks-sekunder); }
.tentang__subjudul { color: var(--warna-judul); font-weight: var(--tebal-tebal); font-size: var(--ukuran-base); }
.tentang__subjudul i { color: var(--warna-item, var(--warna-aksen)); margin-right: var(--jarak-2); }
.tentang__subjudul small { color: var(--warna-teks-samar); font-size: var(--ukuran-xs); font-weight: var(--tebal-normal); }
.tentang__alur { font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-longgar); }
.tentang__kaki { font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); margin: 0; }
.tentang__kaki i { color: var(--warna-aksen); margin-right: var(--jarak-2); }
.pemisah { border: 0; border-top: var(--garis-tipis) solid var(--warna-garis); margin: var(--jarak-8) 0; opacity: 1; }
.daftar-indikator { list-style: none; padding-left: 0; margin-bottom: 0; }
.daftar-indikator li { padding: var(--jarak-1) 0; font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); }
.daftar-indikator .kode-indikator { display: inline-block; min-width: var(--lebar-min-kode); color: var(--warna-aksen-teks); font-weight: var(--tebal-semi); }

/* ---------- Peringatan konfigurasi (mode pengembangan) ---------- */
.peringatan-konfigurasi {
  background: var(--warna-peringatan-latar);
  color: var(--warna-peringatan-teks);
  border: var(--garis-tipis) solid var(--warna-peringatan-garis);
  border-radius: var(--radius-kartu);
  padding: var(--jarak-6) var(--jarak-8);
  margin-bottom: var(--jarak-9);
  font-size: var(--ukuran-md);
}
.peringatan-konfigurasi ul { margin: var(--jarak-2) 0 0; padding-left: var(--jarak-10); }

/* ---------- Halaman error & 404 ---------- */
.pesan-error {
  max-width: var(--lebar-pesan);
  margin: var(--jarak-12) auto;
  background: var(--warna-permukaan);
  border-radius: var(--radius-kartu);
  box-shadow: var(--bayangan-kartu);
  padding: var(--jarak-12);
  color: var(--warna-teks);
}
.pesan-error h1 { font-size: var(--ukuran-2xl); color: var(--warna-judul); }
.pesan-error__detail {
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--ukuran-sm);
  background: var(--warna-error-latar);
  color: var(--warna-error-teks);
  padding: var(--jarak-6);
  border-radius: var(--radius-sedang);
}
.halaman-kosong { text-align: center; padding: var(--jarak-12) var(--jarak-8); }
.halaman-kosong i { font-size: var(--ukuran-ikon-besar); color: var(--warna-aksen); }
.halaman-kosong h2 { font-size: var(--ukuran-xl); color: var(--warna-judul); margin-top: var(--jarak-8); }

/* ---------- Varian tombol ---------- */
.tombol--garis {
  background: var(--warna-permukaan);
  color: var(--warna-tombol-garis);
  box-shadow: inset 0 0 0 var(--garis-tipis) var(--warna-tombol-garis);
}
.tombol--garis:hover, .tombol--garis.aktif { background: var(--warna-tombol-garis-hover-latar); color: var(--warna-tombol-hover); }
.tombol:focus-visible { outline: none; box-shadow: var(--fokus-cincin); }
.tombol--garis:focus-visible { box-shadow: inset 0 0 0 var(--garis-tipis) var(--warna-tombol-garis), var(--fokus-cincin); }
.tombol--bahaya { background: var(--warna-bahaya); }
.tombol--bahaya:hover { background: var(--warna-bahaya-hover); }
.tombol--kecil { padding: var(--jarak-2) var(--jarak-5); font-size: var(--ukuran-sm); }
.tombol--penuh { width: 100%; justify-content: center; padding: var(--jarak-5) var(--jarak-9); font-size: var(--ukuran-base); }
.tombol-grup { display: flex; flex-wrap: wrap; gap: var(--jarak-4); justify-content: center; margin-top: var(--jarak-8); }

/* ---------- Pesan (flash & galat formulir) ---------- */
.pesan {
  display: flex; align-items: flex-start; gap: var(--jarak-4);
  border-radius: var(--radius-sedang);
  padding: var(--jarak-5) var(--jarak-6);
  margin-bottom: var(--jarak-8);
  font-size: var(--ukuran-md);
  line-height: var(--tinggi-baris-normal);
}
.pesan i { margin-top: var(--jarak-1); }
.pesan--sukses { background: var(--warna-sukses-latar); color: var(--warna-sukses-teks); }
.pesan--info { background: var(--warna-info-pesan-latar); color: var(--warna-info-pesan-teks); }
.pesan--galat { background: var(--warna-error-latar); color: var(--warna-error-teks); }

/* ---------- Kolom formulir ---------- */
.kolom-sempit { max-width: var(--lebar-kolom-sempit); margin: 0 auto; }
.kolom-sangat-sempit { max-width: var(--lebar-kolom-sangat-sempit); margin: 0 auto; }

/* ---------- Formulir ---------- */
.form .field { margin-bottom: var(--jarak-8); border: 0; padding: 0; min-width: 0; }
.form__baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lebar-min-kolom-form), 1fr)); gap: 0 var(--jarak-8); }
.field__label { display: block; font-size: var(--ukuran-md); font-weight: var(--tebal-sedang); color: var(--warna-judul); margin-bottom: var(--jarak-2); }
.field__opsional { font-weight: var(--tebal-normal); color: var(--warna-teks-samar); }
.field__petunjuk { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); line-height: var(--tinggi-baris-normal); margin-bottom: var(--jarak-3); }
.field__galat { font-size: var(--ukuran-sm); color: var(--warna-error-teks); margin-top: var(--jarak-2); font-weight: var(--tebal-sedang); }
.input {
  display: block; width: 100%;
  min-height: var(--tinggi-input);
  padding: var(--jarak-4) var(--jarak-5);
  font: inherit; font-size: var(--ukuran-input);
  color: var(--warna-teks);
  background: var(--warna-input-latar);
  border: var(--garis-tipis) solid var(--warna-input-garis);
  border-radius: var(--radius-sedang);
  transition: border-color var(--transisi), box-shadow var(--transisi);
}
textarea.input { resize: vertical; line-height: var(--tinggi-baris-normal); }
.input:focus { outline: none; border-color: var(--warna-input-fokus); box-shadow: var(--fokus-cincin); }
.field--galat .input { border-color: var(--warna-error-teks); }
.input--kecil { display: inline-block; width: auto; min-height: var(--tinggi-input-kecil); padding: var(--jarak-1) var(--jarak-4); font-size: var(--ukuran-sm); }
.pilihan { display: flex; align-items: flex-start; gap: var(--jarak-4); margin-bottom: var(--jarak-4); }
.pilihan input { flex-shrink: 0; width: var(--ukuran-centang); height: var(--ukuran-centang); margin-top: var(--jarak-1); accent-color: var(--warna-aksen); }
.pilihan label { font-size: var(--ukuran-md); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-normal); }
.pemberitahuan {
  display: flex; gap: var(--jarak-5); align-items: flex-start;
  background: var(--warna-permukaan-info);
  border-left: var(--garis-aksen) solid var(--warna-aksen);
  border-radius: var(--radius-sedang);
  padding: var(--jarak-5) var(--jarak-6);
  margin-bottom: var(--jarak-8);
  font-size: var(--ukuran-sm); color: var(--warna-teks-catatan); line-height: var(--tinggi-baris-normal);
}
.pemberitahuan i { color: var(--warna-aksen); margin-top: var(--jarak-1); }
/* Kolom jebakan bot: tidak terlihat oleh manusia maupun pembaca layar. */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Perekam suara (form Lapor) ---------- */
.perekam {
  background: var(--warna-permukaan-redup);
  border: var(--garis-tipis) dashed var(--warna-garis-kuat);
  border-radius: var(--radius-sedang);
  padding: var(--jarak-6) var(--jarak-7);
  margin-bottom: var(--jarak-8);
}
.perekam--merekam { border-style: solid; border-color: var(--warna-rekam); }
.perekam.field--galat { border-color: var(--warna-error-teks); }
.perekam__judul { font-size: var(--ukuran-md); font-weight: var(--tebal-sedang); color: var(--warna-judul); margin-bottom: var(--jarak-2); }
.perekam__judul i { color: var(--warna-aksen); margin-right: var(--jarak-2); }
.perekam__kontrol, .perekam__aksi-hasil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-5); }
.perekam .tombol { min-height: var(--tinggi-sentuh); }
.perekam__waktu {
  display: inline-flex; align-items: center; gap: var(--jarak-3);
  font-family: var(--font-mono); font-size: var(--ukuran-base); color: var(--warna-teks);
  font-variant-numeric: tabular-nums;
}
.perekam__titik {
  width: var(--ukuran-titik-rekam); height: var(--ukuran-titik-rekam);
  border-radius: var(--radius-bulat); background: var(--warna-rekam);
  animation: kedip-rekam var(--durasi-kedip) ease-in-out infinite;
}
@keyframes kedip-rekam { 50% { opacity: var(--opasitas-kedip); } }
.perekam__hasil audio { display: block; width: 100%; margin-bottom: var(--jarak-4); }
.perekam__status { font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-normal); margin: var(--jarak-4) 0 0; }
.perekam__status:empty { display: none; }

/* Foto pendukung (form Lapor & halaman petugas) */
.unggah-foto .field__label i { color: var(--warna-aksen); margin-right: var(--jarak-1); }
.input--berkas { padding: var(--jarak-3); min-height: var(--tinggi-sentuh); cursor: pointer; }
.unggah-foto__pratinjau { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--jarak-5); margin-top: var(--jarak-5); }
.unggah-foto__pratinjau img { max-width: 100%; max-height: var(--tinggi-maks-pratinjau-foto); border-radius: var(--radius-sedang); border: var(--garis-tipis) solid var(--warna-garis); }
.unggah-foto__pratinjau .tombol { min-height: var(--tinggi-sentuh); }
.foto-laporan { display: inline-block; margin-bottom: var(--jarak-3); }
.foto-laporan img { display: block; max-width: 100%; max-height: var(--tinggi-maks-foto-laporan); height: auto; object-fit: contain; object-position: left top; border-radius: var(--radius-sedang); border: var(--garis-tipis) solid var(--warna-garis); }

/* Rekaman di halaman petugas */
.audio-laporan { display: block; width: 100%; margin-bottom: var(--jarak-3); }
.ikon-rekaman { color: var(--warna-aksen); margin-right: var(--jarak-2); }
.hapus-rekaman { margin-top: var(--jarak-5); }
.hapus-rekaman summary { cursor: pointer; color: var(--warna-bahaya); font-size: var(--ukuran-sm); font-weight: var(--tebal-sedang); }
.hapus-rekaman form { margin-top: var(--jarak-4); }

/* ---------- Hasil kirim & kode laporan ---------- */
.hasil-kirim { text-align: center; padding: var(--jarak-12) var(--jarak-8); }
.hasil-kirim__ikon { font-size: var(--ukuran-ikon-besar); color: var(--warna-sukses-teks); }
.hasil-kirim__judul { font-size: var(--ukuran-xl); color: var(--warna-judul); font-weight: var(--tebal-tebal); margin: var(--jarak-6) 0 var(--jarak-4); }
.kode-laporan {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--ukuran-kode-laporan);
  font-weight: var(--tebal-tebal);
  letter-spacing: var(--spasi-huruf-kode);
  color: var(--warna-judul);
  background: var(--warna-permukaan-aktif);
  border: var(--garis-sedang) dashed var(--warna-aksen);
  border-radius: var(--radius-sedang);
  padding: var(--jarak-4) var(--jarak-8);
  margin-bottom: var(--jarak-6);
  user-select: all;
}
/* ID laporan: salin, simpan, bagikan */
.kode-wadah { display: flex; align-items: center; justify-content: center; gap: var(--jarak-4); flex-wrap: wrap; }
.kode-wadah .kode-laporan { margin-bottom: 0; }
.tombol-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tinggi-sentuh); height: var(--tinggi-sentuh);
  border: 0; border-radius: var(--radius-sedang);
  background: var(--warna-permukaan); color: var(--warna-tombol-garis);
  box-shadow: inset 0 0 0 var(--garis-tipis) var(--warna-tombol-garis);
  font-size: var(--ukuran-lg); cursor: pointer; transition: background var(--transisi);
}
.tombol-ikon:hover { background: var(--warna-tombol-garis-hover-latar); }
.tombol-ikon--berhasil { background: var(--warna-sukses-latar); color: var(--warna-sukses-teks); box-shadow: inset 0 0 0 var(--garis-tipis) var(--warna-sukses-teks); }
.status-salin { min-height: var(--jarak-10); font-size: var(--ukuran-sm); color: var(--warna-sukses-teks); font-weight: var(--tebal-sedang); margin: var(--jarak-4) 0; }
.pengingat-id {
  display: flex; gap: var(--jarak-5); align-items: flex-start; text-align: left;
  background: var(--warna-permukaan-info); border-left: var(--garis-aksen) solid var(--warna-aksen);
  border-radius: var(--radius-sedang); padding: var(--jarak-5) var(--jarak-6); margin: 0 auto var(--jarak-8);
  max-width: var(--lebar-kolom-sangat-sempit);
  font-size: var(--ukuran-md); color: var(--warna-teks-catatan); line-height: var(--tinggi-baris-normal);
}
.pengingat-id i { color: var(--warna-aksen); margin-top: var(--jarak-1); }
.ingat-hp { max-width: var(--lebar-kolom-sangat-sempit); margin: 0 auto var(--jarak-6); text-align: left; }
.ingat-hp .status-salin { margin: 0; min-height: 0; }
.simpan-id { display: grid; gap: var(--jarak-4); max-width: var(--lebar-kolom-sangat-sempit); margin: 0 auto var(--jarak-4); }
.simpan-id .tombol { justify-content: center; min-height: var(--tinggi-sentuh); }
.salin-sementara { position: fixed; left: -10000px; top: 0; opacity: 0; }

/* Daftar ID yang diingat di perangkat (Cek Status) */
.laporan-tersimpan { margin-bottom: var(--jarak-8); }
.laporan-tersimpan__daftar { list-style: none; padding: 0; margin: 0 0 var(--jarak-3); display: flex; flex-wrap: wrap; gap: var(--jarak-4); }
.laporan-tersimpan__butir { display: inline-flex; align-items: stretch; border-radius: var(--radius-sedang); border: var(--garis-tipis) solid var(--warna-aksen); overflow: hidden; }
.laporan-tersimpan__pilih, .laporan-tersimpan__hapus { border: 0; background: var(--warna-permukaan); cursor: pointer; min-height: var(--tinggi-sentuh); }
.laporan-tersimpan__pilih { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--jarak-2) var(--jarak-6); text-align: left; }
.laporan-tersimpan__pilih:hover, .laporan-tersimpan__hapus:hover { background: var(--warna-permukaan-aktif); }
.laporan-tersimpan__kode { font-family: var(--font-mono); font-weight: var(--tebal-tebal); color: var(--warna-judul); font-size: var(--ukuran-base); }
.laporan-tersimpan__tanggal { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); }
.laporan-tersimpan__hapus { width: var(--tinggi-sentuh); color: var(--warna-teks-samar); border-left: var(--garis-tipis) solid var(--warna-garis); }

.kode-kecil { font-family: var(--font-mono); font-weight: var(--tebal-sedang); color: var(--warna-judul); }

/* ---------- Badge status ---------- */
.badge-status, .badge-kabar {
  display: inline-block; white-space: nowrap;
  padding: var(--jarak-1) var(--jarak-5);
  border-radius: var(--radius-pil);
  font-size: var(--ukuran-xs); font-weight: var(--tebal-sedang);
  background: var(--status-latar, var(--warna-badge-latar));
  color: var(--status-teks, var(--warna-badge-teks));
}
[data-status="diterima"] { --status-latar: var(--status-diterima-latar); --status-teks: var(--status-diterima-teks); }
[data-status="diteruskan"] { --status-latar: var(--status-diteruskan-latar); --status-teks: var(--status-diteruskan-teks); }
[data-status="ditindaklanjuti"] { --status-latar: var(--status-ditindaklanjuti-latar); --status-teks: var(--status-ditindaklanjuti-teks); }
[data-status="selesai"] { --status-latar: var(--status-selesai-latar); --status-teks: var(--status-selesai-teks); }
[data-status="dialihkan"] { --status-latar: var(--status-dialihkan-latar); --status-teks: var(--status-dialihkan-teks); }
[data-status="ditolak"] { --status-latar: var(--status-ditolak-latar); --status-teks: var(--status-ditolak-teks); }
[data-status="dibuka_kembali"] { --status-latar: var(--status-dibuka-kembali-latar); --status-teks: var(--status-dibuka-kembali-teks); }
/* Kabar & jawaban pelapor ditulis setelah status agar menang bila satu elemen memiliki keduanya (titik linimasa). */
[data-kabar="kemajuan"] { --status-latar: var(--kabar-kemajuan-latar); --status-teks: var(--kabar-kemajuan-teks); }
[data-kabar="kendala"] { --status-latar: var(--kabar-kendala-latar); --status-teks: var(--kabar-kendala-teks); }
[data-konfirmasi="beres"] { --status-latar: var(--konfirmasi-beres-latar); --status-teks: var(--konfirmasi-beres-teks); }
[data-konfirmasi="belum"] { --status-latar: var(--konfirmasi-belum-latar); --status-teks: var(--konfirmasi-belum-teks); }

/* ---------- Jawaban pelapor (Cek Laporan) ---------- */
.kartu--sorot { border-top: var(--garis-aksen-tebal) solid var(--warna-aksen); }
.tombol-jawab { display: flex; flex-wrap: wrap; gap: var(--jarak-4); margin-bottom: var(--jarak-4); }
.tombol-jawab .tombol { flex: 1 1 var(--lebar-min-tombol-jawab); justify-content: center; min-height: var(--tinggi-sentuh); }

/* ---------- Ringkasan & detail laporan ---------- */
.ringkas-laporan { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lebar-min-kolom-ringkas), 1fr)); gap: var(--jarak-6) var(--jarak-8); margin-bottom: var(--jarak-8); }
.ringkas-laporan dt { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); font-weight: var(--tebal-sedang); text-transform: uppercase; letter-spacing: var(--spasi-huruf-label); }
.ringkas-laporan dd { margin: var(--jarak-1) 0 0; font-size: var(--ukuran-base); color: var(--warna-teks); }
.subjudul { font-size: var(--ukuran-base); font-weight: var(--tebal-tebal); color: var(--warna-judul); margin: var(--jarak-8) 0 var(--jarak-5); }
.teks-laporan {
  white-space: pre-line; overflow-wrap: anywhere;
  font-size: var(--ukuran-base); line-height: var(--tinggi-baris-longgar); color: var(--warna-teks);
  background: var(--warna-permukaan-redup); border-radius: var(--radius-sedang); padding: var(--jarak-6) var(--jarak-8);
}
.lipatan summary { cursor: pointer; color: var(--warna-aksen-teks); font-size: var(--ukuran-md); font-weight: var(--tebal-sedang); margin-bottom: var(--jarak-4); }

/* ---------- Linimasa status ---------- */
.linimasa { list-style: none; margin: 0; padding: 0; }
.linimasa__item { position: relative; display: flex; gap: var(--jarak-6); padding-bottom: var(--jarak-8); }
.linimasa__item:not(:last-child)::before {
  content: ""; position: absolute;
  left: calc(var(--ukuran-titik-linimasa) / 2 - var(--garis-tipis));
  top: var(--ukuran-titik-linimasa); bottom: 0;
  border-left: var(--garis-sedang) solid var(--warna-garis);
}
.linimasa__titik {
  flex-shrink: 0; width: var(--ukuran-titik-linimasa); height: var(--ukuran-titik-linimasa);
  margin-top: var(--jarak-2); border-radius: var(--radius-bulat);
  background: var(--status-teks, var(--warna-aksen));
}
.linimasa__isi { flex: 1; min-width: 0; }
.linimasa__kepala { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-4); }
.linimasa__waktu { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); }
.linimasa__opd { font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); margin-top: var(--jarak-2); }
.linimasa__catatan { font-size: var(--ukuran-md); color: var(--warna-teks); line-height: var(--tinggi-baris-normal); margin: var(--jarak-2) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.linimasa__catatan--internal { color: var(--warna-teks-catatan); background: var(--warna-permukaan-redup); border-radius: var(--radius-kecil); padding: var(--jarak-2) var(--jarak-4); }
.linimasa__oleh { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); margin-top: var(--jarak-2); }

/* ---------- Dasbor petugas ---------- */
.tabel-laporan .badge-kabar { margin-top: var(--jarak-2); }
.dasbor-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--jarak-6); margin-bottom: var(--jarak-8); }
.dasbor-kepala__judul { font-size: var(--ukuran-xl); font-weight: var(--tebal-tebal); color: var(--warna-judul); margin: 0 0 var(--jarak-2); }
.ringkasan-status { list-style: none; padding: 0; margin: 0 0 var(--jarak-9); display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lebar-min-kotak-status), 1fr)); gap: var(--jarak-6); }
.ringkasan-status__item {
  display: block; height: 100%;
  background: var(--warna-permukaan); border-radius: var(--radius-besar); box-shadow: var(--bayangan-kartu);
  border-top: var(--garis-aksen-tebal) solid var(--status-teks);
  padding: var(--jarak-6) var(--jarak-7);
  transition: transform var(--transisi), box-shadow var(--transisi);
}
.ringkasan-status__item:hover { text-decoration: none; transform: translateY(calc(-1 * var(--jarak-1))); box-shadow: var(--bayangan-angkat); }
.ringkasan-status__angka { display: block; font-size: var(--ukuran-2xl); font-weight: var(--tebal-tebal); color: var(--warna-judul); }
.ringkasan-status__label { display: block; font-size: var(--ukuran-sm); color: var(--status-teks); font-weight: var(--tebal-sedang); }
.tab-pilihan { display: flex; gap: var(--jarak-2); border-bottom: var(--garis-tipis) solid var(--warna-garis); margin-bottom: var(--jarak-8); }
.tab-pilihan a { padding: var(--jarak-4) var(--jarak-6); font-size: var(--ukuran-md); color: var(--warna-teks-nav); border-bottom: var(--garis-aksen) solid transparent; margin-bottom: calc(-1 * var(--garis-tipis)); }
.tab-pilihan a:hover { text-decoration: none; color: var(--warna-judul); }
.tab-pilihan a[aria-current="page"] { color: var(--warna-judul); font-weight: var(--tebal-semi); border-bottom-color: var(--warna-aksen); }
.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--lebar-min-kolom-ringkas), 1fr)); gap: 0 var(--jarak-8); align-items: end; margin-bottom: var(--jarak-6); }
.filter .field { margin-bottom: var(--jarak-6); }
.filter__aksi { display: flex; gap: var(--jarak-4); margin-bottom: var(--jarak-6); }
.tabel-laporan td { font-size: var(--ukuran-sm); }
.tabel-laporan__ringkasan { min-width: var(--lebar-min-kartu-kelompok); color: var(--warna-teks-sekunder); }
.kosong-daftar { text-align: center; color: var(--warna-teks-samar); padding: var(--jarak-12) 0; margin: 0; }
.kosong-daftar i { display: block; font-size: var(--ukuran-2xl); margin-bottom: var(--jarak-4); color: var(--warna-aksen); }
.aksi-akun { white-space: nowrap; }
.aksi-akun__form { display: inline-flex; gap: var(--jarak-2); align-items: center; margin: var(--jarak-1) var(--jarak-2) var(--jarak-1) 0; }

/* ---------- Status arahan (monev) ---------- */
[data-arahan="belum"] { --status-latar: var(--arahan-belum-latar); --status-teks: var(--arahan-belum-teks); --arahan-isi: var(--arahan-belum-isi); }
[data-arahan="direncanakan"] { --status-latar: var(--arahan-direncanakan-latar); --status-teks: var(--arahan-direncanakan-teks); --arahan-isi: var(--arahan-direncanakan-isi); }
[data-arahan="berjalan"] { --status-latar: var(--arahan-berjalan-latar); --status-teks: var(--arahan-berjalan-teks); --arahan-isi: var(--arahan-berjalan-isi); }
[data-arahan="selesai"] { --status-latar: var(--arahan-selesai-latar); --status-teks: var(--arahan-selesai-teks); --arahan-isi: var(--arahan-selesai-isi); }
.badge-status--lewat { background: var(--arahan-lewat-latar); color: var(--arahan-lewat-teks); margin-left: var(--jarak-2); }

.bar-progres { margin: var(--jarak-2) 0; }
.bar-progres__svg { display: block; width: 100%; height: var(--tinggi-bar-progres); border-radius: var(--radius-pil); overflow: hidden; }
.bar-progres__ruas { fill: var(--arahan-isi); }
.bar-progres__kosong { fill: var(--warna-garis); }

.angka-utama { display: flex; align-items: baseline; gap: var(--jarak-4); margin-bottom: var(--jarak-4); }
.angka-utama__nilai { font-size: var(--ukuran-angka-utama); font-weight: var(--tebal-tebal); color: var(--warna-judul); line-height: 1; }
.angka-utama__label { font-size: var(--ukuran-md); color: var(--warna-teks-sekunder); }
.legenda-status { list-style: none; padding: 0; margin: var(--jarak-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--jarak-3) var(--jarak-8); font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); }
.legenda-status li { display: inline-flex; align-items: center; gap: var(--jarak-2); }
.legenda-status__kotak { display: inline-block; width: var(--ukuran-swatch); height: var(--ukuran-swatch); border-radius: var(--radius-kecil); background: var(--arahan-isi); }
.tabel__bar { min-width: var(--lebar-min-bar-tabel); }

.subjudul-halaman { font-size: var(--ukuran-xl); font-weight: var(--tebal-tebal); color: var(--warna-judul); margin: var(--jarak-10) 0 var(--jarak-6); }
.grid-monev { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lebar-min-kartu-monev)), 1fr)); gap: var(--jarak-8); align-items: start; }
.kartu-monev { margin-bottom: 0; border-top: var(--garis-aksen-tebal) solid var(--warna-item); }
.kartu-monev .kartu__kepala h3 { font-size: var(--ukuran-md); font-weight: var(--tebal-tebal); margin: 0; }
.kartu-monev__opd { font-size: var(--ukuran-xs); font-weight: var(--tebal-tebal); color: var(--warna-judul); text-transform: uppercase; letter-spacing: var(--spasi-huruf-label); margin: var(--jarak-6) 0 var(--jarak-3); }
.daftar-arahan { list-style: none; padding: 0; margin: 0; }
.daftar-arahan li { padding: var(--jarak-3) 0; border-bottom: var(--garis-tipis) solid var(--warna-garis-lembut); }
.daftar-arahan li:last-child { border-bottom: none; }
.daftar-arahan__teks { font-size: var(--ukuran-sm); color: var(--warna-teks); line-height: var(--tinggi-baris-normal); }
.daftar-arahan__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-3); margin-top: var(--jarak-2); }
.daftar-arahan__catatan { font-size: var(--ukuran-xs); color: var(--warna-teks-sekunder); margin: var(--jarak-2) 0 0; line-height: var(--tinggi-baris-normal); white-space: pre-line; overflow-wrap: anywhere; }
.laporan-ringkas { display: flex; flex-wrap: wrap; gap: var(--jarak-2) var(--jarak-6); align-items: center; background: var(--warna-permukaan-redup); border-radius: var(--radius-sedang); padding: var(--jarak-4) var(--jarak-6); font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); margin-bottom: var(--jarak-3); }
.laporan-ringkas__judul { font-weight: var(--tebal-tebal); color: var(--warna-judul); }
.laporan-ringkas__judul i { color: var(--warna-aksen); margin-right: var(--jarak-2); }
.teks-arahan { font-size: var(--ukuran-lg); font-weight: var(--tebal-semi); color: var(--warna-judul); line-height: var(--tinggi-baris-normal); margin-bottom: var(--jarak-8); }
.matriks .badge-status { margin-left: var(--jarak-2); font-size: var(--ukuran-2xs); padding: 0 var(--jarak-3); }

/* ---------- Ringkasan Kecamatan ---------- */
.grid-kecamatan { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lebar-min-kartu-kecamatan)), 1fr)); gap: var(--jarak-6); }
.kartu-kecamatan {
  display: block; height: 100%;
  background: var(--warna-permukaan); border-radius: var(--radius-besar); box-shadow: var(--bayangan-kartu);
  border-left: var(--garis-aksen-tebal) solid var(--warna-item);
  padding: var(--jarak-7) var(--jarak-8);
  transition: transform var(--transisi), box-shadow var(--transisi);
}
.kartu-kecamatan:hover { text-decoration: none; transform: translateY(calc(-1 * var(--jarak-1))); box-shadow: var(--bayangan-angkat); }
.kartu-kecamatan__nama { display: block; font-size: var(--ukuran-lg); font-weight: var(--tebal-tebal); color: var(--warna-judul); }
.kartu-kecamatan__kawasan { display: block; font-size: var(--ukuran-sm); color: var(--warna-teks-sekunder); margin-top: var(--jarak-2); }

.ringkasan-kec__kepala {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--jarak-6);
  background: var(--warna-permukaan); border-radius: var(--radius-kartu); box-shadow: var(--bayangan-kartu);
  border-top: var(--garis-aksen-tebal) solid var(--warna-item);
  padding: var(--jarak-8) var(--jarak-10); margin-bottom: var(--jarak-9);
}
.ringkasan-kec__judul { font-size: var(--ukuran-judul-halaman); font-weight: var(--tebal-tebal); color: var(--warna-judul); margin: 0 0 var(--jarak-2); }
.ringkasan-kec__kawasan { font-size: var(--ukuran-base); font-weight: var(--tebal-sedang); color: var(--warna-teks-sekunder); margin: 0; }
.ringkasan-kec__desk { font-size: var(--ukuran-md); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-normal); margin: var(--jarak-3) 0 0; max-width: var(--lebar-baca); }
.kartu--ringkasan { height: calc(100% - var(--jarak-9)); }
.kartu--ringkasan[data-nada="baik"] { border-top: var(--garis-aksen-tebal) solid var(--warna-nada-baik); }
.kartu--ringkasan[data-nada="baik"] .kartu__kepala > i { color: var(--warna-nada-baik); }
.kartu--ringkasan[data-nada="perhatian"] { border-top: var(--garis-aksen-tebal) solid var(--warna-nada-perhatian); }
.kartu--ringkasan[data-nada="perhatian"] .kartu__kepala > i { color: var(--warna-nada-perhatian); }
.daftar-ringkasan { margin: 0; padding-left: var(--jarak-8); }
ul.daftar-ringkasan { list-style: none; padding-left: 0; }
.butir-ringkasan { padding: var(--jarak-4) 0; border-bottom: var(--garis-tipis) solid var(--warna-garis-lembut); }
.butir-ringkasan:last-child { border-bottom: none; }
.butir-ringkasan__judul { font-size: var(--ukuran-base); font-weight: var(--tebal-semi); color: var(--warna-judul); }
.butir-ringkasan__nilai { font-size: var(--ukuran-md); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-normal); margin-top: var(--jarak-1); }
.butir-ringkasan__nilai strong { color: var(--warna-teks); margin-right: var(--jarak-2); }
.butir-ringkasan__opd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jarak-2) var(--jarak-6); font-size: var(--ukuran-sm); color: var(--warna-teks-catatan); margin-top: var(--jarak-3); }
.butir-ringkasan__lapor { font-weight: var(--tebal-sedang); }
.popup__tautan { display: inline-flex; align-items: center; gap: var(--jarak-2); margin-top: var(--jarak-4); font-size: var(--ukuran-xs); font-weight: var(--tebal-sedang); }
.cetak-saja { display: none; }

/* ---------- QR Code ---------- */
.qr svg { display: block; width: 100%; height: auto; }
.qr__latar { fill: var(--warna-qr-terang); }
.qr__modul { fill: var(--warna-qr-gelap); }
.qr--galat { font-size: var(--ukuran-sm); color: var(--warna-error-teks); }

/* ---------- Poster QR Kanal Warga ---------- */
.grid-poster { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--lebar-min-poster), 1fr)); gap: var(--jarak-9); }
.poster-qr {
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--warna-permukaan); border-radius: var(--radius-kartu); box-shadow: var(--bayangan-kartu);
  padding: var(--jarak-10) var(--jarak-9); text-align: center;
}
.poster-qr__kop { font-size: var(--ukuran-xs); font-weight: var(--tebal-semi); color: var(--warna-aksen-teks); text-transform: uppercase; letter-spacing: var(--spasi-huruf-label); margin-bottom: var(--jarak-4); }
.poster-qr__judul { font-size: var(--ukuran-judul-poster); font-weight: var(--tebal-tebal); color: var(--warna-judul); margin-bottom: var(--jarak-4); }
.poster-qr__ajakan { font-size: var(--ukuran-md); color: var(--warna-teks-sekunder); line-height: var(--tinggi-baris-normal); margin-bottom: var(--jarak-6); }
.poster-qr__kode { width: var(--lebar-qr-poster); max-width: 100%; margin: 0 auto var(--jarak-6); }
.poster-qr__fitur { list-style: none; padding: 0; margin: 0 0 var(--jarak-6); font-size: var(--ukuran-sm); color: var(--warna-teks); text-align: left; display: inline-block; }
.poster-qr__fitur li { padding: var(--jarak-1) 0; }
.poster-qr__fitur i { color: var(--warna-aksen); width: var(--jarak-10); text-align: center; margin-right: var(--jarak-2); }
.poster-qr__alamat { font-size: var(--ukuran-xs); color: var(--warna-teks-samar); overflow-wrap: anywhere; margin-bottom: 0; }
.poster-qr__aksi { display: flex; flex-wrap: wrap; gap: var(--jarak-4); justify-content: center; margin-top: var(--jarak-8); padding-top: var(--jarak-6); border-top: var(--garis-tipis) solid var(--warna-garis); }
.poster-qr__aksi .tombol { min-height: var(--tinggi-sentuh); }

/* ---------- Kop & QR di versi cetak Ringkasan Kecamatan ---------- */
.kop-cetak p { margin: 0; }
.qr-cetak p { margin: 0; }

/* ---------- Cetak (A4) ---------- */
@media print {
  body { background: var(--warna-permukaan); font-size: var(--ukuran-cetak); }
  .wrapper { max-width: none; padding: 0; }
  .navbar-cerdas, .banner, .lompat-konten, .peringatan-konfigurasi, .pesan, .tanpa-cetak, noscript { display: none !important; }
  .cetak-saja { display: flex; justify-content: space-between; border-bottom: var(--garis-tipis) solid var(--warna-cetak-garis); padding-bottom: var(--jarak-3); margin-bottom: var(--jarak-6); }
  .kartu, .ringkasan-kec__kepala { box-shadow: none; border: var(--garis-tipis) solid var(--warna-cetak-garis); break-inside: avoid; }
  .kartu--ringkasan { height: auto; }
  .row > [class*="col-"] { flex: 0 0 auto; width: 100%; }
  .row > .col-md-6 { width: 50%; }
  .tabel-gulir { overflow: visible; }
  a { color: inherit; text-decoration: none; }
  .cetak-kaki { margin-top: var(--jarak-8); }

  /* Kop Ringkasan Kecamatan */
  .cetak-saja.kop-cetak { display: block; text-align: center; border-bottom: var(--garis-sedang) double var(--warna-judul); padding-bottom: var(--jarak-5); margin-bottom: var(--jarak-8); }
  .kop-cetak__instansi { font-size: var(--ukuran-kop-cetak); font-weight: var(--tebal-tebal); color: var(--warna-judul); letter-spacing: var(--spasi-huruf-label); text-transform: uppercase; }
  .kop-cetak__judul { font-size: var(--ukuran-kop-judul-cetak); font-weight: var(--tebal-semi); color: var(--warna-judul); margin-top: var(--jarak-2) !important; }
  .kop-cetak__keperluan { font-size: var(--ukuran-cetak); color: var(--warna-teks-sekunder); }
  .kop-cetak__meta { font-size: var(--ukuran-kop-meta-cetak); color: var(--warna-teks-samar); margin-top: var(--jarak-2) !important; }

  /* QR di akhir Ringkasan Kecamatan */
  .cetak-saja.qr-cetak { display: flex; justify-content: flex-start; align-items: center; gap: var(--jarak-8); border: var(--garis-tipis) solid var(--warna-cetak-garis); border-radius: var(--radius-sedang); padding: var(--jarak-6); margin-top: var(--jarak-8); break-inside: avoid; }
  .qr-cetak__kode { flex: 0 0 var(--lebar-qr-kecil-cetak); width: var(--lebar-qr-kecil-cetak); }
  .qr-cetak__judul { font-weight: var(--tebal-tebal); color: var(--warna-judul); }
  .qr-cetak__teks { color: var(--warna-teks-sekunder); }

  /* Poster QR: satu poster per halaman A4 */
  .grid-poster { display: block; }
  .poster-qr { box-shadow: none; border-radius: 0; padding: 0; min-height: 260mm; justify-content: center; break-after: page; }
  .poster-qr:last-child { break-after: auto; }
  .cetak-satu .poster-qr:not(.poster-qr--dicetak) { display: none; }
  .cetak-satu .poster-qr--dicetak { break-after: auto; }
  .poster-qr__kop { font-size: var(--ukuran-kop-judul-cetak); }
  .poster-qr__judul { font-size: var(--ukuran-judul-poster-cetak); }
  .poster-qr__ajakan, .poster-qr__fitur { font-size: var(--ukuran-teks-poster-cetak); }
  .poster-qr__kode { width: var(--lebar-qr-poster-cetak); }
  .poster-qr__alamat { font-size: var(--ukuran-cetak); }
}

/* ---------- Responsif ---------- */
@media (max-width: 992px) {
  .peta { height: var(--tinggi-peta-tablet); }
}
@media (max-width: 768px) {
  .wrapper { padding: var(--jarak-5) var(--jarak-5) var(--jarak-7); }
  .peta { height: var(--tinggi-peta-ponsel); }
  .grafik { height: var(--tinggi-grafik-ponsel); }
  .kartu__tambahan { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 576px) {
  .kartu__kepala { font-size: var(--ukuran-md); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .perekam__titik { animation: none; }
}