@font-face { font-family:"Ubuntu"; src:url("/statik/huruf/ubuntu-400.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Ubuntu"; src:url("/statik/huruf/ubuntu-500.ttf") format("truetype"); font-weight:500 600; font-display:swap; }
@font-face { font-family:"Ubuntu"; src:url("/statik/huruf/ubuntu-700.ttf") format("truetype"); font-weight:700 900; font-display:swap; }

:root {
  --biru:#1a56db; --biru-lembut:#eaf1ff;
  --teks:#141f2e; --redup:#6a7893; --garis:#e4eaf2;
  --latar:#ffffff; --latar-2:#f7fafd; --kartu:#ffffff;
  --hijau:#047857; --hijau-lembut:#e7f7f0;
  --kuning:#a16207; --kuning-lembut:#fdf4e3;
  --merah:#b91c1c; --merah-lembut:#fdeaea;
  --huruf:"Ubuntu","Segoe UI",Roboto,system-ui,sans-serif;
}
html[data-tema="gelap"] {
  --teks:#e8eef7; --redup:#9aa9c0; --garis:#243044;
  --latar:#0f1621; --latar-2:#131c2a; --kartu:#161f2f; --biru-lembut:#16233c;
  --hijau-lembut:#12271f; --kuning-lembut:#2a2314; --merah-lembut:#2c1416;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--latar); color:var(--teks);
  font-family:var(--huruf); font-size:15.5px; line-height:1.62;
}
h1,h2,h3 { margin:0; letter-spacing:-.3px; }
h1 { font-size:21px; }
h2 { font-size:17px; }
h3 { font-size:15px; }
a { color:var(--biru); }
.catatan-kecil { color:var(--redup); font-size:13px; margin:2px 0; }

.puncak {
  position:sticky; top:0; z-index:20; background:var(--latar);
  border-bottom:1px solid var(--garis); padding:14px 18px 10px;
}
.puncak-isi { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; }
.merek { display:flex; gap:12px; align-items:center; }
.lambang {
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  color:#fff; font-weight:700; background:linear-gradient(135deg,#1a56db,#3b82f6);
  box-shadow:0 6px 18px rgba(26,86,219,.28);
}
.aksi-puncak { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.jalur-waktu { max-width:1180px; margin:8px auto 0; color:var(--redup); font-size:13px; }
.titik { margin:0 6px; }

.pil { padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; }
.pil.sehat { background:var(--hijau-lembut); color:var(--hijau); }
.pil.masalah { background:var(--merah-lembut); color:var(--merah); }
.pil.memuat { background:var(--biru-lembut); color:var(--biru); }

.tombol {
  border:1px solid var(--garis); background:var(--kartu); color:var(--teks);
  padding:9px 14px; border-radius:11px; font:inherit; font-size:14px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.tombol:hover { border-color:var(--biru); color:var(--biru); }
.tombol.utama { background:var(--biru); color:#fff; border-color:var(--biru); }

.bungkus { max-width:1180px; margin:0 auto; padding:18px; }
.bagian { margin:22px 0 8px; }
.kepala-bagian { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.petak, .petak-layanan { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.kotak {
  background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:14px 16px;
}
.kotak b { display:block; font-size:26px; line-height:1.2; }
.kotak span { color:var(--redup); font-size:13px; }
.kotak.hijau b { color:var(--hijau); }
.kotak.merah b { color:var(--merah); }
.kotak.kuning b { color:var(--kuning); }
.kotak.biru b { color:var(--biru); }

.petak-pop { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.pop {
  background:var(--kartu); border:1px solid var(--garis); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
}
.pop.sehat { border-left:5px solid var(--hijau); }
.pop.sebagian, .pop.grafik_kosong { border-left:5px solid var(--kuning); }
.pop.mati { border-left:5px solid var(--merah); }
.pop-kepala { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 14px 8px; }
.pop-nama { font-weight:600; font-size:15px; }
.pop-keadaan { font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.pop-keadaan.sehat { background:var(--hijau-lembut); color:var(--hijau); }
.pop-keadaan.sebagian, .pop-keadaan.grafik_kosong { background:var(--kuning-lembut); color:var(--kuning); }
.pop-keadaan.mati { background:var(--merah-lembut); color:var(--merah); }
.pop-angka { display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 14px 10px; color:var(--redup); font-size:13px; }
.pop-angka b { color:var(--teks); font-weight:600; }
.pop-grafik { display:flex; gap:8px; padding:0 14px 12px; flex-wrap:wrap; }
.pop-grafik figure { margin:0; flex:1 1 140px; }
.pop-grafik img {
  width:100%; height:auto; border:1px solid var(--garis); border-radius:10px;
  background:var(--latar-2); cursor:zoom-in; display:block;
}
.pop-grafik figcaption { font-size:12px; color:var(--redup); margin-top:4px; }
.pop-rincian { border-top:1px dashed var(--garis); padding:8px 14px 12px; font-size:13px; }
.pop-rincian div { display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.pop-rincian .mati { color:var(--merah); }
.pop-rincian .hidup { color:var(--hijau); }

table.tabel { width:100%; border-collapse:collapse; font-size:14px; }
table.tabel th, table.tabel td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--garis); }
table.tabel th { color:var(--redup); font-weight:500; font-size:13px; }
.dua-kolom { display:grid; gap:18px; grid-template-columns:1fr 1fr; }
@media (max-width:820px) { .dua-kolom { grid-template-columns:1fr; } }
.batang { background:var(--kartu); border:1px solid var(--garis); border-radius:16px; padding:6px 14px 10px; }
.tautan-luar { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.tirai {
  position:fixed; inset:0; background:rgba(10,16,26,.82); display:grid; place-items:center;
  padding:20px; z-index:50; cursor:zoom-out;
}
/* penting: penanda "hidden" harus benar-benar menyembunyikan lapisan ini */
.tirai[hidden] { display:none; }
.tirai img { max-width:96vw; max-height:92vh; background:#fff; border-radius:12px; }
.hijau { color:var(--hijau); } .merah { color:var(--merah); } .kuning { color:var(--kuning); }