/* Token warna, tema terang/gelap, dan elemen dasar */
:root{
  --navy:#1f3a68;--navy-d:#152a4d;--gold:#e0b44a;--flag:#c0392b;
  --bg:#eef2f7;--surface:#ffffff;--surface-2:#f5f7fb;--ink:#15213a;--muted:#5a6a82;--line:#dbe2ec;
  --primary:#1f3a68;--primary-h:#27477e;--on-primary:#fff;--link:#1f3a68;
  --ok:#1d7f53;--ok-bg:#e2f3ea;--warn:#95600f;--warn-bg:#fcf0d9;--err:#b3362b;--err-bg:#fae5e2;
  --radius:12px;--shadow:0 1px 2px rgba(21,33,58,.05),0 8px 24px -14px rgba(21,33,58,.28);
  --pop-shadow:0 24px 48px -16px rgba(10,18,33,.4),0 2px 6px rgba(10,18,33,.08);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kawung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.1'%3E%3Cellipse cx='14' cy='7' rx='4' ry='6.3'/%3E%3Cellipse cx='14' cy='21' rx='4' ry='6.3'/%3E%3Cellipse cx='7' cy='14' rx='6.3' ry='4'/%3E%3Cellipse cx='21' cy='14' rx='6.3' ry='4'/%3E%3Ccircle cx='14' cy='14' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"]{
  --bg:#0e1522;--surface:#162033;--surface-2:#1b2740;--ink:#e6ecf5;--muted:#9aabc4;--line:#2a3955;
  --primary:#3a67b0;--primary-h:#4675c2;--link:#8fb3ec;
  --ok:#56c690;--ok-bg:#15352a;--warn:#e9b45c;--warn-bg:#392d16;--err:#f18a7e;--err-bg:#3b1f1d;
  --shadow:0 1px 2px rgba(0,0,0,.35);--pop-shadow:0 24px 48px -16px rgba(0,0,0,.7);color-scheme:dark;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;transition:background .2s}
img,svg{max-width:100%}
a{color:var(--link)}
h1{font-size:clamp(1.45rem,2.3vw,1.85rem);line-height:1.2;margin:0 0 .35rem;letter-spacing:-.015em;font-weight:800}
h2{font-size:1.02rem;margin:0;font-weight:700}
h3,p{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.muted{color:var(--muted)}
.wrap{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;width:100%}
@media (max-width:640px){.wrap{padding-left:14px;padding-right:14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}