/* ============================================================
   ClipCatch — style.css
   Mobile-first · light & airy · radius 14–20 (not too round,
   not too square) · Plus Jakarta Sans
   ============================================================ */

:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --ink: #10141f;
  --ink-2: #1b2030;
  --text: #131a2a;
  --muted: #5d6779;
  --faint: #8a93a6;
  --line: #e6eaf2;
  --line-strong: #d8deea;
  --accent: #1f7aec;
  --accent-soft: #e7f1fe;
  --danger: #d43d51;
  --danger-soft: #fdecef;
  --ok: #18a957;
  --ok-soft: #e3f6ec;
  --amber: #9a6b00;
  --amber-soft: #fdf3d7;
  --field: #f1f4f9;
  --stat-ico-bg: #161a2b; /* lingkaran ikon statistik (gaya TikTok, terang) */

  --r-card: 20px;
  --r-input: 15px;
  --r-btn: 15px;
  --r-tile: 14px;

  --shadow-card: 0 1px 2px rgba(16, 20, 31, .04), 0 10px 30px rgba(16, 20, 31, .06);
  --shadow-pop: 0 4px 10px rgba(16, 20, 31, .06), 0 20px 50px rgba(16, 20, 31, .12);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

img, svg { display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: 18px;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--accent-soft); color: var(--ink); }

/* ================= HEADER ================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(16, 20, 31, .05);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--ink), #2c3152);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 20, 31, .22);
  cursor: pointer;
  transition: background .3s ease;
}
.brand-logo svg { width: 19px; height: 19px; }
.brand-logo.small { width: 30px; height: 30px; border-radius: 10px; }
.brand-logo.small svg { width: 15px; height: 15px; }
/* kontras panah per warna siklus: terang -> panah gelap, gelap -> panah putih */
.brand-logo[data-color="putih"] svg,
.brand-logo[data-color="kuning"] svg { color: #111; }
.brand-logo[data-color="biru"] svg,
.brand-logo[data-color="ungu"] svg,
.brand-logo[data-color="hijau"] svg,
.brand-logo[data-color="merah"] svg,
.brand-logo[data-color="hitam"] svg,
.brand-logo[data-color="pink"] svg { color: #fff; }
/* brand: light mode shows only "Neva", dark mode shows only "Save";
   the hidden half is removed from layout (fixed width), so the visible
   word always starts right after the logo icon */
.brand-name {
  display: inline-block;
  width: 46px;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--ink);
}
.brand-name em { font-style: normal; font-weight: 800; color: inherit; }
[data-theme="dark"] .brand-name { text-indent: -46px; color: #fff; }

.main-nav { display: none; gap: 26px; margin-inline-start: 8px; }
.main-nav a {
  font-weight: 600; font-size: 14.5px; color: var(--muted);
  transition: color .2s;
}
.main-nav a:hover { color: var(--ink); }

.header-actions { margin-inline-start: auto; position: relative; display: flex; align-items: center; gap: 8px; }

/* premium round theme morph button: single centered sun/moon icon */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #edf1f8;
  border: 1px solid var(--line);
  transition: background .25s cubic-bezier(.22,1,.36,1), border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), transform .2s ease;
}
.theme-toggle:hover { border-color: var(--line-strong); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle .tt-sun, .theme-toggle .tt-moon {
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.theme-toggle .tt-sun {
  color: #e8a013; opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle .tt-moon {
  color: #8d99c4; opacity: 0;
  transform: rotate(-90deg) scale(.4);
}
.theme-toggle .tt-knob { display: none; }
[data-theme="dark"] .theme-toggle {
  background: #1c2547;
  border-color: #31406e;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 0 14px rgba(94,162,247,.38);
}
[data-theme="dark"] .theme-toggle .tt-sun {
  opacity: 0;
  transform: rotate(90deg) scale(.4);
}
[data-theme="dark"] .theme-toggle .tt-moon {
  opacity: 1; color: #e8edff;
  transform: rotate(0deg) scale(1);
}

.lang-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-weight: 700; font-size: 14px; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.lang-btn:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.lang-btn .chev { width: 14px; height: 14px; color: var(--faint); transition: transform .25s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.lang-flag {
  width: 22px; height: 16px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(16, 20, 31, .12);
  flex-shrink: 0;
}
.lang-flag svg { width: 100%; height: 100%; }

.lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 264px;
  max-height: 400px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 60;
}

.lang-search { position: relative; margin: 4px 6px 8px; }
.lang-search svg {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--faint);
  pointer-events: none;
}
.lang-search input {
  width: 100%;
  padding: 9px 12px 9px 33px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: #f7f9fc;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
[dir="rtl"] .lang-search input { padding: 9px 33px 9px 12px; }
.lang-search input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(106, 92, 255, .12);
}
.lang-search input::placeholder { color: var(--faint); font-weight: 500; }

.lang-empty {
  padding: 16px 12px 18px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--faint);
}
.lang-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 11px;
  font-weight: 600; font-size: 14.5px; color: var(--text);
  transition: background .15s;
}
.lang-item:hover { background: #f3f5fa; }
.lang-item .lang-flag { width: 24px; height: 17px; }
.lang-item[aria-current="true"] { background: var(--accent-soft); color: var(--ink); }
.lang-item .check { margin-inline-start: auto; width: 16px; height: 16px; color: var(--accent); opacity: 0; }
.lang-item[aria-current="true"] .check { opacity: 1; }

/* ================= HERO ================= */

.hero { position: relative; padding: 44px 0 26px; overflow: clip; }
.hero-inner { position: relative; text-align: center; }

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  z-index: -1;
  pointer-events: none;
}
  .a1 { width: 340px; height: 340px; background: #c4ddfb; top: -120px; inset-inline-start: -100px; }
.a2 { width: 300px; height: 300px; background: #c3e9f7; top: 40px; inset-inline-end: -110px; }
.a3 { width: 260px; height: 260px; background: #ffe7c9; top: 240px; left: 50%; transform: translateX(-50%); opacity: .4; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.hero-badge svg { width: 14px; height: 14px; color: #e8a013; }

h1 {
  margin: 18px auto 10px;
  max-width: 640px;
  font-size: clamp(27px, 6.4vw, 44px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--ink);
}
h1 em {
  font-style: normal;
    background: linear-gradient(120deg, var(--accent) 10%, #2f9df0 55%, #4cc3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  max-width: 460px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(15px, 3.8vw, 17px);
}

/* ---- downloader card ---- */

.downloader {
  max-width: 620px;
  margin: 26px auto 0;
  padding: 18px;
  text-align: start;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* platform chips in the downloader card */
.platform-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  background: #f1f4f9;
  border-radius: 13px;
  margin-bottom: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 9px;
  font-weight: 700; font-size: 13.5px;
  color: var(--muted);
  transition: background .2s, color .2s, box-shadow .2s;
}
.chip:hover { color: var(--ink); }
.chip.is-active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(16, 20, 31, .1);
}
.chip-ic { width: 16px; height: 16px; flex-shrink: 0; }
.chip-wide { grid-column: 1 / -1; }

/* platform app-switcher strip */
.plat-strip {
  position: relative;
  display: flex;
  gap: 0;
  padding: 6px;
  background: #f1f4f9;
  border-radius: 14px;
  margin-bottom: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.plat-strip::-webkit-scrollbar { display: none; }

.strip-card {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  scroll-snap-align: center;
  transition: width .55s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
/* deck-of-cards look: each tile tucks under the previous one */
.strip-card + .strip-card { margin-inline-start: -14px; }
.strip-card.is-open {
  z-index: 50;
  width: min(216px, calc(100vw - 170px));
  box-shadow: 0 3px 12px rgba(16, 20, 31, .12);
}

.strip-ic {
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.strip-ic > svg { width: 100%; height: 100%; display: block; }
.strip-ic.tl-tt { background: #000; }
.strip-ic.tl-tt > svg { width: 28px; height: 28px; }
.strip-ic.tl-dy { flex-direction: column; gap: 1px; }
.strip-ic.tl-dy .dy-note { width: 20px; height: 20px; }
.strip-ic .dy-text {
  color: #fff; font-size: 6.5px; font-weight: 700;
  line-height: 1; letter-spacing: .1em;
}

.strip-meta {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  opacity: 1;
  transition: opacity .35s ease .12s;
}
.strip-card:not(.is-open) .strip-meta { opacity: 0; transition-delay: 0s; }
.strip-name { font-weight: 800; font-size: 15.5px; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; }
.strip-desc {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 300px;
}

.input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 14px;
  background: #f1f4f9;
  border: 1.5px solid transparent;
  border-radius: var(--r-input);
  transition: border-color .2s, box-shadow .2s;
}
.input-row:focus-within {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(106, 92, 255, .12);
}

#urlInput {
  flex: 1;
  min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: 9px 0;
  font-size: 15.5px; font-weight: 500;
  color: var(--ink);
}
#urlInput::placeholder { color: var(--faint); font-weight: 400; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  font-weight: 700; font-size: 13.5px; color: var(--ink-2);
  transition: border-color .2s, background .2s, transform .1s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost:active { transform: scale(.97); }

.btn-clear {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--faint);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.btn-clear:hover { background: #e7ebf3; color: var(--ink); }
.btn-clear svg { width: 14px; height: 14px; }

.btn-primary {
  width: 100%;
  margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 20px;
  border-radius: 22px;
  background: linear-gradient(140deg, #181c2e, #2b3054 60%, #3a3f6b);
  color: #fff;
  font-weight: 800; font-size: 16px; letter-spacing: -.01em;
  box-shadow: 0 8px 20px rgba(24, 28, 46, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .15s, box-shadow .2s, opacity .2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(24, 28, 46, .34), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:active { transform: translateY(0) scale(.99); }
.btn-primary:disabled { opacity: .65; cursor: wait; transform: none; }
.btn-primary .ic { width: 18px; height: 18px; }

.btn-primary.loading .ic { display: none; }
.btn-primary.loading::before {
  content: '';
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* light-only: tombol Download hitam pekat */
html:not([data-theme="dark"]) .btn-primary { background: #0d0d12; border-color: #0d0d12; color: #fff; box-shadow: 0 8px 20px rgba(13, 13, 18, .30), inset 0 1px 0 rgba(255, 255, 255, .12); }
html:not([data-theme="dark"]) .btn-primary:hover { background: #1c1c24; border-color: #1c1c24; color: #fff; box-shadow: 0 12px 26px rgba(13, 13, 18, .36), inset 0 1px 0 rgba(255,255,255,.12); }
html:not([data-theme="dark"]) .btn-primary:active { background: #0d0d12; border-color: #0d0d12; color: #fff; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-btn);
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  font-weight: 700; font-size: 14.5px; color: var(--ink);
  transition: border-color .2s, color .2s, transform .1s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary:active { transform: scale(.98); }
.btn-secondary .ic { width: 17px; height: 17px; }

.form-error {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}

.trust-row {
  list-style: none;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
}
.trust-row li {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--faint);
}
.trust-row svg { width: 14px; height: 14px; color: var(--ok); flex-shrink: 0; }

/* ================= RESULT ================= */

.result-section { padding: 26px 0 6px; }

.result-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: pop .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 140% at 15% 10%, #7f6dff 0%, transparent 55%),
    radial-gradient(120% 140% at 90% 20%, #37c3f0 0%, transparent 60%),
    radial-gradient(130% 130% at 50% 100%, #2a2f55 0%, #1a1e36 100%);
}
.thumb-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* varian vertikal 9:16 untuk cover portrait (TikTok/Douyin/Reels) —
   di-toggle dari JS via naturalWidth/naturalHeight */
.thumb.is-vertical {
  aspect-ratio: 9 / 16;
  width: min(100%, 280px);
  max-height: 440px;
  margin-inline: auto;
}
.thumb.tt { background: radial-gradient(120% 140% at 15% 10%, #25f4ee33 0%, transparent 55%), radial-gradient(120% 140% at 90% 20%, #fe2c5544 0%, transparent 60%), radial-gradient(130% 130% at 50% 100%, #23283f 0%, #14172a 100%); }
.thumb.dy { background: radial-gradient(120% 140% at 15% 10%, #ff4a4a44 0%, transparent 55%), radial-gradient(120% 140% at 90% 20%, #ffd23f44 0%, transparent 60%), radial-gradient(130% 130% at 50% 100%, #23283f 0%, #14172a 100%); }
.thumb.ig { background: radial-gradient(120% 140% at 15% 10%, #f9ce3455 0%, transparent 50%), radial-gradient(120% 140% at 85% 85%, #d6297666 0%, transparent 60%), radial-gradient(130% 130% at 50% 40%, #962fbf66 0%, #1a1e36 100%); }

.thumb .play {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1.5px solid rgba(255, 255, 255, .4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.thumb .play svg { width: 24px; height: 24px; }
.thumb.is-playing { cursor: default; }
.preview-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 2;
}
/* rasio container kini diset inline mengikuti dimensi asli (w/h), jadi
   contain tidak menyisakan bar; max-height menjaga video tegak tak kepanjangan */
.thumb.is-vertical.is-playing { max-height: min(480px, 70vh); }
.preview-close {
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  z-index: 3;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(10, 12, 20, .65);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.thumb-dur {
  position: absolute;
  bottom: 10px; inset-inline-end: 10px;
  padding: 3px 9px;
  border-radius: 8px;
  background: rgba(10, 12, 20, .62);
  color: #fff;
  font-size: 12px; font-weight: 700;
}

.result-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.res-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e5f8ee;
  color: var(--ok);
  font-size: 12.5px; font-weight: 700;
}
.res-badge svg { width: 13px; height: 13px; }

.result-meta h2, .carousel-head h2 {
  font-size: clamp(17px, 4.5vw, 21px);
  font-weight: 800; letter-spacing: -.02em; color: var(--ink);
  overflow-wrap: anywhere;
}
.res-author { font-size: 14px; font-weight: 600; color: var(--muted); }
.res-stats { display: flex; flex-wrap: wrap; gap: 14px; row-gap: 10px; }
.res-stats[hidden] { display: none; }
/* chip statistik gaya TikTok (sidebar): tiap stat = kolom kecil
   [lingkaran gelap 44px berisi ikon SVG putih] + [angka bold kecil di bawah] */
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-ico {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stat-ico-bg);
  color: #fff;
}
.stat-ico svg { width: 20px; height: 20px; }
.stat-num {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  line-height: 1.2; white-space: nowrap;
}

/* GeoScope audience analysis panel.
   UI diporting dari geo_scope/webapp.html (render() + CSS .viewtoggle,
   .line-wrap, circle.seg, .dleg, .verdict, .conftrack, .stat, .sig, .cmt,
   .chart-tip) dengan prefix gs- agar tidak bentrok dgn kelas lama.
   Warna chart (kurva/palet segmen) sengaja hardcode; latar/teks/garis
   memakai var(--card)/var(--ink)/var(--muted)/var(--line) supaya dark mode ikut. */
.geo-btn { width: 100%; margin-top: 8px; }
.geo-btn.is-loading { opacity: .6; pointer-events: none; }
.btn-analyze { width: 100%; margin-top: 10px; }
/* baris kecil "Sampel komentar" (select 40/60/80/120) di atas tombol analisis */
.geo-sampel { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.geo-sampel label { font-weight: 600; }
.geo-sampel-sel { background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; padding: 5px 6px; cursor: pointer; }
.geo-panel { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); margin-top: 4px; }
.geo-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.geo-spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: geo-spin .8s linear infinite; }
@keyframes geo-spin { to { transform: rotate(360deg); } }
.geo-body { display: flex; flex-direction: column; gap: 12px; }

/* ---- kartu laporan (menua dari .card webapp GeoScope) ---- */
.gs-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-card); }
.gs-sec { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--faint); text-transform: uppercase; margin-bottom: 10px; }

/* ---- header kartu: chip platform + author + tanggal/ID ---- */
.gs-vhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-chip {
  padding: 5px 11px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 800; font-size: 12.5px; letter-spacing: .01em; text-transform: uppercase;
}
.gs-chip.bilibili { background: rgba(0, 161, 214, .15); color: #0284c7; border: 1px solid rgba(0, 161, 214, .35); }
.gs-chip.x { background: #10141f; color: #e7e9ea; border: 1px solid rgba(255, 255, 255, .12); }
.gs-author { font-weight: 800; font-size: 15.5px; color: var(--ink); letter-spacing: -.01em; }
.gs-handle { font-weight: 600; font-size: 13px; color: var(--muted); }
.gs-viddate { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.gs-caption { font-size: 14px; color: var(--ink-2); margin-top: 10px; line-height: 1.55; word-break: break-word; }
.gs-who { display: block; font-size: 12px; font-weight: 700; color: var(--faint); margin-bottom: 2px; }

/* ---- tile statistik (.stat webapp) ---- */
.gs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 14px; }
.gs-stat { background: var(--field); border-radius: 14px; padding: 10px 12px; }
.gs-stat b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.gs-stat span { font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* ---- kartu kesimpulan (.verdict + .conftrack webapp) ---- */
.gs-verdict { background: var(--accent-soft); border: 1px solid rgba(31, 122, 236, .25); border-radius: 16px; padding: 16px 18px; }
.gs-cat {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--card); color: var(--accent);
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(16, 20, 31, .08);
}
.gs-verdict.china { background: var(--danger-soft); border-color: rgba(212, 61, 81, .28); }
.gs-verdict.china .gs-cat { color: var(--danger); }
.gs-verdict.locked_local { background: var(--amber-soft); border-color: rgba(154, 107, 0, .28); }
.gs-verdict.locked_local .gs-cat { color: var(--amber); }
.gs-verdict.insufficient { background: var(--field); border-color: var(--line-strong); }
.gs-verdict.insufficient .gs-cat { color: var(--muted); }
.gs-verdict-txt { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.4; margin: 10px 0 0; }
.gs-confrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.gs-conftrack { flex: 1; height: 8px; border-radius: 6px; background: var(--line); overflow: hidden; }
.gs-conftrack i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--accent); transition: width .5s ease; }
.gs-conflab { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ---- toggle tampilan distribusi (.viewtoggle webapp) ---- */
.gs-viewtoggle { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px; background: var(--field); border-radius: 12px; }
.gs-viewtoggle button { padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted); }
.gs-viewtoggle button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 4px rgba(16, 20, 31, .12); }
.gs-viewtoggle button:hover:not(.on) { color: var(--accent); }

/* ---- grafik garis (.line-wrap webapp); kurva Catmull-Rom -> Bezier ---- */
.gs-line-wrap { display: flex; justify-content: center; padding: 6px 0 2px; position: relative; }
.gs-line-wrap svg { width: 100%; max-width: 640px; height: auto; }
.gs-line-wrap text { pointer-events: none; }
.gs-grid { stroke: var(--line); stroke-width: 1; }
.gs-gridline-strong { stroke: var(--line-strong); stroke-width: 1.5; }
.gs-axtxt { font-size: 11px; font-weight: 600; fill: var(--faint); }
.gs-xlab { font-size: 10.5px; font-weight: 600; fill: var(--faint); }
.gs-dotname { font-size: 13px; font-weight: 800; fill: var(--ink); }
.gs-dotpct { font-size: 12px; font-weight: 700; fill: var(--muted); }
.gs-dot-hit { fill: transparent; cursor: pointer; }
.gs-dot-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-gdot .gs-dot { fill: #2563eb; stroke: var(--card); stroke-width: 2; transition: r .15s ease; }
.gs-gdot:hover .gs-dot, .gs-gdot:focus-within .gs-dot { r: 9; }
.gs-gdot.on .gs-dot { stroke: var(--ink); stroke-width: 3; }
.gs-line-path { fill: none; stroke: #2563eb; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gs-line-path.draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: gs-drawline .9s ease .1s forwards; }
@keyframes gs-drawline { to { stroke-dashoffset: 0; } }
.gs-line-area { fill: rgba(37, 99, 235, .08); opacity: 0; animation: gs-areain .7s ease .35s forwards; }
@keyframes gs-areain { to { opacity: 1; } }
.gs-line-note {
  display: grid; grid-template-columns: 22px 1fr 90px 52px; gap: 8px;
  align-items: center; margin-top: 10px; padding: 7px 10px;
  background: var(--field); border-radius: 12px;
  font-size: 12.5px; font-weight: 600; color: var(--faint); font-style: italic;
}
.gs-line-note .gs-utrack { height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.gs-line-note .gs-utrack i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--faint); transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.gs-line-note .gs-upct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }
.gs-chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: #10141f; color: #fff; border-radius: 9px; padding: 6px 10px;
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  opacity: 0; transition: opacity .15s; box-shadow: 0 6px 18px rgba(16, 20, 31, .25);
}
.gs-chart-tip small { display: block; font-weight: 600; color: #aeb6c6; font-size: 11px; }
.gs-tfoot { font-size: 12.5px; font-weight: 600; color: var(--faint); margin-top: 10px; }

/* ---- donat (circle.seg + .dleg webapp) ---- */
.gs-donut-flex { display: flex; gap: 18px; align-items: center; }
.gs-donut-wrap { flex: none; display: flex; justify-content: center; padding: 6px 0 2px; }
.gs-donut-wrap svg { width: 200px; height: 200px; animation: gs-donutpop .45s ease; transform-origin: 50% 50%; }
@keyframes gs-donutpop { from { opacity: 0; transform: scale(.96); } }
.gs-donut-wrap text { pointer-events: none; }
.gs-donut-track { stroke: var(--line); }
circle.gs-seg { transition: stroke-width .15s ease, opacity .15s ease; cursor: pointer; }
circle.gs-seg:hover, circle.gs-seg:focus-visible, circle.gs-seg.hl { stroke-width: 34; }
circle.gs-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-dleg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gs-leg {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  background: var(--field); border-radius: 12px; border: 1.5px solid transparent;
  font-size: 13.5px; font-weight: 700; color: var(--ink); width: 100%; text-align: left;
}
.gs-leg .gs-sw { width: 14px; height: 14px; border-radius: 5px; flex: none; transition: transform .15s ease; }
.gs-leg .gs-ln { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-leg .gs-lp { font-variant-numeric: tabular-nums; font-weight: 800; }
.gs-leg.clickable { cursor: pointer; }
.gs-leg.clickable:hover { background: var(--accent-soft); border-color: rgba(31, 122, 236, .30); }
.gs-leg.clickable.active { background: var(--accent-soft); border-color: var(--accent); }
.gs-leg:hover .gs-sw, .gs-leg.active .gs-sw { transform: scale(1.25); }
.gs-leg.hl { background: var(--accent-soft); border-color: rgba(31, 122, 236, .30); }

/* ---- sinyal (.sig webapp) ---- */
.gs-sig { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.gs-sig:last-child { border-bottom: 0; }
.gs-sig .gs-nm { font-size: 13.5px; font-weight: 800; color: var(--ink-2); flex: none; width: 168px; }
.gs-sig .gs-dt { font-size: 13px; font-weight: 500; color: var(--muted); flex: 1; }
.gs-st {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.gs-st.kuat { background: var(--ok-soft); color: var(--ok); }
.gs-st.sedang { background: var(--amber-soft); color: var(--amber); }
.gs-st.lemah, .gs-st.kosong { background: var(--field); color: var(--faint); }

/* ---- komentar (.cmt webapp) + filter aktif ---- */
.gs-cmt-sec { scroll-margin-top: 76px; }
.gs-cfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-btn-mini {
  padding: 5px 12px; border-radius: 9px;
  border: 1.5px solid var(--line-strong); background: var(--card);
  font-weight: 700; font-size: 12.5px; color: var(--ink-2);
}
.gs-btn-mini:hover { border-color: var(--accent); color: var(--accent); }
.gs-cmt-list { max-height: 420px; overflow-y: auto; }
.gs-cmt { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.gs-cmt:last-child { border-bottom: 0; }
.gs-cmt .gs-txt { font-size: 14px; color: var(--ink-2); line-height: 1.5; word-break: break-word; }
.gs-cmt .gs-mt { font-size: 12px; font-weight: 600; color: var(--faint); margin-top: 3px; }
.gs-cmt .gs-mt b { color: var(--muted); font-weight: 800; }
.gs-cmt-empty { font-size: 14px; font-weight: 600; color: var(--muted); padding: 12px 2px; }
.gs-warnbox { background: var(--amber-soft); color: var(--amber); border-radius: 14px; padding: 11px 14px; font-size: 13px; font-weight: 600; line-height: 1.55; }

/* ---- seksi <details> collapsible (Sinyal yang dipakai + Komentar):
   tampilan sama seperti .gs-card biasa; summary = heading .gs-sec + caret ---- */
.gs-fold > summary { margin-bottom: 0; list-style: none; cursor: pointer; user-select: none; }
.gs-fold > summary::-webkit-details-marker { display: none; }
.gs-fold > summary.gs-sec { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gs-fold[open] > summary.gs-sec { margin-bottom: 10px; }
.gs-fold-caret {
  display: inline-block; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--faint);
  border-bottom: 2px solid var(--faint);
  transform: rotate(-45deg); /* tertutup: menunjuk kanan */
  transition: transform .15s ease;
}
.gs-fold[open] .gs-fold-caret { transform: rotate(45deg); } /* terbuka: menunjuk bawah */

/* ---- footer panel: jumlah sampel + Salin JSON (.btn-ghost webapp) ---- */
.gs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-footnote { font-size: 12.5px; font-weight: 600; color: var(--faint); flex: 1; min-width: 0; }
.gs-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 10px;
  border: 1.5px solid var(--line-strong); background: var(--card);
  font-weight: 700; font-size: 13.5px; color: var(--ink-2);
  transition: border-color .2s, color .2s, transform .1s;
}
.gs-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.gs-btn-ghost:active { transform: scale(.97); }

@media (max-width: 520px) {
  .gs-donut-flex { flex-direction: column; align-items: stretch; }
  .gs-sig { flex-wrap: wrap; }
  .gs-sig .gs-nm { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-line-path.draw { animation: none; stroke-dashoffset: 0; }
  .gs-line-area { animation: none; opacity: 1; }
  .gs-donut-wrap svg { animation: none; }
}

.wm-toggle {
  display: inline-flex; gap: 4px;
  padding: 4px;
  background: #f1f4f9;
  border-radius: 11px;
  width: fit-content;
}
.wm-opt {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: background .2s, color .2s, box-shadow .2s;
}
.wm-opt[aria-checked="true"] {
  background: var(--card); color: var(--ink);
  box-shadow: 0 2px 8px rgba(16, 20, 31, .1);
}

.res-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.res-actions.center { grid-template-columns: 1fr; margin-top: 12px; }
.res-actions .btn-secondary { padding-inline: 8px; font-size: 13.5px; }
.fmt-txt { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; min-width: 0; }
.fmt-main { font-weight: 700; white-space: nowrap; }
.fmt-sub { font-size: 11px; font-weight: 600; opacity: .65; white-space: nowrap; }
/* light-only: tombol format gelap (bukan navy) */
html:not([data-theme="dark"]) .res-actions .btn-secondary { background: #161a2b; border-color: #161a2b; color: #fff; }
html:not([data-theme="dark"]) .res-actions .btn-secondary:hover { background: #232946; border-color: #232946; color: #fff; }

.res-demo-note {
  font-size: 12.5px; color: var(--faint);
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
}

/* skeleton */
.sk-card { position: relative; }
.sk {
  background: linear-gradient(100deg, #eef1f7 40%, #f8fafd 50%, #eef1f7 60%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
  border-radius: 10px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.sk-thumb { aspect-ratio: 16 / 9; border-radius: 14px; }
.sk-line { height: 16px; }
.sk-line.w80 { width: 80%; }
.sk-line.w50 { width: 50%; margin-top: 8px; }
.sk-btn-row { display: flex; gap: 8px; margin-top: 14px; }
.sk-btn { height: 44px; flex: 1; border-radius: 12px; }
.sk-text {
  position: absolute; inset-inline: 0; bottom: -28px;
  text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--faint);
}

/* carousel: slider slide foto ala ssstik — preview BESAR + ‹ › overlay +
   dots + counter (menggantikan daftar baris .ph-row yang lama) */
.carousel-card { max-width: 760px; margin: 0 auto; padding: 18px; animation: pop .35s cubic-bezier(.2, .9, .3, 1.2); }
.carousel-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ph-slider { display: flex; flex-direction: column; gap: 10px; }
.ph-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  cursor: zoom-in;
  background: linear-gradient(160deg, #eef1f7, #dde3ee);
}
.ph-img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #e7eaf1;
}
/* sengaja TANPA transition/opacity pada .ph-img: saat berganti slide gambar
   lama tetap tampil apa adanya (decode-then-swap di phRender), indikator
   loading hanya spinner kecil di sudut stage di bawah */
.ph-stage.is-switching::after {
  content: '';
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  background: rgba(10, 12, 20, .5);
  animation: geo-spin .8s linear infinite;
  z-index: 3;
  pointer-events: none;
}
/* gambar gagal load: sembunyikan img -> placeholder gradien stage yang tampil;
   unduh tetap bisa lewat tombol "Unduh slide ini" */
.ph-img.is-broken { opacity: 0; width: 0; height: 0; }
.ph-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 12, 20, .62);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  box-shadow: 0 4px 14px rgba(8, 10, 18, .28);
  transition: background .2s ease;
  z-index: 2;
}
.ph-nav:hover { background: rgba(10, 12, 20, .82); }
.ph-nav:active { transform: translateY(-50%) scale(.94); }
.ph-nav svg { width: 24px; height: 24px; }
.ph-prev { left: 10px; }
.ph-next { right: 10px; }
.ph-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ph-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.ph-dot {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--line-strong, #c6ccda);
  transition: transform .15s ease, background .15s ease;
}
.ph-dot:hover { transform: scale(1.3); }
.ph-dot.is-active { background: var(--accent); transform: scale(1.35); }
.ph-counter {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
/* slide lebih dari PH_DOTS_MAX (8): dots diganti counter angka "2/12" */
.ph-frac {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ph-zip { width: 100%; }

/* photo lightbox: pratinjau besar foto carousel */
body.lb-open { overflow: hidden; }
.lb[hidden] { display: none !important; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  padding: 16px;
}
.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, .82);
}
.lb-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lb-img {
  width: 100%;
  max-height: 90vh;
  max-height: 90dvh;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
}
.lb-close {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 12, 20, .7);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 12, 20, .6);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}
.lb-prev { inset-inline-start: 6px; }
.lb-next { inset-inline-end: 6px; }
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lb-counter {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.lb-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800; font-size: 14px;
}
.lb-save svg { width: 17px; height: 17px; }
.lb-save.is-loading { pointer-events: none; opacity: .7; }

section { padding: 54px 0 8px; }

.sec-title {
  text-align: center;
  font-size: clamp(24px, 5.6vw, 34px);
  font-weight: 800; letter-spacing: -.025em;
  color: var(--ink);
}
.sec-sub {
  text-align: center;
  max-width: 440px;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: 15.5px;
}

/* platforms showcase: one row of half-tucked app icons */
.showcase-wrap {
  margin-top: 24px;
  overflow-x: auto;
  padding-block: 10px;
  scrollbar-width: none;
}
.showcase-wrap::-webkit-scrollbar { display: none; }
.plat-strip.showcase {
  background: none;
  padding: 0;
  margin-bottom: 0;
  overflow: visible;
  width: max-content;
  margin-inline: auto;
}
.showcase-wrap .strip-card.is-open { width: 216px; }

/* how / steps */
.steps {
  list-style: none;
  margin-top: 30px;
  display: grid;
  gap: 26px;
  max-width: 460px;
  margin-inline: auto;
}
.step { position: relative; padding-inline-start: 64px; }
.step-num {
  position: absolute;
  inset-inline-start: 0; top: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--ink), #2c3152);
  color: #fff;
  font-weight: 800; font-size: 17px;
  box-shadow: 0 5px 14px rgba(16, 20, 31, .22);
}
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 20px;
  top: 50px;
  bottom: -34px;
  border-inline-start: 2px dashed var(--line-strong);
}
.step h3 { font-size: 17.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.step p { margin-top: 4px; color: var(--muted); font-size: 14.5px; max-width: 340px; }

/* features */
.feat-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.feat-card { padding: 20px; transition: transform .2s, box-shadow .25s; }
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.feat-ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-tile);
  margin-bottom: 13px;
}
.feat-ic svg { width: 22px; height: 22px; }
  .tint-violet { background: #e7f1fe; color: #1f7aec; }
.tint-cyan   { background: #e2f6fb; color: #0fa5c4; }
.tint-amber  { background: #fff3df; color: #e8930c; }
.tint-green  { background: #e5f8ee; color: #18a957; }
.tint-pink   { background: #fdeaf2; color: #e4407e; }
.tint-blue   { background: #e8effe; color: #3b6fe0; }
.feat-card h3 { font-size: 16.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.feat-card p { margin-top: 5px; font-size: 14px; color: var(--muted); }

/* faq */
.faq-container { max-width: 700px; }
.faq-list { margin-top: 26px; display: grid; gap: 10px; }

.faq-item { overflow: hidden; transition: box-shadow .2s; }
.faq-item.open { box-shadow: var(--shadow-pop); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 18px;
  text-align: start;
  font-weight: 700; font-size: 15.5px; color: var(--ink);
  letter-spacing: -.01em;
}
.faq-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #f1f4f9;
  flex-shrink: 0;
  transition: background .2s, transform .3s, color .2s;
}
.faq-icon svg { width: 15px; height: 15px; }
.faq-item.open .faq-icon { background: var(--accent-soft); color: var(--accent); transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.3, .8, .3, 1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  padding: 0 18px 17px;
  color: var(--muted);
  font-size: 14.5px;
}

/* ================= FOOTER ================= */

.site-footer {
  margin-top: 60px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}
.footer-inner {
  padding-block: 34px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.foot-brand { display: flex; align-items: center; gap: 9px; }
/* footer brand selalu tampil penuh "NevaSave" — tidak ikut trik potong header */
.foot-brand .brand-name { width: auto; overflow: visible; text-indent: 0; }
.foot-tag { font-size: 14px; font-weight: 600; color: var(--muted); }
.foot-disc { font-size: 12.5px; color: var(--faint); max-width: 440px; }
.foot-mail {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.foot-mail:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-card); }
.foot-mail svg { width: 15px; height: 15px; }
.foot-copy { font-size: 12.5px; color: var(--faint); margin-top: 4px; }

/* ================= TOAST ================= */

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 11px 18px;
  border-radius: 13px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 100;
  max-width: min(92vw, 420px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= REVEAL ================= */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ================= RTL (Arabic) ================= */

[dir="rtl"] .step { padding-inline-start: 64px; }
[dir="rtl"] h1, [dir="rtl"] .sec-title { letter-spacing: 0; }

/* ================= NIGHT MODE ================= */

[data-theme="dark"] {
  --bg: #0e1220;
  --card: #161b2c;
  --ink: #f0f4ff;
  --ink-2: #dfe5f5;
  --text: #e4e9f7;
  --muted: #9aa5c0;
  --faint: #6b7690;
  --line: #252d44;
  --line-strong: #34405e;
    --accent: #5ea2f7;
    --accent-soft: rgba(94, 162, 247, .16);
  --danger: #ff7d8e;
  --danger-soft: rgba(212, 61, 81, .16);
  --ok: #34c983;
  --ok-soft: rgba(52, 201, 131, .16);
  --amber: #ffb45e;
  --amber-soft: rgba(232, 147, 12, .16);
  --field: #121828;
  --stat-ico-bg: #262c3f; /* lingkaran ikon statistik (gaya TikTok, gelap) */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-pop: 0 4px 10px rgba(0, 0, 0, .35), 0 20px 50px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
[data-theme="dark"] .trust-row svg { color: var(--accent); }
[data-theme="dark"] h1 em {
  background: linear-gradient(120deg, #ff4d5e 10%, #f5489b 55%, #ff7a5c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .aurora { opacity: .16; }
[data-theme="dark"] .site-header { background: rgba(14, 18, 32, .78); }
[data-theme="dark"] .site-footer { background: #0b0f1a; }
[data-theme="dark"] .foot-brand .brand-name { text-indent: 0; color: #fff; }

[data-theme="dark"] .platform-chips,
[data-theme="dark"] .plat-strip,
[data-theme="dark"] .wm-toggle { background: #121828; }
[data-theme="dark"] .chip.is-active,
[data-theme="dark"] .wm-opt[aria-checked="true"],
[data-theme="dark"] .faq-icon,
[data-theme="dark"] .input-row { background: #121828; }
[data-theme="dark"] .input-row:focus-within { background: #101625; }

[data-theme="dark"] .lang-item:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .lang-search input { background: #101625; }
[data-theme="dark"] .lang-search input:focus { background: #0d1220; }
[data-theme="dark"] .btn-clear:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }

[data-theme="dark"] .brand-logo,
[data-theme="dark"] .step-num { background: linear-gradient(145deg, #232946, #3a4266); }
[data-theme="dark"] .form-error { background: rgba(212, 61, 81, .14); }
[data-theme="dark"] .res-badge { background: rgba(52, 201, 131, .16); }
[data-theme="dark"] .res-badge svg { color: var(--ok); }
[data-theme="dark"] .res-badge { color: var(--ok); }
[data-theme="dark"] .res-demo-note,
[data-theme="dark"] .ph-counter,
[data-theme="dark"] .ph-frac { color: var(--faint); }
[data-theme="dark"] .sk {
  background: linear-gradient(100deg, #1a2135 40%, #232b42 50%, #1a2135 60%);
  background-size: 200% 100%;
}
[data-theme="dark"] .toast { background: #262d44; color: var(--text); }
[data-theme="dark"] .ph-stage { background: linear-gradient(160deg, #151b2c, #101625); }
[data-theme="dark"] .ph-img { background: #101625; }
[data-theme="dark"] .ph-dot { background: #3a4266; }
[data-theme="dark"] .foot-mail { background: var(--card); }
  [data-theme="dark"] .thumb { background: radial-gradient(120% 140% at 15% 10%, #1f4c8f 0%, transparent 55%), radial-gradient(120% 140% at 90% 20%, #1f6b8a 0%, transparent 60%), radial-gradient(130% 130% at 50% 100%, #1a1e36 0%, #12141f 100%); }

  [data-theme="dark"] .tint-violet { background: rgba(94, 162, 247, .16); color: #8dbcfa; }
[data-theme="dark"] .tint-cyan   { background: rgba(15, 165, 196, .16); color: #5cc8e0; }
[data-theme="dark"] .tint-amber  { background: rgba(232, 147, 12, .16); color: #ffb45e; }
[data-theme="dark"] .tint-green  { background: rgba(24, 169, 87, .16); color: #4ed49a; }
[data-theme="dark"] .tint-pink   { background: rgba(228, 64, 126, .16); color: #ff7dab; }
[data-theme="dark"] .tint-blue   { background: rgba(59, 111, 224, .16); color: #7ba2f0; }

/* ================= RESPONSIVE ================= */

@media (min-width: 720px) {
  .container { padding-inline: 28px; }
  .main-nav { display: flex; }
  .hero { padding-top: 68px; }

  .plat-strip { gap: 0; }
  .platform-chips { display: flex; flex-wrap: wrap; }
  .chip { padding: 8px 14px; }
  .chip-wide { grid-column: auto; flex: 1 1 auto; }
  .strip-card { width: 64px; height: 66px; border-radius: 16px; }
  .strip-card.is-open { width: 240px; }
  .showcase-wrap .strip-card.is-open { width: 248px; }
  .strip-ic { width: 50px; height: 50px; }
  .strip-ic.tl-tt > svg { width: 32px; height: 32px; }
  .strip-name { font-size: 17px; }

  .downloader { padding: 24px; }
  .input-row { padding: 8px 8px 8px 16px; }
  #urlInput { font-size: 16px; }

  .result-card {
    flex-direction: row;
    align-items: stretch;
    padding: 18px;
  }
  .result-card .thumb { width: 340px; flex-shrink: 0; }
  .result-card .thumb.is-vertical { width: 240px; max-height: 480px; }
  .result-meta { padding-block: 2px; }
  .res-actions { margin-top: auto; padding-top: 8px; }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: none;
    counter-reset: step;
  }
  .step { padding-inline-start: 0; padding-top: 66px; text-align: center; }
  .step-num {
    inset-inline-start: 50%;
    transform: translateX(-50%);
    top: 0;
  }
  [dir="rtl"] .step-num { transform: translateX(50%); }
  .step p { margin-inline: auto; }
  .step:not(:last-child)::after {
    inset-inline-start: auto;
    top: 21px;
    left: calc(50% + 42px);
    right: calc(-50% + 42px);
    border-inline-start: 0;
    border-top: 2px dashed var(--line-strong);
  }

  .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  section { padding-top: 76px; }

  .footer-inner { flex-direction: row; justify-content: space-between; text-align: start; gap: 20px; flex-wrap: wrap; }
  .foot-disc { max-width: 380px; }
}

@media (min-width: 1024px) {
  .downloader { padding: 28px; }
}

/* ================= MOBILE RAPAT (<= 640px) =================
   Panel GeoScope + slider foto dirapatkan di ponsel — desktop tidak berubah.
   (a) kartu gs rapat, stat tile 2 kolom tetap, font verdict 15px;
   (b) sinyal default tertutup (markup <details>) + komentar max-height 260px;
   (c) tombol carousel/video tinggi 44px nyaman;
   (d) panah slider 36px, tidak menutupi gambar;
   (e) header panel + chip wrap, tidak overflow. */
@media (max-width: 640px) {
  /* (a) panel GeoScope */
  .gs-card { padding: 14px; }
  .gs-stats { grid-template-columns: repeat(2, 1fr); }
  .gs-verdict-txt { font-size: 15px; }
  /* (b) daftar komentar tetap terbuka tapi terbatas */
  .gs-cmt-list { max-height: 260px; }
  /* (e) header panel + chip wrap, tidak overflow */
  .gs-vhead { gap: 8px; }
  .gs-author { font-size: 14.5px; overflow-wrap: anywhere; }
  .gs-handle { overflow-wrap: anywhere; }
  .gs-conflab { white-space: normal; }
  .gs-caption, .gs-cmt .gs-txt { overflow-wrap: anywhere; }
  /* (c) tombol carousel & video: tinggi nyaman 44px */
  .res-actions .btn-secondary,
  .btn-analyze { min-height: 44px; }
  /* (d) slider: panah lebih kecil, tak menutupi gambar */
  .ph-nav { width: 36px; height: 36px; }
  .ph-nav svg { width: 18px; height: 18px; }
  .ph-prev { left: 6px; }
  .ph-next { right: 6px; }
}


/* ================= AD MODALS ================= */

body.ad-open { overflow: hidden; }

.ad-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
}
.ad-modal[hidden] { display: none !important; }

.ad-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ad-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  min-height: 320px;
  padding: 16px;
  border-radius: 18px;
  background: var(--card);
  color: var(--text);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ad-dialog-download { min-height: 280px; }

.ad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.ad-countdown {
  min-width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}

.ad-slot {
  flex: 1;
  min-height: 220px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.ad-slot > * { max-width: 100%; }

.ad-skip {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  transition: opacity .2s, transform .2s;
}
.ad-skip:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.ad-skip:not(:disabled):hover { transform: translateY(-1px); }

.ad-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(16,20,31,.08);
  font-size: 25px;
  line-height: 1;
}
.ad-close:hover { background: rgba(16,20,31,.14); }

.ad-hint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

[data-theme="dark"] .ad-dialog { background: #171b2a; }
[data-theme="dark"] .ad-slot { background: #101421; }
[data-theme="dark"] .ad-close { background: rgba(255,255,255,.10); }

/* ==== loading spinner pada tombol unduh & foto ==== */
.btn-secondary { position: relative; }
.btn-secondary.is-loading { pointer-events: none; }
.btn-secondary.is-loading > * { visibility: hidden; }
.ph-cell { position: relative; }
.ph-cell.is-loading { pointer-events: none; }
.ph-cell.is-loading img { opacity: .3; }
.btn-secondary.is-loading::after,
.ph-cell.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--ink, var(--text));
  animation: nvs-spin .65s linear infinite;
}
@keyframes nvs-spin { to { transform: rotate(360deg); } }