/* 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");

/* ── Palet: biru tinta dengan aksen emas ──────────────────────
   Satu palet untuk semua halaman, sama dengan halaman jualannya.
   Gelap dipakai sebagai keadaan tetap, bukan sebagai pilihan tema —
   itu sebabnya blok prefers-color-scheme dan [data-theme] tidak lagi
   menimpa apa pun di sini: halaman terang dan gelap yang berselang
   membuat satu produk terasa seperti dua produk.

   Beberapa token sengaja berupa rgba, bukan warna pekat. Di atas
   dasar segelap ini, bidang lembut yang tembus pandang menyatu
   dengan latarnya; warna pekat justru terlihat seperti tambalan. */
/* ── Palet: biru tinta dengan aksen emas ──────────────────────
   Satu palet untuk semua halaman, sama dengan halaman jualannya.
   Gelap dipakai sebagai keadaan tetap, bukan sebagai pilihan tema:
   halaman terang dan gelap yang berselang membuat satu produk
   terasa seperti dua produk.

   EMPAT LAPIS, bukan satu warna biru berulang. Kalau latar, kartu,
   dan kolom isian punya terang yang hampir sama, matanya tidak
   punya pegangan — semuanya melebur jadi satu bidang. Karena itu
   tiap lapis diberi jarak terang yang benar-benar terasa:

     ground   dasar halaman, paling gelap
     surface  kartu dan panel, jelas lebih terang dari dasar
     sunk     kolom isian, lebih gelap lagi supaya terbaca cekung
     well     bidang pengelompokan, putih tembus pandang tipis

   Teksnya sengaja hangat, bukan kebiruan. Teks biru muda di atas
   dasar biru membuat mata bekerja lebih keras tanpa alasan; nada
   krem dan pasir memberi kontras warna, bukan sekadar kontras
   terang. */
:root {
  /* Latar tetap membawa nuansa gelap-emas ala AutoLanding, tapi apa pun
     yang dibaca lama -- kartu, panel, kolom isian -- sekarang PUTIH
     sungguhan. Dua kali percobaan mencerahkan navy tidak cukup nyaman
     di mata; putih dengan teks gelap adalah pilihan yang sudah teruji
     untuk dipakai berjam-jam, jadi itu yang dipakai di sini. */
  --ground:#F7F3EA;                  /* dasar halaman, krem hangat  */
  --surface:#FFFFFF;                 /* kartu dan panel — putih     */
  --sunk:#F1ECE0;                    /* kolom isian, sedikit cekung */
  --well:rgba(26,23,20,.035);        /* pengelompokan formulir      */
  --ink:#1A1714;                     /* judul                       */
  --body:#3B342C;                    /* teks isi                    */
  --muted:#6E655A;                   /* keterangan                  */
  --rule:#E4DED4;                    /* garis pemisah               */
  --amber:#B87C08;                   /* aksen emas, gelap agar terbaca di atas putih */
  --amber-soft:#FBF0D6;
  --amber-edge:#E8C77A;
  --stop:#A63C22; --stop-soft:#FBEAE4;
  --go:#2C6459;   --go-soft:#E2EFEA;
  --shopee:#D2551E; --tiktok:#1A1714;
  --r:3px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--body);
  background: var(--ground);
  background-image: linear-gradient(180deg, #FBF8F2 0%, #F7F3EA 60%, #F2ECDD 100%);
  background-attachment: fixed;
  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); background: var(--sunk); }
button.utama, .btn.utama {
  background: linear-gradient(135deg, #F3DDA0, #E0B95F 55%, #CAA049);
  border-color: transparent; color: #22190A; font-weight: 700;
}
button.utama:hover, .btn.utama:hover {
  background: linear-gradient(135deg, #F8E7B8, #E8C67A 55%, #D4AB52);
}
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(--sunk); 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; }
::placeholder { color: var(--muted); opacity: .62; }

/* Isian otomatis Chrome memaksa latar terang dan mengabaikan
   background biasa. Satu-satunya cara menahannya adalah bayangan
   dalam setebal kolomnya sendiri; transisi yang sangat panjang
   mencegah warna bawaannya sempat berkedip lebih dulu. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--sunk) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}

.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; }
}