:root {
  --bg: #0e0f10;
  --layer: #151618;
  --layer2: #1c1e21;
  --layer3: #24272b;
  --border: #2a2d31;
  --border2: #3c4047;
  --text: #f1f2f3;
  --text2: #b8bcc3;
  --text3: #7b818a;
  --accent: #ff4d2e;
  --accent-dim: #ff4d2e22;
  --ok: #3ddc84;
  --warn: #f5c518;
  --info: #4c8dff;
  --down: #ff5468;
  --up: #3ddc84;

  --c-demo: #ff5c8a;
  --c-kebakaran: #ff8a1f;
  --c-banjir: #33b1ff;
  --c-bencana: #f5c518;
  --c-insiden: #be95ff;
  --c-kriminal: #ff6b6b;
  --c-siber: #3ddbd9;
  --c-kesehatan: #42be65;
  --c-ekonomi: #a2a9b0;
  --c-politik: #d4bbff;
  --c-cuaca: #8ea2ff;
  --c-umum: #6f7680;

  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --disp: "Bricolage Grotesque", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --hdr: 48px;
  --tick: 38px;
  --sb: 36px;
  --foot: 26px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--sans);
  display: grid;
  grid-template-rows: var(--hdr) var(--tick) minmax(0, 1fr) var(--sb) var(--foot);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
input { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text3); flex: none; }
.dot-live { background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.6s infinite; }
.dot-ok { background: var(--ok); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #ff4d2e88; } 70% { box-shadow: 0 0 0 7px #ff4d2e00; } 100% { box-shadow: 0 0 0 0 #ff4d2e00; } }

/* ── HEADER ─────────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 14px; border-bottom: 1px solid var(--border); background: var(--layer);
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 26px; height: 26px; color: var(--text); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 700 17px/1 var(--disp); letter-spacing: .04em; }
.brand-tag { font: 500 9.5px/1 var(--mono); color: var(--accent); letter-spacing: .14em; margin-top: 3px; }
.brand-scope {
  font: 500 10.5px var(--mono); color: var(--text3); letter-spacing: .12em; margin-left: 10px;
  padding-left: 12px; border-left: 1px solid var(--border2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-right { display: flex; gap: 8px; flex: none; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px;
  border: 1px solid var(--border2); border-radius: 3px; font: 500 11px var(--mono); letter-spacing: .1em; color: var(--text2);
  background: var(--layer2);
}
.pill b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-sync svg { width: 13px; height: 13px; }
.pill-sync:hover { border-color: var(--text3); color: var(--text); }
.pill-sync.is-busy svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TICKER ─────────────────────────────────────────────── */
.ticker { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); background: var(--bg); min-width: 0; }
.ticker-label {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; flex: none;
  font: 600 10.5px var(--mono); letter-spacing: .14em; color: #fff; background: var(--accent);
}
.ticker-label .dot { background: #fff; animation: none; }
.ticker-viewport { overflow: hidden; flex: 1; position: relative; mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); }
.ticker-track { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; animation: marquee linear infinite; will-change: transform; }
.ticker-viewport:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; border-right: 1px solid var(--border); height: 100%; }
.tk:hover .tk-title { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tk-time { font: 500 11px var(--mono); color: var(--text3); }
.tk-title { font: 600 13px var(--sans); color: var(--text); }
.tk-src { font: 500 9.5px var(--mono); color: var(--text3); letter-spacing: .08em; border: 1px solid var(--border2); padding: 1px 5px; border-radius: 2px; text-transform: uppercase; }
.ticker-empty { padding: 0 16px; color: var(--text3); font: 500 11px var(--mono); }

/* ── GRID ───────────────────────────────────────────────── */
.grid {
  display: grid; min-height: 0; min-width: 0;
  grid-template-columns: minmax(380px, 31%) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.3fr);
  grid-template-rows: 150px minmax(0, 0.62fr) minmax(0, 1fr);
  grid-template-areas:
    "sit  market market market"
    "sit  bmkg   news   tv"
    "cctv bmkg   news   tv";
}
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); position: relative; }
.p-situasi { grid-area: sit; }
.p-cctv { grid-area: cctv; }
.p-situasi .map-wrap { flex: 1 1 auto; border-bottom: 0; }
.quake-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.p-market { grid-area: market; border-right: 0; }
.p-bmkg { grid-area: bmkg; }
.p-news { grid-area: news; }
.p-tv { grid-area: tv; border-right: 0; }

.panel-hd {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; flex: none;
  border-bottom: 1px solid var(--border); background: var(--layer);
}
.panel-hd .num { font: 600 10.5px var(--mono); color: var(--accent); }
.panel-hd h2 { margin: 0; font: 600 11.5px var(--mono); letter-spacing: .14em; white-space: nowrap; }
.hd-meta { margin-left: auto; font: 500 10.5px var(--mono); color: var(--text3); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-meta b { color: var(--text); font-weight: 600; }

.sub-hd { display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 12px; font: 600 10.5px var(--mono); letter-spacing: .14em; color: var(--text2); border-bottom: 1px solid var(--border); flex: none; }
.sub-meta { color: var(--text3); font-weight: 500; letter-spacing: .06em; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  font: 500 10px var(--mono); letter-spacing: .1em; border: 1px solid var(--border2); border-radius: 2px; color: var(--text2);
  background: #0e0f10d9; backdrop-filter: blur(6px);
}
.chip-btn:hover { color: var(--text); border-color: var(--text3); }
.chip-btn[aria-pressed="false"] { opacity: .5; }
.icon-btn { width: 26px; height: 26px; display: inline-grid; place-items: center; border: 1px solid var(--border2); border-radius: 2px; color: var(--text2); font-size: 13px; }
.icon-btn:hover { color: var(--text); border-color: var(--text3); }

.cat { display: inline-flex; align-items: center; gap: 5px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cc, var(--text3)); white-space: nowrap; }
.cat::before { content: ""; width: 6px; height: 6px; background: var(--cc, var(--text3)); border-radius: 1px; }

/* ── 01 SITUASI ─────────────────────────────────────────── */
.map-wrap { position: relative; flex: 1.25 1 0; min-height: 220px; border-bottom: 1px solid var(--border); }
#map { position: absolute; inset: 0; background: #0b0c0d; }
.leaflet-container { font: inherit; background: #0b0c0d; }
.leaflet-control-attribution { background: #0e0f10b3 !important; color: var(--text3) !important; font: 9px var(--mono) !important; }
.leaflet-control-attribution a { color: var(--text2) !important; }
.leaflet-control-zoom { border: 1px solid var(--border2) !important; border-radius: 2px !important; }
.leaflet-control-zoom a { background: var(--layer2) !important; color: var(--text2) !important; border-color: var(--border) !important; width: 26px !important; height: 26px !important; line-height: 26px !important; }
.map-stat { position: absolute; top: 10px; left: 12px; z-index: 500; pointer-events: none; text-shadow: 0 1px 8px #000; }
.map-stat-tag { font: 500 9.5px var(--mono); letter-spacing: .14em; color: var(--text3); }
.map-stat-big { font: 700 44px/1 var(--disp); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.map-stat-big small { font: 600 11px var(--mono); letter-spacing: .14em; color: var(--text2); }
.map-stat-sub { font: 500 10.5px var(--mono); color: var(--text2); letter-spacing: .1em; margin-top: 3px; }
.map-live { position: absolute; top: 10px; right: 12px; z-index: 500; font: 600 10px/1.4 var(--mono); letter-spacing: .1em; color: var(--ok); text-align: right; pointer-events: none; }
.map-live b { color: var(--text2); font-weight: 500; }
.map-tools { position: absolute; left: 10px; bottom: 10px; z-index: 600; display: flex; gap: 6px; }
.z4 .mk-label.t1, .z4 .mk-label.t2, .z5 .mk-label.t1 { display: none; }
.map-hint { position: absolute; right: 48px; bottom: 26px; z-index: 500; font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text3); pointer-events: none; }
.filter-pop {
  position: absolute; left: 10px; bottom: 40px; z-index: 700; width: 230px; padding: 8px;
  background: var(--layer2); border: 1px solid var(--border2); border-radius: 3px; box-shadow: 0 10px 30px #000a;
}
.filter-pop label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 2px; cursor: pointer; }
.filter-pop label:hover { background: var(--layer3); }
.filter-pop input { accent-color: var(--accent); margin: 0; }
.filter-pop .cnt { margin-left: auto; font: 500 10px var(--mono); color: var(--text3); }
.filter-pop .fp-actions { display: flex; gap: 6px; padding: 6px 6px 2px; border-top: 1px solid var(--border); margin-top: 4px; }
.filter-pop .fp-actions button { font: 500 10px var(--mono); letter-spacing: .1em; color: var(--text3); }
.filter-pop .fp-actions button:hover { color: var(--text); }

.mk { position: relative; }
.mk-dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  border-radius: 50%; background: color-mix(in srgb, var(--cc) 35%, transparent); border: 1.5px solid var(--cc);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 55%, transparent);
}
.mk-dot::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--cc); }
.mk.is-siaga .mk-dot { animation: ring 1.8s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cc) 70%, transparent); } 80% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mk-label {
  position: absolute; top: -8px; white-space: nowrap; font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-shadow: 0 0 3px #000, 0 0 6px #000; pointer-events: none;
}
.mk-label b { color: var(--cc); margin-left: 3px; }
.mk:hover .mk-label { color: #fff; }
.qk { border-radius: 50%; border: 1.5px solid var(--c-bencana); background: #f5c51822; transform: translate(-50%, -50%); position: absolute; }
.qk-label { position: absolute; transform: translate(8px, -50%); font: 600 9px var(--mono); color: var(--c-bencana); text-shadow: 0 0 4px #000; white-space: nowrap; }
.leaflet-tooltip.tt { background: var(--layer2); border: 1px solid var(--border2); color: var(--text); border-radius: 2px; font: 12px var(--sans); box-shadow: 0 6px 20px #000a; padding: 6px 8px; max-width: 280px; white-space: normal; }
.leaflet-tooltip.tt::before { display: none; }

.clusters { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cluster-list { overflow-y: auto; flex: 1; }
.cl { display: block; width: 100%; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); border-left: 2px solid transparent; }
.cl:hover { background: var(--layer); border-left-color: var(--cc); }
.cl-top { display: flex; align-items: center; gap: 8px; }
.cl-loc { font: 700 13px var(--sans); }
.cl-lvl { font: 600 9px var(--mono); letter-spacing: .1em; padding: 1px 5px; border-radius: 2px; }
.lvl-siaga { color: #fff; background: var(--accent); }
.lvl-waspada { color: #111; background: var(--warn); }
.lvl-info { color: var(--text2); border: 1px solid var(--border2); }
.cl-src { margin-left: auto; font: 500 10px var(--mono); color: var(--text3); }
.cl-title { margin-top: 4px; color: var(--text2); font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-foot { margin-top: 5px; font: 500 10px var(--mono); color: var(--text3); letter-spacing: .06em; display: flex; gap: 10px; }
.empty { padding: 24px 14px; color: var(--text3); font: 500 11px var(--mono); letter-spacing: .06em; text-align: center; }

.detail { position: absolute; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 5; }
.detail-hd { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border-bottom: 1px solid var(--border); font: 600 10.5px var(--mono); letter-spacing: .14em; flex: none; }
.detail-body { overflow-y: auto; flex: 1; }
.dt-head { padding: 12px; border-bottom: 1px solid var(--border); }
.dt-loc { font: 700 22px/1.1 var(--disp); margin: 6px 0 2px; }
.dt-prov { font: 500 10.5px var(--mono); color: var(--text3); letter-spacing: .08em; }
.dt-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.dt-stats div { padding: 8px 12px; border-right: 1px solid var(--border); }
.dt-stats div:last-child { border-right: 0; }
.dt-stats small { display: block; font: 500 9px var(--mono); letter-spacing: .14em; color: var(--text3); }
.dt-stats b { font: 700 17px var(--disp); }
.tl { position: relative; padding: 10px 12px 10px 26px; border-bottom: 1px solid var(--border); display: block; }
.tl::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--border2); }
.tl::after { content: ""; position: absolute; left: 9px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--text3)); }
.tl:hover { background: var(--layer); }
.tl-meta { font: 500 10px var(--mono); color: var(--text3); letter-spacing: .06em; }
.tl-title { font-weight: 600; margin-top: 2px; }
.tl-desc { color: var(--text2); font-size: 12px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 02 MARKET ──────────────────────────────────────────── */
.market { display: flex; overflow-x: auto; flex: 1; min-height: 0; }
.mq { flex: 0 0 auto; width: 150px; padding: 10px 12px 8px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; position: relative; }
.mq.big { width: 230px; }
.mq-sym { font: 600 10.5px var(--mono); letter-spacing: .1em; color: var(--text2); display: flex; justify-content: space-between; }
.mq-grp { color: var(--text3); font-weight: 500; font-size: 9px; }
.mq-px { font: 700 19px/1.15 var(--disp); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mq.big .mq-px { font-size: 27px; }
.mq-ch { font: 600 10.5px var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.mq svg { margin-top: auto; width: 100%; height: 38px; display: block; }
.mq.big svg { height: 46px; }

/* ── 03 BMKG ────────────────────────────────────────────── */
.quake-latest { padding: 12px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; cursor: pointer; flex: none; }
.quake-latest:hover { background: var(--layer); }
.ql-mag { grid-row: span 3; font: 700 40px/0.95 var(--disp); color: var(--c-bencana); }
.ql-mag small { display: block; font: 600 9px var(--mono); color: var(--text3); letter-spacing: .14em; margin-top: 4px; }
.ql-tag { font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--accent); }
.ql-wil { font-weight: 700; line-height: 1.3; }
.ql-meta { font: 500 10.5px var(--mono); color: var(--text3); letter-spacing: .04em; }
.ql-pot { grid-column: 1 / -1; font: 600 10px var(--mono); letter-spacing: .08em; color: var(--ok); margin-top: 4px; }
.ql-pot.is-warn { color: var(--accent); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex: none; }
.tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tab { padding: 0 11px; height: 32px; font: 600 10px var(--mono); letter-spacing: .12em; color: var(--text3); border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text2); }
.tab.is-on { color: var(--text); border-bottom-color: var(--accent); }
.tab .n { color: var(--text3); font-weight: 500; }
.quake-list { overflow-y: auto; flex: 1; min-height: 0; }
.qr { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; width: 100%; text-align: left; }
.qr:hover { background: var(--layer); }
.qr-mag { font: 700 18px/1 var(--disp); color: var(--c-bencana); padding-top: 2px; }
.qr-mag.m-hi { color: var(--accent); }
.qr-wil { font-weight: 600; font-size: 12.5px; line-height: 1.35; }
.qr-meta { font: 500 10px var(--mono); color: var(--text3); margin-top: 2px; letter-spacing: .04em; }
.qr-cuaca .qr-mag { font-size: 11px; font-family: var(--mono); color: var(--c-cuaca); letter-spacing: .06em; }

/* ── 04 NEWS ────────────────────────────────────────────── */
.search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border-bottom: 1px solid var(--border); color: var(--text3); flex: none; }
.search input { flex: 1; background: none; border: 0; outline: 0; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--text); min-width: 0; }
.search input::placeholder { color: var(--text3); }
.news-list { overflow-y: auto; flex: 1; min-height: 0; }
.nw { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.nw:hover { background: var(--layer); }
.nw:hover .nw-title { color: #fff; }
.nw-time { font: 500 10.5px var(--mono); color: var(--text3); padding-top: 1px; font-variant-numeric: tabular-nums; }
.nw-title { font-weight: 600; font-size: 13px; line-height: 1.38; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; }
.nw-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font: 500 10px var(--mono); color: var(--text3); letter-spacing: .04em; }
.nw-loc { color: var(--text2); }
.nw-loc::before { content: "◉ "; color: var(--text3); }
.nw-img { width: 66px; height: 48px; object-fit: cover; border-radius: 2px; background: var(--layer2); border: 1px solid var(--border); }
.nw.is-siaga .nw-time { color: var(--accent); }

/* ── 05 TV ──────────────────────────────────────────────── */
.tv-grid { display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content; gap: 1px; background: var(--border); overflow-y: auto; flex: 1; min-height: 0; align-content: start; }
.tv { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.tv iframe, .tv video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-poster { position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: center; cursor: pointer; }
.tv-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0008, #000c); }
.tv-play { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #ffffff1f; border: 1px solid #ffffff55; backdrop-filter: blur(4px); }
.tv-play::after { content: ""; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.tv-poster:hover .tv-play { background: var(--accent); border-color: var(--accent); }
.tv-tag { position: absolute; left: 6px; top: 6px; z-index: 2; display: flex; gap: 5px; align-items: center; font: 600 9px var(--mono); letter-spacing: .1em; pointer-events: none; }
.tv-tag .live { background: var(--accent); color: #fff; padding: 1px 5px; border-radius: 2px; }
.tv-tag .off { background: #000a; color: var(--text3); padding: 1px 5px; border-radius: 2px; }
.tv-name { position: absolute; left: 6px; bottom: 5px; z-index: 2; font: 600 10px var(--mono); letter-spacing: .1em; text-shadow: 0 1px 4px #000; pointer-events: none; }
.tv-expand { position: absolute; right: 5px; top: 5px; z-index: 3; width: 22px; height: 22px; border-radius: 2px; background: #000a; font-size: 11px; color: var(--text2); opacity: 0; transition: opacity .15s; }
.tv:hover .tv-expand { opacity: 1; }

/* ── 05 CCTV ────────────────────────────────────────────── */
.cctv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: max-content; gap: 1px; background: var(--border); overflow-y: auto; flex: 1; min-height: 0; align-content: start; }
.cctv-grid > .empty { grid-column: 1 / -1; background: var(--bg); }
.cam { position: relative; aspect-ratio: 16 / 9; background: #08090a center / cover no-repeat; cursor: zoom-in; overflow: hidden; }
.cam::before { content: "CCTV"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 10px var(--mono); letter-spacing: .2em; color: #ffffff22; z-index: 0; }
.cam[style*="background-image"]::before { content: none; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; z-index: 1; }
.cam-st, .cam-badge { position: absolute; top: 5px; z-index: 3; font: 600 8.5px/1 var(--mono); letter-spacing: .1em; padding: 3px 5px; border-radius: 2px; }
.cam-st { left: 5px; }
.cam-badge { right: 5px; background: #000a; color: var(--text2); }
.st-live { background: var(--accent); color: #fff; }
.st-load { background: #000b; color: var(--warn); }
.st-queue { background: #000b; color: var(--text3); }
.st-error { background: #000b; color: var(--warn); border: 1px solid #f5c51866; }
.st-off { background: #000b; color: var(--text3); border: 1px solid var(--border2); }
.cam[data-off="1"] { cursor: default; opacity: .55; }
.cam-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 6px 4px; background: linear-gradient(transparent, #000d); display: flex; flex-direction: column; pointer-events: none; }
.cam-name span { font: 600 9.5px/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-name small { font: 500 8px var(--mono); letter-spacing: .1em; color: var(--text3); }
.cam:hover .cam-name span { color: #fff; }
.cam:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.cctv-src { flex: none; padding: 5px 12px; font: 500 9px var(--mono); letter-spacing: .1em; color: var(--text3); border-top: 1px solid var(--border); }
.cctv-src a:hover { color: var(--text); text-decoration: underline; }
.cam-modal { position: fixed; inset: 0; z-index: 3000; background: #000c; display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.cam-box { width: min(1100px, 100%); background: var(--layer); border: 1px solid var(--border2); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 60px #000; }
.cam-hd { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--border); }
.cam-title { flex: 1; min-width: 0; font: 600 12px var(--mono); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-title small { color: var(--text3); font-weight: 500; margin-left: 6px; }
.cam-body { aspect-ratio: 16 / 9; background: #000; }
.cam-body video { width: 100%; height: 100%; display: block; }

/* ── STATUS BAR & FOOTER ───────────────────────────────── */
.statusbar { display: flex; align-items: stretch; justify-content: space-between; border-top: 1px solid var(--border); background: var(--layer); min-width: 0; }
.geo { display: flex; align-items: center; gap: 10px; padding: 0 12px; font: 500 10.5px var(--mono); letter-spacing: .1em; color: var(--text2); min-width: 0; overflow: hidden; white-space: nowrap; }
.geo #geoLine { overflow: hidden; text-overflow: ellipsis; }
.geo-tag { color: var(--accent); font-weight: 600; }
.sb-actions { display: flex; flex: none; }
.sb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font: 600 10.5px var(--mono); letter-spacing: .12em; border-left: 1px solid var(--border); color: var(--text2); }
.sb-btn small { font-weight: 500; font-size: 9px; color: var(--text3); border: 1px solid var(--border2); padding: 1px 4px; border-radius: 2px; }
.sb-btn:hover, .sb-btn.is-on { color: var(--text); background: var(--layer2); }
.sb-tv { background: #ff4d2e1a; color: #ffb4a6; }
.sb-tv.is-on { background: var(--accent); color: #fff; }
.sb-tv.is-on .dot { background: #fff; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 12px; font: 500 10px var(--mono); letter-spacing: .1em; color: var(--text3); border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.foot b { color: var(--text2); font-weight: 600; }
.foot .bad { color: var(--accent); }

/* ── PIP ────────────────────────────────────────────────── */
.pip { position: fixed; right: 14px; bottom: calc(var(--sb) + var(--foot) + 12px); width: 400px; z-index: 2000; background: #000; border: 1px solid var(--border2); box-shadow: 0 18px 50px #000c; border-radius: 3px; overflow: hidden; }
.pip-hd { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; background: var(--layer2); cursor: move; }
.pip-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.pip-tabs button { font: 600 9.5px var(--mono); letter-spacing: .1em; padding: 4px 7px; color: var(--text3); border-radius: 2px; white-space: nowrap; }
.pip-tabs button.is-on { color: #fff; background: var(--accent); }
.pip-body { aspect-ratio: 16 / 9; position: relative; }
.pip-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── FULLSCREEN MAP ─────────────────────────────────────── */
body.map-full .grid { grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); grid-template-areas: "sit bmkg"; }
body.map-full .p-market, body.map-full .p-news, body.map-full .p-tv, body.map-full .p-cctv { display: none; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1280px) {
  .grid {
    grid-template-columns: minmax(340px, 34%) minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: 150px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "sit market market" "sit bmkg tv" "cctv news tv";
  }
}
@media (max-width: 900px) {
  body { overflow: auto; display: block; }
  .hdr { position: sticky; top: 0; z-index: 1500; height: var(--hdr); }
  .brand-scope { display: none; }
  .pill-live { display: none; }
  .ticker { height: var(--tick); }
  .grid { display: flex; flex-direction: column; }
  .panel { border-right: 0; }
  .p-situasi .map-wrap { flex: none; height: 62vh; min-height: 340px; }
  .p-cctv { height: 600px; }
  .p-market { height: 150px; }
  .p-bmkg, .p-news { height: 560px; }
  .p-tv { height: auto; }
  .p-tv .tv-grid { overflow: visible; }
  .statusbar { position: sticky; bottom: 0; z-index: 1500; height: var(--sb); }
  .geo { font-size: 9.5px; }
  .sb-btn small { display: none; }
  .sb-btn { padding: 0 10px; }
  .foot { height: auto; padding: 8px 12px; flex-direction: column; align-items: flex-start; white-space: normal; }
  .pip { left: 16px; right: 16px; width: auto; bottom: calc(var(--sb) + 10px); }
  body.map-full .grid { display: flex; }
  body.map-full .p-situasi .map-wrap { height: calc(100vh - var(--hdr) - var(--tick) - var(--sb) - 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation-duration: 0s !important; }
  .dot-live, .mk.is-siaga .mk-dot { animation: none; }
}