/* Ruang kendali prakiraan banjir — sengaja satu tema gelap (layar pantau), warna status = istilah BNPB. */
:root {
  --bg: #0a131d; --panel: #0f1c29; --panel-2: #142536; --garis: #1f354b; --garis-2: #2a4660;
  --ink: #e4ecf4; --ink-2: #a3b6c9; --redup: #6f859b; --aksen: #56c7f5; --aksen-2: #1e7fb0;
  --normal: #3dbb8a; --waspada: #f0c74a; --siaga: #f2934a; --awas: #ec5a5a; --luar: #5d6d7f;
  --peluang-1: #9ecae1; --peluang-2: #4292c6; --peluang-3: #08519c;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kond: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
  /* panel mengambang di atas peta: kaca gelap transparan + kabur latar; lebih pekat saat disentuh kursor */
  --kaca: rgba(11, 22, 34, .58); --kaca-pekat: rgba(11, 22, 34, .74); --kaca-sentuh: rgba(11, 22, 34, .9);
  --garis-kaca: rgba(120, 160, 195, .28); --kabur: blur(10px) saturate(140%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); }
body { display: flex; flex-direction: column; overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kecil { font-size: 12px; color: var(--redup); font-weight: 400; }
a { color: var(--aksen); }

/* header */
.atas { display: flex; align-items: center; gap: 24px; padding: 0 16px; height: 58px; flex: none;
  background: linear-gradient(180deg, #0f1f2e, #0b1622); border-bottom: 1px solid var(--garis); }
.merek { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; border-radius: 6px; }
.merek:hover svg { stroke: #fff; }
.merek svg { width: 30px; height: 30px; fill: none; stroke: var(--aksen); stroke-width: 2; stroke-linecap: round; flex: none; }
.merek b { font-family: var(--kond); font-size: 18px; letter-spacing: .02em; display: block; line-height: 1.1; }
.merek span { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.tab { display: flex; gap: 2px; margin: 0 auto; background: var(--panel); border: 1px solid var(--garis); border-radius: 8px; padding: 3px; }
.tab button { background: none; border: 0; padding: 7px 14px; border-radius: 6px; cursor: pointer; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.tab button:hover { color: var(--ink); }
.tab button[aria-selected="true"] { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--aksen); }
.jam { text-align: right; flex: none; }
#jam-wib { font-size: 15px; }
.kebaruan { font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.kebaruan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--normal); box-shadow: 0 0 0 3px #3dbb8a33; }
.kebaruan.basi::before { background: var(--siaga); box-shadow: 0 0 0 3px #f2934a33; }
.pembuat { flex: none; padding-left: 20px; border-left: 1px solid var(--garis); }
.pembuat img { display: block; height: 26px; width: auto; }

main { flex: 1; min-height: 0; position: relative; }
.halaman { display: none; height: 100%; }
.halaman.aktif { display: flex; }
#tab-validasi, #tab-cara { overflow-y: auto; }

/* peta */
.samping { width: 318px; flex: none; overflow: hidden; background: var(--panel); border-right: 1px solid var(--garis); }
.blok { padding: 14px 16px; border-bottom: 1px solid var(--garis); }
/* sidebar: status + tab + saringan terkunci, hanya daftar DAS/pulau yang digulir */
.samping { display: flex; flex-direction: column; }
.samping > .blok { flex: none; }
.samping > .blok:nth-child(2) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; border-bottom: 0; }
#daftar-das-bungkus, #daftar-pulau-bungkus { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#daftar-das-bungkus[hidden], #daftar-pulau-bungkus[hidden] { display: none; }
#daftar-das, #daftar-pulau { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 0 8px 14px; align-content: start; }
.blok h2 { margin: 0 0 10px; font: 600 11.5px/1 var(--kond); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: baseline; }
.blok h2 .kecil { text-transform: none; letter-spacing: 0; }
.angka-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.angka-status button { background: var(--panel-2); border: 1px solid transparent; border-top: 3px solid; border-radius: 6px; padding: 8px 6px 6px;
  text-align: center; cursor: pointer; transition: opacity .15s, background .15s; }
.angka-status button:hover { background: var(--garis); }
.angka-status button[aria-pressed="true"] { background: var(--garis); border-left-color: var(--garis-2); border-right-color: var(--garis-2); border-bottom-color: var(--garis-2); }
.angka-status button.redup { opacity: .38; }
.angka-status b { display: block; font: 600 22px/1 var(--kond); font-variant-numeric: tabular-nums; }
.angka-status span { font-size: 11px; color: var(--ink-2); }
.daftar-pulau { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.daftar-pulau li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.daftar-pulau li:hover { background: var(--panel-2); }
.daftar-pulau .nm { font-weight: 600; }
.daftar-pulau .um { font-size: 11px; color: var(--redup); text-align: right; font-family: var(--mono); }
.daftar-pulau .um.basi { color: var(--siaga); }
.bar-status { grid-column: 1 / -1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--garis); gap: 1px; }
.bar-status i { display: block; }
.saklar { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer; color: var(--ink); }
.saklar input { position: absolute; opacity: 0; }
.saklar input + span { width: 30px; height: 17px; border-radius: 9px; background: var(--garis-2); position: relative; flex: none; transition: background .15s; }
.saklar input + span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-2); transition: transform .15s; }
.saklar input:checked + span { background: var(--aksen-2); }
.saklar input:checked + span::after { transform: translateX(13px); background: #fff; }
.saklar input:focus-visible + span { outline: 2px solid var(--aksen); outline-offset: 2px; }
.dasar { display: flex; gap: 6px; margin-top: 8px; }
.dasar button { flex: 1; padding: 6px 8px; border: 1px solid var(--garis-2); border-radius: 6px; background: var(--panel-2);
  color: var(--ink-2); font: 500 12.5px/1.2 var(--sans); cursor: pointer; transition: background .15s, border-color .15s; }
.dasar button:hover { border-color: var(--aksen); color: var(--ink); }
.dasar button:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }
.dasar button.aktif { background: var(--aksen-2); border-color: var(--aksen); color: #fff; font-weight: 600; }
#panel-lapisan .dasar { display: grid; grid-template-columns: 1fr 1fr; }
.panel-lapisan h3 { margin: 12px 0 0; font: 600 11.5px/1 var(--kond); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.cari { width: 100%; margin-top: 2px; background: var(--bg); border: 1px solid var(--garis-2); color: var(--ink); border-radius: 6px; padding: 8px 10px; font: inherit; }
.hasil-cari { list-style: none; margin: 4px 0 0; padding: 0; max-height: 180px; overflow-y: auto; }
.hasil-cari li { padding: 6px 8px; border-radius: 5px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.hasil-cari li:hover { background: var(--panel-2); }
.leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.leg i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.leg i.kotak { border-radius: 2px; }
.peta-bungkus { flex: 1; position: relative; min-width: 0; }
#peta { position: absolute; inset: 0; }
.tooltip { position: absolute; pointer-events: none; background: #0b1622ee; border: 1px solid var(--garis-2); border-radius: 6px;
  padding: 6px 9px; font-size: 12.5px; max-width: 420px; z-index: 6; }
.maplibregl-ctrl-group { background: var(--panel) !important; }
.maplibregl-ctrl-group button span { filter: invert(1); }
.maplibregl-ctrl-group button[class*="geolocate-"] span { filter: none; }   /* ikon lokasi aktif/galat sudah berwarna */
.maplibregl-ctrl.maplibregl-ctrl-attrib, .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact-show { background: #0b1622ee !important; color: var(--ink-2); }
.maplibregl-ctrl.maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib-inner { color: var(--ink-2) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }

/* laci titik */
.laci { width: 0; flex: none; overflow: hidden; background: var(--panel); border-left: 1px solid var(--garis); transition: width .22s ease; position: relative; }
/* yang menggulung = #isi-laci (bukan .laci): tombol ✕ tetap di tempat, kepala titik menempel (atasan 28 Okt) */
.laci.buka { width: 460px; display: flex; flex-direction: column; }
.laci .tutup { position: absolute; right: 10px; top: 8px; background: none; border: 0; font-size: 24px; color: var(--ink-2); cursor: pointer; z-index: 2; }
#isi-laci { padding: 16px 18px 28px; width: 460px; flex: 1; min-height: 0; overflow-y: auto; }
.kepala-laci { position: sticky; top: -16px; z-index: 1; background: var(--panel); margin: -16px -18px 0; padding: 16px 18px 2px;
  border-bottom: 1px solid var(--garis); }
.kepala-laci .tombol-bagikan { position: absolute; right: 44px; top: 13px; }
.kepala-laci:has(.tombol-bagikan) h1 { margin-right: 120px; }
.laci h1 { font: 600 22px/1.15 var(--kond); margin: 0 30px 2px 0; text-wrap: balance; }
.laci .sub { color: var(--ink-2); font-size: 12.5px; margin-bottom: 12px; }
.lencana { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #0a131d; }
.lencana.garis { background: none; border: 1px solid var(--garis-2); color: var(--ink-2); font-weight: 500; }
.baris-lencana { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--garis); border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; margin: 12px 0; }
.kisi div { background: var(--panel-2); padding: 8px 10px; }
.kisi span { display: block; font-size: 11px; color: var(--redup); }
.kisi b { font: 600 17px/1.2 var(--kond); font-variant-numeric: tabular-nums; }
.kisi-4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.kisi-4 + .kisi { margin-top: 6px; }
.kisi .tren { font-style: normal; font-size: 13px; margin-left: 2px; }
.grafik { height: 250px; margin: 6px 0 4px; position: relative; }
.catatan { font-size: 12.5px; color: var(--ink-2); background: var(--bg); border-left: 3px solid var(--garis-2); padding: 8px 10px; border-radius: 0 6px 6px 0; margin: 10px 0; }
.peluang-bar { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 8px; font-size: 12.5px; margin: 5px 0; }
.peluang-bar div { height: 8px; background: var(--garis); border-radius: 4px; overflow: hidden; }
.peluang-bar div i { display: block; height: 100%; }
h3.sek { font: 600 11.5px/1 var(--kond); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 8px; }

/* halaman isi */
.isi-lebar { width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 24px 48px; }
.judul-hal h1 { font: 600 28px/1.15 var(--kond); margin: 0 0 6px; text-wrap: balance; }
.judul-hal p { color: var(--ink-2); max-width: 78ch; margin: 0 0 14px; }
.kendali { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 12px; }
select { background: var(--panel); color: var(--ink); border: 1px solid var(--garis-2); border-radius: 6px; padding: 7px 10px; font: inherit; }
.tabel-gulir { overflow-x: auto; border: 1px solid var(--garis); border-radius: 8px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th { text-align: left; font: 600 11px/1.2 var(--kond); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
  background: var(--panel); padding: 9px 10px; position: sticky; top: 0; border-bottom: 1px solid var(--garis); }
.tabel td { padding: 8px 10px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel td.mono { white-space: nowrap; }
.tabel td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabel tbody tr:hover { background: var(--panel); }
.tabel tr.klik { cursor: pointer; }
.mini-bar { display: flex; height: 8px; width: 120px; border-radius: 4px; overflow: hidden; background: var(--garis); gap: 1px; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; }
.dua span { color: var(--redup); display: block; font-size: 11px; }
.dua b { font-family: var(--mono); font-weight: 500; }
.sorot { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 22px; }
.sorot div { background: var(--panel); border: 1px solid var(--garis); border-radius: 10px; padding: 14px 16px; }
.sorot b { display: block; font: 600 30px/1 var(--kond); color: var(--aksen); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.sorot span { color: var(--ink-2); font-size: 12.5px; }
h2.bag { font: 600 20px/1.2 var(--kond); margin: 30px 0 6px; }
p.bag { color: var(--ink-2); margin: 0 0 12px; max-width: 80ch; }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.galeri figure { margin: 0; background: var(--panel); border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.galeri img { width: 100%; height: 150px; object-fit: cover; object-position: top left; display: block; background: #fff; }
.galeri figcaption { padding: 7px 10px; font-size: 12px; color: var(--ink-2); }
.nilai { display: inline-block; min-width: 46px; text-align: center; padding: 1px 6px; border-radius: 4px; font-family: var(--mono); font-size: 12.5px; }
.alur { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin: 18px 0 8px; counter-reset: langkah; }
.alur div { position: relative; padding: 16px 18px 16px; background: var(--panel); border: 1px solid var(--garis); margin: 0 -1px -1px 0; }
.alur div::before { counter-increment: langkah; content: counter(langkah); position: absolute; top: 12px; right: 14px; font: 700 28px/1 var(--kond); color: var(--garis-2); }
.alur h3 { margin: 0 0 6px; font: 600 16px/1.2 var(--kond); color: var(--aksen); padding-right: 26px; }
.alur p { margin: 0; color: var(--ink-2); font-size: 13px; }
.alur.lepas div::before { content: none; }
.alur.nanti h3 { color: var(--ink-2); }

.kotak-gambar { position: fixed; inset: 0; background: #050a10e8; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.kotak-gambar[hidden] { display: none; }
.kotak-gambar img { max-width: 100%; max-height: calc(100% - 50px); background: #fff; border-radius: 4px; }
.kotak-gambar p { color: var(--ink-2); margin: 10px 0 0; }
.kotak-gambar button { position: absolute; top: 12px; right: 18px; background: none; border: 0; color: var(--ink); font-size: 32px; cursor: pointer; }
.toast { position: fixed; bottom: calc(var(--bawah, 78px) + 6px);   /* di atas bilah waktu (atasan 27 Okt) */ left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--aksen-2);
  padding: 10px 16px; border-radius: 8px; z-index: 30; box-shadow: 0 8px 30px #0008; }
.kosong { color: var(--redup); padding: 30px; text-align: center; }

@media (max-width: 900px) {
  .atas { height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 8px; }
  .tab { order: 3; width: 100%; overflow-x: auto; }
  .pembuat { padding-left: 10px; }
  .pembuat img { height: 20px; }
  body { overflow: auto; }
  #tab-peta.aktif { flex-direction: column; height: auto; }
  .samping { width: 100%; border-right: 0; }
  .peta-bungkus { height: 70vh; }
  .laci.buka { width: 100%; }
  #isi-laci { width: 100%; }
  .isi-lebar { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* rincian siklus per pulau */
.daftar-pulau .panah { display: inline-block; color: var(--redup); font-size: 10px; transition: transform .15s; }
.daftar-pulau li.buka { background: var(--panel-2); }
.daftar-pulau li.buka .panah { transform: rotate(90deg); }
.rinci { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--garis-2); cursor: default; display: grid; gap: 6px; }
.rinci .dua b { font-size: 11.5px; }
.catatan-kecil { font-size: 11.5px; color: var(--ink-2); border-left: 2px solid var(--garis-2); padding-left: 7px; }
.catatan-kecil.basi { border-color: var(--siaga); color: var(--siaga); }
/* daftar pulau / DAS */
.segmen { display: flex; border: 1px solid var(--garis-2); border-radius: 7px; overflow: hidden; margin-bottom: 10px; }
.segmen button { flex: 1; background: none; border: 0; padding: 7px; cursor: pointer; color: var(--ink-2); font-weight: 500; }
.segmen button[aria-selected="true"] { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--aksen); }
.petunjuk { margin: 8px 0 6px; }
.saring-aktif { display: inline-block; margin-top: 4px; color: var(--ink); }
.kendali-das { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.kendali-das select { flex: 1; min-width: 0; padding: 5px 8px; }
.daftar-das { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.daftar-das li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.daftar-das li:hover { background: var(--panel-2); }
.daftar-das li.aktif { background: var(--panel-2); box-shadow: inset 3px 0 0 #fff; }
.daftar-das .lencana { justify-self: end; }
.daftar-das .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daftar-das .mini-bar { width: 100%; height: 5px; grid-column: 1 / -1; }
.daftar-das .kecil { grid-column: 1 / -1; }

/* atas peta: kendali mengambang */
.peta-bungkus .maplibregl-ctrl-bottom-right, .peta-bungkus .maplibregl-ctrl-bottom-left { bottom: var(--bawah, 78px); }
.kendali-ikon button svg { width: 18px; height: 18px; fill: none; stroke: #e4ecf4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kendali-ikon button.aktif { background: var(--aksen-2) !important; }
.panel-lapisan { position: absolute; top: 10px; right: 52px; z-index: 4; width: 270px; max-height: calc(100% - var(--bawah, 78px) - 20px); overflow-y: auto;
  background: var(--kaca); border: 1px solid var(--garis-kaca); border-radius: 8px; padding: 10px 14px 12px; backdrop-filter: var(--kabur); -webkit-backdrop-filter: var(--kabur); box-shadow: 0 4px 18px #0007; }
.panel-lapisan[hidden] { display: none; }
.panel-lapisan h2 { margin: 0 0 6px; font: 600 11.5px/1 var(--kond); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.panel-lapisan .saklar { font-size: 13px; padding: 4px 0; align-items: flex-start; }
.panel-lapisan .saklar input + span { margin-top: 1px; }
.saklar .teks small { display: block; color: var(--redup); font-size: 11px; line-height: 1.3; }
.tombol-lapor { position: absolute; top: 10px; left: 10px; z-index: 4; background: var(--panel); border: 1px solid #c58cff; color: var(--ink);
  border-radius: 8px; padding: 8px 14px 8px 32px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 18px #0007; }
.tombol-lapor::before { content: ""; position: absolute; left: 12px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%;
  background: #c58cff; box-shadow: 0 0 0 2px #fff inset; }
.tombol-lapor:hover { background: var(--panel-2); }
.tombol-lapor.aktif { background: #c58cff; color: #1b0f2a; }
.tombol-lapor.aktif::before { background: #fff; }
.tombol-aman { top: 54px; border-color: #3dbb8a; }
.tombol-aman::before { background: #3dbb8a; }
.tombol-aman.aktif { background: #3dbb8a; color: #08231a; }
.bagikan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bagikan .tombol { margin: 0; display: block; text-align: center; text-decoration: none; font: 500 12.5px/1.4 var(--sans); }
.bagikan .tombol.lebar { grid-column: 1 / -1; }
.tombol-bagikan { cursor: pointer; font-family: inherit; }
.tombol-bagikan:hover { border-color: var(--aksen); color: var(--ink); }
.legenda-peta { position: absolute; left: 10px; bottom: calc(var(--bawah, 78px) + 6px); z-index: 4; width: 236px; max-height: calc(100% - var(--bawah, 78px) - 80px); overflow-y: auto;
  background: var(--kaca); border: 1px solid var(--garis-kaca); border-radius: 8px; backdrop-filter: var(--kabur); -webkit-backdrop-filter: var(--kabur); box-shadow: 0 4px 18px #0007; }
.legenda-peta .kepala { width: 100%; display: flex; justify-content: space-between; background: none; border: 0; padding: 8px 12px; cursor: pointer;
  font: 600 11.5px/1 var(--kond); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.legenda-peta .isi { padding: 0 12px 10px; }
.legenda-peta h3 { margin: 9px 0 4px; font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.legenda-peta .leg { font-size: 12px; padding: 1px 0; }
.kisi-leg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.kisi-leg .leg { white-space: nowrap; }
.kisi-leg .kecil { font-size: 10.5px; }
.legenda-peta h3:first-child { margin-top: 0; }
.leg i.garis { width: 22px; height: 0; border-radius: 0; }
.leg i.gradasi { width: 100%; height: 9px; border-radius: 2px; }
.baris-hujan { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.baris-hujan span { display: flex; align-items: center; gap: 5px; }
.baris-hujan i { width: 12px; height: 12px; border-radius: 2px; }
.waktu-bar { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 8px;
  background: var(--kaca-pekat); border: 1px solid var(--garis-kaca); border-radius: 10px; padding: 8px 12px; backdrop-filter: var(--kabur); -webkit-backdrop-filter: var(--kabur); box-shadow: 0 4px 18px #0008; }
.waktu-bar button, .waktu-bar select { background: var(--panel-2); border: 1px solid var(--garis-2); border-radius: 6px; height: 32px; color: var(--ink); cursor: pointer; flex: none; }
.waktu-bar button { width: 32px; font-size: 15px; }
.waktu-bar .putar { width: 42px; height: 42px; border-radius: 50%; background: var(--aksen-2); border-color: var(--aksen-2); color: #fff; font-size: 14px; }
.waktu-bar select { padding: 0 6px; }
.waktu-bar .ke-terbaru { width: auto; padding: 0 12px; background: var(--siaga); border-color: var(--siaga); color: #1a0f05; font-weight: 600; }
.waktu-tengah { flex: 1; min-width: 0; }
.waktu-atas { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; white-space: nowrap; overflow: hidden; }
#geser { width: 100%; accent-color: var(--aksen); margin: 4px 0 0; }
.geser-ujung { display: flex; justify-content: space-between; }
.hijau { color: var(--normal); } .oranye { color: var(--siaga); }
.tombol { margin-top: 8px; width: 100%; background: var(--aksen-2); border: 0; border-radius: 6px; padding: 7px; cursor: pointer; color: #fff; font-weight: 500; }
.tombol:disabled { opacity: .6; cursor: wait; }
.pita-arsip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; background: #2a1a0ccc; border: 1px solid var(--siaga);
  color: #ffd9b8; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; display: flex; gap: 10px; align-items: center; backdrop-filter: blur(4px); max-width: calc(100% - 360px); }
.pita-arsip[hidden] { display: none; }
.pita-arsip button { background: var(--siaga); border: 0; color: #1a0f05; border-radius: 5px; padding: 3px 9px; cursor: pointer; font-weight: 600; white-space: nowrap; }

/* popup peta (laporan, DAS) */
.popup-gelap .maplibregl-popup-content { background: var(--panel); color: var(--ink); border: 1px solid var(--garis-2); border-radius: 8px; padding: 12px 14px; box-shadow: 0 8px 30px #000a; }
.popup-gelap .maplibregl-popup-tip { border-top-color: var(--garis-2) !important; border-bottom-color: var(--garis-2) !important; }
.popup-gelap .maplibregl-popup-close-button { color: var(--ink-2); font-size: 18px; padding: 2px 7px; }
.popup-gelap h4 { margin: 0 18px 4px 0; font: 600 16px/1.2 var(--kond); }
.popup-gelap p { margin: 8px 0; font-size: 13px; }
.form-lapor { display: grid; gap: 8px; font-size: 12.5px; }
.form-lapor label { display: grid; gap: 3px; color: var(--ink-2); }
.form-lapor input, .form-lapor select, .form-lapor textarea { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--garis-2); color: var(--ink); border-radius: 5px; padding: 6px 8px; font: inherit; }
.form-lapor textarea { resize: vertical; }
.form-lapor input::placeholder, .form-lapor textarea::placeholder { color: var(--redup); }
.form-lapor input[type="radio"] { width: auto; accent-color: var(--aksen); }
.form-lapor .tombol { margin-top: 2px; }
.dua-input > label { min-width: 0; }
.form-lapor fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.form-lapor legend { color: var(--ink-2); margin-bottom: 3px; padding: 0; }
.form-lapor fieldset label { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.dua-input { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.galat-form { color: var(--awas); margin: 0; }
.form-lapor .jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* terdampak di laci */
.kisi-terdampak b { font-size: 20px; }

/* validasi: peta kejadian */
.vpeta { display: grid; grid-template-columns: 270px 1fr; gap: 12px; margin-bottom: 8px; }
.daftar-kejadian { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 620px; overflow-y: auto; }
.daftar-kejadian li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--garis); }
.daftar-kejadian li b { font-size: 13px; font-weight: 600; }
.daftar-kejadian li .nilai { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.daftar-kejadian li:hover { background: var(--panel-2); }
.daftar-kejadian li.aktif { border-color: var(--aksen); background: var(--panel-2); }
.vpeta-peta { position: relative; height: 620px; border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; }
#peta-validasi { position: absolute; inset: 0; }
.vpeta-lapis, .vpeta-legenda, .vpeta-info { position: absolute; z-index: 3; background: #0b1622ee; border: 1px solid var(--garis-2); border-radius: 8px; padding: 8px 12px; backdrop-filter: blur(4px); }
.vpeta-lapis { top: 10px; left: 10px; width: 228px; font-size: 12.5px; }
.vpeta-lapis .saklar { padding: 3px 0; }
.vpeta-lapis .dasar { margin-top: 6px; }
.vpeta-legenda { left: 10px; bottom: 10px; font-size: 11.5px; display: grid; gap: 4px; max-width: 330px; }
.vpeta-info { right: 10px; top: 10px; right: 56px; max-width: 330px; font-size: 12.5px; }
#peta-validasi .maplibregl-ctrl-bottom-right { bottom: 0; }

@media (max-width: 900px) {
  .vpeta { grid-template-columns: 1fr; }
  .daftar-kejadian { max-height: 200px; }
  .waktu-bar { flex-wrap: wrap; }
  .waktu-bar select, .waktu-bar #geser-mundur, .waktu-bar #geser-maju { display: none; }
  .legenda-peta { display: none; }
  .pita-arsip { max-width: calc(100% - 20px); top: 56px; }
}
.panel-lapisan, .legenda-peta, .waktu-bar { transition: background .2s; }
.panel-lapisan:hover, .legenda-peta:hover, .waktu-bar:hover { background: var(--kaca-sentuh); }
/* peta dasar terang (OSM/Terrain/Satelit): kaca 58% tak terbaca di atasnya -> hampir pekat */
body.dasar-terang { --kaca: rgba(11, 22, 34, .9); --kaca-pekat: rgba(11, 22, 34, .92); --kaca-sentuh: rgba(11, 22, 34, .96); }
.panel-lapisan, .legenda-peta, .waktu-bar { text-shadow: 0 1px 2px #000a; }

/* cuaca BMKG di laci titik */
.peringatan-bmkg { border: 1px solid #f2934a; background: rgba(242, 147, 74, .12); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin: 6px 0 8px; }
.peringatan-bmkg > span { display: block; margin-top: 6px; color: var(--ink-2); }
.peringatan-bmkg summary { cursor: pointer; list-style: none; position: relative; padding-right: 84px; }
.peringatan-bmkg summary::-webkit-details-marker { display: none; }
.peringatan-bmkg summary .kecil { display: block; color: var(--redup); }
/* tombol buka/tutup di pojok kanan atas: jelas cara menutup lagi */
.peringatan-bmkg summary::after { content: "Rincian \25BE"; position: absolute; top: 0; right: 0; padding: 2px 9px; border: 1px solid #f2934a;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #f6b07a; }
.peringatan-bmkg[open] summary::after { content: "Tutup \25B4"; }
.peringatan-bmkg summary:hover::after { background: rgba(242, 147, 74, .2); }
.peringatan-bmkg summary:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.cuaca-kini { display: flex; gap: 10px; align-items: center; margin: 6px 0 8px; }
.cuaca-24 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; background: var(--garis); border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.cuaca-24 div { background: var(--panel-2); padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cuaca-24 span { color: var(--redup); font-size: 10.5px; }
.cuaca-24 b { font: 600 13px var(--kond); }
.tip-baris { display: flex; align-items: center; gap: 8px; margin-top: 4px; white-space: nowrap; }
.tip-baris > span + span::before { content: "·"; color: var(--redup); margin-right: 8px; }
.tip-baris .tren { margin-left: 3px; font-style: normal; }
.tip-baris.pipa > span + span::before { content: "|"; }

/* animasi muat (atasan 28 Okt): pembuka tetes air, kerangka panel titik, garis progres peta */
.pembuka { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(70% 60% at 50% 45%, #10263a, var(--bg)); transition: opacity .6s ease, visibility .6s; }
.pembuka.selesai { opacity: 0; visibility: hidden; }
.pembuka { animation: pembuka-pengaman .6s 20s forwards; }   /* app.js lama di singgahan browser / JS gagal: tetap hilang */
@keyframes pembuka-pengaman { to { opacity: 0; visibility: hidden; } }
.pembuka svg { width: 112px; height: 112px; overflow: visible; }
.merek-pembuka { font-family: var(--kond); font-weight: 700; font-size: 22px; letter-spacing: .02em; }
.pembuka .tahap { font-size: 12.5px; color: var(--ink-2); min-height: 1.5em; }
.pembuka .gelombang { animation: pembuka-geser 2.2s linear infinite; }
.pembuka .tinggi-air { animation: pembuka-naik 3.2s ease-in-out infinite alternate; }
@keyframes pembuka-geser { to { transform: translateX(-24px); } }
@keyframes pembuka-naik { from { transform: translateY(6px); } to { transform: translateY(-5px); } }
.pembuka .riak { stroke-dasharray: 34; animation: pembuka-riak 2.2s ease-in-out infinite; }
.pembuka .riak.b { animation-delay: .35s; }
@keyframes pembuka-riak { 0% { stroke-dashoffset: 34; opacity: .2; } 50% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -34; opacity: .2; } }

.kerangka { display: grid; gap: 14px; }
.kerangka b { display: block; border-radius: 5px; background: linear-gradient(100deg, #17293a 30%, #22405a 50%, #17293a 70%) 0 0 / 300% 100%; animation: kilau 1.3s linear infinite; }
@keyframes kilau { from { background-position: 100% 0; } to { background-position: 0 0; } }
.kerangka .k-judul { height: 24px; width: 60%; } .kerangka .k-sub { height: 12px; width: 80%; }
.kerangka .k-lencana { display: flex; gap: 6px; } .kerangka .k-lencana b { height: 22px; width: 64px; border-radius: 11px; }
.kerangka .k-angka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .kerangka .k-angka b { height: 58px; }
.kerangka .k-grafik { height: 180px; }

.atas { position: relative; }
.progres { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity .25s; }
.progres.jalan { opacity: 1; transition-delay: .25s; }          /* muat < 0,25 s tak berkedip */
.progres::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--aksen) 40%, #9be3ff 60%, transparent); animation: lari 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes lari { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .pembuka .gelombang, .pembuka .tinggi-air, .pembuka .riak, .kerangka b, .progres::before { animation: none; }
  .progres::before { left: 0; width: 100%; }
}
/* tab tepat di tengah layar (sisi kanan header lebih lebar sejak logo Bengawan); layar sempit: ikut alur flex */
@media (min-width: 1100px) { .atas .tab { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; } .atas .jam { margin-left: auto; } }
/* tombol layar penuh (ruang kendali): Fullscreen API, ikon berganti saat aktif */
.layar-penuh { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--garis); border-radius: 8px; cursor: pointer; color: var(--ink-2); }
.layar-penuh:hover { color: var(--ink); border-color: var(--garis-2); }
.layar-penuh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.layar-penuh[aria-pressed="true"] { color: var(--aksen); }