/* afbazada :: token bersama untuk hub publik dan dashboard */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --ground:#FAF8F4; --surface:#FFFFFF; --sunk:#F2EEE6;
  --ink:#1A1714; --body:#3B342C; --muted:#6E655A; --rule:#E4DED4;
  --amber:#B87C08; --amber-soft:#FBF0D6; --amber-edge:#E8C77A;
  --stop:#A63C22; --stop-soft:#FBEAE4;
  --go:#2C6459; --go-soft:#E2EFEA;
  --shopee:#D2551E; --tiktok:#1A1714;
  --r:3px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#15130E; --surface:#1E1B15; --sunk:#191610;
    --ink:#F2EDE2; --body:#DCD4C6; --muted:#9A9083; --rule:#332D23;
    --amber:#E8AF3C; --amber-soft:#2E250F; --amber-edge:#5C4A1C;
    --stop:#E08363; --stop-soft:#301810;
    --go:#6FB5A3; --go-soft:#12241F;
    --shopee:#F0855A; --tiktok:#F2EDE2;
  }
}
:root[data-theme="dark"] {
  --ground:#15130E; --surface:#1E1B15; --sunk:#191610;
  --ink:#F2EDE2; --body:#DCD4C6; --muted:#9A9083; --rule:#332D23;
  --amber:#E8AF3C; --amber-soft:#2E250F; --amber-edge:#5C4A1C;
  --stop:#E08363; --stop-soft:#301810;
  --go:#6FB5A3; --go-soft:#12241F;
  --shopee:#F0855A; --tiktok:#F2EDE2;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--body);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif; color: var(--ink); margin: 0; text-wrap: balance; }
a { color: var(--amber); text-underline-offset: 2px; }
img { max-width: 100%; display: block; }
.mono, .num { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.badge {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
  border: 1px solid currentColor; display: inline-block;
}
.badge.shopee { color: var(--shopee); }
.badge.tiktok { color: var(--muted); }

button, .btn {
  font-family: "Instrument Sans", sans-serif; font-size: 14.5px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.3;
  text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .btn:hover { border-color: var(--amber); }
button.utama, .btn.utama { background: var(--amber); border-color: var(--amber); color: #FFF8E6; }
:root[data-theme="dark"] button.utama, :root[data-theme="dark"] .btn.utama { color: #1A1408; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.utama,
  :root:not([data-theme="light"]) .btn.utama { color: #1A1408; }
}
button.bahaya { color: var(--stop); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

input, select, textarea {
  font-family: "Instrument Sans", sans-serif; font-size: 14.5px;
  padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); color: var(--ink); width: 100%;
}
input:focus, select:focus { border-color: var(--amber); }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }

.kartu { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}