/* [CHANGE 2026-10-06] what: token & komponen bersama mockup Tokabah · why: pratonton reka bentuk untuk sign-off sebelum bina sebenar · verify: buka /mockup/ pada 375px dan 1440px, tiada skrol mendatar */
:root{
  --hutan:#123D2F; --hutan-2:#1C5442; --hutan-3:#245E4B;
  --saga:#D2512B; --saga-2:#B9431F;
  --latar:#F4F5F2; --kad:#FFFFFF; --garis:#DCE2DD;
  --dakwat:#15221D; --dakwat-2:#4A5A53; --dakwat-3:#6B7A73;
  --bronze:#A86A3D; --silver:#8C96A0; --gold:#C79A1E;
  --naik:#2E7D4F;
  --r-kad:14px; --r-input:10px; --r-pil:999px;
  --bayang:0 1px 2px rgba(18,61,47,.06),0 8px 24px rgba(18,61,47,.08);
  --f-tajuk:"Bricolage Grotesque",system-ui,sans-serif;
  --f-badan:"Figtree",system-ui,sans-serif;
  --lebar:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--latar);color:var(--dakwat);font:16px/1.55 var(--f-badan);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-tajuk);line-height:1.1;margin:0;letter-spacing:-.01em}
p{margin:0}
.wang,.angka{font-variant-numeric:tabular-nums}
.bekas{max-width:var(--lebar);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nota mockup */
.nota-mockup{background:var(--dakwat);color:#E6ECE8;font-size:13px;text-align:center;padding:6px 16px}

/* butang */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--r-pil);font:600 15px/1 var(--f-badan);text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-utama{background:var(--saga);color:#fff}
.btn-utama:hover{background:var(--saga-2)}
.btn-garis{border-color:currentColor;background:transparent}
.btn-gelap{background:var(--hutan);color:#fff}
.btn-kecil{min-height:40px;padding:0 16px;font-size:14px}
:focus-visible{outline:3px solid var(--saga);outline-offset:2px}

/* lencana pakej */
.lencana{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pil);font:700 12px/1.4 var(--f-badan);letter-spacing:.02em;color:#fff}
.lencana.bronze{background:var(--bronze)} .lencana.silver{background:var(--silver)} .lencana.gold{background:var(--gold);color:#2A2108}

/* monogram */
.mono{--c:var(--hutan);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 16px var(--f-tajuk);color:#fff;background:var(--hutan-2);box-shadow:0 0 0 3px var(--latar),0 0 0 6px var(--c);flex:none}
.mono.bronze{--c:var(--bronze)} .mono.silver{--c:var(--silver)} .mono.gold{--c:var(--gold)}

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