/* ============================================================
   Sample B - Deep Glass
   Arah: gelap laut, kaca sebagai karakter SELURUH permukaan.
   Dials: ENERGY 3 / RHYTHM 2 / MOTION 2.

   CATATAN OVERRIDE (R-10): blur dipakai di lebih dari 1-2 elemen
   (header, kartu, panel, modal) atas permintaan pemilik produk,
   supaya bisa dibandingkan langsung dengan sample A. Ini override
   eksplisit, bukan kelalaian. Bandingkan dengan A/C lalu putuskan.

   Alasan keputusan (R-31):
   - Warna: slate laut + mint es; audiens produk ini pembeli token
     AI yang akrab dengan antarmuka gelap, dan aksen mint menandai
     uang/aksi supaya tetap satu titik fokus.
   - Teks tetap kontras tinggi di atas kaca (tanpa teks abu di atas
     abu); fokus keyboard memakai ring mint.
   - Tipografi: Schibsted Grotesk (heading, berkarakter) + Outfit
     (teks) supaya tidak memakai set font default AI.
   - Kaca diberi batas 1px terang supaya tepi permukaan terbaca di
     layar HP, bukan kabur tanpa bentuk.
   ============================================================ */

:root {
  --font-head: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, sans-serif;

  --bg: #0b1524;
  --bg-deep: #081120;
  --ink: #f2f6fb;
  --body: #c3cede;
  --muted: #93a3ba;
  --hairline: rgba(255, 255, 255, .14);
  --accent: #5eead4;
  --accent-ink: #04211c;
  --focus: #5eead4;

  --glass-bg: rgba(255, 255, 255, .07);
  --glass-bg-strong: rgba(255, 255, 255, .1);
  --glass-border: rgba(255, 255, 255, .16);
  --glass-blur: blur(16px);

  --banner-bg: rgba(255, 255, 255, .06);
  --banner-ink: #b8c4d6;
  --banner-line: rgba(255, 255, 255, .12);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --shadow-key: 0 24px 60px -24px rgba(0, 0, 0, .7);
}

body {
  background:
    radial-gradient(1000px 500px at 85% -10%, rgba(94, 234, 212, .1), transparent 60%),
    radial-gradient(800px 420px at -10% 20%, rgba(96, 165, 250, .08), transparent 55%),
    var(--bg);
}

/* Kaca sebagai karakter: header ikut berkaca di sini. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 21, 36, .55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}
.brand { font-size: 17px; color: var(--ink); }
.site-nav a { font-size: 14.5px; color: var(--body); }
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

h1, h2, h3 { color: var(--ink); }
.lead { color: var(--body); }
.sub, .fine { color: var(--muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -12px rgba(94, 234, 212, .5); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: var(--glass-border);
  color: var(--ink);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn.small { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

.panel-glass, .hero-panel, .auth-card, .card, .dashboard-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.hero-panel {
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-l);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-key);
}
.hp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-label { font-size: 13px; color: var(--muted); }
.hp-amount { font-family: var(--font-head); font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; margin-top: 10px; color: var(--ink); }
.hp-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hp-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); margin-top: 16px; overflow: hidden; }
.hp-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.hp-note { font-size: 13px; color: var(--body); margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.chip[data-state="contoh"] { background: rgba(255, 255, 255, .12); color: var(--body); }
.chip[data-state="pending"] { background: rgba(250, 204, 21, .16); color: #fde68a; }
.chip[data-state="cancelled"] { background: rgba(248, 113, 113, .16); color: #fecaca; }

.strip { border-block: 1px solid var(--hairline); background: rgba(255, 255, 255, .03); }
.strip-label { color: var(--muted); }
.strip-num { color: var(--accent); }

.models { background: transparent; }
.family h3 { color: var(--ink); }
table.data { background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border); border-radius: var(--radius-m); overflow: hidden; }
table.data thead th { font-size: 12px; color: var(--body); background: rgba(255, 255, 255, .07); font-weight: 600; }
table.data td, table.data th { border-bottom: 1px solid var(--hairline); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: rgba(94, 234, 212, .05); }
.model-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--ink); }
.endpoint-pill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-s); background: rgba(94, 234, 212, .14); color: var(--accent); font-size: 12px; font-weight: 600; }
.endpoint-pill.pending { background: rgba(255, 255, 255, .1); color: var(--muted); font-weight: 500; }

.docs { background: transparent; }
pre.code { background: var(--bg-deep); color: #dbe6f3; border: 1px solid var(--glass-border); border-radius: var(--radius-m); }
.docs-toc a { color: var(--body); text-decoration: none; }
.docs-toc a:hover { color: var(--accent); text-decoration: underline; }
.method { display: inline-block; padding: 2px 8px; border-radius: var(--radius-s); background: rgba(94, 234, 212, .14); color: var(--accent); font-size: 12px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.endpoint-path code { color: var(--ink); }

.auth { background: transparent; }
.auth-card { padding: 24px; border-radius: var(--radius-l); background: var(--glass-bg-strong); }
.tab {
  min-height: 42px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--body);
  font-weight: 600;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: rgba(94, 234, 212, .12); color: var(--accent); border-color: var(--accent); }
.field input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
}
.field input::placeholder { color: var(--muted); }
.field input:focus-visible { border-color: var(--accent); }
.form-note { background: rgba(94, 234, 212, .1); border: 1px solid rgba(94, 234, 212, .3); border-radius: var(--radius-s); color: #c8f7ec; }

.dashboard { background: transparent; }
.dashboard-panel { border-style: solid; border-radius: var(--radius-l); padding: clamp(18px, 3vw, 28px); background: rgba(255, 255, 255, .05); }
.dash-kicker { color: var(--muted); }
.card { padding: 20px; border-radius: var(--radius-m); }
.balance-card { background: rgba(94, 234, 212, .1); border-color: rgba(94, 234, 212, .35); box-shadow: var(--shadow-key); }
.balance-card .amount { color: var(--ink); }

/* QR WAJIB di atas piringan terang: kaca di sini akan merusak keterbacaan scan. */
.checkout .qr-row img { background: #ffffff; padding: 10px; border-radius: var(--radius-m); border: 1px solid var(--glass-border); }

.chip-opt {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .05);
  color: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.chip-opt.is-active { border-color: var(--accent); color: var(--accent); background: rgba(94, 234, 212, .12); }
.amounts dt { color: var(--muted); }
.status-ok { color: var(--accent); font-weight: 600; }
.history .num, .usage-list .num { color: var(--body); font-size: 13.5px; }

.site-foot { border-top: 1px solid var(--hairline); }
.site-foot a { color: var(--body); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-panel { animation: rise .5s ease both; }
  .hero-panel { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}