/* NUSVA Design System v4.2 — lapisan token & komponen.
   Pakai variabel ini, jangan menulis hex sendiri. */
:root {
  --n900:#05192B; --n700:#0A3D62; --n500:#0C6E88; --n200:#1ECAD3;
  --putih:#FFFFFF; --kabut:#FBFBFD; --g050:#F5F5F7; --g100:#E8E8ED; --g200:#D2D2D7;
  --g400:#86868B; --g500:#6E6E73; --g900:#1D1D1F;

  --latar:var(--kabut); --permukaan:var(--putih); --garis:var(--g100);
  --tinta:var(--g900); --tinta-2:var(--g500); --tinta-3:var(--g400);
  --interaktif:#0C6E88; --aksen:#1ECAD3; --aksen-samar:rgba(30,202,211,.12);

  --sukses:#0E8A63; --sukses-pekat:#0A6B4D;
  --awas:#B45309;  --awas-pekat:#8A4008;
  --bahaya:#C0362C;--bahaya-pekat:#96261E;
  --info:#1E54B4;  --ai:#6D4AED;

  --grad-induk:linear-gradient(118deg,#0A3D62 0%,#0A5570 22%,#0C6E88 42%,#0E8FA1 62%,#10A5B3 76%,#14B1BD 88%,#1ECAD3 100%);
  --grad-nebula:linear-gradient(135deg,#0A3D62 0%,#4A3FB0 55%,#6D4AED 100%);
  --grad-senja:linear-gradient(135deg,#C2410C 0%,#F5A524 100%);

  --huruf:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --huruf-naratif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-penuh:999px;
  --e1:0 1px 2px rgba(5,25,43,.06),0 1px 3px rgba(5,25,43,.04);
  --e2:0 4px 12px rgba(5,25,43,.08),0 2px 4px rgba(5,25,43,.04);
  --e3:0 16px 40px -12px rgba(5,25,43,.22),0 4px 12px rgba(5,25,43,.06);
  --cahaya:0 8px 24px -6px rgba(12,110,136,.45);
  --kurva:cubic-bezier(.32,.72,0,1); --pegas:cubic-bezier(.34,1.42,.64,1);
  --d1:160ms; --d2:280ms; --d3:440ms;
  --baca:640px; --isi:1024px; --halaman:1320px; --sentuh:44px;
  /* Permukaan publik boleh lebih cair. Shell aplikasi, dashboard, laporan, dan
     analitik TETAP memakai --halaman, karena lebarnya ditentukan kepadatan
     data, bukan selera. Dua nilai, dua kegunaan, bukan drift. */
  --halaman-publik:clamp(1320px,78vw,1560px);
}
[data-theme="dark"] {
  --latar:#0B0B0F; --permukaan:#17171C; --garis:#2A2A30;
  --tinta:#F5F5F7; --tinta-2:#A1A1A6; --tinta-3:#6E6E73;
  --interaktif:#4FD3DE; --g050:#1F1F25; --g100:#2A2A30; --g200:#3A3A42;
}

body { background:var(--latar); color:var(--tinta); font-family:var(--huruf);
       font-size:15.5px; line-height:1.62; letter-spacing:-.006em;
       -webkit-font-smoothing:antialiased; }
.num { font-variant-numeric:tabular-nums; }

/* Peran tipografi. Token menyebut tujuh peran; sampai 5 September 2026 berkas
   ini tidak menyediakan satu pun sebagai kelas, sehingga pemakainya terpaksa
   mengarang ukuran sendiri, persis yang dilarang sistem ini.

   Pembagian wajahnya: judul yang BERCERITA memakai .naratif, sans tebal hanya
   untuk yang harus dikenali cepat, yaitu nama produk, tombol, dan label. */
.display { font-size:clamp(36px,6.6vw,92px); line-height:.96; letter-spacing:-.045em;
  font-weight:800; text-wrap:balance; }
.naratif { font-family:var(--huruf-naratif); font-style:italic; font-weight:400;
  font-size:clamp(30px,5.6vw,74px); line-height:1.05; letter-spacing:-.02em;
  text-wrap:balance; }
.title    { font-size:26px;   font-weight:800; letter-spacing:-.03em; }
.heading  { font-size:17px;   font-weight:800; letter-spacing:-.02em; }
.caption  { font-size:13px;   font-weight:500; }
.overline { font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(12,110,136,.4); border-radius:8px; }

/* Tombol: hanya SATU primary bergradasi per layar. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:15px; font-weight:700; border:1px solid transparent;
  border-radius:var(--r-md); padding:11px 20px; min-height:var(--sentuh); cursor:pointer;
  transition:all var(--d1) var(--kurva); }
.btn-utama { background-image:var(--grad-induk); background-size:220%; color:#fff; box-shadow:var(--e1); }
.btn-utama:hover { transform:translateY(-1px); box-shadow:var(--cahaya); }
.btn-kedua { background:var(--permukaan); border-color:var(--garis); color:var(--tinta); }
.btn-kedua:hover { border-color:var(--interaktif); color:var(--interaktif); }

.kartu { background:var(--permukaan); border:1px solid var(--garis);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--e1); }

.isian, .pilihan { width:100%; font-family:inherit; font-size:15.5px; color:var(--tinta);
  background:var(--permukaan); border:1px solid var(--g200); border-radius:var(--r-md);
  padding:12px 14px; outline:none; transition:all var(--d1) var(--kurva); }
.isian:focus, .pilihan:focus { border-color:var(--interaktif); box-shadow:0 0 0 3px var(--aksen-samar); }
.pilihan { appearance:none; padding-right:40px;
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.label { display:block; font-size:13.5px; font-weight:700; color:var(--n700); margin-bottom:6px; }

.chip { border:1.5px solid var(--garis); background:var(--permukaan); color:var(--tinta);
  border-radius:var(--r-penuh); padding:9px 14px; min-height:36px; font-size:14px; font-weight:600;
  cursor:pointer; transition:all var(--d1) var(--kurva); }
.chip:hover { border-color:var(--interaktif); color:var(--interaktif); }
.chip-aktif { background:var(--interaktif); border-color:var(--interaktif); color:#fff; }

/* Lencana status: tint 10-12% + teks pekat. Titik memakai currentColor. */
.lencana { display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-penuh);
  padding:3px 10px; font-size:11px; font-weight:800; }
.lencana::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.lencana-sukses { background:rgba(14,138,99,.12);  color:var(--sukses-pekat); }
.lencana-awas   { background:rgba(180,83,9,.12);   color:var(--awas-pekat); }
.lencana-bahaya { background:rgba(192,54,44,.10);  color:var(--bahaya-pekat); }
.lencana-info   { background:rgba(30,84,180,.10);  color:var(--info); }

/* Penanda AI: WAJIB untuk setiap keluaran atau fitur AI (Nexa). */
.tanda-ai { display:inline-flex; align-items:center; gap:5px; border-radius:var(--r-penuh);
  padding:3px 10px; font-size:11px; font-weight:800; background:var(--grad-nebula); color:#fff; }
.tanda-ai::before { content:"\2726"; }

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