/* SigmaTrans SLD - lapisan tampilan & interaksi tambahan (dimuat setelah styles.css).
   Tidak mengubah logika app.js; semua elemen di sini diberi awalan "st-". */

/* =====================================================================
   TAMPILAN MINIMALIS
   Aturan: hanya panel luar yang bergaris (tipis). Isi panel tanpa garis,
   cukup latar sangat halus; lapis ketiga tanpa garis & tanpa latar.
   Penanda status (.bay-card.trip, .selected, .metric-tile.trip, tombol
   .active, dll.) memakai selektor 2 class di styles.css sehingga tetap
   menang atas aturan 1 class di bawah ini - warnanya tidak hilang.
   ===================================================================== */
:root {
  --line: rgba(173, 214, 202, 0.1);
  --st-line-strong: rgba(173, 214, 202, 0.16);
  --st-fill: rgba(255, 255, 255, 0.022);
  --st-fill-hover: rgba(255, 255, 255, 0.045);
  --st-r-out: 16px;
  --st-r-in: 12px;
  --shadow: none;
}

.dashboard { gap: 24px; width: 100%; max-width: 1680px; margin-inline: auto; padding: 28px 28px 48px; }
.panel { padding: 24px; }
.panel-header { margin-bottom: 20px; }

/* panel luar: satu garis tipis, tanpa bayangan & gradien */
.panel, .metric-tile, .topbar {
  border: 1px solid var(--line); border-radius: var(--st-r-out);
  background: rgba(11, 19, 17, 0.72); box-shadow: none;
}

/* hero: tanpa garis scan, sudut, grid */
.topbar { background: rgba(11, 19, 17, 0.6); }
.hero-strip { min-height: 0; padding: 26px 28px; border: 0; background: transparent; }
.hero-strip::before, .hero-strip::after { display: none; }
.hero-corner, .hero-scan, .hero-scan-b { display: none !important; }
.hero-strip h1 { filter: none; }

/* isi panel: tanpa garis, latar halus */
.bay-card, .sld-kpi-card, .sld-info-card, .ultg-load-group, .measurement-type-section,
.dc-clip-device, .connection-panel, .fault-item, .indicator-item, .venom-device,
.record-panel, .induced-panel, .comparison-panel, .indicator-column, .plant-reading,
.detail-meter-grid > div, .comparison-values > div, .induced-grid > div, .trend-meta-item {
  border-color: transparent; border-radius: var(--st-r-in);
  background: var(--st-fill); box-shadow: none;
}
.sld-canvas-wrap { border-color: transparent; border-radius: var(--st-r-in); box-shadow: none; background: #060d0b; }

/* lapis ketiga: tanpa garis & tanpa latar, dipisah jarak saja */
.weather-strip, .mini-status, .fault-grid div {
  border-color: transparent; box-shadow: none;
}
.weather-strip { background: rgba(74, 163, 255, 0.06); border-radius: 10px; min-height: 0; }
.fault-grid div { min-height: 0; padding: 10px 12px; background: rgba(255, 255, 255, 0.018); border-radius: 10px; }
.fault-grid { gap: 8px; }
.fault-item { gap: 12px; padding: 14px; }
.measurement-type-section .bay-card { background: rgba(255, 255, 255, 0.03); }
.bay-card { min-height: 0; padding: 16px; gap: 12px; }
.bay-card:hover, .sld-kpi-card:hover, .fault-item:hover { background: var(--st-fill-hover); }

/* status WAJIB tetap terlihat: garis warna + rona latar (ditulis ulang di sini
   dengan prioritas lebih tinggi agar tidak tertimpa aturan minimalis di atas) */
.bay-card.bay-card.trip { border-color: rgba(255, 107, 98, 0.58); background: rgba(255, 107, 98, 0.06); }
.bay-card.bay-card.alarm { border-color: rgba(244, 184, 74, 0.5); background: rgba(244, 184, 74, 0.05); }
.bay-card.bay-card.offline { border-color: rgba(150, 170, 163, 0.3); }
.bay-card.bay-card.selected { border-color: rgba(53, 209, 141, 0.7); box-shadow: inset 0 0 0 1px rgba(53, 209, 141, 0.2); }

/* tombol daftar & submenu: datar, tanpa garis */
.bay-selector button, .gi-submenu button {
  border-color: transparent; background: transparent; border-radius: 10px;
  transition: background .15s, color .15s;
}
.bay-selector button:hover, .gi-submenu button:hover { background: var(--st-fill-hover); }
.bay-selector button.active, .gi-submenu button.active { border-color: transparent; box-shadow: inset 2px 0 0 var(--green); }
.gi-submenu button.active { background: rgba(53, 209, 141, 0.1); }

/* label: lebih tenang - tebal 600, renggang, redup */
.tiny-label, .metric-label, .eyebrow {
  font-weight: 600; letter-spacing: 0.1em; font-size: 0.68rem;
}
.tiny-label, .metric-label { color: var(--muted); }
.fault-grid div > span, .measurement-type-section header span, .measurement-gi-header span,
.induced-header span, .record-header span, .sld-kpi-card small, .bay-card em, .fault-item em {
  font-weight: 600; letter-spacing: 0.08em; color: var(--muted);
}

.measurement-gi-group { border-color: transparent; background: var(--st-fill); }

/* Mail: waktu jadi baris kecil di atas judul (sebelumnya waktu ISO panjang menabrak judul) */
.fault-item header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; align-items: center; }
.fault-item header strong {
  grid-column: 1 / -1; color: var(--muted); font: 500 11px/1.3 "JetBrains Mono", monospace; overflow-wrap: anywhere;
}
.fault-item header span { min-width: 0; color: var(--ink); font-weight: 600; }

/* Bay Detail: angka besar mengikuti lebar kotak agar tidak terpotong/bertabrakan */
.detail-meter-grid > div { container-type: inline-size; overflow: hidden; min-height: 0; }
.detail-meter-grid .detail-value { font-size: min(3.2rem, 27cqi); white-space: nowrap; letter-spacing: -0.02em; }
.detail-meter-grid .detail-unit { font-size: min(1.45rem, 11cqi); }
.detail-meter-grid span { font-weight: 600; letter-spacing: 0.04em; }
.sld-kpi-card small, .sld-kpi-card em { font-weight: 600; letter-spacing: 0.06em; }
.sld-kpi-card { min-height: 0; }

@media (max-width: 760px) {
  .dashboard { padding: 14px 12px 32px; gap: 16px; }
  .panel { padding: 16px; }
  .hero-strip { padding: 18px; }
}
/* ---------- perbaikan tumpang-tindih di ponsel ----------
   styles.css asli tidak punya aturan ponsel untuk Bay Detail: daftar bay (190 px)
   tetap di kiri sehingga detail & panel indikasi hanya kebagian ~100 px. */
.bay-card > header { flex-wrap: wrap; gap: 8px 10px; }
.bay-card > header > div:first-child { min-width: 0; flex: 1 1 140px; }
.bay-card > header small { overflow-wrap: anywhere; }
.bay-card-actions { min-width: 0; max-width: 100%; }
.bay-badge-stack { flex-wrap: wrap; max-width: 100%; gap: 6px; }
.bay-card { min-width: 0; overflow: hidden; }
.indicator-header { flex-wrap: wrap; gap: 10px; }
.indicator-actions { flex-wrap: wrap; }
.comparison-header > div > span { display: block; margin-bottom: 6px; }
/* kolom berlebar pasti (bukan mengikuti isi) agar container-type tidak meruntuhkan lebar */
.comparison-header { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.comparison-header > div { container-type: inline-size; min-width: 0; }
.comparison-header > div > strong { display: block; white-space: normal; font-size: min(2.35rem, 11cqi); }
.comparison-values > div { container-type: inline-size; min-width: 0; }
.comparison-panel .comparison-values strong { white-space: normal; font-size: min(2rem, 18cqi); overflow-wrap: anywhere; }

/* tablet: 3 kolom indikasi terlalu sempit di samping daftar bay */
@media (max-width: 900px) {
  .indicator-grid { grid-template-columns: minmax(0, 1fr); }
  .indicator-column { min-height: 0; }
  .indicator-column-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 760px) {
  .bay-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .bay-selector {
    display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin;
  }
  .bay-selector button { flex: 0 0 auto; width: auto; max-width: 75vw; scroll-snap-align: start; background: var(--st-fill); }
  .bay-selector button.active { box-shadow: inset 0 -2px 0 var(--green); }
  .indicator-grid { grid-template-columns: minmax(0, 1fr); }
  .indicator-column { min-height: 0; }
  .indicator-column-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .comparison-values { grid-template-columns: minmax(0, 1fr); }
  .comparison-header { flex-wrap: wrap; }
}

/* ---------- ponsel: MMS Connection jadi grid chip ringkas ----------
   Sebelumnya daftar vertikal 9 gateway (±220 px) dengan titik di ujung kanan. */
@media (max-width: 760px) {
  .hero-strip { gap: 14px; }
  .connection-panel {
    grid-template-columns: minmax(0, 1fr) auto; gap: 10px 8px; padding: 12px; align-items: center;
  }
  .connection-panel > div:first-child { grid-column: 1; grid-row: 1; }
  .connection-panel .tiny-label { margin: 0; }
  .connection-panel .icon-button { grid-column: 2; grid-row: 1; width: 30px; height: 30px; border-radius: 8px; }
  .gateway-status-stack {
    grid-column: 1 / -1; grid-row: 2;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px;
  }
  #extraGatewayStatusList { display: contents; }
  .gateway-status-row {
    flex-direction: row-reverse; justify-content: flex-end; gap: 7px;
    min-width: 0; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.035);
  }
  .gateway-status-row .gateway-status-label { font-size: 0.68rem; line-height: 1.15; overflow-wrap: anywhere; }
  .gateway-status-row .status-pill span { width: 7px; height: 7px; }
  .connection-panel .status-pill { grid-column: auto; }
}

/* ---------- ponsel: skala huruf lebih kecil ---------- */
@media (max-width: 560px) {
  .hero-strip { padding: 16px; }
  .hero-brand { margin-bottom: 10px; }
  .st-logo { width: 40px; height: 40px; }
  .hero-status-row { margin-bottom: 4px; }
  .hero-strip h1 { font-size: 1.5rem; }

  .metric-tile { padding: 12px 14px; }
  .metric-tile strong { font-size: 1.25rem; }
  .metric-tile small { font-size: 0.7rem; }
  .panel h2, .panel-header h2 { font-size: 1.05rem; }

  .comparison-header > div > strong, .comparison-panel .comparison-values strong { font-size: min(1.4rem, 11cqi); }
  .trend-meta-item strong { font-size: 1rem; }
  .bay-reading strong, .plant-reading strong, .plant-reading.primary strong { font-size: 1.05rem; }
  .sld-kpi-card strong { font-size: 1.05rem; }
  .sld-kpi-card { grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; }
  .sld-kpi-card > span { width: 34px; height: 34px; font-size: 0.62rem; }
  .bay-card h3 { font-size: 0.95rem; }
  .fault-grid div strong { font-size: 0.92rem; line-height: 1.3; }
  .fault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .induced-grid strong { font-size: 1rem; }
  .weather-strip strong { font-size: 0.95rem; }
  .bay-card, .fault-item { padding: 12px; }
}

/* ---------- ponsel: kartu bay ringkas, 2 kartu per baris ----------
   Sebelumnya 1 kartu per layar (±400 px tinggi). Selektor ganda dipakai karena
   styles.css memakai ".measurement-gi-group .bay-grid { minmax(215px, 1fr) }". */
@media (max-width: 560px) {
  .bay-grid, .measurement-gi-group .bay-grid, .measurement-type-section .bay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .measurement-gi-group, .measurement-type-section { padding: 10px; }
  .measurement-type-section { gap: 8px; }

  .bay-grid .bay-card { gap: 6px; padding: 10px; border-radius: 10px; }
  .bay-grid .bay-card > header { flex-direction: column; align-items: flex-start; gap: 5px; }
  .bay-grid .bay-card > header > div:first-child { flex: none; width: 100%; }
  .bay-grid .bay-card h3 { font-size: 0.8rem; line-height: 1.2; overflow-wrap: anywhere; }
  .bay-grid .bay-card > header small { font-size: 0.6rem; }
  .bay-grid .bay-badge-stack { justify-content: flex-start; gap: 4px; }
  .bay-grid .bay-badge { padding: 2px 6px; font-size: 0.56rem; }

  .bay-grid .weather-strip { min-height: 0; padding: 5px 7px; gap: 6px; }
  .bay-grid .weather-strip div { display: flex; align-items: baseline; gap: 5px; }
  .bay-grid .weather-strip span { font-size: 0.56rem; }
  .bay-grid .weather-strip strong { font-size: 0.78rem; }
  .bay-grid .weather-strip small { display: none; }

  .bay-grid .mini-single-line { min-height: 0; gap: 6px; }
  .bay-grid .mini-breaker { width: 22px; height: 22px; border-width: 2px; }
  .bay-grid .mini-breaker span { width: 12px; height: 2px; }
  .bay-grid .mini-line { height: 3px; }

  .bay-grid .bay-reading { gap: 6px; flex-wrap: wrap; }
  .bay-grid .bay-reading span { font-size: 0.6rem; }
  .bay-grid .bay-reading strong { font-size: 0.84rem; margin-left: auto; }
  .bay-grid .bay-reading.ocr strong { font-size: 0.74rem; }

  .bay-grid .mini-status { padding-top: 6px; gap: 6px; font-size: 0.62rem; flex-wrap: wrap; }
  .bay-grid .mini-status strong { font-size: 0.66rem; }

  /* kartu pembangkit di grid yang sama */
  .bay-grid .plant-reading { gap: 6px; }
  .bay-grid .plant-reading span { font-size: 0.6rem; }
  .bay-grid .plant-reading strong, .bay-grid .plant-reading.primary strong { font-size: 0.86rem; }
  .bay-grid .plant-reading.primary { margin-top: 0; padding: 6px 0; }
}

/* ---------- panel yang tidak dipakai lagi (DOM tetap ada agar app.js tidak error) ---------- */
#bayDetail .record-panel, #bayDetail .bay-event-panel { display: none !important; }

/* ---------- Synchroscope: pengganti 4 kotak angka sinkron di bawah header ---------- */
.summary-grid.st-replaced { display: none !important; }
.st-sync {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--st-r-out, 16px);
  background: rgba(11, 19, 17, 0.72);
}
.st-sync.check { border-color: rgba(244, 184, 74, 0.28); }
.st-sync.offline { opacity: .78; }
.st-scope { width: 172px; height: 172px; }
.st-scope .ring { fill: rgba(4, 11, 10, .9); stroke: rgba(173, 214, 202, .16); stroke-width: 1.5; }
.st-scope .tick { stroke: rgba(173, 214, 202, .35); stroke-width: 2; stroke-linecap: round; }
.st-scope .tick.minor { stroke: rgba(173, 214, 202, .16); stroke-width: 1.2; }
.st-scope .window { fill: none; stroke: rgba(53, 209, 141, .35); stroke-width: 9; stroke-linecap: round; transition: stroke .4s; }
.st-sync.ok .st-scope .window { stroke: var(--green); filter: drop-shadow(0 0 6px rgba(53, 209, 141, .8)); animation: stWinPulse 1.6s ease-in-out infinite; }
@keyframes stWinPulse { 50% { stroke-opacity: .55; } }
.st-scope .lbl { fill: var(--muted); font: 700 9px Inter, sans-serif; letter-spacing: .12em; }
.st-scope .lbl.fast { fill: #f4b84a; } .st-scope .lbl.slow { fill: #4aa3ff; }
.st-scope .needle { stroke: #eef8f3; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(238, 248, 243, .6)); }
.st-scope .needle-tip { fill: #eef8f3; }
.st-sync.ok .st-scope .needle { stroke: var(--green); filter: drop-shadow(0 0 6px rgba(53, 209, 141, .9)); }
.st-sync.ok .st-scope .needle-tip { fill: var(--green); }
.st-sync.offline .st-scope .needle { stroke: #6c7b76; filter: none; }
.st-scope .hub { fill: #0d1513; stroke: rgba(238, 248, 243, .7); stroke-width: 2; }
.st-scope .slip { fill: var(--ink); font: 700 15px "JetBrains Mono", monospace; }
.st-scope .slip-unit { fill: var(--muted); font: 600 8.5px Inter, sans-serif; letter-spacing: .1em; }

.st-sync-info { display: grid; gap: 12px; min-width: 0; }
.st-sync-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.st-sync-head .ttl { color: var(--muted); font: 600 0.68rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.st-sync-time {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  color: var(--muted); font: 500 0.68rem/1 "JetBrains Mono", Consolas, monospace; white-space: nowrap;
}
.st-sync-time b { color: var(--ink); font-weight: 600; }
.st-sync-time em { font-style: normal; color: var(--green); }
.st-sync-time i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.st-sync-time.stale em { color: var(--amber); } .st-sync-time.stale i { background: var(--amber); }
.st-sync-time.dead em { color: var(--red); } .st-sync-time.dead i { background: var(--red); animation: stBlink 1s steps(2) infinite; }
.st-sync-time.frozen em { color: #4aa3ff; } .st-sync-time.frozen i { background: #4aa3ff; }
.st-sync-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font: 700 0.72rem/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(150, 170, 163, .12); color: var(--muted); transition: background .4s, color .4s;
}
.st-sync-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-sync.ok .st-sync-badge { background: rgba(53, 209, 141, .14); color: var(--green); }
.st-sync.ok .st-sync-badge i { animation: stPing 1.6s ease-out infinite; }
.st-sync.check .st-sync-badge { background: rgba(244, 184, 74, .14); color: var(--amber); }
.st-sync.check .st-sync-badge i { animation: stBlink 1s steps(2) infinite; }

.st-waves { width: 100%; height: 74px; display: block; }
.st-waves .axis { stroke: rgba(173, 214, 202, .12); stroke-width: 1; }
.st-waves path { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.st-waves .w1 { stroke: var(--green); filter: drop-shadow(0 0 3px rgba(53, 209, 141, .55)); }
.st-waves .w2 { stroke: #4aa3ff; filter: drop-shadow(0 0 3px rgba(74, 163, 255, .55)); stroke-dasharray: 5 4; }
.st-sync.offline .st-waves path { stroke: #4b5853; filter: none; }

.st-sync-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-sync-vals div { min-width: 0; }
.st-sync-vals span { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 600 0.62rem/1.2 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sync-vals span i { flex: 0 0 auto; width: 14px; height: 2.5px; border-radius: 2px; }
.st-sync-vals .k1 i { background: var(--green); }
.st-sync-vals .k2 i { background: #4aa3ff; }
.st-sync-vals strong { display: block; margin-top: 4px; color: var(--ink); font: 700 1.3rem/1 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.st-sync-vals strong small { margin-left: 3px; color: var(--muted); font: 600 .62rem Inter, sans-serif; }
.st-sync.check .st-sync-vals .kd strong { color: var(--amber); }
.st-sync.ok .st-sync-vals .kd strong { color: var(--green); }

@media (max-width: 560px) {
  .st-sync { grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .st-scope { width: 118px; height: 118px; }
  .st-waves { height: 52px; }
  .st-sync-info { gap: 8px; }
  .st-sync-vals { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .st-sync-vals div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .st-sync-vals strong { margin-top: 0; font-size: .92rem; }
  .st-sync-head .ttl { font-size: .6rem; }
  .st-sync-badge { padding: 4px 8px; font-size: .62rem; }
  .st-sync-head { row-gap: 6px; }
  .st-sync-time { order: 3; flex: 1 0 100%; margin-left: 0; font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .st-sync.ok .st-scope .window, .st-sync-badge i { animation: none !important; }
}

/* ---------- jam & waktu update di atas SLD: satu kapsul status ringkas ----------
   Sebelumnya dua baris teks tebal rata kanan ("Update terakhir: ..." + jam + tanggal). */
.sld-canvas-head { padding: 12px 12px 0; background: transparent; justify-content: flex-end; }
.sld-canvas-actions {
  flex-direction: row; align-items: center; gap: 10px; margin-left: auto;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(6, 13, 11, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sld-station-time { order: 1; display: flex; align-items: center; gap: 8px; }
.sld-station-time::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 0 rgba(53, 209, 141, 0.6); animation: stPing 2s ease-out infinite;
}
.sld-station-time strong {
  color: var(--ink); font: 600 0.8rem/1 "JetBrains Mono", Consolas, monospace; letter-spacing: 0.02em;
}
.sld-station-time small { color: var(--muted); font-size: 0.68rem; font-weight: 500; }
.sld-canvas-actions > small {
  order: 2; padding-left: 10px; border-left: 1px solid var(--line);
  color: var(--muted); font: 500 0.66rem/1 "JetBrains Mono", Consolas, monospace; white-space: nowrap;
}
@media (max-width: 560px) {
  .sld-canvas-head { padding: 8px 8px 0; }
  .sld-canvas-actions { gap: 8px; padding: 4px 10px; }
  .sld-station-time strong { font-size: 0.72rem; }
  .sld-station-time small { display: none; }
  .sld-canvas-actions > small { padding-left: 8px; font-size: 0.6rem; }
}

/* =====================================================================
   SLD: animasi aliran, kerapian label/node, zoom & layar penuh
   SVG dibuat ulang app.js tiap ±5 dtk; fase animasi diatur enhance.js
   (animation-delay negatif dari jam) agar tidak melompat saat dibuat ulang.
   ===================================================================== */
.sld-pdf-grid { opacity: 0.16; }
.sld-pdf-title { letter-spacing: 3px; }

/* garis: aliran putus-putus di atas garis bertegangan */
.sld-pdf-route .st-flow {
  fill: none; stroke-linecap: round; stroke-width: 1.6; pointer-events: none;
  stroke: rgba(230, 255, 250, 0.85); stroke-dasharray: 2 14;
  animation: stFlow 1.1s linear infinite;
}
.sld-pdf-route.blue .st-flow { stroke: rgba(220, 238, 255, 0.85); }
/* Arah: path jalur "reverse" sudah dibalik oleh app.js (sldPath), dan titik aliran selalu
   bergerak dari awal ke akhir path; garis putus-putus mengikuti arah yang sama. */
@keyframes stFlow { to { stroke-dashoffset: -16; } }

/* garis tergambar sekali saat SLD pertama tampil dengan data */
.st-sld-intro .sld-pdf-line { animation: stDraw 1.4s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes stDraw { from { stroke-dashoffset: var(--st-len, 400); stroke-dasharray: var(--st-len, 400); } to { stroke-dashoffset: 0; stroke-dasharray: var(--st-len, 400); } }

/* jalur padam berdenyut merah, terputus berkedip lembut */
.sld-pdf-route.padam .sld-pdf-line { animation: stPadam 1.6s ease-in-out infinite; }
@keyframes stPadam { 50% { stroke: #ff9a92; filter: drop-shadow(0 0 4px rgba(255, 107, 98, .9)); } }
.sld-pdf-route.terputus .sld-pdf-line { animation: stPutus 2.4s ease-in-out infinite; }
@keyframes stPutus { 50% { opacity: .45; } }

/* label nilai: lebih rapi */
.sld-pdf-copy-bg { rx: 6px; fill: rgba(4, 11, 16, 0.86); stroke: rgba(57, 219, 199, 0.22); }
.sld-pdf-route.blue .sld-pdf-copy-bg { stroke: rgba(85, 170, 255, 0.26); }
.sld-pdf-label { font-weight: 700; letter-spacing: 0.3px; }
.sld-pdf-route.st-hover .sld-pdf-copy-bg { fill: rgba(9, 30, 32, 0.96); stroke: rgba(160, 255, 240, .7); }

/* node GI & pembangkit */
.sld-pdf-node rect { rx: 8px; stroke-width: 1; transition: filter .2s ease, transform .2s ease; }
.sld-pdf-node, .sld-pdf-node rect, .sld-pdf-node circle { transform-box: fill-box; transform-origin: center; }
.sld-pdf-node[data-gi]:hover rect { filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 112, 128, .6)); }
.sld-pdf-node.blue[data-gi]:hover rect { filter: brightness(1.2) drop-shadow(0 0 6px rgba(111, 198, 245, .7)); }
.sld-pdf-node.generator circle { animation: stGenGlow 3s ease-in-out infinite; }
@keyframes stGenGlow { 50% { filter: drop-shadow(0 0 7px rgba(111, 198, 245, .65)); } }
.sld-pdf-cb { rx: 1.5px; }
.sld-pdf-cb.closed { filter: drop-shadow(0 0 2px rgba(25, 210, 122, .8)); }
.sld-pdf-cb.open { filter: drop-shadow(0 0 3px rgba(255, 45, 61, .9)); }

/* ---------- fokus saat disorot: jalur/gardu terkait tetap terang, lainnya meredup ---------- */
.sld-pdf-svg .sld-pdf-route, .sld-pdf-svg .sld-pdf-node, .sld-pdf-svg .sld-pdf-cap { transition: opacity .35s ease; }
.sld-pdf-svg.st-focus .sld-pdf-route:not(.st-on) { opacity: .16; }
.sld-pdf-svg.st-focus .sld-pdf-node:not(.st-on) { opacity: .32; }
.sld-pdf-svg.st-focus .sld-pdf-cap { opacity: .32; }
.sld-pdf-svg.st-focus .sld-pdf-route.st-on .sld-pdf-line { stroke-width: 4.6; }
.sld-pdf-svg.st-focus .sld-pdf-node.st-on rect { filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, .25)); }

/* ---------- animasi masuk bertahap (sekali saat SLD pertama tampil) ---------- */
.st-sld-intro .sld-pdf-node { animation: stNodeIn .55s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--st-d, 0s); }
.st-sld-intro .sld-pdf-copy, .st-sld-intro .sld-pdf-cb, .st-sld-intro .sld-pdf-flow-dot { animation: stFadeIn .6s ease 1.05s both; }
.st-sld-intro .sld-pdf-title, .st-sld-intro .sld-pdf-subtitle, .st-sld-intro .sld-pdf-legend { animation: stFadeDown .7s ease both; }
@keyframes stNodeIn { from { opacity: 0; transform: scale(.6); } }
@keyframes stFadeIn { from { opacity: 0; } }
@keyframes stFadeDown { from { opacity: 0; transform: translateY(-8px); } }
.sld-pdf-title, .sld-pdf-subtitle, .sld-pdf-legend { transform-box: fill-box; }

/* ---------- zoom & geser ---------- */
.sld-reference-stage.st-zoomable { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-x pan-y; }
.sld-reference-stage.st-zoomable.st-zoomed { cursor: grab; max-height: min(78vh, 900px); }
.sld-reference-stage.st-dragging { cursor: grabbing; user-select: none; }
.sld-reference-stage .sld-pdf-svg { transition: width .25s ease; }
.st-sld-tools { display: flex; align-items: center; gap: 4px; margin-right: auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 13, 11, 0.82); }
.st-sld-tools button {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font: 700 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
  transition: background .15s, color .15s;
}
.st-sld-tools button:hover { background: rgba(255, 255, 255, .07); color: var(--ink); }
.st-sld-tools button:disabled { opacity: .35; cursor: default; }
.st-sld-tools svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-sld-tools .st-zoom-val { min-width: 38px; color: var(--muted); font: 600 10px/1 "JetBrains Mono", monospace; text-align: center; }

/* layar penuh (overlay, juga berfungsi di iPhone) */
body.st-sld-max { overflow: hidden; }
.sld-canvas-wrap.st-max {
  position: fixed; inset: 0; z-index: 95; display: flex; flex-direction: column;
  border-radius: 0; background: #050d14;
}
.sld-canvas-wrap.st-max .sld-canvas-head { position: relative; padding: max(10px, env(safe-area-inset-top)) 12px 8px; }
.sld-canvas-wrap.st-max .sld-reference-stage { flex: 1 1 auto; max-height: none; overflow: auto; display: grid; align-content: safe center; }
body.st-sld-max .st-nav, body.st-sld-max .st-top { display: none; }
/* transform pada induk (animasi muncul .st-reveal) membuat position:fixed ikut induk, bukan layar */
body.st-sld-max .st-reveal { transform: none !important; opacity: 1 !important; transition: none !important; }

@media (max-width: 560px) {
  .st-sld-tools button { width: 24px; height: 24px; }
  .st-sld-tools .st-zoom-val { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-sld-intro .sld-pdf-node, .st-sld-intro .sld-pdf-copy, .st-sld-intro .sld-pdf-cb,
  .st-sld-intro .sld-pdf-flow-dot, .st-sld-intro .sld-pdf-title, .st-sld-intro .sld-pdf-subtitle,
  .st-sld-intro .sld-pdf-legend,
  .sld-pdf-route .st-flow, .st-sld-intro .sld-pdf-line, .sld-pdf-route.padam .sld-pdf-line,
  .sld-pdf-route.terputus .sld-pdf-line, .sld-pdf-node.generator circle { animation: none !important; }
}

/* ---------- Panel Indikasi lebih ringkas (tablet & ponsel) ---------- */
@media (max-width: 760px) {
  .indicator-panel { gap: 8px; }
  .indicator-column { gap: 6px; padding: 10px; }
  .indicator-column h3 { font-size: 0.68rem; letter-spacing: 0.08em; }
  .indicator-column-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .indicator-column .indicator-item, .indicator-item { min-height: 0; padding: 6px 8px; gap: 7px; border-radius: 8px; }
  .indicator-item > span { width: 9px; height: 9px; }
  .indicator-item strong { font-size: 0.68rem; line-height: 1.2; overflow-wrap: anywhere; }
  .indicator-item small { margin-top: 1px; font-size: 0.56rem; font-weight: 600; line-height: 1.2; }
  .indicator-header > span { font-size: 0.78rem; }
  .indicator-actions button { padding: 5px 9px; font-size: 0.62rem; }
}

/* ---------- Live Measurement: grafik frekuensi & tegangan berdampingan di ponsel ----------
   Ukuran internal canvas ikut lebar tampilan (diatur enhance.js) agar teks sumbu terbaca. */
@media (max-width: 560px) {
  .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .comparison-panel { gap: 8px; padding: 10px; }
  .comparison-header { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .comparison-header > div > span, .comparison-panel span { font-size: 0.56rem; margin-bottom: 2px; }
  .comparison-header > div > strong { font-size: min(1rem, 12cqi); }
  .comparison-values { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .comparison-values > div { min-height: 0; padding: 6px 8px; gap: 2px; }
  .comparison-panel .comparison-values strong { font-size: min(0.9rem, 12cqi); }
  .comparison-panel canvas { height: 130px; border-radius: 8px; }
  .trend-meta { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .trend-meta-item { padding: 6px 8px; gap: 5px; }
  .trend-meta-item span { width: 7px; height: 7px; }
  .trend-meta-item strong { font-size: 0.6rem; }
  .trend-meta-item em { font-size: 0.66rem; }
  .trend-meta-item small { font-size: 0.54rem; }
  .measurements .panel-header { margin-bottom: 10px; }
  .measurements .segment-control button { min-width: 56px; height: 28px; font-size: 0.7rem; }
}

/* ponsel: kartu ringkasan 2 kolom (isinya pendek); KPI tetap 1 kolom tapi rapat */
@media (max-width: 479px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sld-kpi-grid { gap: 8px; }
  .sld-kpi-card { padding: 10px 12px; }
  .sld-kpi-card > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
  .sld-kpi-card > div > small { flex: 1 0 100%; }
}

/* layar sedang: 2 kolom agar halaman tidak memanjang */
@media (min-width: 480px) and (max-width: 760px) {
  .summary-grid, .sld-kpi-grid, .bay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- logo header: gaya Synchron.html ---------- */
.st-logo {
  --ring: #4fa9ff; --ring2: #2ee6c2;
  position: relative; display: block; width: 52px; height: 52px; flex: 0 0 auto; perspective: 400px;
  animation: stLogoIn 1s cubic-bezier(.2, 1.4, .4, 1) both;
}
.st-logo .st-clip {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #061411;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 0 0 1px rgba(79, 169, 255, .25), 0 0 18px rgba(79, 169, 255, .35);
  animation: stLogoGlow 3.2s ease-in-out infinite, stLogoZap 5s steps(1) 1.6s infinite;
}
.st-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-logo:hover .st-clip { transform: rotateY(360deg); }
.st-logo .st-shine {
  position: absolute; inset: -20%; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  transform: translateX(-120%); animation: stLogoShine 5s ease-in-out 1.2s infinite;
}
.st-logo .st-ring {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(transparent 0deg, transparent 55%, rgba(79, 169, 255, 0) 60%, var(--ring) 82%, #e8f3f4 86%, transparent 90%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: stSpin 3.2s linear infinite;
}
.st-logo .st-ring.r2 {
  inset: -11px; opacity: .6; animation-duration: 6s; animation-direction: reverse;
  background: conic-gradient(from 90deg, transparent 0 70%, var(--ring2) 88%, transparent 94%);
}
@keyframes stLogoIn { from { opacity: 0; transform: scale(.3) rotate(-200deg); } }
@keyframes stSpin { to { transform: rotate(360deg); } }
@keyframes stLogoGlow { 50% { box-shadow: 0 0 0 1px rgba(79, 169, 255, .4), 0 0 30px rgba(79, 169, 255, .6); } }
@keyframes stLogoZap { 0%, 86%, 90%, 94%, 100% { filter: none; } 88%, 92% { filter: brightness(1.7) drop-shadow(0 0 6px #4fa9ff); } }
@keyframes stLogoShine { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
.hero-brand { margin-bottom: 18px; }

/* ---------- navigasi lengket ---------- */
.st-nav {
  position: fixed; top: 10px; left: 50%; z-index: 60; display: flex; align-items: center; gap: 6px;
  max-width: calc(100% - 20px); padding: 6px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(6, 12, 10, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .9);
  transform: translate(-50%, -140%); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s;
}
.st-nav.show { transform: translate(-50%, 0); opacity: 1; }
.st-nav a, .st-nav button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--muted); font: 600 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  text-decoration: none; transition: color .15s, background .15s;
}
.st-nav a:hover, .st-nav button:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.st-nav .st-home img { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(79, 169, 255, .4); }
.st-nav > * { flex: 0 0 auto; }
.st-nav > .st-links { flex: 1 1 auto; min-width: 0; }
.st-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.st-links a { flex: 0 0 auto; }
.st-links::-webkit-scrollbar { display: none; }
.st-links a.active { color: var(--ink); background: rgba(53, 209, 141, .12); box-shadow: inset 0 -2px 0 var(--green); }
.st-sep { width: 1px; height: 20px; background: var(--line); flex: 0 0 auto; }
.st-chip b { font-variant-numeric: tabular-nums; }
.st-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; font-style: normal; }
.st-chip.ok { color: var(--green); }
.st-chip.trip { color: var(--red); }
.st-chip.trip.has i { animation: stBlink 1s steps(2) infinite; }
.st-chip.off { color: #8a9a95; }
.st-chip.zero { opacity: .45; }
.st-fresh { color: var(--muted); font: 500 11px/1 "JetBrains Mono", monospace; padding: 0 6px; white-space: nowrap; }
.st-fresh i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); vertical-align: 0; }
.st-fresh.stale i { background: var(--amber); }
.st-fresh.dead i { background: var(--red); animation: stBlink 1s steps(2) infinite; }
.st-fresh.live i { animation: stPing 1s ease-out; }
.st-kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font: 500 10px/1 "JetBrains Mono", monospace; }
@keyframes stBlink { 50% { opacity: .25; } }
@keyframes stPing { from { box-shadow: 0 0 0 0 rgba(53, 209, 141, .7); } to { box-shadow: 0 0 0 8px rgba(53, 209, 141, 0); } }

/* ---------- popover daftar bay bermasalah & pencarian ---------- */
.st-pop {
  position: fixed; z-index: 70; width: min(360px, calc(100% - 20px)); max-height: min(60vh, 460px); overflow: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 15, 13, .96);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); animation: stPopIn .18s ease-out;
}
.st-pop h4 { margin: 4px 8px 8px; color: var(--muted); font: 700 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
@keyframes stPopIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.st-item {
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 13px/1.25 Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
.st-item:hover, .st-item.sel { background: rgba(53, 209, 141, .1); }
.st-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.st-item.trip i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.st-item.offline i { background: #6c7b76; }
.st-item small { color: var(--muted); font: 500 11px/1 "JetBrains Mono", monospace; white-space: nowrap; }
.st-empty { padding: 16px 10px; color: var(--muted); font-size: 13px; text-align: center; }

.st-search-back { position: fixed; inset: 0; z-index: 80; background: rgba(2, 5, 4, .55); backdrop-filter: blur(6px); animation: stFade .15s; }
.st-search {
  position: fixed; top: 12vh; left: 50%; z-index: 81; width: min(560px, calc(100% - 24px)); transform: translateX(-50%);
  border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 15, 13, .98); overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); animation: stPopIn .2s ease-out;
}
.st-search input {
  width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); outline: none;
  background: transparent; color: var(--ink); font: 500 16px/1 Inter, system-ui, sans-serif;
}
.st-search .st-results { max-height: 50vh; overflow: auto; padding: 6px; }
.st-search .st-hint { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
@keyframes stFade { from { opacity: 0; } }

/* ---------- tooltip SLD ---------- */
#sldDiagram .sld-pdf-route, #sldDiagram .sld-pdf-node, #sldDiagram .sld-node, #sldDiagram .sld-route { cursor: pointer; }
#sldDiagram .sld-pdf-route .sld-pdf-line { transition: stroke-width .15s, filter .15s; }
#sldDiagram .sld-pdf-route.st-hover .sld-pdf-line { stroke-width: 6px; filter: drop-shadow(0 0 6px currentColor) brightness(1.35); }
#sldDiagram .sld-pdf-route.st-hover .sld-pdf-copy-bg { stroke: #e8f3f4; }
#sldDiagram .sld-pdf-node.st-hover, #sldDiagram .sld-node.st-hover { filter: brightness(1.25) drop-shadow(0 0 8px rgba(79, 169, 255, .7)); }

.st-tip {
  position: fixed; z-index: 90; width: 260px; padding: 12px 14px; pointer-events: none;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(6, 12, 10, .95); color: var(--ink);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .95); font: 500 12px/1.35 Inter, system-ui, sans-serif;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.st-tip.show { opacity: 1; transform: none; }
.st-tip header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.st-tip header strong { font: 700 13px/1.2 Inter, system-ui, sans-serif; }
.st-badge { padding: 3px 7px; border-radius: 999px; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.st-badge.normal { color: #03140d; background: var(--green); }
.st-badge.trip { color: #fff; background: var(--red); animation: stBlink 1s steps(2) infinite; }
.st-badge.offline { color: #cfd8d5; background: #44514d; }
.st-tip dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.st-tip dt { color: var(--muted); }
.st-tip dd { margin: 0; text-align: right; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }
.st-phase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.st-phase span { padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); text-align: center; font: 600 12px/1.1 "JetBrains Mono", monospace; }
.st-phase span small { display: block; margin-bottom: 3px; color: var(--muted); font: 600 9px/1 Inter, sans-serif; letter-spacing: .1em; }
.st-load { height: 4px; margin: 2px 0 8px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.st-load b { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--amber) 70%, var(--red)); background-size: 260px 100%; transition: width .3s; }
.st-tip footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

/* ---------- animasi muncul saat scroll ---------- */
.st-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.st-reveal.st-in { opacity: 1; transform: none; }

/* ---------- kilat nilai berubah ---------- */
.st-up { animation: stUp .9s ease-out; }
.st-down { animation: stDown .9s ease-out; }
.st-chg { animation: stChg .9s ease-out; }
@keyframes stUp { 0% { color: #7dffc4; text-shadow: 0 0 12px rgba(53, 209, 141, .8); } }
@keyframes stDown { 0% { color: #ffb0aa; text-shadow: 0 0 12px rgba(255, 107, 98, .8); } }
@keyframes stChg { 0% { color: #bfe3ff; text-shadow: 0 0 12px rgba(79, 169, 255, .8); } }

.metric-tile, .sld-kpi-card, .bay-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.metric-tile:hover, .sld-kpi-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(53, 209, 141, .55); }
.bay-card:hover { transform: translateY(-2px); }

/* ---------- kembali ke atas ---------- */
.st-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(6, 12, 10, .85); color: var(--ink); cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s, border-color .2s;
}
.st-top.show { opacity: 1; transform: none; pointer-events: auto; }
.st-top:hover { border-color: var(--green); }
.st-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

@media (max-width: 900px) {
  .st-nav { left: 10px; right: 10px; max-width: none; transform: translateY(-140%); }
  .st-nav.show { transform: none; }
  .st-nav .st-fresh, .st-nav .st-kbd { display: none; }
}
@media (max-width: 560px) {
  .st-links { display: none; }
}
/* ukuran logo ponsel ditaruh setelah aturan dasar .st-logo agar tidak tertimpa */
@media (max-width: 560px) {
  .st-logo { width: 40px; height: 40px; }
  .st-logo .st-ring { inset: -5px; }
  .st-logo .st-ring.r2 { inset: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-logo, .st-logo *, .st-reveal, .st-up, .st-down, .st-chg { animation: none !important; transition: none !important; }
  .st-reveal { opacity: 1; transform: none; }
}