:root {
  --bg: #05080f;
  --bg-elev: #0a1020;
  --bg-card: rgba(14, 22, 38, 0.88);
  --line: rgba(224, 184, 74, 0.22);
  --gold: #e0b84a;
  --gold-2: #f6e2a2;
  --teal: #4ce0d2;
  --rose: #ff6b7a;
  --mint: #5ee0a0;
  --ink: #eef3fb;
  --muted: #8d99b0;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --radius: 18px;
  --font: "Segoe UI", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 420px at 8% -8%, rgba(224, 184, 74, 0.12), transparent 50%),
    radial-gradient(800px 380px at 100% 0%, rgba(76, 224, 210, 0.08), transparent 46%),
    linear-gradient(180deg, #07101c 0%, #05080f 40%, #070b14 100%);
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 20%, #000 30%, transparent 78%);
}

.app {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 268px 1fr;
  min-height: 100vh;
}
.deck { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }

.rail {
  position: sticky; top: 0; height: 100vh;
  padding: 22px 16px 18px;
  background:
    linear-gradient(180deg, rgba(8, 18, 36, 0.96), rgba(4, 8, 16, 0.98));
  border-right: 1px solid rgba(80, 160, 255, 0.18);
  display: flex; flex-direction: column; gap: 18px;
  overflow: auto;
}
.aperture {
  position: absolute; width: 220px; height: 220px; right: -70px; top: -40px;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, #1d6dff 0 18%, transparent 18% 28%, #f0a020 28% 42%, transparent 42% 55%, #d9dde6 55% 68%, transparent 68% 100%);
  filter: blur(0.2px); opacity: 0.22; animation: spin 28s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 26px; border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(5, 10, 18, 0.72); backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 20;
}
.deck-kicker {
  letter-spacing: 0.22em; text-transform: uppercase; font-size: 11px; color: var(--muted);
}
.brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.mark {
  width: 68px; height: 68px; border-radius: 16px; object-fit: contain;
  background: #0d1430; border: 1px solid rgba(80, 170, 255, 0.45);
  box-shadow: 0 0 24px rgba(40, 140, 255, 0.35);
}
.brand h1 {
  margin: 0; font-size: 22px; letter-spacing: 0.01em; font-weight: 750;
  background: linear-gradient(90deg, #f4f7fb 0 34%, #4aa3ff 68%, #1d6dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand small {
  display: block; max-width: 158px; color: #f0a020;
  letter-spacing: 0.01em; font-size: 10px; line-height: 1.3;
}
.meta-pills { display: none; }
.pill {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--gold-2);
  padding: 6px 11px; border-radius: 999px; background: rgba(22, 18, 10, 0.7);
}
.pill.live { color: var(--mint); border-color: rgba(94, 224, 160, 0.4); position: relative; padding-left: 22px; }
.pill.live::before {
  content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 1.6s infinite;
}
.pill.warn { color: var(--rose); border-color: rgba(255, 107, 122, 0.45); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.nav { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.nav button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; color: #9aa8be;
  border: 1px solid transparent; border-radius: 14px;
  padding: 11px 12px; cursor: pointer;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px;
  transition: 0.18s ease;
}
.nav button::before {
  content: "";
  width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: linear-gradient(135deg, #1d6dff, #f0a020);
  opacity: 0.35; box-shadow: 0 0 0 4px rgba(29, 109, 255, 0.08);
}
.nav button span { flex: 1; }
.nav button:hover { color: #fff; background: rgba(255,255,255,0.04); }
.nav button.active {
  color: #fff;
  border-color: rgba(80, 160, 255, 0.35);
  background:
    linear-gradient(90deg, rgba(29, 109, 255, 0.28), rgba(240, 160, 32, 0.12));
  box-shadow: inset 3px 0 0 #3ec4ff, 0 10px 24px rgba(0, 0, 0, 0.25);
}
.nav button.active::before { opacity: 1; }

.stage { padding: 20px 22px 32px; }
.who { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.who span { color: var(--gold-2); font-size: 13px; }
.gate {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(5, 8, 15, 0.92);
}
.gate[hidden] { display: none; }
.gate-card {
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px; border-radius: 22px;
  background: rgba(10, 16, 32, 0.96);
  border: 1px solid rgba(80, 170, 255, 0.35);
  box-shadow: var(--shadow);
}
.gate-card h2 { margin: 0; }
.gate-card p { margin: 0; color: var(--muted); }
.gate-hint { font-size: 12px; color: #f0a020; }
.lic-pending { color: var(--gold-2); }
.lic-active { color: var(--mint); }
.lic-revoked, .lic-expired, .lic-none { color: var(--rose); }
body.locked .nav button:not([data-view="lisensi"]):not([data-view="admin"]) { display: none; }

.view { display: none; animation: rise 0.32s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%),
    var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.card h3 { margin: 0 0 10px; font-size: 12px; color: var(--muted); letter-spacing: 0.09em; text-transform: uppercase; }
.card .num { font-size: 30px; font-weight: 700; color: var(--gold-2); letter-spacing: 0.02em; }
.card .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.span-2 { grid-column: span 2; }

.brief { font-size: 15.5px; line-height: 1.62; color: #d8e0ee; }
.note {
  margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--gold);
  background: rgba(224,184,74,0.08); color: var(--gold-2); font-size: 12px;
}

.list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
.item {
  padding: 11px 13px; border-radius: 13px; background: rgba(8, 14, 26, 0.8);
  border: 1px solid rgba(255,255,255,0.045);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.item:hover { border-color: rgba(224,184,74,0.35); transform: translateX(2px); }
button.item { width: 100%; text-align: left; color: inherit; cursor: pointer; font: inherit; }
button.item:hover { border-color: rgba(62, 196, 255, 0.55); }
.item b { display: block; margin-bottom: 4px; }
.item span { color: var(--muted); font-size: 12px; }

.rank { display: flex; flex-direction: column; gap: 9px; }
.rank-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.rank-row b { margin: 0; font-weight: 600; text-transform: capitalize; }
.bar { height: 8px; border-radius: 99px; background: #101828; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a6a1e, var(--gold)); }
.bar.media > i { background: linear-gradient(90deg, #0e6e6a, var(--teal)); }
.bar.rise > i { background: linear-gradient(90deg, #6a1e3a, var(--rose)); }

.tag {
  display: inline-block; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; margin-right: 4px;
}
.tag.politik { background: #2a2140; color: #c9b8ff; }
.tag.ekonomi { background: #1d2c1d; color: #b7e3b0; }
.tag.bencana { background: #3a1b1b; color: #ffb3b3; }
.tag.teknologi { background: #102833; color: #9fe7ff; }
.tag.pendidikan { background: #2c2614; color: #f3d48a; }
.tag.kesehatan { background: #142c28; color: #8ee6c9; }
.tag.hukum { background: #2a1d14; color: #f0c3a0; }
.tag.keamanan { background: #2a1420; color: #f0a8c8; }
.tag.olahraga { background: #14201f; color: #9ee0c8; }
.tag.infrastruktur { background: #1c2430; color: #b8c9e6; }
.tag.energi { background: #2a2610; color: #e6d48a; }
.tag.pertanian { background: #1a2a14; color: #b6e08a; }
.tag.lingkungan { background: #10261c; color: #8fd9b4; }
.tag.internasional { background: #141a2c; color: #9eb6ff; }
.tag.hiburan { background: #2a1430; color: #e0b0f0; }
.tag.umum { background: #1b1f28; color: #c5c9d4; }
.sent.positif { color: var(--mint); }
.sent.negatif { color: var(--rose); }
.sent.netral { color: var(--teal); }

.lens-bar {
  margin-bottom: 14px; padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 28, 48, 0.9), rgba(8, 14, 26, 0.9));
  border: 1px solid rgba(80, 160, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0; align-items: center; }
.lens-bar .toolbar input { flex: 1 1 180px; min-width: 0; }
.count-badge {
  margin-left: auto; color: var(--gold-2); font-size: 12px; letter-spacing: 0.06em;
}
input, select, button.act {
  background: #0c1320; color: var(--ink); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 12px; font: inherit;
}
button.act { cursor: pointer; color: var(--gold-2); transition: 0.18s ease; }
button.act.primary { background: linear-gradient(180deg, #5a4212, #1b1404); }
button.act:hover { border-color: var(--gold); transform: translateY(-1px); }

.feed { display: flex; flex-direction: column; gap: 11px; }
.article {
  display: block;
  padding: 18px 18px 16px 20px; border-radius: 18px; background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06); position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
}
.article::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 99px; background: var(--gold);
}
.article.positif::before { background: var(--mint); }
.article.negatif::before { background: var(--rose); }
.article.netral::before { background: var(--teal); }
.article a { color: var(--gold-2); text-decoration: none; }
.article a:hover { text-decoration: underline; }
.article h3 { margin: 6px 0 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.article p { margin: 8px 0 0; color: #c4ccda; font-size: 14px; line-height: 1.55; }
.kw { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.kw-btn {
  cursor: pointer; text-transform: none; letter-spacing: 0.02em;
  font-size: 11px; padding: 4px 9px; border-radius: 999px;
}
.kw-btn:hover { border-color: #3ec4ff; color: #d7f3ff; }

.map-wrap { position: relative; min-height: 540px; }
#geo-svg { width: 100%; height: 540px; border-radius: 12px; background: radial-gradient(circle at 40% 45%, #102033, #070d16 70%); }
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 12px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 9px 7px; border-bottom: 1px solid rgba(255,255,255,0.06); text-align: left; }
table.data th { color: var(--muted); font-weight: 600; letter-spacing: 0.05em; }
table.data tr:hover td { background: rgba(224,184,74,0.05); }

.footer {
  padding: 11px 22px; border-top: 1px solid var(--line); color: var(--muted);
  display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.06em;
  background: rgba(5,8,15,0.7);
}

.code {
  font-family: var(--mono); font-size: 12px; background: #070d16; padding: 14px;
  border-radius: 12px; overflow: auto; color: #cde8e8; border: 1px solid rgba(76,224,210,0.2);
}

.chart-box { position: relative; min-height: 180px; }
.sent-split { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; }

@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: relative; height: auto; border-right: 0; border-bottom: 1px solid rgba(80,160,255,0.18); }
  .nav { flex-direction: row; overflow-x: auto; }
  .nav button { width: auto; white-space: nowrap; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .sent-split { grid-template-columns: 1fr; }
  .aperture { display: none; }
}