/* ==========================================================================
   elevgro Landing — gaya situs payung (tanpa framework, satu berkas).

   Warna TIDAK ditulis di sini: seluruhnya dari /tokens.css yang dihasilkan dari
   server/src/shared/palette.css (npm run tokens). Berkas ini hanya memakai nama
   variabelnya, persis seperti console memakai utilitas Tailwind dari sumber yang sama.

   Pembagian makna warna (dijaga supaya bauran 70/20/10 tidak melar):
     brand-*   aksi utama, tautan, navigasi aktif, ANGKA & penekanan
     accent-*  hanya makna positif/berhasil (status "Tersedia", ceklis)
     ink-*     seluruh netral: teks, garis, latar
   ========================================================================== */

@import url('/tokens.css');

/* ── Huruf: di-host sendiri, tanpa permintaan ke pihak ketiga ─────────────
   Plus Jakarta Sans (judul) & Outfit (isi) — keduanya variable font, satu berkas
   untuk seluruh rentang tebal 200–800. */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --sec: clamp(64px, 7.5vw, 112px);      /* jarak vertikal antar-section — SATU skala */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-pill: 999px;
  --hdr: 72px;                            /* tinggi header; dipakai scroll-margin & panel HP */
  --shadow-sm: 0 1px 2px rgba(7,10,16,.05), 0 2px 8px rgba(7,10,16,.05);
  --shadow: 0 16px 44px -20px rgba(7,10,16,.28);
  --shadow-lg: 0 40px 80px -32px rgba(7,10,16,.42);

  /* GEOMETRI GARIS — hiasan tunggal untuk seluruh permukaan navy (header, hero, blok
     CTA, footer). Permukaannya sendiri WARNA RATA: tidak ada gradien gelap yang
     "menghilang" ke hitam, jadi biru hangatnya tetap satu warna dari atas ke bawah.
     Yang memberi kedalaman hanya garis-garis ini.

     Daftar lapisannya ditaruh di satu variabel supaya kisinya benar-benar sama di
     keempat tempat: kalau tiap selektor menulis angkanya sendiri, garisnya tidak akan
     menyambung saat dua permukaan bertemu (hero tepat di bawah header, blok CTA tepat
     di atas footer). Ingat urutan `background`: yang DITULIS DULU tampil PALING ATAS. */
  --geo: 72px;                            /* sisi satu kotak kisi */
  --geo-line: rgba(255,255,255,.055);     /* garis tegak — sedikit lebih terang */
  --geo-line-h: rgba(255,255,255,.042);   /* garis datar */
  --geo-node: rgba(255,255,255,.15);      /* simpul di tiap perpotongan */
  --geo-grid:
    radial-gradient(circle at 0 0, var(--geo-node) 1.2px, transparent 1.7px) 0 0 / var(--geo) var(--geo),
    repeating-linear-gradient(90deg, var(--geo-line) 0 1px, transparent 1px var(--geo)),
    repeating-linear-gradient(180deg, var(--geo-line-h) 0 1px, transparent 1px var(--geo));
  /* Busur sepusat dari sudut kanan atas — garis murni, bukan cahaya yang memudar. */
  --geo-arcs:
    repeating-radial-gradient(circle at 100% 0, transparent 0 87px, var(--geo-line) 87px 88px)
    100% 0 / 880px 880px no-repeat;
  /* Arsir diagonal: "shade" yang dibuat dari garis, bukan dari gradasi warna. */
  --geo-hatch:
    repeating-linear-gradient(45deg, var(--geo-line) 0 1px, transparent 1px 13px)
    0 100% / 340px 340px no-repeat;
  /* Versi terang dari kisi & busur yang sama, untuk hero halaman dalam. Warnanya bukan
     abu-abu netral melainkan navy-900 yang ditipiskan — halaman terang dan permukaan
     gelap jadi terbaca satu keluarga, bukan dua gaya yang kebetulan bertetangga. */
  --geo-line-lt: rgba(20,32,81,.05);
  --geo-node-lt: rgba(20,32,81,.13);
  --geo-grid-lt:
    radial-gradient(circle at 0 0, var(--geo-node-lt) 1.2px, transparent 1.7px) 0 0 / var(--geo) var(--geo),
    repeating-linear-gradient(90deg, var(--geo-line-lt) 0 1px, transparent 1px var(--geo)),
    repeating-linear-gradient(180deg, var(--geo-line-lt) 0 1px, transparent 1px var(--geo));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-ink-700);
  background: #fff;
  font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
  color: var(--color-ink-950);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 800;
}
h1 { font-size: clamp(34px, 5vw, 58px); }
h2 { font-size: clamp(27px, 3.4vw, 40px); }
h3 { font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -.02em; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec); scroll-margin-top: var(--hdr); }
.section--tight { padding-block: calc(var(--sec) * .6); }
.band { background: var(--color-ink-50); border-block: 1px solid var(--color-ink-200); }
.band--dark { background: var(--geo-grid), var(--color-navy-900); color: var(--color-ink-300); border: 0; }
.band--dark h2, .band--dark h3 { color: #fff; }

/* ── Tipografi pembantu ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--color-brand-700); background: var(--color-brand-50);
  border: 1px solid var(--color-brand-100);
  padding: 6px 14px; border-radius: var(--r-pill);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-500); flex: none; }
.kicker {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-brand-600); margin-bottom: 14px;
}
.band--dark .kicker { color: var(--color-accent-400); }
.section-head { max-width: 720px; margin-bottom: clamp(34px, 4.5vw, 56px); }
.section-head p { color: var(--color-ink-500); font-size: clamp(15.5px, 1.6vw, 18px); margin-top: 16px; }
.band--dark .section-head p { color: var(--color-ink-400); }
.lead { color: var(--color-ink-500); font-size: clamp(16px, 1.9vw, 20px); max-width: 58ch; }
/* Teks yang berganti sendiri (data-swap di app.js). Yang dianimasikan HANYA opasitasnya:
   tingginya sudah dikunci dari JS ke varian terpanjang, jadi isi di bawahnya tidak ikut
   bergeser. Durasi di bawah ini harus sama dengan SWAP_FADE di app.js — kalau berbeda,
   teksnya berganti saat masih terlihat (kalau CSS lebih lambat) atau berkedip putih
   (kalau CSS lebih cepat). */
[data-swap] { transition: opacity .28s ease; }
[data-swap].is-swap { opacity: 0; }

/* ── Tombol (bentuk pil, mengikuti bahasa visual elevgro-kasir) ──────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px;
  padding: 12px 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  min-height: 46px; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s, color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 17px; height: 17px; flex: none; }
/* Warna rata, bukan gradasi: tombol ini muncul berkali-kali di satu halaman — gradasi
   di permukaan sekecil itu hanya terbaca sebagai warna yang "kotor" di tepi bawahnya. */
.btn--primary {
  background: var(--color-brand-600);
  color: #fff; box-shadow: 0 14px 30px -14px rgba(0,91,189,.75);
}
.btn--primary:hover { background: var(--color-brand-700); transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(0,91,189,.8); }
.btn--ghost { background: #fff; color: var(--color-ink-800); border-color: var(--color-ink-300); }
.btn--ghost:hover { border-color: var(--color-ink-400); background: var(--color-ink-50); }
.btn--wa { background: var(--color-accent-600); color: #fff; }
.btn--wa:hover { background: var(--color-accent-700); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--color-brand-700); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline:hover { background: rgba(255,255,255,.1); }
.btn--block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, label:focus-visible {
  outline: 3px solid var(--color-brand-500); outline-offset: 2px; border-radius: 8px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-ink-200);
}
header.site .bar { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); min-height: calc(var(--hdr) - 1px); }
/* LOCKUP MEREK: wordmark "elevgro" = elemen utama (besar), nama produk/label kecil di
   sampingnya. Tinggi mark tetap di bawah tinggi bar supaya --hdr tidak ikut berubah. */
.logo { display: flex; align-items: center; gap: 9px; flex: none; }
.logo img { height: 40px; width: auto; }
.logo .sub {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--color-ink-400); border-left: 1px solid var(--color-ink-200); padding-left: 9px;
}
nav.main { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
nav.main a { font-size: 15px; font-weight: 500; color: var(--color-ink-500); transition: color .15s; }
nav.main a:hover, nav.main a[aria-current='page'] { color: var(--color-brand-700); }
nav.main a[aria-current='page'] { font-weight: 600; }
.header-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header-cta .btn { padding: 9px 18px; min-height: 40px; font-size: 14px; }
.nav-toggle { display: none; }
.nav-burger { display: none; }
.mobile-panel { display: none; }

/* ── Varian gelap: navbar biru hangat ────────────────────────────────────
   Menyalakan varian ini berarti mengganti DUA hal di HTML — kelas di <header>
   DAN src wordmark-nya ke elevgro-wordmark-white.png. Wordmark biasa berhuruf
   #005BBD; di atas bar ini ia praktis hilang.

   Warnanya PEKAT, bukan tembus pandang seperti header terang: di posisi paling atas,
   yang ada di belakang bar ini bukan hero melainkan latar halaman yang putih (header
   sticky tetap memakan tingginya sendiri), jadi warna tembus pandang membuat bar
   terlihat lebih muda daripada hero navy di bawahnya — persis sambungan yang justru
   ingin dihilangkan. */
header.site--brand {
  background: var(--color-navy-800);
  border-bottom-color: rgba(255,255,255,.12);
}
.site--brand .logo .sub { color: rgba(255,255,255,.58); border-left-color: rgba(255,255,255,.22); }
.site--brand nav.main a { color: rgba(255,255,255,.74); }
.site--brand nav.main a:hover, .site--brand nav.main a[aria-current='page'] { color: #fff; }
/* Tombol dibalik: di atas bar biru, tombol biru nyaris tidak terbaca. */
.site--brand .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.site--brand .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.site--brand .btn--primary { background: #fff; color: var(--color-brand-700); box-shadow: 0 12px 26px -14px rgba(0,0,0,.6); }
.site--brand .btn--primary:hover { box-shadow: 0 18px 32px -14px rgba(0,0,0,.75); }
.site--brand .nav-burger { background: transparent; border-color: rgba(255,255,255,.26); color: #fff; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(56px, 7vw, 96px); overflow: hidden; }
/* Hiasan hero halaman dalam: kisi & busur yang sama dengan hero gelap, versi terang.
   Peredam putih ditulis PALING ATAS supaya garisnya habis sebelum menyentuh teks —
   di `background`, lapisan yang ditulis dulu tampil paling atas. */
.hero::before {
  content: ''; position: absolute; inset: calc(-1 * var(--hdr)) 0 auto 0; height: 640px; z-index: -1;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 34%, #fff 92%),
    repeating-radial-gradient(circle at 100% 0, transparent 0 87px, var(--geo-line-lt) 87px 88px)
      100% 0 / 880px 880px no-repeat,
    var(--geo-grid-lt);
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(36px,5vw,64px); align-items: center; }
.hero h1 { margin: 22px 0 20px; }
.hero .lead { margin-bottom: 30px; }
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 26px; color: var(--color-ink-500); font-size: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { width: 16px; height: 16px; color: var(--color-accent-700); flex: none; }

/* Mozaik produk di hero — murni CSS, menggambarkan "banyak produk, satu keluarga". */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.mosaic .tile {
  background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.mosaic .tile:nth-child(1) { transform: translateY(-14px); }
.mosaic .tile:nth-child(4) { transform: translateY(14px); }
.mosaic .tile .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--color-brand-600); }
.mosaic .tile .ic svg { width: 20px; height: 20px; }
.mosaic .tile b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--color-ink-950); }
.mosaic .tile small { color: var(--color-ink-500); font-size: 12.5px; line-height: 1.5; }

/* ── Varian gelap: masthead biru hangat ──────────────────────────────────
   Hiasannya ditaruh sebagai LAPISAN BACKGROUND, bukan lewat ::before seperti hero
   terang: .hero hanya position:relative tanpa z-index, jadi tidak membuat stacking
   context — ::before yang ber-z-index -1 akan tenggelam di belakang latar begitu
   latarnya tidak lagi transparan. Ubin mozaik sengaja tetap kartu putih.

   Warnanya SATU (navy-800), bukan gradasi biru→hitam. Alasannya bukan selera: hero ini
   bersambung langsung dengan header yang memakai warna sama, dan gradasi membuat garis
   sambungannya kelihatan begitu halaman digulir. Kedalaman datang dari kisi + busur —
   garis, bukan warna. Busurnya ditaruh di sudut kanan atas, di belakang mozaik. */
.hero--brand {
  background: var(--geo-arcs), var(--geo-grid), var(--color-navy-800);
  color: rgba(255,255,255,.76);
}
.hero--brand::before { content: none; }
.hero--brand h1 { color: #fff; }
.hero--brand .lead { color: rgba(255,255,255,.76); }
.hero--brand .eyebrow { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.hero--brand .trust { color: rgba(255,255,255,.68); }
.hero--brand .trust svg { color: var(--color-accent-400); }
.hero--brand .btn--primary { background: #fff; color: var(--color-brand-700); box-shadow: 0 16px 34px -16px rgba(0,0,0,.75); }
.hero--brand .btn--primary:hover { box-shadow: 0 22px 40px -16px rgba(0,0,0,.85); }
.hero--brand .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.hero--brand .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.hero--brand .mosaic .tile { box-shadow: 0 30px 60px -26px rgba(0,0,0,.85); }

/* ── Pita statistik ─────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px,2.4vw,28px); }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; min-width: 0; }
/* Garis pemisah, bukan kartu: pita ini harus tetap ringan — hanya lebih terbaca. */
.stat + .stat { border-left: 1px solid var(--color-ink-200); padding-left: clamp(16px,2.4vw,28px); }
.stat .ic {
  width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--color-brand-50); color: var(--color-brand-700);
}
.stat .ic svg { width: 24px; height: 24px; }
/* Warna mengikuti MAKNA angkanya, bukan sekadar variasi. Hijau hanya di kolom pertama
   karena hanya itu yang benar-benar bisa dipakai hari ini; yang masih dibangun sengaja
   netral supaya pita ini tidak terbaca seperti sembilan produk sudah siap semua. */
.stat--live .ic { background: var(--color-accent-100); color: var(--color-accent-700); }
.stat--soon .ic { background: var(--color-ink-100); color: var(--color-ink-500); }
.stat--solid .ic { background: var(--color-brand-600); color: #fff; }
.stat b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(30px,3.6vw,44px);
  font-weight: 800; color: var(--color-brand-600); letter-spacing: -.04em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Ditaruh SETELAH .stat b: spesifisitasnya sama persis, jadi urutan yang menentukan. */
.stat--live b { color: var(--color-accent-600); }
.band--dark .stat b { color: var(--color-accent-400); }
.stat .lbl { display: block; color: var(--color-ink-500); font-size: 14px; margin-top: 5px; line-height: 1.45; }
.band--dark .stat .lbl { color: var(--color-ink-400); }

/* ── Kartu (dipakai katalog, nilai, industri, roadmap) ──────────────────── */
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card {
  background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 28px); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s;
}
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-brand-200); }
.card .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--color-brand-600); flex: none; }
.card .ic svg { width: 22px; height: 22px; }
.card p { color: var(--color-ink-500); font-size: 14.5px; }
.band--dark .card { background: var(--color-navy-800); border-color: rgba(255,255,255,.12); }
.band--dark .card p { color: var(--color-ink-400); }

/* ── Katalog produk ─────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: clamp(22px,3vw,32px); }
.filters button {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600;
  padding: 9px 17px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--color-ink-200); background: #fff; color: var(--color-ink-600);
  transition: all .15s;
}
.filters button:hover { border-color: var(--color-brand-300); color: var(--color-brand-700); }
.filters button[aria-pressed='true'] { background: var(--color-brand-600); border-color: var(--color-brand-600); color: #fff; }
.p-card { position: relative; overflow: hidden; }
.p-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent, var(--color-brand-600)); }
.p-card .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.p-card .ic { background: var(--accent, var(--color-brand-600)); }
.p-card h3 { margin-top: 2px; }
.p-card .aud { font-size: 12.5px; color: var(--color-ink-400); }
.p-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.p-card li { display: flex; gap: 9px; font-size: 14px; color: var(--color-ink-600); }
.p-card li svg { width: 15px; height: 15px; color: var(--color-accent-700); margin-top: 4px; flex: none; }
.p-card .foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 10px; }
.status {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  letter-spacing: .02em; padding: 4px 11px; border-radius: var(--r-pill); flex: none;
}
/* Warna status = janji, bukan hiasan: hijau HANYA untuk yang benar-benar bisa dipakai. */
.status--live { background: var(--color-accent-100); color: var(--color-accent-800); }
.status--beta { background: #fef3c7; color: #92400e; }
.status--soon { background: var(--color-ink-100); color: var(--color-ink-600); }

/* ── Thumbnail bagian ───────────────────────────────────────────────────────
   Ilustrasi SKEMATIK, bukan tangkapan layar dan bukan foto stok. Alasannya sama
   dengan mozaik hero: digambar inline dengan SVG memakai token warna halaman, jadi
   tetap tajam di layar apa pun, ikut berubah saat palet berubah, dan tidak menambah
   satu pun unduhan (juga tidak ada permintaan ke pihak ketiga).

   Isinya sengaja abstrak — balok teks, bukan angka dan bukan tangkapan layar palsu:
   thumbnail tidak boleh menjanjikan angka atau fitur yang tidak ada di basis data.
   Aturan warna tetap berlaku: accent-* HANYA muncul untuk makna positif (yang sudah
   benar-benar jalan), sisanya brand-* dan ink-*. Semua hiasan → aria-hidden di HTML. */
.thumb {
  border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-200); box-shadow: var(--shadow);
}
.thumb > svg { width: 100%; height: 100%; }

/* Judul bagian + thumbnail berdampingan. Varian --flip menaruh gambar di kiri supaya
   beberapa bagian berurutan tidak terlihat seragam. Urutan DOM tetap judul dulu, jadi
   di layar sempit gambar selalu jatuh DI BAWAH judul — pembaca layar pun ikut urutan itu. */
.head-media {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4.5vw, 60px); align-items: center; margin-bottom: clamp(34px, 4.5vw, 56px);
}
.head-media > .section-head { margin-bottom: 0; max-width: 560px; }
.head-media--flip > .thumb { order: -1; }

/* Thumbnail yang menempel penuh di sisi atas kartu (dipakai kartu "untuk siapa"). */
.card--media { padding: 0; gap: 0; overflow: hidden; }
.card--media > .thumb { border: 0; border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--color-ink-200); }
.card--media > .card-body { padding: clamp(20px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 10px; }

/* Meteran status: gambar kecil yang mengulang janji label .status di kartu yang sama —
   penuh/hijau hanya untuk yang sudah bisa dipakai, putus-putus untuk yang masih dibangun. */
.meter { height: 56px; border-radius: var(--r); background: var(--color-ink-50); border: 1px solid var(--color-ink-200); }
.meter > svg { width: 100%; height: 100%; }

/* ── Langkah / cara kerja ───────────────────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: clamp(16px,2.2vw,24px); grid-template-columns: repeat(3, minmax(0,1fr)); }
.step { position: relative; padding-top: 54px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: 16px; color: #fff; background: var(--color-brand-600);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--color-ink-500); font-size: 14.5px; }

/* ── Roadmap ────────────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: grid; grid-template-columns: 132px 1fr; gap: clamp(14px,2vw,26px); padding: 20px 0; border-top: 1px solid var(--color-ink-200); }
.tl-item:first-child { border-top: 0; }
.tl-when { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--color-brand-600); font-size: 14.5px; padding-top: 2px; }
.tl-body h3 { font-size: 17px; margin-bottom: 5px; }
.tl-body p { color: var(--color-ink-500); font-size: 14.5px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-list { max-width: 840px; display: flex; flex-direction: column; gap: 12px; }
details {
  background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r);
  padding: 0 22px; box-shadow: var(--shadow-sm);
}
details[open] { border-color: var(--color-brand-200); }
summary {
  cursor: pointer; padding: 18px 0; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--color-ink-950);
}
summary::-webkit-details-marker { display: none; }
summary .plus { width: 18px; height: 18px; flex: none; position: relative; }
summary .plus::before, summary .plus::after {
  content: ''; position: absolute; background: var(--color-ink-400); border-radius: 2px; transition: transform .18s;
}
summary .plus::before { left: 1px; right: 1px; top: 8px; height: 2px; }
summary .plus::after { top: 1px; bottom: 1px; left: 8px; width: 2px; }
details[open] summary .plus::after { transform: scaleY(0); }
details > p { padding: 0 0 20px; color: var(--color-ink-500); font-size: 15px; max-width: 68ch; }

/* ── Blok CTA ───────────────────────────────────────────────────────────── */
/* Warna rata + arsir diagonal di sudut kiri bawah — sengaja beda dari busur di hero
   supaya dua permukaan navy di satu halaman tidak terlihat seperti pengulangan.
   Latarnya terpotong mengikuti border-radius (background-clip bawaan), jadi arsirnya
   tidak menyembul dari sudut kotak walau .cta-box tidak boleh diberi overflow:hidden. */
.cta-box {
  background: var(--geo-hatch), var(--geo-grid), var(--color-navy-800);
  color: #fff; border-radius: var(--r-lg); padding: clamp(34px,5vw,60px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-box h2 { color: #fff; }
.cta-box p { color: rgba(255,255,255,.78); margin-top: 12px; max-width: 54ch; }

/* Varian dengan gambar melayang. Gambarnya rangkaian kartu putih di atas kotak gelap:
   masing-masing dimiringkan sedikit, diberi bayangan dalam, dan naik-turun pelan dengan
   tempo berbeda supaya benar-benar terbaca melayang, bukan tertempel. Di layar lebar
   kartu utamanya sengaja menyembul KE LUAR tepi atas kotak — karena itu .cta-box tidak
   boleh diberi overflow:hidden, dan jarak atas blok ini dibuat lebih lega dari biasanya.
   Isinya mengikuti aturan thumbnail: SVG inline, token warna, tanpa angka karangan. */
.cta-box--float .cta-copy { flex: 1 1 330px; min-width: 0; }
.cta-box--float .cta-copy .cta-row { margin-top: 28px; }
/* margin auto hanya menggigit saat barisnya membungkus (di bawah ~980px): waktu
   berdampingan, .cta-copy sudah menyerap seluruh sisa ruang lewat flex-grow. */
.cta-float { position: relative; flex: 0 1 320px; min-width: 264px; height: 200px; margin-inline: auto; }
/* Cincin tipis di belakang kartu — bukan cahaya yang memudar: permukaan navy harus
   tetap rata, jadi kedalamannya datang dari garis (dan dari bayangan kartunya sendiri). */
.cta-float::before {
  content: ''; position: absolute; inset: -16% -12%;
  background: radial-gradient(circle at 56% 46%,
    transparent 0 46%, rgba(255,255,255,.11) 46% 46.7%, transparent 47%);
}
.cta-float > * { position: absolute; }
.cta-float svg { width: 100%; height: auto; }
.f-card {
  top: 0; right: -8px; width: 268px; padding: 14px; background: #fff;
  border-radius: var(--r-lg); box-shadow: 0 34px 64px -26px rgba(2,6,16,.9);
  rotate: -3.5deg; animation: apung 7s ease-in-out infinite;
}
.f-chip {
  left: -24px; bottom: 26px; width: 178px; background: #fff;
  border-radius: var(--r); box-shadow: 0 22px 44px -20px rgba(2,6,16,.85);
  rotate: 4.5deg; animation: apung 6s ease-in-out -2.4s infinite;
}
/* Ditaruh di kiri ATAS, menumpuk tepi kartu: kalau di kanan bawah ia berdempetan
   dengan .wa-float yang menetap di pojok layar — dua lingkaran hijau yang sama. */
.f-badge {
  left: -18px; top: 6px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--color-accent-600); color: #fff; display: grid; place-items: center;
  box-shadow: 0 20px 36px -14px rgba(6,78,26,.9);
  animation: apung 8s ease-in-out -5s infinite;
}
.f-badge svg { width: 28px; height: 28px; }
/* Menyembul ke luar kotak hanya bila memang muat — di bawah 981px kolomnya membungkus
   dan kartu yang naik akan menabrak tombol. */
@media (min-width: 981px) {
  .cta-float { align-self: flex-start; }
  .f-card { top: calc(-1 * (clamp(34px, 5vw, 60px) + 24px)); }
}
@keyframes apung { 0%, 100% { translate: 0 0; } 50% { translate: 0 -13px; } }

/* ── Formulir ───────────────────────────────────────────────────────────── */
.form-card { background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r-lg); padding: clamp(24px,3vw,34px); box-shadow: var(--shadow); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; margin: 22px 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > span { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--color-ink-800); }
.field > span i { color: #dc2626; font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--color-ink-900);
  background: #fff; border: 1px solid var(--color-ink-300); border-radius: var(--r-sm); padding: 11px 13px;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-brand-500); outline-offset: 1px; border-color: transparent;
}
.field[data-invalid] input, .field[data-invalid] textarea { border-color: #dc2626; }
.field[data-invalid] > span { color: #dc2626; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */
.form-note { margin-top: 14px; font-size: 13px; color: var(--color-ink-500); }
.form-msg { margin-top: 14px; padding: 13px 16px; border-radius: var(--r-sm); font-size: 14.5px; display: none; }
.form-msg[data-kind='ok'] { display: block; background: var(--color-accent-50); color: var(--color-accent-800); border: 1px solid var(--color-accent-200); }
.form-msg[data-kind='err'] { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Daftar kontak & info ───────────────────────────────────────────────── */
.info-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.info-list li { display: flex; gap: 14px; }
.info-list .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand-50); color: var(--color-brand-700); flex: none; }
.info-list .ic svg { width: 19px; height: 19px; }
.info-list b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--color-ink-950); }
.info-list a, .info-list span { color: var(--color-ink-500); font-size: 14.5px; }
.info-list a:hover { color: var(--color-brand-700); }

/* ── Halaman dokumen (syarat, privasi, cookie, AUP, hak cipta, disclaimer) ──
   Tujuh halaman ini isinya teks panjang, bukan pemasaran: yang menentukan mutunya
   cuma keterbacaan. Karena itu lebar kolomnya dikunci ~74ch, daftar isinya menempel
   di sisi kiri selama digulir, dan tiap judul bagian diberi `scroll-margin-top`
   setinggi header — tanpa itu tautan #anchor mendarat tepat di balik navbar yang
   menetap dan pembaca mengira tautannya salah. */
.doc-head { max-width: 780px; }
.doc-head .lead { margin-bottom: 0; }   /* pita .doc-meta di bawahnya sudah punya jarak sendiri */
.doc-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 28px; }
.doc-meta li {
  display: inline-flex; align-items: baseline; gap: 8px; min-width: 0;
  background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 13.5px; color: var(--color-ink-500);
}
.doc-meta b {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--color-ink-800);
}
.doc-meta a { color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 3px; }

.doc-grid { display: grid; grid-template-columns: 246px minmax(0,1fr); gap: clamp(28px,4.5vw,64px); align-items: start; }
.doc-nav { position: sticky; top: calc(var(--hdr) + 20px); }
.doc-nav > b {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em; color: var(--color-ink-400); margin-bottom: 14px;
}
.doc-nav ol { list-style: none; counter-reset: doc; }
.doc-nav ol a {
  display: flex; gap: 10px; padding: 8px 0 8px 15px; font-size: 14px; line-height: 1.45;
  color: var(--color-ink-500); border-left: 2px solid var(--color-ink-200);
  transition: color .15s, border-color .15s;
}
.doc-nav ol a::before {
  counter-increment: doc; content: counter(doc) '.'; flex: none;
  color: var(--color-ink-400); font-variant-numeric: tabular-nums;
}
.doc-nav ol a:hover { color: var(--color-brand-700); border-left-color: var(--color-brand-500); }
.doc-ask { margin-top: 22px; font-size: 13.5px; color: var(--color-ink-500); line-height: 1.6; }
.doc-ask a { color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 3px; }

.prose { max-width: 74ch; }
/* Garis di atas tiap judul bagian menggantikan penomoran besar: dokumen sepanjang ini
   perlu batas yang terlihat saat digulir cepat, bukan hiasan tambahan. */
.prose > h2 {
  font-size: clamp(20px, 2.1vw, 25px); margin-top: clamp(38px,4.4vw,52px); margin-bottom: 14px;
  padding-top: 24px; border-top: 1px solid var(--color-ink-200);
  scroll-margin-top: calc(var(--hdr) + 24px);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 16.5px; margin-top: 26px; margin-bottom: 8px; }
.prose p, .prose li { color: var(--color-ink-600); font-size: 15.5px; line-height: 1.75; }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p,
.prose h3 + ul, .prose h3 + ol, .prose ul + h3, .prose .callout + p, .prose .table-wrap + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.prose li::marker { color: var(--color-ink-400); }
.prose strong { color: var(--color-ink-900); font-weight: 700; }
.prose a { color: var(--color-brand-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--color-brand-800); }

/* Kotak penegasan — untuk kalimat yang kalau terlewat merugikan pembaca (mis. "situs
   ini tidak memasang cookie", batas tanggung jawab). Warnanya ikut aturan yang sama
   dengan sisa situs: hijau HANYA untuk kabar yang memang positif, amber untuk rambu. */
.callout { display: flex; gap: 14px; margin-top: 18px; padding: 18px 20px; border-radius: var(--r); background: var(--color-ink-50); border: 1px solid var(--color-ink-200); }
.callout .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand-600); color: #fff; flex: none; }
.callout .ic svg { width: 18px; height: 18px; }
.callout b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--color-ink-950); margin-bottom: 3px; }
.callout p { font-size: 14.5px; margin: 0; }
.callout--ok { background: var(--color-accent-50); border-color: var(--color-accent-200); }
.callout--ok .ic { background: var(--color-accent-600); }
.callout--warn { background: #fffbeb; border-color: #fde68a; }
.callout--warn .ic { background: #b45309; }

/* Tabel data (daftar cookie, jenis data yang disimpan). Pembungkusnya yang digulir,
   bukan halamannya — body sudah overflow-x:hidden, jadi tabel lebar tanpa pembungkus
   ini akan terpotong diam-diam di HP. */
.table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--color-ink-200); border-radius: var(--r); }
.doc-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.doc-table th, .doc-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--color-ink-200); vertical-align: top; }
.doc-table thead th {
  background: var(--color-ink-50); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--color-ink-600);
}
.doc-table tbody td { color: var(--color-ink-600); }
.doc-table tbody td b { color: var(--color-ink-900); font-weight: 700; }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table small { color: var(--color-ink-400); font-size: 12.5px; }

/* Tautan antar-dokumen di kaki tiap halaman kebijakan: tujuh dokumen ini saling
   merujuk terus-menerus, jadi lebih murah menaruh seluruh daftarnya di sini daripada
   memaksa pembaca kembali ke footer. Halaman yang sedang dibuka ditandai, tidak dihapus
   dari daftar — supaya susunannya tetap sama di ketujuh halaman. */
.link-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px,1.6vw,16px); }
.link-grid a {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r); padding: 16px 18px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.link-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-brand-200); }
.link-grid b { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: var(--color-ink-950); }
.link-grid span { font-size: 13.5px; color: var(--color-ink-500); line-height: 1.55; }
.link-grid a[aria-current='page'] { background: var(--color-brand-50); border-color: var(--color-brand-200); }
.link-grid a[aria-current='page']:hover { transform: none; box-shadow: none; }

/* Peta situs: satu kartu per kelompok. Halaman ini gunanya dibaca cepat, jadi
   tautannya daftar bergaris — bukan kartu berikon satu per satu. */
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2.2vw,24px); align-items: start; }
.map-col { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--color-ink-200); border-radius: var(--r); padding: clamp(20px,2.4vw,26px); }
.map-col > .ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand-600); color: #fff; flex: none; }
.map-col > .ic svg { width: 21px; height: 21px; }
.map-col > p { color: var(--color-ink-500); font-size: 14px; }
.map-col ul { list-style: none; }
.map-col li + li { border-top: 1px solid var(--color-ink-100); }
.map-col li a { display: block; padding: 9px 0; font-size: 14.5px; color: var(--color-ink-700); }
.map-col li a:hover { color: var(--color-brand-700); }
.map-col li small { display: block; color: var(--color-ink-400); font-size: 12.5px; line-height: 1.5; }
.map-col li a[aria-current='page'] { color: var(--color-brand-700); font-weight: 600; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Kisi garis yang sama dengan hero & blok CTA, di atas navy yang SATU tingkat lebih
   dalam: halaman harus terasa mendarat di bawah, dan blok CTA navy-800 tepat di atasnya
   perlu tetap terbaca sebagai kartu tersendiri, bukan lanjutan footer.

   Semuanya lapisan background — tanpa gambar, tanpa elemen semu, jadi tidak ada urusan
   z-index dengan isi footer. Ingat urutan lapisan `background`: yang DITULIS DULU tampil
   PALING ATAS, karena itu peredamnya berada di atas kisi, bukan di bawahnya. */
footer.site {
  background:
    /* 1. hairline di tepi atas — garis batas yang tegas antara halaman & footer */
    linear-gradient(90deg, transparent 0%, var(--color-brand-500) 22%,
                    var(--color-accent-500) 56%, transparent 92%) 0 0 / 100% 1px no-repeat,
    /* 2. peredam: kisinya habis sebelum menyentuh baris hak cipta. Ini SATU-SATUNYA
          gradasi yang tersisa di permukaan navy, dan ia memudarkan GARIS — warna
          dasarnya tetap rata dari atas ke bawah. */
    linear-gradient(to bottom, transparent 0%, var(--color-navy-900) 78%),
    /* 3. kisi + simpul yang sama persis dengan hero dan blok CTA */
    var(--geo-grid),
    var(--color-navy-900);
  color: var(--color-ink-300); padding-block: clamp(48px,6vw,72px) 32px;
}
.foot-grid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr)); gap: clamp(28px,4vw,44px); padding-bottom: 40px; }
.foot-brand img { height: 46px; width: auto; }
.foot-brand p { margin-top: 16px; font-size: 14px; max-width: 34ch; line-height: 1.7; }
.foot-col b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.foot-col a { font-size: 14px; transition: color .15s; }
.foot-col a:hover { color: var(--color-accent-400); }
/* Baris kebijakan: tujuh dokumen hukum + peta situs. Sengaja BARIS SENDIRI, bukan
   kolom kelima di .foot-grid — tujuh butir di kolom selebar 1fr menjulang jauh lebih
   tinggi dari tiga kolom di sebelahnya dan membuat kisi footer terbaca miring.
   Pemisah titiknya dipasang lewat ::after pada butir yang BUKAN terakhir, supaya
   baris yang membungkus tidak dimulai oleh pemisah yang menggantung. */
.foot-legal {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  padding: 22px 0 24px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand-400) 70%, transparent) 0%,
              var(--color-navy-700) 30%, var(--color-navy-700) 68%, transparent 100%) 0 0 / 100% 1px no-repeat;
}
.foot-legal li { display: inline-flex; align-items: center; }
.foot-legal li:not(:last-child)::after { content: '\00b7'; margin: 0 12px; color: var(--color-navy-600); }
.foot-legal a { font-size: 13px; color: var(--color-ink-400); transition: color .15s; }
.foot-legal a:hover { color: var(--color-accent-400); }
.foot-legal a[aria-current='page'] { color: #fff; font-weight: 600; }

/* Pemisah baris hak cipta: garis yang menyala di kiri lalu habis ke kanan — bukan
   border rata, supaya seirama dengan hairline di tepi atas footer. */
.foot-bottom {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand-400) 70%, transparent) 0%,
              var(--color-navy-700) 30%, var(--color-navy-700) 68%, transparent 100%) 0 0 / 100% 1px no-repeat;
  padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px;
}

/* Tombol WhatsApp melayang — di bawah panel nav HP (z-index 39) supaya tertutup rapi. */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 37; width: 56px; height: 56px;
  border-radius: 50%; background: var(--color-accent-600); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lg); transition: transform .15s;
}
.wa-float:hover { transform: translateY(-3px); }
.wa-float svg { width: 30px; height: 30px; }

/* ── Responsif: tablet lebih dulu, lalu HP ──────────────────────────────── */
@media (max-width: 980px) {
  nav.main, .header-cta { display: none; }
  .nav-burger {
    display: grid; place-items: center; margin-left: auto; width: 46px; height: 46px;
    border-radius: 12px; border: 1px solid var(--color-ink-200); background: #fff; cursor: pointer; color: var(--color-ink-800);
  }
  .nav-burger svg { width: 22px; height: 22px; }
  /* Panel WAJIB di luar <header>: header memakai backdrop-filter yang membuat containing
     block baru, sehingga position:fixed di dalamnya akan ter-anchor ke header. */
  .mobile-panel {
    display: none; position: fixed; inset: var(--hdr) 0 0 0; z-index: 39;
    background: #fff; padding: 16px var(--gutter) 40px; overflow-y: auto;
  }
  .nav-toggle:checked ~ .mobile-panel { display: block; }
  .mobile-panel a { display: flex; align-items: center; padding: 16px 2px; border-bottom: 1px solid var(--color-ink-100); font-size: 16px; font-weight: 500; color: var(--color-ink-700); }
  .mobile-panel .btn { margin-top: 20px; width: 100%; }
  .hero-grid { grid-template-columns: minmax(0,1fr); }
  .mosaic { max-width: 520px; }
  .head-media { grid-template-columns: minmax(0,1fr); gap: clamp(24px,4vw,32px); }
  .head-media > .section-head { max-width: 640px; }
  .head-media--flip > .thumb { order: 0; }
  .head-media > .thumb, .hero-grid > .thumb { max-width: 560px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: clamp(26px,4vw,34px); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 34px; }
  /* Daftar isi berhenti menempel: di lebar ini ia jatuh ke atas dokumen, jadi tidak ada
     lagi kolom yang perlu diikuti — dan versi sticky-nya akan menutupi teks. */
  .doc-grid { grid-template-columns: minmax(0,1fr); }
  .doc-nav { position: static; background: var(--color-ink-50); border: 1px solid var(--color-ink-200); border-radius: var(--r); padding: clamp(18px,2.4vw,24px); }
  .link-grid, .map-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0,1fr); }
  .field-grid { grid-template-columns: minmax(0,1fr); }
  .tl-item { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .foot-grid { grid-template-columns: minmax(0,1fr); }
  .cta-box { flex-direction: column; align-items: flex-start; }
  .cta-box--float .cta-copy { flex: none; width: 100%; }
  .cta-float { flex: none; width: 100%; max-width: 320px; align-self: center; }
  .cta-row .btn { flex: 1 1 auto; }
  .link-grid, .map-grid { grid-template-columns: minmax(0,1fr); }
  .doc-meta li { width: 100%; }
  .logo img { height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}