/* ============================================================
   Sample A - Glass Accent
   Arah: terang, kertas tulang, kaca hanya sebagai aksen di dua
   elemen kunci (kartu QR & panel saldo). Dials: ENERGY 2 / RHYTHM 2
   / MOTION 2.
   Alasan keputusan (R-31):
   - Warna: bone (kertas), ink (tinta biru-gelap), satu aksen teal
     "kartu bank" karena produk ini menyimpan saldo rupiah.
   - Tipografi: Sora untuk angka/heading (geometris, tidak default
     AI), Figtree untuk teks (netral, mudah dibaca).
   - Kaca: hanya di kartu QR + panel saldo supaya QR dan saldo jadi
     fokus, sisanya solid supaya hierarki tidak rata (R-10 dose cap).
   ============================================================ */

:root {
  --font-head: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;

  --bg: #f7f4ec;
  --panel: #fffdf7;
  --ink: #182740;
  --body: #46536b;
  --muted: #5d6883;
  --hairline: #e4ddcc;
  --accent: #0f766e;
  --accent-ink: #ffffff;
  --focus: #0f766e;

  --banner-bg: #efe9da;
  --banner-ink: #5a6478;
  --banner-line: #e0d8c4;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --shadow-key: 0 18px 44px -20px rgba(24, 39, 64, .35);
}

body { font-family: var(--font-body); }

.sample-banner { background: var(--banner-bg); color: var(--banner-ink); }

/* Header: solid, not glass. The sticky header is where glass would be loudest,
   so it stays opaque on purpose. */
.site-head {
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { font-size: 17px; }
.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 { color: var(--muted); font-size: 14.5px; }
.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, opacity .12s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .94; }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); transform: 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; }

/* The two glass moments: hero balance panel and the QR card. */
.hero-panel {
  margin: 0;
  padding: 22px;
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 255, 255, .65);
  background: linear-gradient(150deg, rgba(255, 255, 255, .78), rgba(255, 253, 247, .55));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  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; letter-spacing: -.01em; color: var(--ink); }
.hp-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hp-bar { height: 6px; border-radius: 999px; background: rgba(24, 39, 64, .1); 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;
  letter-spacing: .01em;
}
.chip[data-state="contoh"] { background: #eef0f6; color: #5a6478; }
.chip[data-state="pending"] { background: #fdf1dc; color: #8a5a12; }
.chip[data-state="cancelled"] { background: #fbe4e1; color: #96382f; }

.strip { border-block: 1px solid var(--hairline); background: var(--panel); }
.strip-label { color: var(--muted); }
.strip-num { color: var(--ink); }

.models { background: var(--bg); }
table.data { background: var(--panel); border-radius: var(--radius-m); overflow: hidden; }
table.data thead th { font-size: 12px; letter-spacing: .02em; color: var(--muted); background: #f1ecdf; 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: #faf7ee; }
.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: #e9f3f1; color: var(--accent); font-size: 12px; font-weight: 600; }
.endpoint-pill.pending { background: #f3efe3; color: #6b5e3e; font-weight: 500; }

.docs { background: var(--panel); }
pre.code { background: #16233a; color: #e8ecf4; border-radius: var(--radius-m); }
.docs-toc a { color: var(--body); text-decoration: none; }
.docs-toc a:hover { color: var(--accent); text-decoration: underline; }
.docs-body h3 { color: var(--ink); }
.method { display: inline-block; padding: 2px 8px; border-radius: var(--radius-s); background: #e9f3f1; 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: var(--panel); }
.auth-card {
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  background: var(--bg);
}
.tab {
  min-height: 42px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--body);
  font-weight: 600;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--panel); color: var(--ink); border-color: var(--accent); }
.field input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--panel);
}
.field input:focus-visible { border-color: var(--accent); }
.form-note { background: #eef6f4; border: 1px solid #cfe6e1; border-radius: var(--radius-s); color: #1d4f49; }

.dashboard { background: var(--bg); }
.dashboard-panel {
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-l);
  padding: clamp(18px, 3vw, 28px);
  background: var(--panel);
}
.dash-kicker { color: var(--muted); }
.dash-actions .btn { margin-top: 0; }
.card {
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  background: var(--bg);
}
.balance-card {
  border: 1px solid rgba(15, 118, 110, .35);
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(233, 243, 241, .6));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-key);
}
.balance-card .amount { color: var(--ink); }
.chip-opt {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--panel);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.chip-opt.is-active { border-color: var(--accent); color: var(--accent); background: #e9f3f1; }
.amounts dt { color: var(--muted); }
.qr-row img { border: 1px solid var(--hairline); border-radius: var(--radius-m); background: #fff; padding: 8px; }
.status-ok { color: var(--accent); font-weight: 600; }
.history .num, .usage-list .num { color: var(--body); font-size: 13.5px; }

.sample-banner, .site-nav a, .docs-toc a, .site-foot a { text-underline-offset: 3px; }
.site-foot { background: var(--bg); }

/* Focus ring on the accent; visible on every surface in this theme. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Motion: entrance only where it aids orientation (MOTION 2). */
@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; }
}