/* ============================================================
   GetSiap - Landing Page. Arah desain: "Ruang Ujian".
   Warna bukan hiasan - tiap aksen adalah STATE nyata di CAT:
   biru = terjawab, amber = ragu-ragu, hijau = lolos ambang.
   Angka selalu monospace tabular, seperti perangkat lunak ujian.
   ============================================================ */

/* Plus Jakarta Sans - dimuat SENDIRI, bukan dari Google Fonts.
   CSP proyek ini berbunyi `font-src 'self' data:` dan `style-src 'self'`,
   jadi memuatnya dari fonts.googleapis.com akan terblokir; memperluas CSP
   demi selera huruf bukan pertukaran yang sepadan pada halaman yang tugasnya
   mengonversi. Berkasnya 27 KB, subset latin, variable 400-800 dalam satu
   berkas sehingga tidak ada permintaan tambahan per bobot.

   Fontnya dirancang Tokotype untuk Pemprov DKI Jakarta dan berlisensi
   SIL Open Font License 1.1 - salinannya ada di assets/fonts/OFL.txt,
   wajib ikut selama font ini dipakai.

   `font-display:swap` supaya teks langsung terbaca dengan font sistem lalu
   berganti; tanpa itu halaman sempat kosong. `unicode-range` membatasi
   penggunaannya ke latin dasar, sehingga tanda seperti panah tetap jatuh
   ke font sistem alih-alih hilang. */
@font-face{
  font-family:"Plus Jakarta Sans";
  font-style:normal;
  font-weight:400 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;
}

:root{
  --paper:#f5f7fb; --surface:#ffffff; --ink:#0b1524; --muted:#57647c;
  --line:#e2e7f0; --line-2:#cdd6e5;
  --brand:#1857c4;            /* terjawab */
  --brand-soft:#e8f0ff; --brand-ink:#0f2b66;
  --ragu:#e0a11b;             /* ragu-ragu */
  --ragu-soft:#fdf3de; --ragu-ink:#8a6212;
  --lolos:#12855e;            /* lolos ambang */
  --lolos-soft:#e2f4ec;
  --danger:#c0392b;
  --slab:#0c1a30;             /* panel inversi: TETAP gelap di kedua mode (jangan var(--ink)) */
  --radius:12px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(11,21,36,.05);
  --shadow-md:0 2px 10px rgba(11,21,36,.07);
  /* Stack sistem dipertahankan sebagai cadangan: bila woff2-nya gagal termuat,
     halaman tetap tampil seperti sebelumnya, bukan jatuh ke Times New Roman. */
  --font:"Plus Jakarta Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","Segoe UI Mono",Menlo,Consolas,monospace;
  /* alias lama agar markup/JS lawas tetap aman */
  --bg:var(--paper); --brand-2:#3b82f6; --accent:#0d9bb5;
  --ok:var(--lolos); --warn:var(--ragu); --warn-soft:var(--ragu-soft);
  --shadow-lg:0 6px 30px rgba(11,21,36,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#080e18; --surface:#0e1626; --ink:#e6ecf7; --muted:#8d9ab2;
    --line:#1b2740; --line-2:#26344f;
    --brand:#5b93f5; --brand-soft:#132441; --brand-ink:#d8e6ff;
    --ragu:#e8b23f; --ragu-soft:#2a2113; --ragu-ink:#e8b23f;
    --lolos:#2fb083; --lolos-soft:#0f2a20; --danger:#e8695a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 22px rgba(0,0,0,.5);
    --shadow-lg:0 10px 40px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);
  line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
img,svg{display:block;max-width:100%}
/* Wajib SETELAH aturan img/svg di atas: `display:block` milik kita mengalahkan
   `[hidden]{display:none}` bawaan browser, sehingga elemen ber-atribut hidden
   akan tetap tampil tanpa baris ini. */
[hidden]{display:none!important}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--slab);color:#fff;
  padding:10px 16px;z-index:100}
.skip-link:focus{left:0}
:is(.btn,a,button,summary,input):focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- Tombol: rata, tanpa glow ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s,color .15s}
.btn:hover{border-color:var(--ink);background:var(--surface)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.btn-lg{padding:14px 26px;font-size:15.5px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:var(--brand-soft);border-color:transparent}
.btn-ig{border-color:var(--line-2)}
.btn-ig:hover{border-color:var(--ink)}

/* ---------- Navbar ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;
  transition:background .2s,border-color .2s}
.nav.scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.nav .inner{max-width:1140px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:24px}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;color:var(--ink);
  letter-spacing:-.01em}
.nav .logo{width:32px;height:32px;border-radius:8px;color:#fff;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;background:var(--brand);
  font-family:var(--mono);letter-spacing:-.02em}
.nav-links{display:flex;gap:2px;margin-left:6px}
.nav-links a{padding:7px 12px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:500;
  transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:var(--brand-soft)}
.nav-cta{margin-left:auto;display:flex;gap:9px;align-items:center}
.nav-cta .btn{white-space:nowrap}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;
  padding:7px 10px;cursor:pointer;color:var(--ink);font-size:16px;line-height:1}

/* ---------- Hero ---------- */
.hero{position:relative;padding:132px 0 64px;overflow:hidden}
.hero-bg{display:none}
.hero-grid-lines{position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%)}
.hero-spot{display:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center}

.badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono);
  color:var(--muted);background:transparent;border:0;border-left:2px solid var(--ragu);
  padding:1px 0 1px 10px;margin:0 0 22px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--lolos)}
/* Skala diturunkan dari clamp(33,5vw,57) karena judul 9 kata pecah menjadi
   EMPAT baris pada kolom 591px - batas disiplin hero dua baris. Ukuran besar
   bukan hierarki; bobot 800 dan tracking rapat yang mengerjakannya. */
.hero h1{font-size:clamp(30px,3.3vw,41px);line-height:1.08;letter-spacing:-.032em;
  font-weight:800;margin:0 0 20px;text-wrap:balance}
/* Penanda [[...]] dari landing_content: garis penanda jawaban, bukan teks bergradien */
.hero h1 .hl{color:inherit;background-image:linear-gradient(var(--ragu),var(--ragu));
  background-repeat:no-repeat;background-size:100% .16em;background-position:0 88%;
  padding-bottom:.02em}
.hero .lead{font-size:clamp(15.5px,1.5vw,18px);color:var(--muted);max-width:490px;margin:0 0 28px}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:12.5px;color:var(--muted);margin-top:15px;font-family:var(--mono)}

/* ---------- SIGNATURE: instrumen CAT (grid navigator 110 soal) ---------- */
.cat{border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--surface);
  padding:18px 18px 16px;box-shadow:var(--shadow-md)}
.cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.cat-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.cat-timer{font-family:var(--mono);font-size:clamp(24px,3vw,32px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.cat-legend{display:flex;gap:16px;flex-wrap:wrap;padding:12px 0 14px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.cat-legend span{display:inline-flex;align-items:center;gap:6px}
.cat-legend i{width:9px;height:9px;border-radius:2px;flex:none}
.s-twk{background:var(--brand)}
.s-tiu{background:var(--lolos)}
.s-tkp{background:var(--ragu)}
.cat-grid{display:grid;grid-template-columns:repeat(22,1fr);gap:4px}
/* Sel selalu tampil penuh, tanpa animasi isian. Animasi bertahap sempat dicoba
   tetapi tab latar belakang membekukannya di state awal sehingga grid terlihat
   pudar. Penanda halaman ini adalah komposisi gridnya, bukan efek isiannya. */
.cat-grid i{aspect-ratio:1;border-radius:2px;background:var(--line)}
.cat-grid i.s-twk{background:var(--brand)}
.cat-grid i.s-tiu{background:var(--lolos)}
.cat-grid i.s-tkp{background:var(--ragu)}
.cat-amb{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:16px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cat-amb>div{background:var(--surface);padding:10px 12px}
.cat-amb dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase}
.cat-amb dd{margin:2px 0 0;font-family:var(--mono);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.cat-note{margin:11px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.5}

/* Mockup lama tetap didukung (dipakai seksi Demo) */
.mock{position:relative}
.mock-window{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--line)}
.mock-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.mock-bar .url{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.mock-body{display:grid;grid-template-columns:1fr 88px;gap:12px;padding:15px}
.mock-q{border:1px solid var(--line);border-radius:10px;padding:13px}
.mock-tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.08em;color:var(--brand);background:var(--brand-soft);padding:3px 7px;
  border-radius:5px;margin-bottom:8px}
.mock-line{height:7px;border-radius:3px;background:var(--line);margin:7px 0}
.mock-line.w80{width:80%}.mock-line.w60{width:60%}
.mock-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;margin-top:7px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;color:var(--muted)}
.mock-opt.sel{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.mock-opt .k{width:17px;height:17px;border-radius:4px;background:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:10px}
.mock-opt.sel .k{background:var(--brand);color:#fff}
.mock-side{display:flex;flex-direction:column;gap:8px}
.mock-timer{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:6px 0;text-align:center;
  font-variant-numeric:tabular-nums}
.mock-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mock-nav i{aspect-ratio:1;border-radius:3px;background:var(--paper);border:1px solid var(--line)}
.mock-nav i.d{background:var(--brand);border-color:var(--brand)}
.mock-nav i.r{background:var(--ragu);border-color:var(--ragu)}

/* Badge toko aplikasi */
.store-badges{display:flex;gap:10px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.store-badge:hover{border-color:var(--line-2)}
.store-badge small{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.store-badge b{display:block;font-size:13px;color:var(--ink)}

/* ---------- Section umum: kepala rata kiri, garis rambut ---------- */
section{padding:clamp(56px,7vw,92px) 0}
.sec-head{max-width:660px;margin:0 0 44px;text-align:left}
.kicker{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;
  padding-left:10px;border-left:2px solid var(--brand)}
.sec-head h2{font-size:clamp(25px,3.1vw,36px);line-height:1.13;letter-spacing:-.028em;margin:0 0 12px;
  font-weight:800;text-wrap:balance}
.sec-head p{color:var(--muted);margin:0;font-size:16px;max-width:60ch}
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--i,0) * 45ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- Statistik: pita angka tabular ---------- */
.stats{border-block:1px solid var(--line);background:var(--surface)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:var(--line)}
.stat{text-align:left;padding:26px 20px;background:var(--surface)}
.stat .num{font-family:var(--mono);font-size:clamp(25px,3vw,34px);font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .lab{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:5px}
.skel{position:relative;overflow:hidden;background:var(--line);border-radius:5px;color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 70%,transparent),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- Marquee: tenang, satu baris, monospace ---------- */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:34px;width:max-content;padding:13px 0;
  animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--muted);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Kartu umum ---------- */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;transition:border-color .18s}
.card:hover{border-color:var(--line-2)}
a.card:hover{border-color:var(--brand)}
.card .ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:9px;background:var(--brand-soft);color:var(--brand);margin-bottom:14px}
.card h3{margin:0 0 7px;font-size:16.5px;letter-spacing:-.015em}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.card .soon{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:9.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:100px;padding:2px 8px}
.card.is-soon{opacity:.62}
.card.is-soon:hover{border-color:var(--line)}
.card .goto{display:inline-block;margin-top:13px;font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.05em;color:var(--brand)}

/* ---------- Katalog paket ---------- */
.pkt-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.pkt-chip{border:1px solid var(--line-2);background:var(--surface);color:var(--muted);
  border-radius:100px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.pkt-chip b{font-family:var(--mono);font-size:11.5px;margin-left:5px;opacity:.75}
.pkt-chip:hover{border-color:var(--ink);color:var(--ink)}
.pkt-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pkt-cari-wrap{margin-bottom:22px}
.pkt-cari{width:100%;max-width:390px;padding:11px 14px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.pkt-cari:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.pkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px}
.pkt{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;color:inherit;transition:border-color .18s}
.pkt:hover{border-color:var(--brand)}
.pkt-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pkt-jenis{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  padding:3px 8px;border-radius:5px;background:var(--brand-soft);color:var(--brand)}
.pkt-jenis.is-skd{background:var(--brand-soft);color:var(--brand)}
.pkt-jenis.is-skb{background:var(--lolos-soft);color:var(--lolos)}
.pkt-jenis.is-cact{background:var(--ragu-soft);color:var(--ragu-ink)}
.pkt-jenis.is-kedinasan{background:var(--brand);color:#fff}
.pkt-jenis.is-bumn{background:var(--lolos);color:#fff}
.pkt-jenis.is-utbk{background:#0b7f95;color:#fff}
.pkt-harga{font-family:var(--mono);font-size:14.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.pkt-harga.is-free{color:var(--lolos)}
.pkt h3{margin:13px 0 6px;font-size:16px;letter-spacing:-.015em}
.pkt p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.pkt-meta{display:flex;gap:16px;margin:14px 0 16px;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.pkt-meta b{color:var(--ink);font-weight:700}
.pkt-cta{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--brand)}
.pkt-empty{grid-column:1/-1;color:var(--muted);border:1px dashed var(--line-2);
  border-radius:var(--radius);padding:34px;text-align:center;font-size:14.5px}

/* ---------- Demo ---------- */
.demo-wrap{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:26px;flex-wrap:wrap}
.device{flex:1 1 520px;max-width:620px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.phone{flex:0 0 202px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
  padding:16px 13px 13px;position:relative;box-shadow:var(--shadow-md)}
.phone .notch{width:52px;height:4px;border-radius:100px;background:var(--line-2);margin:0 auto 12px}

/* ---------- Cara kerja: urutan nyata, jadi penomoran memang bermakna ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step{background:var(--surface);padding:24px 22px;counter-increment:langkah}
.step::before{content:counter(langkah,decimal-leading-zero);display:block;font-family:var(--mono);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--brand);margin-bottom:12px}
.steps{counter-reset:langkah}
.step h3{margin:0 0 7px;font-size:16px;letter-spacing:-.015em}
.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- Testimoni ---------- */
.testi-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.testi{flex:0 0 330px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.testi .stars{color:var(--ragu);font-size:14px;letter-spacing:2px;margin-bottom:10px}
.testi .who{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
.testi .av{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.testi .who b{display:block;font-size:14px}
.testi .who span span{font-size:12.5px;color:var(--muted)}

/* ---------- Harga ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:16px;
  align-items:start}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 24px;transition:border-color .18s}
.plan:hover{border-color:var(--line-2)}
.plan.popular{border-color:var(--brand);border-width:1.5px}
.pop-badge{position:absolute;top:-1px;right:20px;transform:translateY(-50%);background:var(--brand);
  color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 11px;border-radius:100px}
.plan h3{margin:0 0 6px;font-size:17px;letter-spacing:-.015em}
.plan .desc{margin:0;color:var(--muted);font-size:13.5px;min-height:38px}
.plan .price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin:18px 0 20px;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.plan .cur{font-size:15px;color:var(--muted);font-weight:600}
.plan .val{font-size:34px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.plan .strike{font-size:14px;color:var(--muted);text-decoration:line-through}
.plan ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.5}
.plan li svg{flex:none;margin-top:4px;color:var(--lolos)}
.plan .btn{width:100%}

/* ---------- Strip kepercayaan pembayaran (di bawah kartu harga) ---------- */
/* Tenang secara visual: ini penenang, bukan iklan - jangan sampai menyaingi
   kartu harga di atasnya. */
.bayar-aman{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);text-align:center}
.bayar-oleh{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin:0 0 16px;color:var(--muted);font-size:14px}
/* Tinggi dikunci agar logo apa pun (rasio berapa pun) tidak menggeser tata letak. */
.bayar-logo{height:26px;width:auto;max-width:170px}
/* Wordmark Midtrans memakai navy #002855 yang nyaris hilang di atas --surface
   mode gelap (#0e1626). Diberi alas putih, BUKAN filter inversi - inversi
   mengubah warna merek dan biasanya dilarang panduan merek. content-box supaya
   logo tetap 26px dan padding menambah di luarnya. */
@media (prefers-color-scheme:dark){
  .bayar-logo{background:#fff;padding:6px 11px;border-radius:8px;box-sizing:content-box}
}
.bayar-wordmark{color:var(--ink);font-size:16px;letter-spacing:-.01em}
.bayar-metode{list-style:none;margin:0 0 16px;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bayar-metode li{border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:6px 13px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.bayar-catatan{margin:0 auto;max-width:62ch;color:var(--muted);font-size:13px;line-height:1.65}
.bayar-catatan b{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-weight:600;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{flex:none;color:var(--muted);transition:transform .2s}
.faq[open] .chev{transform:rotate(180deg)}
.faq .ans{padding:0 0 19px;color:var(--muted);font-size:14.5px;line-height:1.7;max-width:68ch}

/* ---------- CTA ---------- */
.cta-panel{position:relative;overflow:hidden;background:var(--slab);color:#fff;
  border-radius:var(--radius-lg);padding:clamp(36px,5vw,60px);text-align:left}
.cta-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(120deg,#000,transparent 72%);
  mask-image:linear-gradient(120deg,#000,transparent 72%)}
.cta-panel>*{position:relative}
.cta-panel h2{margin:0 0 12px;font-size:clamp(25px,3.2vw,38px);letter-spacing:-.03em;
  line-height:1.12;font-weight:800;color:#fff;max-width:18ch}
.cta-panel p{margin:0 0 26px;color:#b9c6dc;font-size:16px;max-width:52ch}
.cta-actions{display:flex;gap:11px;flex-wrap:wrap}
.cta-panel .btn{background:#fff;border-color:#fff;color:var(--slab)}
.cta-panel .btn:hover{background:#e8eefb;border-color:#e8eefb;color:var(--slab)}
.cta-panel .btn-ig{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.cta-panel .btn-ig:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ---------- Pengunjung ---------- */
.visitors{padding:0 0 clamp(48px,6vw,74px)}
.visitors-bar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:14px 30px;
  padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.visitors-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.visitors-live .live-dot{width:7px;height:7px;border-radius:50%;background:var(--lolos);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--lolos) 55%,transparent);animation:pulseDot 2.2s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.visitors-item{display:flex;align-items:baseline;gap:9px}
.visitors-item .v-num{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.visitors-item .v-lab{font-size:12.5px;color:var(--muted)}
.visitors-sep{width:1px;height:26px;background:var(--line);flex:none}
@media (prefers-reduced-motion:reduce){.visitors-live .live-dot{animation:none}}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:56px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.foot-brand p{color:var(--muted);font-size:13.5px;margin:13px 0 0;max-width:34ch;line-height:1.6}
footer h4{margin:0 0 13px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
footer a{display:block;color:var(--ink);font-size:13.5px;padding:5px 0;transition:color .15s}
footer a:hover{color:var(--brand)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ---------- Utilitas ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand);z-index:80}
.to-top{position:fixed;right:20px;bottom:20px;width:42px;height:42px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;
  font-size:17px;opacity:0;pointer-events:none;transition:opacity .2s,border-color .15s;z-index:70}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{border-color:var(--ink)}

/* ---------- Responsif ---------- */
@media (max-width:960px){
  .hero{padding:112px 0 48px}
  .hero .wrap{grid-template-columns:1fr;gap:38px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);padding:10px 18px 16px}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex;margin-left:auto;order:3}
  .nav-cta{margin-left:0;order:2}
  .nav .inner{flex-wrap:wrap;position:relative}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:620px){
  .container{padding:0 18px}
  .cat-grid{grid-template-columns:repeat(15,1fr)}
  .cat-legend{gap:12px}
  .foot-grid{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
  .visitors-sep{display:none}
  .demo-wrap{gap:18px}
  .phone{display:none}
}

/* ============================================================
   Umpan balik tekan & angkat (audit skill redesign, 24 Agu 2026)
   ------------------------------------------------------------
   Halaman ini sudah punya 17 keadaan :hover, focus-visible, dan
   prefers-reduced-motion - tetapi NOL keadaan :active, sehingga
   tidak ada satu pun tanda fisik saat tombol benar-benar ditekan.
   Di ponsel, yang tidak punya hover sama sekali, itu berarti
   ketukan terasa tidak berbalas sampai halaman berikutnya termuat.

   Transform sengaja dipakai (bukan margin/top) supaya animasinya
   berjalan di GPU dan tidak memicu tata ulang tata letak.
   ============================================================ */
.btn{transition:border-color .15s,background .15s,color .15s,transform .12s}
.btn:active{transform:translateY(1px) scale(.985)}

/* Kartu yang bisa diklik ikut terangkat sedikit saat disentuh kursor,
   lalu turun saat ditekan.

   PENTING - dipakai `translate`, BUKAN `transform`. Kartu kategori dan kartu
   paket sama-sama memakai kelas `.rv` yang menganimasikan kemunculannya lewat
   `transform:translateY(16px)`. Memakai `transform` di sini berarti merebut
   properti yang sama: kartu yang di-hover sebelum animasi munculnya selesai
   akan tersentak. Properti `translate` disusun terpisah dan BERKOMPOSISI
   dengan `transform`, sehingga keduanya hidup berdampingan.

   Daftar transisinya juga menyertakan ulang `opacity` dan `transform` milik
   `.rv`; tanpa itu deklarasi ini menimpa transisi `.rv` dan animasi muncul
   kehilangan fade-nya. */
a.card,.pkt{transition:opacity .5s ease,transform .5s ease,
  border-color .18s,translate .18s,box-shadow .18s}
a.card:hover,.pkt:hover{translate:0 -2px;box-shadow:var(--shadow-md)}
a.card:active,.pkt:active{translate:0 0;box-shadow:var(--shadow-sm)}

/* Chip filter katalog dan tautan navigasi juga perlu balasan tekan. */
.pkt-filter button:active,.nav-links a:active{transform:translateY(1px)}

/* Menghormati setelan sistem: bila pengguna meminta gerak dikurangi,
   seluruh pergeseran di atas dimatikan - keadaan hover/aktifnya tetap
   terbaca lewat warna garis tepi yang sudah ada sebelumnya. */
@media (prefers-reduced-motion:reduce){
  .btn:active,.pkt-filter button:active,.nav-links a:active{transform:none}
  a.card:hover,.pkt:hover,a.card:active,.pkt:active{translate:none}
}

/* ============================================================
   Audit skill design-taste v1 (24 Agu 2026)
   ------------------------------------------------------------
   Skill ini menyasar React + Tailwind + Framer Motion; proyek
   ini vanilla tanpa build, jadi yang diambil PRINSIPNYA dan
   dikerjakan dengan CSS - jalur yang skill-nya sendiri sebut
   sebagai alternatif sah ("or CSS cascade").

   Audit menemukan halaman ini sudah lolos hampir semua larangan:
   hero tidak rata tengah (grid, bukan flex-center), judul bagian
   rata kiri, paragraf dibatasi 60ch, tanpa emoji, tanpa gradien
   teks, tanpa hitam murni (#000 hanya di mask-image sebagai
   kanal alfa), h1 memakai clamp yang terkendali. Yang tersisa
   empat, dan itulah yang dikerjakan di bawah.
   ============================================================ */

/* --- 1. Tekstur butiran ---------------------------------------
   Permukaan datar sempurna adalah sidik jari desain buatan mesin.
   Lapisan butiran halus memberi kesan bahan, bukan vektor.
   Dipasang pada elemen FIXED dengan pointer-events:none supaya
   tidak pernah ikut digulung - lapisan yang ikut menggulung
   memaksa GPU menggambar ulang terus-menerus. */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  /* Multiply menggelapkan; pada dasar gelap butirannya justru hilang,
     jadi dibalik menjadi screen dengan kadar lebih rendah. */
  body::after{mix-blend-mode:screen;opacity:.022}
}

/* --- 2. Kemunculan bertahap -----------------------------------
   Kartu satu baris masuk viewport bersamaan sehingga selama ini
   muncul serentak - terbaca sebagai "semua dipasang sekaligus".
   Jeda kecil berurutan membuatnya terasa disusun, bukan ditumpahkan.
   Dibatasi enam kartu pertama: lebih dari itu justru terasa lambat. */
#kategori-grid > :nth-child(2),#paket-grid > :nth-child(2),.fitur-grid > :nth-child(2){transition-delay:60ms}
#kategori-grid > :nth-child(3),#paket-grid > :nth-child(3),.fitur-grid > :nth-child(3){transition-delay:120ms}
#kategori-grid > :nth-child(4),#paket-grid > :nth-child(4),.fitur-grid > :nth-child(4){transition-delay:180ms}
#kategori-grid > :nth-child(5),#paket-grid > :nth-child(5),.fitur-grid > :nth-child(5){transition-delay:240ms}
#kategori-grid > :nth-child(6),#paket-grid > :nth-child(6),.fitur-grid > :nth-child(6){transition-delay:300ms}
@media (prefers-reduced-motion:reduce){
  #kategori-grid > *,#paket-grid > *,.fitur-grid > *{transition-delay:0ms!important}
}

/* --- 3. Asimetri hero -----------------------------------------
   Pembagian 1.02fr/0.98fr secara praktis simetris, dan simetri
   sempurna itulah yang membuat halaman terbaca seperti templat.
   Kolom teks diberi bobot nyata, dan panel CAT diturunkan sedikit
   supaya keduanya tidak duduk pada garis yang sama persis. */
@media (min-width:960px){
  .hero .wrap{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr)}
  .hero .cat{translate:0 12px}
}

/* --- 4. Grid kategori tanpa tiga kolom seragam -----------------
   Tiga kartu sama lebar berjajar adalah tata letak paling generik
   yang dikenali skill ini. Bobot kolom dibuat tidak sama supaya
   terbaca sebagai keputusan, bukan bawaan - dan dengan tujuh kartu,
   kartu terakhir mendarat di kolom terlebar sehingga baris
   penutupnya tidak tampak seperti sisa. */
@media (min-width:1040px){
  #kategori-grid{grid-template-columns:1.35fr 1fr 1fr}
}

/* Di mode gelap --brand menjadi biru MUDA (#5b93f5), sehingga teks putih di
   atasnya hanya berkontras 3,03 - gagal ambang WCAG AA 4,5:1 untuk teks
   berukuran normal. Terukur, bukan dikira-kira. Tinta gelap di atas biru muda
   mengembalikannya ke rentang aman tanpa mengubah warna mereknya. */
@media (prefers-color-scheme:dark){
  .btn-primary,.btn-primary:hover{color:#08111f}
}

/* Pita ketersediaan aplikasi - dipindah keluar dari hero (batas empat elemen
   teks di hero). Sengaja tipis dan rendah kontras: ia keterangan, bukan ajakan. */
.app-strip{border-block:1px solid var(--line);background:var(--surface)}
.app-strip .container{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block:14px}
.app-strip .cap{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:560px){.app-strip .container{justify-content:center;text-align:center}}