@font-face{font-family:Poppins;src:url("../fonts/poppins-600.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter-variable-latin.woff2") format("woff2");font-style:normal;font-weight:400 600;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
/* Fallback widths calibrated with a representative Indonesian sentence in Chrome on macOS. */
@font-face{font-family:"Poppins fallback";src:local("Arial");size-adjust:106.28%}
@font-face{font-family:"Inter fallback";src:local("Arial");size-adjust:100.4%}
@font-face{font-family:"Instrument fallback";src:local("Georgia");font-style:italic;size-adjust:80.06%}
:root{
  color-scheme: light;

  /* ── Warna: inti ── */
  --c-ink:#0f0f0f;          /* teks, tombol primer, bg gelap */
  --c-ink-hover:#262626;    /* tombol primer :hover */
  --c-ink-active:#000;      /* :active */
  --c-ink-soft:#333;        /* pill on-dark, divider tebal */
  --c-white:#fff;
  --c-surface:#fff;
  --c-surface-alt:#f5f5f5;  /* kartu, section abu */
  --c-surface-sunken:#ececec;/* skeleton base, chip hover-on-alt */
  --c-tag:#e9e9e9;          /* pill subtitle bg terang */

  /* ── Warna: teks ── */
  --c-text:#0f0f0f;         /* 18.9:1 di putih */
  --c-text-mute:#49515b;    /* ≈8:1 putih, ≈7.4:1 di #f5f5f5 */
  --c-text-faint:#646868;   /* ≥5:1 putih & #f5f5f5; placeholder/meta kecil */
  --c-text-on-dark:#fff;
  --c-text-on-dark-mute:rgba(255,255,255,.72); /* ≈10:1 di #0f0f0f */

  /* ── Garis ── */
  --c-line:#e3e3e3;         /* dekoratif (divider), BUKAN batas kontrol form */
  --c-line-strong:#8c8c8c;  /* batas input/checkbox: ≥3:1 (WCAG 1.4.11) */
  --c-line-on-dark:rgba(255,255,255,.15);

  /* ── Fokus & state ── */
  --c-focus:#8274cd;        /* ≈3.9:1 di putih (≥3:1) — sudah dipakai repo */
  --c-focus-on-dark:#fff;
  --c-error:#a32828;        /* ≈7.3:1 putih */
  --c-error-bg:#fbeaea;
  --c-overlay:rgba(15,15,15,.72);
  --c-scrim:rgba(15,15,15,.4);

  /* ── Aksen kecil (titik/garis ≤ 8px, tak untuk teks) ── */
  --c-dot-orange:#f5a623; --c-dot-magenta:#d62bc9; --c-dot-blue:#5b8def;

  /* ── Tipografi: keluarga ── */
  --ff-head:'Poppins','Poppins fallback',system-ui,sans-serif;               /* 600 */
  --ff-body:'Inter','Inter fallback',system-ui,sans-serif;                 /* 400/500/600 variabel */
  --ff-display-accent:'Instrument Serif','Instrument fallback',Georgia,serif;   /* italic 400, display saja */
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,monospace;  /* kode/kbd, tanpa unduh font */

  /* ── Tipografi: skala (ukuran / line-height / tracking) ── */
  --fs-display:clamp(2.75rem,1.6rem + 4.6vw,5rem);   /* 44→80  | lh 1.04 | ls -0.035em */
  --fs-h1:clamp(2.5rem,1.5rem + 3.4vw,4.25rem);      /* 40→68  | lh 1.08 | ls -0.03em  */
  --fs-h2:clamp(2rem,1.4rem + 2vw,3.125rem);         /* 32→50  | lh 1.12 | ls -0.025em */
  --fs-h3:clamp(1.375rem,1.2rem + .6vw,1.75rem);     /* 22→28  | lh 1.25 | ls -0.015em */
  --fs-h4:1.25rem;                                   /* 20     | lh 1.3  | ls -0.01em  */
  --fs-body-lg:1.125rem;                             /* 18     | lh 1.65 | ls 0       */
  --fs-body:1rem;                                    /* 16     | lh 1.65 | ls 0       */
  --fs-sm:.875rem;                                   /* 14     | lh 1.55 | ls 0       */
  --fs-xs:.75rem;                                    /* 12     | lh 1.5  | ls .01em (meta saja, bukan info penting) */
  --fs-eyebrow:.8125rem;                             /* 13     | lh 1    | ls .06em UPPERCASE */
  --lh-display:1.04; --lh-h1:1.08; --lh-h2:1.12; --lh-h3:1.25; --lh-body:1.65; --lh-tight:1.3;
  --ls-display:-.035em; --ls-h1:-.03em; --ls-h2:-.025em; --ls-h3:-.015em; --ls-eyebrow:.06em;
  --measure:68ch;           /* lebar baris paragraf maksimum */

  /* ── Spasi: grid 4pt (primer kelipatan 8) ── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-30:120px;
  --section-y:60px;         /* ≤767 */
  --gutter:20px;            /* ≤767 */
  --container:1200px;

  /* ── Radius ── */
  --r-xs:4px;   /* kbd, checkbox */
  --r-sm:8px;   /* dropdown, badge kotak, FAQ lama */
  --r-md:12px;  /* input, toast, popover */
  --r-lg:18px;  /* kartu (Startix) */
  --r-xl:24px;  /* panel besar, mega menu, modal */
  --r-header:128px;
  --r-pill:999px;

  /* ── Elevasi ── */
  --e-0:none;
  --e-1:0 1px 2px rgba(15,15,15,.06),0 1px 1px rgba(15,15,15,.04);          /* kartu diam */
  --e-2:0 8px 30px rgba(45,54,67,.08);                                       /* dropdown, header scrolled */
  --e-3:0 16px 40px rgba(15,15,15,.12),0 2px 6px rgba(15,15,15,.06);         /* kartu hover */
  --e-4:0 24px 64px rgba(15,15,15,.28);                                      /* modal */
  --e-header:0 30px 42px rgba(33,39,37,.10);

  /* ── Border ── */
  --bw:1px; --bw-strong:2px; --ring:3px; --ring-offset:3px;

  /* ── Motion ── */
  --dur-instant:100ms; --dur-fast:160ms; --dur-base:240ms; --dur-med:320ms;
  --dur-slow:480ms; --dur-reveal:600ms; --dur-hero:700ms;
  --ease-out:cubic-bezier(.22,1,.36,1);      /* masuk, hover (default) */
  --ease-in:cubic-bezier(.64,0,.78,0);       /* keluar */
  --ease-in-out:cubic-bezier(.65,0,.35,1);   /* geser layout, tab indicator */
  --ease-pop:cubic-bezier(.34,1.56,.64,1);   /* centang, toast — hemat */
  --stagger:70ms; --stagger-max:6;           /* delay = min(i,6)*70ms ⇒ ≤ 420ms */

  /* ── Z-index ── */
  --z-content:1; --z-card-link:2; --z-sticky:40; --z-header:100; --z-drawer:110;
  --z-popover:120; --z-modal:200; --z-toast:300; --z-skip:400;

  /* ── Hit area & ukuran kontrol ── */
  --hit:44px;               /* minimum semua target interaktif (≥ WCAG 2.5.8 24px) */
  --ctl-lg:56px; --ctl-md:48px; --ctl-sm:40px; /* sm diperluas ke 44 via ::before pada touch */
  --header-h:80px; --header-h-shrunk:64px;
}
@media (min-width:768px){:root{--section-y:80px;--gutter:32px}}
@media (min-width:992px){:root{--section-y:120px}}
@media (min-width:1200px){:root{--gutter:40px}}

[data-surface="dark"]{
  --c-surface:#0f0f0f; --c-text:#fff; --c-text-mute:rgba(255,255,255,.72);
  --c-line:rgba(255,255,255,.15); --c-focus:#fff; --c-tag:#333;
}

/* Reset kecil yang menentukan "rasa" */
html{scroll-padding-top:104px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{font:400 var(--fs-body)/var(--lh-body) var(--ff-body);color:var(--c-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto}
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:600;text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--c-ink);color:#fff}
.num{font-variant-numeric:tabular-nums}
.display-accent{font-family:var(--ff-display-accent);font-style:italic;font-weight:400;
  font-size:1.08em;letter-spacing:-.01em}  /* maks 1 per heading, ≤ 2 kata */
:focus-visible{outline:var(--ring) solid var(--c-focus);outline-offset:var(--ring-offset);border-radius:inherit}
[data-surface="dark"] :focus-visible{outline-color:var(--c-focus-on-dark)}