/* =====================================================================
   base.css — font, warna (token), tipografi dasar, tata letak umum
   Warna & ukuran utama diatur di :root di bawah ini.
   ===================================================================== */
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Warna identitas SSA */
  --navy:#03105F;
  --blue:#0139BF;
  --red:#E15A5C;
  --light:#E7F3FC;
  --teal-a:#2E6496;
  --teal-b:#1C9DBE;
  /* Turunan netral */
  --ink:#1B2557;
  --muted:#4F5B86;
  --line:#CFE0F2;
  --navy-deep:#020A3D;
  --whatsapp:#25D366;
  --whatsapp-ink:#0B3D20;
  /* Ukuran */
  --header-h:64px;
  --section-y:clamp(3.5rem,2.4rem + 4.4vw,6rem);
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:28px;
  --shadow:0 12px 32px rgba(3,16,95,.12);
  --font-head:"Poppins","Segoe UI",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (min-width:1100px){:root{--header-h:76px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.65;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img,svg{max-width:100%;height:auto}
img{display:block}
a{color:var(--blue)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;color:var(--navy);margin:0 0 .5em;line-height:1.18}
h1{font-size:clamp(2rem,1.35rem + 3vw,3.5rem);line-height:1.1;letter-spacing:-.015em}
h2{font-size:clamp(1.65rem,1.2rem + 1.7vw,2.4rem);letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:700;line-height:1.3}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.section--navy :focus-visible,.section--gradient :focus-visible,.hero :focus-visible,.site-footer :focus-visible{outline-color:#fff}

.container{width:min(1200px,calc(100% - 2.5rem));margin-inline:auto}
@media (min-width:768px){.container{width:min(1200px,calc(100% - 4rem))}}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1rem;border-radius:var(--radius-s);text-decoration:none;font-weight:600}
.skip-link:focus{top:1rem}

/* Ikon */
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon--fill{fill:currentColor;stroke:none}

/* Section */
.section{padding-block:var(--section-y)}
.section--light{background:var(--light)}
.section--navy{background:var(--navy);color:#DDE7F8}
.section--navy h2,.section--navy h3{color:#fff}
.section--gradient{background:linear-gradient(100deg,var(--teal-a) 0%,var(--teal-a) 40%,var(--teal-b) 200%);color:#fff}
.section--gradient h2,.section--gradient h3{color:#fff}
.section__head{max-width:44rem;margin-bottom:clamp(1.75rem,1rem + 2.5vw,2.75rem)}
.section__lead{font-size:1.0625rem;color:var(--muted);max-width:40rem}
.section--navy .section__lead{color:#DDE7F8}
.section--gradient .section__lead{color:#fff}

/* Placeholder (Mode Review) */
.ph{display:inline-block;background:#FFF3B0;color:#5A4600;border:1px dashed #C29A00;border-radius:6px;padding:.1rem .45rem;font-size:.8125rem;font-weight:600;line-height:1.4}
.review-banner{position:fixed;left:.75rem;bottom:.75rem;z-index:90;background:#FFF3B0;color:#5A4600;border:1px dashed #C29A00;border-radius:999px;padding:.3rem .8rem;font-size:.75rem;font-weight:600;max-width:calc(100% - 5.5rem)}

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