/* ═══════════════════════════════════════════════════════════════════
   disaster.css — pantau bencana.

   Bahasa rupa: ketenangan nixtio (ruang lapang, tipografi tegas, bayangan
   lembut berlapis) bertemu ketegasan Hyprland (permukaan kaca ber-blur,
   garis tipis presisi, aksen bercahaya, sudut membulat konsisten). Hanya
   mode terang — kontras dijaga agar teks selalu terbaca di atas peta.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#132A21; --ink2:#3A4B43; --mut:#7C8A82;
  --hijau:#1A3A2E; --mint:#5BAD8F; --lime:#D6F24B;
  --kaca:rgba(255,255,255,.72); --kaca-2:rgba(255,255,255,.86);
  --garis:rgba(20,45,32,.10); --garis-2:rgba(20,45,32,.16);
  --t1:#8B968F; --t2:#E3B95C; --t3:#E07A3C; --t4:#D24B3C;
  --bayang-s:0 1px 2px rgba(20,45,32,.06),0 8px 24px rgba(20,45,32,.10);
  --bayang-l:0 2px 6px rgba(20,45,32,.08),0 22px 60px rgba(20,45,32,.16);
  --r:16px; --r-s:11px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.ds{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);
  background:#EDF3EE;overflow:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── Topbar ── */
.ds-top{position:fixed;top:0;left:0;right:0;z-index:40;height:60px;
  display:flex;align-items:center;gap:14px;padding:0 clamp(12px,3vw,22px);
  background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.66));
  backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  border-bottom:1px solid var(--garis)}
.ds-brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.ds-logo{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
  color:var(--mint);background:radial-gradient(120% 120% at 30% 20%,#204636,#12281F);
  box-shadow:0 6px 18px rgba(26,58,46,.32),inset 0 1px 0 rgba(255,255,255,.12)}
.ds-logo svg{width:23px;height:23px}
.ds-brand-t{display:flex;flex-direction:column;line-height:1.04}
.ds-brand-t b{font:600 16px Fraunces,serif;letter-spacing:-.01em}
.ds-brand-t i{font-style:normal;font-size:11px;color:var(--mut);letter-spacing:.03em}
.ds-live{display:flex;align-items:center;gap:7px;font:600 12px Inter;color:var(--ink2);
  padding:6px 12px;border-radius:99px;background:var(--kaca);border:1px solid var(--garis)}
.ds-live-dot{width:8px;height:8px;border-radius:99px;background:var(--mint);
  box-shadow:0 0 0 0 rgba(91,173,143,.6);animation:dsPing 2.4s ease-out infinite}
@keyframes dsPing{0%{box-shadow:0 0 0 0 rgba(91,173,143,.55)}70%,100%{box-shadow:0 0 0 9px rgba(91,173,143,0)}}
.ds-top-r{margin-left:auto;display:flex;align-items:center;gap:9px}
.ds-reload{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  border:1px solid var(--garis);background:var(--kaca);color:var(--ink2);transition:.16s}
.ds-reload:hover{background:#fff;box-shadow:var(--bayang-s)}
.ds-reload svg{width:19px;height:19px}
.ds-reload.spin svg{animation:dsSpin .7s linear infinite}
@keyframes dsSpin{to{transform:rotate(360deg)}}
.ds-report{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;
  border-radius:12px;font:600 13.5px Inter;color:#0F1512;border:0;
  background:linear-gradient(135deg,var(--lime),#C7E63F);
  box-shadow:0 6px 18px rgba(180,220,60,.4),inset 0 1px 0 rgba(255,255,255,.5);transition:.16s}
.ds-report:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(180,220,60,.5)}
.ds-report svg{width:18px;height:18px}

/* ── Banner peringatan ── */
.ds-alert{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:38;
  display:flex;align-items:center;gap:13px;max-width:min(680px,92vw);
  padding:11px 18px 11px 15px;border-radius:14px;color:#fff;
  box-shadow:var(--bayang-l);animation:dsDrop .5s cubic-bezier(.2,.9,.3,1)}
@keyframes dsDrop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.ds-alert.tier-2{background:linear-gradient(120deg,#E3B95C,#D9A83C);color:#3A2A05}
.ds-alert.tier-3{background:linear-gradient(120deg,#E07A3C,#D2652A)}
.ds-alert.tier-4{background:linear-gradient(120deg,#D24B3C,#B93528)}
.ds-alert-pulse{width:12px;height:12px;border-radius:99px;background:currentColor;opacity:.9;
  flex-shrink:0;box-shadow:0 0 0 0 currentColor;animation:dsAP 1.6s ease-out infinite}
@keyframes dsAP{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.ds-alert-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ds-alert-tx b{font:600 13.5px Inter}
.ds-alert-tx span{font-size:12px;opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Panggung & peta ── */
.ds-stage{position:fixed;inset:60px 0 0;overflow:hidden}
.ds-map{position:absolute;inset:0;cursor:grab;background:
  radial-gradient(60% 50% at 30% 10%,rgba(91,173,143,.10),transparent 60%),
  radial-gradient(60% 50% at 80% 90%,rgba(214,242,75,.10),transparent 62%),#DCE8E0}
.ds-map.geser{cursor:grabbing}
.ds-tiles{position:absolute;inset:0}
.ds-tiles img{position:absolute;width:256px;height:256px;user-select:none;-webkit-user-drag:none;
  filter:saturate(.92) brightness(1.02)}
.ds-markers{position:absolute;inset:0;pointer-events:none}

/* Marker: cakram tier + glyph bahaya, ekor kecil seperti pin. */
.ds-mk{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  width:30px;height:30px;transition:transform .12s}
.ds-mk:hover{transform:translate(-50%,-50%) scale(1.18);z-index:5}
.ds-mk-d{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:2px solid #fff;box-shadow:0 3px 9px rgba(0,0,0,.28)}
.ds-mk-d svg{width:16px;height:16px}
.ds-mk.official .ds-mk-d{border-style:solid}
.ds-mk.citizen  .ds-mk-d{border-style:dashed}     /* warga = tepi putus-putus */
.ds-mk.t3,.ds-mk.t4{animation:dsMk 2.2s ease-in-out infinite}
@keyframes dsMk{0%,100%{filter:drop-shadow(0 0 0 rgba(210,75,60,0))}50%{filter:drop-shadow(0 0 7px rgba(210,75,60,.55))}}
.ds-mk .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:0;
  animation:dsRing 2.4s ease-out infinite}
@keyframes dsRing{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(1.4)}}

/* ── Kontrol zoom ── */
.ds-zoom{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;
  display:flex;flex-direction:column;gap:6px}
.ds-zoom button{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  border:1px solid var(--garis);background:var(--kaca-2);backdrop-filter:blur(14px);color:var(--ink);
  box-shadow:var(--bayang-s);transition:.14s}
.ds-zoom button:hover{background:#fff;transform:translateY(-1px)}
.ds-zoom svg{width:20px;height:20px}

/* ── Filter (kiri) ── */
.ds-filters{position:absolute;left:16px;top:16px;z-index:20;width:212px;
  display:flex;flex-direction:column;gap:15px;padding:15px;border-radius:var(--r);
  background:var(--kaca-2);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--garis);box-shadow:var(--bayang-l)}
.ds-fgrp{display:flex;flex-direction:column;gap:8px}
.ds-fh{font:700 10.5px Inter;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.ds-chips{display:flex;flex-wrap:wrap;gap:6px}
.ds-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
  font:600 11.5px Inter;color:var(--mut);border:1px solid var(--garis);background:rgba(255,255,255,.5);
  transition:.14s}
.ds-chip.on{color:var(--ink);background:#fff;border-color:var(--garis-2);box-shadow:0 1px 3px rgba(20,45,32,.08)}
.ds-chip:not(.on){opacity:.55;filter:grayscale(.4)}
.ds-chip .dot{width:9px;height:9px;border-radius:99px;background:var(--mut);flex-shrink:0}
.ds-chip .ic{width:14px;height:14px}
.dot.official{background:var(--hijau)} .dot.citizen{background:var(--mint);
  box-shadow:inset 0 0 0 1.5px #fff,0 0 0 1px var(--mint)}
.dot.t1{background:var(--t1)} .dot.t2{background:var(--t2)}
.dot.t3{background:var(--t3)} .dot.t4{background:var(--t4)}

/* ── Panel daftar (kanan) ── */
.ds-list{position:absolute;right:16px;top:16px;z-index:19;width:300px;max-height:calc(100% - 90px);
  display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:var(--kaca-2);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--garis);box-shadow:var(--bayang-l)}
.ds-list-h{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;
  border-bottom:1px solid var(--garis)}
.ds-list-h b{font:600 14px Fraunces,serif}
.ds-list-h span{font:600 11px Inter;color:var(--mut);padding:3px 9px;border-radius:99px;background:rgba(20,45,32,.06)}
.ds-list-body{overflow-y:auto;padding:6px;scrollbar-width:thin}
.ds-row{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:12px;cursor:pointer;transition:.12s}
.ds-row:hover{background:#fff}
.ds-row.aktif{background:#fff;box-shadow:0 1px 3px rgba(20,45,32,.1)}
.ds-row-ic{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;color:#fff}
.ds-row-ic svg{width:17px;height:17px}
.ds-row-b{min-width:0;flex:1}
.ds-row-t{font:600 12.5px Inter;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-row-m{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:11px;color:var(--mut)}
.ds-badge{font:700 9px Inter;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:6px}
.ds-badge.off{color:var(--hijau);background:rgba(26,58,46,.1)}
.ds-badge.cit{color:#1a7a55;background:rgba(91,173,143,.16)}
.ds-badge.unv{color:#B26B00;background:rgba(227,185,92,.2)}
.ds-cred{padding:8px 14px;font-size:10px;color:var(--mut);border-top:1px solid var(--garis)}

/* ── Popup peristiwa ── */
.ds-pop{position:absolute;z-index:30;width:250px;transform:translate(-50%,calc(-100% - 18px));
  background:var(--kaca-2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--garis-2);border-radius:14px;box-shadow:var(--bayang-l);
  padding:13px 14px;animation:dsPop .16s ease-out}
@keyframes dsPop{from{opacity:0;transform:translate(-50%,calc(-100% - 10px))}}
.ds-pop::after{content:'';position:absolute;left:50%;bottom:-8px;width:16px;height:16px;
  transform:translateX(-50%) rotate(45deg);background:var(--kaca-2);
  border-right:1px solid var(--garis-2);border-bottom:1px solid var(--garis-2)}
.ds-pop-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ds-pop-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.ds-pop-ic svg{width:17px;height:17px}
.ds-pop-h b{font:600 13.5px Inter;line-height:1.25}
.ds-pop-tier{font:700 9.5px Inter;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:6px;color:#fff;margin-left:auto;flex-shrink:0}
.ds-pop p{margin:0 0 7px;font-size:12px;color:var(--ink2);line-height:1.45}
.ds-pop-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--mut)}
.ds-pop a.src{display:inline-flex;align-items:center;gap:4px;color:#2E7A5C;font-weight:600}
.ds-pop a.src svg{width:12px;height:12px}
.ds-pop-x{position:absolute;top:8px;right:9px;width:22px;height:22px;border:0;background:none;
  color:var(--mut);font-size:18px;line-height:1;border-radius:6px}
.ds-pop-x:hover{background:rgba(20,45,32,.07)}

/* ── Disclaimer melekat ── */
.ds-disc{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:22;
  display:flex;align-items:flex-start;gap:10px;max-width:min(400px,calc(100vw - 32px));
  padding:11px 12px 11px 13px;border-radius:13px;background:rgba(255,251,240,.92);
  backdrop-filter:blur(14px);border:1px solid rgba(227,185,92,.45);box-shadow:var(--bayang-s)}
.ds-disc svg{width:18px;height:18px;color:#C08A1E;flex-shrink:0;margin-top:1px}
.ds-disc p{margin:0;font-size:11px;line-height:1.5;color:#5A4A1E}
.ds-disc b{color:#8A5A00}
.ds-disc button{flex-shrink:0;width:22px;height:22px;border:0;background:none;color:#B08A3E;font-size:17px;border-radius:6px}
.ds-disc button:hover{background:rgba(227,185,92,.2)}
.ds-disc.tutup{display:none}

/* ── Modal laporan ── */
.ds-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;
  background:rgba(15,25,20,.4);backdrop-filter:blur(6px);animation:dsFade .18s ease}
@keyframes dsFade{from{opacity:0}}
.ds-modal-card{width:min(440px,100%);max-height:90vh;overflow:auto;border-radius:20px;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:dsUp .24s cubic-bezier(.2,.9,.3,1)}
@keyframes dsUp{from{opacity:0;transform:translateY(16px)}}
.ds-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--garis)}
.ds-modal-h b{font:600 16px Fraunces,serif}
.ds-modal-h button{width:28px;height:28px;border:0;background:rgba(20,45,32,.06);border-radius:8px;font-size:19px;color:var(--ink2)}
.ds-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.ds-lbl{font:600 11.5px Inter;color:var(--ink2);margin-top:9px}
.ds-inp{width:100%;padding:10px 12px;border-radius:11px;border:1px solid var(--garis-2);
  font:500 13.5px Inter;color:var(--ink);background:#FAFCFB;transition:.14s}
.ds-inp:focus{outline:0;border-color:var(--mint);box-shadow:0 0 0 3px rgba(91,173,143,.18);background:#fff}
textarea.ds-inp{resize:vertical}
.ds-loc{display:flex;align-items:center;gap:10px;margin-top:11px}
.ds-geo{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:11px;
  border:1px solid var(--garis-2);background:#fff;font:600 12.5px Inter;color:var(--hijau)}
.ds-geo:hover{background:#F2F7F4}
.ds-geo svg{width:16px;height:16px}
.ds-geo.ok{border-color:var(--mint);color:#1a7a55;background:rgba(91,173,143,.1)}
.ds-loctx{font-size:11.5px;color:var(--mut)}
.ds-note{margin:13px 0 0;font-size:11px;line-height:1.5;color:var(--mut);
  padding:10px 12px;border-radius:11px;background:rgba(214,242,75,.14);border:1px solid rgba(180,210,60,.3)}
.ds-note b{color:#7A6A00}
.ds-modal-f{display:flex;gap:9px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--garis)}
.ds-btn{padding:10px 18px;border-radius:11px;border:0;font:600 13px Inter}
.ds-btn.ghost{background:rgba(20,45,32,.06);color:var(--ink2)}
.ds-btn.go{background:linear-gradient(135deg,var(--hijau),#2E7A5C);color:#fff;box-shadow:0 6px 16px rgba(26,58,46,.3)}
.ds-btn.go:disabled{opacity:.5}

/* ── Ponsel: panel jadi lembar bawah yang ringkas ── */
@media (max-width:720px){
  .ds-filters{left:10px;top:10px;right:10px;width:auto;flex-direction:row;gap:12px;overflow-x:auto;padding:11px}
  .ds-fgrp{flex-shrink:0}
  .ds-list{left:10px;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;
    max-height:38vh;flex-direction:column}
  .ds-disc{display:none}   /* tetap dapat dibuka lewat tombol info bila perlu; ruang layar mahal di ponsel */
  .ds-zoom{bottom:calc(42vh + 16px)}
  .ds-alert{top:64px;max-width:calc(100vw - 20px)}
}
@media (prefers-reduced-motion:reduce){
  .ds-live-dot,.ds-alert-pulse,.ds-mk,.ds-mk .ring{animation:none!important}
}