/* ============================================================
   Sample C - Ledger
   Arah: dokumen pembukuan. Kertas putih, tinta hitam, satu aksen
   vermilion. Serif untuk judul, angka tabular untuk uang. Tanpa
   kaca sama sekali.
   Dials: ENERGY 1 / RHYTHM 2 / MOTION 1.
   Alasan keputusan (R-31):
   - Warna: kertas + tinta + satu aksen vermilion supaya semua
     angka uang jadi titik perhatian tunggal (2-3 warna + aksen).
   - Tipografi: Fraunces (serif, karakter ledger/pembukuan lama)
     untuk judul + Archivo (sans tegas) untuk teks dan angka.
     Bukan set font default AI.
   - Garis rambut dan radius kecil: meniru aturan buku besar, dan
     membedakan hierarki tanpa bayangan.
   ============================================================ */

:root {
  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;

  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #111111;
  --body: #3d3d3d;
  --muted: #6f6f6f;
  --hairline: #d9d9d4;
  --accent: #c2401c;
  --accent-ink: #ffffff;
  --focus: #c2401c;

  --banner-bg: #f4f2ec;
  --banner-ink: #57534a;
  --banner-line: #e2dfd6;

  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
}

body { background: var(--bg); }

.sample-banner { background: var(--banner-bg); color: var(--banner-ink); border-bottom: 1px solid var(--banner-line); }

.site-head { background: var(--bg); }
.brand { font-family: var(--font-head); font-weight: 600; font-size: 18px; }
.site-nav a { font-size: 14px; color: var(--body); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 4px; }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

h1, h2, h3 { color: var(--ink); font-family: var(--font-head); }
h1 { font-weight: 600; letter-spacing: -.015em; }
.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(--ink);
  border-radius: var(--radius-s);
  background: var(--ink);
  color: #ffffff;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .1s ease, color .1s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn.small { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; border-color: var(--hairline); color: var(--ink); }

.hero-panel {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--bg);
}
.hp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hp-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hp-amount { font-family: var(--font-head); font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; margin-top: 10px; color: var(--ink); }
.hp-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hp-bar { height: 4px; background: var(--hairline); margin-top: 16px; overflow: hidden; }
.hp-bar span { display: block; height: 100%; background: var(--accent); }
.hp-note { font-size: 13px; color: var(--body); margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-s);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.chip[data-state="contoh"] { background: #f1efe8; color: #57534a; }
.chip[data-state="pending"] { background: #faeadd; color: #9a4d17; }
.chip[data-state="cancelled"] { background: #f3e2df; color: #8f2f1c; }

.strip { border-block: 1px solid var(--ink); }
.strip-label { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.strip-num { color: var(--ink); }

.models { background: var(--bg); }
.family h3 { font-size: 17px; }
.family-count { text-transform: none; letter-spacing: 0; }
table.data { border: 1px solid var(--hairline); }
table.data thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink);
  background: var(--banner-bg);
  border-bottom: 1px solid var(--ink);
  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; }
.model-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.endpoint-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--hairline); border-radius: var(--radius-s); color: var(--body); font-size: 11.5px; }
.endpoint-pill.pending { border-style: dashed; color: var(--muted); }

.docs { background: var(--bg); }
pre.code { background: #161616; color: #f2f2f2; border-radius: var(--radius-m); }
.docs-toc a { color: var(--body); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 6px; }
.docs-toc a:hover { color: var(--accent); border-color: var(--accent); }
.method { display: inline-block; padding: 2px 8px; border: 1px solid var(--ink); border-radius: var(--radius-s); color: var(--ink); font-size: 11.5px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.auth { background: var(--bg); }
.auth-card { padding: 24px; border: 1px solid var(--ink); border-radius: var(--radius-m); 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(--ink); color: #ffffff; border-color: var(--ink); }
.field input {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-s);
  background: var(--bg);
}
.field input:focus-visible { border-color: var(--ink); }
.form-note { background: var(--banner-bg); border: 1px solid var(--banner-line); border-radius: var(--radius-s); color: #57534a; }

.dashboard { background: var(--bg); }
.dashboard-panel { border: 1px solid var(--hairline); border-radius: var(--radius-m); padding: clamp(18px, 3vw, 28px); background: var(--bg); }
.dash-kicker { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.card { padding: 20px; border: 1px solid var(--hairline); border-radius: var(--radius-m); background: var(--bg); }
.balance-card { border-color: var(--ink); }
.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(--bg);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.chip-opt.is-active { border-color: var(--ink); background: var(--ink); color: #ffffff; }
.amounts dt { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.amounts dd { font-family: var(--font-head); }
.qr-row img { border: 1px solid var(--ink); border-radius: var(--radius-s); padding: 8px; background: #fff; }
.status-ok { color: var(--accent); font-weight: 600; }
.history .num, .usage-list .num { color: var(--body); font-size: 13px; }

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

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

/* MOTION 1: no entrance animation; hover feedback only. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}