:root {
  --bg:#f3f6f2; --card:#ffffff; --ink:#1c2a24; --muted:#5d6d65; --line:#dfe7e1; --soft:#eef3ef;
  --emerald:#1f7a57; --emerald-ink:#0f5139;
  --ok:#1f9d6b; --warn:#d99a06; --alert:#c2410c; --off:#8a958f;
  --s1:#3fae7a; --s2:#9cc64b; --s3:#f0c23b; --s4:#ef8a2c; --s5:#d23b2a;
  --shadow:0 1px 2px rgba(16,40,30,.06), 0 4px 16px rgba(16,40,30,.06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f1613; --card:#17211c; --ink:#e4ece7; --muted:#9db0a6; --line:#26352e; --soft:#1d2a24;
          --shadow:0 1px 2px rgba(0,0,0,.3); }
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg);
       color:var(--ink); line-height:1.4; }
a { color:inherit; }
h1, h2, h3 { margin:0; }

/* ---------- header ---------- */
.top { display:flex; justify-content:space-between; align-items:center; gap:.8rem 1rem; flex-wrap:wrap;
       padding:.9rem 16px; background:var(--emerald); color:#fff; }
.brand { display:flex; align-items:center; gap:.75rem; min-width:0; }
.brand-logo { width:52px; height:52px; padding:3px; border-radius:12px; background:#fff; flex:none;
              object-fit:contain; box-shadow:0 1px 4px rgba(0,0,0,.2); }
h1 { font-size:1.2rem; } .sub { margin:.15rem 0 0; font-size:.85rem; opacity:.9; }
.top-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius:99px;
        background:rgba(255,255,255,.16); font-size:.85rem; text-decoration:none; color:inherit; }
a.pill:hover { background:rgba(255,255,255,.26); }
.dot { width:8px; height:8px; border-radius:50%; background:#ffd36b; }
.pill.on .dot { background:#7dffb8; box-shadow:0 0 0 0 rgba(125,255,184,.7); animation:ping 2s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 7px rgba(125,255,184,0); } 100% { box-shadow:0 0 0 0 rgba(125,255,184,0); } }

.banner { padding:.8rem 16px; font-weight:650; background:var(--warn); color:#2b2104; }
.banner.STRONG { background:var(--alert); color:#fff; }
.hidden { display:none !important; }

main { max-width:1120px; margin:0 auto; padding:1rem 16px 2rem; display:grid; gap:1rem; }
main > * { min-width:0; }

/* ---------- hero status gempa ---------- */
.hero { display:grid; grid-template-columns:auto 1fr auto; gap:1rem 1.2rem; align-items:center;
        padding:1.2rem 1.3rem; border-radius:18px; color:#fff; box-shadow:var(--shadow);
        background:linear-gradient(135deg, #1f9d6b, #157a54); }
.hero.WARN { background:linear-gradient(135deg, #e3a40d, #c07f05); color:#231a02; }
.hero.ALERT { background:linear-gradient(135deg, #d9481b, #a52b0b); animation:pulse 1.6s ease-in-out infinite; }
.hero.OFF { background:linear-gradient(135deg, #7d8a84, #5f6b66); }
.hero.NONE { background:linear-gradient(135deg, #6b7a73, #56635d); }
@keyframes pulse { 50% { filter:brightness(1.15); } }
.hero-icon { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:2rem;
             background:rgba(255,255,255,.2); }
.hero-kicker { margin:0; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; opacity:.9; }
.hero h3 { font-size:clamp(1.35rem, 3.6vw, 2rem); line-height:1.15; margin:.15rem 0; }
.hero-desc { margin:0; opacity:.95; }
.hero-meta { text-align:right; font-size:.85rem; opacity:.95; display:grid; gap:.2rem; }
.hero-meta b { font-size:1.1rem; }
@media (max-width:640px) {
  .hero { grid-template-columns:auto 1fr; }
  .hero-meta { grid-column:1 / -1; text-align:left; display:flex; flex-wrap:wrap; gap:.3rem 1rem; }
  .hero-icon { width:52px; height:52px; font-size:1.6rem; }
}

/* ---------- kartu ---------- */
.grid-2 { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.grid-2 > * { min-width:0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem 1.1rem; box-shadow:var(--shadow); }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.8rem; }
.card h3 { font-size:1.05rem; }
.tag { font-size:.75rem; color:var(--muted); background:var(--soft); padding:.2rem .55rem; border-radius:99px; white-space:nowrap; }
.muted { color:var(--muted); }

/* SIG meter */
.sig-bar { position:relative; display:grid; grid-template-columns:repeat(5, 1fr); height:34px; border-radius:10px; overflow:visible; }
.sig-seg { display:grid; place-items:center; font-weight:700; font-size:.85rem; color:#1d1d1d; opacity:.45; transition:opacity .3s; }
.sig-seg.active { opacity:1; }
.s1 { background:var(--s1); border-radius:10px 0 0 10px; } .s2 { background:var(--s2); } .s3 { background:var(--s3); }
.s4 { background:var(--s4); } .s5 { background:var(--s5); border-radius:0 10px 10px 0; color:#fff; }
.sig-needle { position:absolute; top:-7px; bottom:-7px; width:4px; margin-left:-2px; left:2%; border-radius:4px;
              background:var(--ink); box-shadow:0 0 0 2px var(--card); transition:left .6s cubic-bezier(.2,.8,.2,1); }
.sig-legend { display:grid; grid-template-columns:repeat(5, 1fr); font-size:.68rem; color:var(--muted); margin-top:.45rem; text-align:center; gap:.2rem; }
.sig-now { margin:.9rem 0 .4rem; } .sig-now b { font-size:1.15rem; }
.spark-row { display:grid; gap:.2rem; }
.spark { width:100%; height:48px; background:var(--soft); border-radius:8px; }
.spark path.l { fill:none; stroke:var(--emerald); stroke-width:2; vector-effect:non-scaling-stroke; }
.spark path.a { fill:color-mix(in srgb, var(--emerald) 18%, transparent); stroke:none; }

/* peta */
.map { height:250px; border-radius:12px; overflow:hidden; background:var(--soft); border:1px solid var(--line); z-index:0; }
.map-empty { height:100%; display:grid; place-items:center; color:var(--muted); font-size:.9rem; text-align:center; padding:1rem; }
.legend { display:flex; gap:1rem; list-style:none; padding:0; margin:.6rem 0 0; font-size:.8rem; color:var(--muted); }
.lg { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:.35rem; vertical-align:-1px; }
.lg.ok { background:var(--ok); } .lg.alert { background:var(--alert); } .lg.off { background:var(--off); }
.mk { width:16px; height:16px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.mk.ok { background:var(--ok); } .mk.alert { background:var(--alert); animation:pulse 1s infinite; } .mk.off { background:var(--off); }
.mk.site { background:#1d4ed8; width:20px; height:20px; border-radius:6px; }

/* bagian halaman */
main { gap:1.6rem; }
.section { display:grid; gap:.8rem; scroll-margin-top:12px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap;
                padding-bottom:.45rem; border-bottom:2px solid var(--line); }
.section-title { display:flex; gap:.45rem; align-items:center; font-size:1.25rem; }

/* strip peringatan gempa (tampil di atas saat getaran/darurat) */
.eq-alert { display:block; position:sticky; top:0; z-index:500; padding:.75rem 16px; font-weight:700; text-decoration:none;
            color:#fff; background:var(--alert); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.eq-alert.WARN { background:var(--warn); color:#231a02; }
.eq-alert.ALERT { animation:pulse 1.6s ease-in-out infinite; }
.cards { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.85rem .95rem; box-shadow:var(--shadow);
        display:grid; gap:.25rem; min-width:0; }
.tile .lbl { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.tile .val { font-size:1.6rem; font-weight:750; line-height:1.1; }
.tile .val small { font-size:.9rem; font-weight:600; color:var(--muted); }
.tile .foot { font-size:.82rem; color:var(--muted); }
.tile.na { opacity:.55; } .tile.na .val { font-size:1rem; font-weight:600; color:var(--muted); }
.chip { display:inline-block; font-size:.75rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; width:max-content; }
.chip.ok { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.chip.warn { background:color-mix(in srgb, var(--warn) 22%, transparent); color:#a26f00; }
.chip.alert { background:color-mix(in srgb, var(--alert) 18%, transparent); color:var(--alert); }
.chip.off { background:var(--soft); color:var(--muted); }
@media (prefers-color-scheme: dark) { .chip.warn { color:#f3c64f; } }
.meter { height:8px; background:var(--soft); border-radius:99px; overflow:hidden; margin-top:.2rem; }
.meter i { display:block; height:100%; background:var(--emerald); border-radius:99px; transition:width .6s; }

/* node */
.nodes { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.node { border:1px solid var(--line); border-radius:12px; padding:.7rem .85rem; display:grid; gap:.3rem; }
.node-top { display:flex; justify-content:space-between; gap:.5rem; align-items:center; }
.node b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.node small { color:var(--muted); }

/* edukasi */
.edu summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.edu summary::-webkit-details-marker { display:none; }
.edu summary::after { content:"＋"; font-size:1.2rem; color:var(--muted); }
.edu[open] summary::after { content:"－"; }
.edu-grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin-top:.9rem; }
.edu-grid div { background:var(--soft); border-radius:12px; padding:.75rem .85rem; }
.edu-grid p { margin:.3rem 0 0; font-size:.9rem; color:var(--muted); }

.disclaimer { font-size:.8rem; color:var(--muted); margin:0; }
.stale { color:var(--alert); font-weight:600; }

/* Leaflet di tema gelap */
@media (prefers-color-scheme: dark) { .leaflet-tile { filter:brightness(.75) contrast(1.1) saturate(.8); } }
.leaflet-container { font:inherit; }