/* ==========================================================================
   Balikin.id — landing page
   --------------------------------------------------------------------------
   Dua putusan yang mengikat seluruh berkas ini, diwarisi dari aplikasinya:

   1. TANPA GRADIENT. Kedalaman dibangun lewat bayangan, garis tepi 1px, dan
      lapisan permukaan — bukan lewat peralihan warna. Satu-satunya "peralihan"
      yang diizinkan adalah kabut penutup di tepi bidang bergulir, dan itu pun
      dari satu warna ke transparan, bukan dari satu rona ke rona lain.
   2. Bukan monokrom. Plum tua untuk hal yang tenang dan berwibawa, apricot
      hangat untuk hal yang mendesak dan layak dirayakan. Netralnya polos —
      putih bersih, tanpa rona, supaya dua warna merek itu tidak dilemahkan
      oleh latar yang ikut diwarnai.

   Warna ditulis dalam oklch, sama persis dengan token di app.balikin.id,
   supaya kecerahan yang sama benar-benar terasa sama di seluruh rona.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- warna */
  --bg:            oklch(1 0 0);
  --bg-sunk:       oklch(0.981 0.002 340);
  --bg-quiet:      oklch(0.966 0.002 340);
  --permukaan:     oklch(1 0 0);
  --ink:           oklch(0.205 0.006 340);
  --ink-soft:      oklch(0.435 0.008 340);
  --ink-faint:     oklch(0.560 0.008 340);

  --plum:          oklch(0.401 0.108 338);
  --plum-hover:    oklch(0.345 0.100 338);
  --plum-tint:     oklch(0.955 0.014 340);
  --plum-line:     oklch(0.880 0.028 340);
  --plum-deep:     oklch(0.235 0.028 340);
  --plum-deeper:   oklch(0.185 0.024 340);

  --apricot:       oklch(0.731 0.150 49);
  --apricot-soft:  oklch(0.870 0.070 58);
  --apricot-tint:  oklch(0.968 0.028 62);
  --apricot-ink:   oklch(0.245 0.045 45);

  --line:          oklch(0.918 0.001 340);
  --line-strong:   oklch(0.862 0.002 340);

  --success:       oklch(0.555 0.105 157);
  --warning:       oklch(0.680 0.125 78);
  --danger:        oklch(0.545 0.175 25);

  /* Palet kategori — dipakai untuk membedakan modul, kartu fitur, dan deret
     data satu sama lain. Kecerahannya dijaga setara supaya tidak ada satu
     warna pun yang tampak lebih penting hanya karena lebih terang. */
  --h-plum:    oklch(0.470 0.110 338);
  --h-apricot: oklch(0.635 0.120 50);
  --h-teal:    oklch(0.575 0.072 195);
  --h-coral:   oklch(0.605 0.118 28);
  --h-amber:   oklch(0.650 0.098 78);
  --h-violet:  oklch(0.545 0.100 300);
  --h-sky:     oklch(0.588 0.078 238);
  --h-emerald: oklch(0.578 0.078 160);
  --h-rose:    oklch(0.590 0.108 8);
  --h-slate:   oklch(0.520 0.014 340);

  /* Maskot */
  --kancil-body:      oklch(0.735 0.095 62);
  --kancil-body-dark: oklch(0.650 0.100 55);
  --kancil-belly:     oklch(0.955 0.022 70);
  --kancil-ink:       oklch(0.285 0.035 45);
  --kancil-nose:      oklch(0.380 0.055 30);
  --kancil-blush:     oklch(0.760 0.105 25);

  /* ------------------------------------------------------------- bayangan */
  --sh-xs: 0 1px 2px -1px oklch(0.2 0 0 / 0.07);
  --sh-sm: 0 1px 2px -1px oklch(0.2 0 0 / 0.08), 0 2px 6px -2px oklch(0.2 0 0 / 0.06);
  --sh-md: 0 2px 4px -2px oklch(0.2 0 0 / 0.08), 0 8px 20px -8px oklch(0.2 0 0 / 0.10);
  --sh-lg: 0 4px 8px -4px oklch(0.2 0 0 / 0.10), 0 20px 40px -16px oklch(0.2 0 0 / 0.14);
  --sh-xl: 0 6px 12px -6px oklch(0.2 0 0 / 0.12), 0 32px 64px -24px oklch(0.2 0 0 / 0.18);

  --r-sm: 0.5rem;
  --r:    0.7rem;
  --r-lg: 1.1rem;
  --r-xl: 1.6rem;

  --pad: clamp(1.15rem, 4.5vw, 2.5rem);
  --maxw: 74rem;

  --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

/* ========================================================================== */
/*  Dasar                                                                     */
/* ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Bilah atas menempel setinggi ~68px; tanpa ini tautan jangkar mendarat
     tepat di baliknya dan judul bagiannya tidak pernah terlihat. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 800;
  text-wrap: balance;
}
p  { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 4px;
}

.lompat {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r);
  background: var(--plum);
  color: #fff;
  font-weight: 700;
  transition: top 0.16s ease;
}
.lompat:focus-visible { top: 1rem; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ========================================================================== */
/*  Tata letak                                                                */
/* ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap-lebar { max-width: 84rem; }

section { position: relative; }

.blok      { padding-block: clamp(3.75rem, 8.5vw, 7rem); }
.blok-rapat{ padding-block: clamp(2.5rem, 5.5vw, 4rem); }

.bg-sunk  { background: var(--bg-sunk); }
.bg-quiet { background: var(--bg-quiet); }

/* Bidang gelap. Dipakai hemat — tiga kali di sepanjang halaman — supaya
   perannya tetap sebagai jeda, bukan sebagai tema. */
.bg-tua {
  background: var(--plum-deep);
  color: oklch(0.955 0.004 340);
  --ink: oklch(0.965 0.004 340);
  --ink-soft: oklch(0.800 0.012 340);
  --ink-faint: oklch(0.700 0.014 340);
  --line: oklch(0.320 0.024 340);
  --line-strong: oklch(0.400 0.030 340);
  --bg: var(--plum-deep);
  --bg-sunk: oklch(0.212 0.026 340);
  --bg-quiet: oklch(0.300 0.030 340);
  --permukaan: oklch(0.318 0.032 340);
  --plum-tint: oklch(0.295 0.032 340);
  --plum-line: oklch(0.360 0.034 340);
}

.garis-atas { border-top: 1px solid var(--line); }

/* ========================================================================== */
/*  Judul bagian                                                              */
/* ========================================================================== */

.kepala { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.kepala-tengah { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.32rem 0.8rem 0.32rem 0.55rem;
  border: 1px solid var(--plum-line);
  border-radius: 999px;
  background: var(--plum-tint);
  color: var(--plum);
  font-size: 0.775rem; font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bg-tua .eyebrow { color: var(--apricot-soft); }
.eyebrow .titik {
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: currentColor;
  animation: denyut 2.4s ease-in-out infinite;
}
@keyframes denyut {
  0%, 100% { opacity: 1;   transform: scale(1)   }
  50%      { opacity: 0.35; transform: scale(0.7) }
}

.judul-2 { font-size: clamp(1.85rem, 4.4vw, 2.85rem); }
.judul-3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -0.018em; }

.lead {
  margin-top: 1.05rem;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.72;
  color: var(--ink-soft);
}

/* ========================================================================== */
/*  Tombol — terasa seperti benda                                             */
/*  Bibir dan bayangan saat diam, naik saat disorot, turun saat ditekan.      */
/*  Turunnya sengaja lebih cepat (40ms) daripada naiknya (110ms): balasan di  */
/*  bawah 100ms dibaca otak sebagai akibat langsung dari perbuatan sendiri.   */
/* ========================================================================== */

.tbl {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit; font-weight: 700; font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;   /* tombol tidak pernah membungkus barisnya */
  cursor: pointer;
  transition: transform 110ms cubic-bezier(0.2,0.8,0.3,1),
              box-shadow 110ms ease, background-color 140ms ease,
              border-color 140ms ease, color 140ms ease;
}
.tbl:active { transition-duration: 40ms; }
.tbl svg { width: 1.1em; height: 1.1em; }

.tbl-utama {
  background: var(--plum); color: #fff;
  box-shadow: 0 3px 0 0 oklch(0.290 0.085 338), var(--sh-sm);
}
.tbl-utama:hover  { background: var(--plum-hover); transform: translateY(-2px);
                    box-shadow: 0 5px 0 0 oklch(0.290 0.085 338), var(--sh-md); }
.tbl-utama:active { transform: translateY(2px);
                    box-shadow: 0 0 0 0 oklch(0.290 0.085 338), var(--sh-xs); }

.tbl-brand {
  background: var(--apricot); color: var(--apricot-ink);
  box-shadow: 0 3px 0 0 oklch(0.620 0.135 46), var(--sh-sm);
}
.tbl-brand:hover  { transform: translateY(-2px);
                    box-shadow: 0 5px 0 0 oklch(0.620 0.135 46), var(--sh-md); }
.tbl-brand:active { transform: translateY(2px);
                    box-shadow: 0 0 0 0 oklch(0.620 0.135 46), var(--sh-xs); }

.tbl-garis {
  background: var(--bg); color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--sh-xs);
}
.tbl-garis:hover  { border-color: var(--plum); color: var(--plum);
                    transform: translateY(-2px); box-shadow: var(--sh-sm); }
.tbl-garis:active { transform: translateY(1px); box-shadow: none; }

.tbl-hantu { background: transparent; color: var(--ink-soft); padding-inline: 0.9rem; }
.tbl-hantu:hover { color: var(--plum); background: var(--plum-tint); }

.tbl-kecil { padding: 0.55rem 0.95rem; font-size: 0.875rem; }
.tbl-besar { padding: 0.95rem 1.75rem; font-size: 1.02rem; }

.tbl-deret { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.tautan-panah {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--plum); font-weight: 700; font-size: 0.925rem;
}
.bg-tua .tautan-panah { color: var(--apricot-soft); }
.tautan-panah svg { width: 1.05em; height: 1.05em; transition: transform 160ms ease; }
.tautan-panah:hover svg { transform: translateX(4px); }

/* ========================================================================== */
/*  Kartu                                                                     */
/* ========================================================================== */

.kartu {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-xs);
  transition: transform 220ms cubic-bezier(0.2,0.8,0.3,1),
              box-shadow 220ms ease, border-color 220ms ease;
}
.kartu-angkat:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--line-strong);
}
.bg-tua .kartu { background: oklch(0.275 0.030 340); border-color: var(--line); }
.bg-tua .kartu-angkat:hover { background: oklch(0.300 0.032 340); }

.kartu h3 { font-size: 1.08rem; letter-spacing: -0.014em; }
.kartu p  { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.925rem; line-height: 1.68; }

/* Lencana ikon di kepala kartu. Warnanya diambil dari --tint yang ditulis
   inline pada elemennya, supaya satu aturan melayani sepuluh warna kategori. */
.ikon-kotak {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in oklab, var(--tint, var(--plum)) 26%, transparent);
  background: color-mix(in oklab, var(--tint, var(--plum)) 11%, var(--bg));
  color: var(--tint, var(--plum));
  margin-bottom: 1rem;
}
.ikon-kotak svg { width: 1.5rem; height: 1.5rem; }
.bg-tua .ikon-kotak {
  background: color-mix(in oklab, var(--tint, var(--plum)) 22%, oklch(0.245 0.028 340));
  color: color-mix(in oklab, var(--tint) 55%, white);
}

/* ========================================================================== */
/*  Petak                                                                     */
/*  Setiap anak langsung dari grid diberi min-width:0 — bawaannya `auto`, dan  */
/*  itu yang membuat halaman bisa digeser ke samping di ponsel.                */
/* ========================================================================== */

.petak { display: grid; gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.petak > * { min-width: 0; }

.petak-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.petak-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.petak-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.belah {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.belah > * { min-width: 0; }
.belah-balik > :first-child { order: 2; }

@media (max-width: 62rem) {
  .petak-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belah   { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .belah-balik > :first-child { order: 0; }
}
@media (max-width: 46rem) {
  .petak-2, .petak-3, .petak-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================== */
/*  Bilah atas                                                                */
/* ========================================================================== */

.atas {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.atas.turun { border-bottom-color: var(--line); box-shadow: var(--sh-xs); }

.atas-isi {
  display: flex; align-items: center; gap: 1rem;
  height: 4.25rem;
}
.atas-isi > .menu { margin-left: auto; }

.merek { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex-shrink: 0; }
.merek-teks { line-height: 1.1; min-width: 0; }
.merek-nama { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; }
.merek-tag  { font-size: 0.66rem; color: var(--ink-faint); white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 0.15rem; }
.menu a {
  position: relative;
  padding: 0.5rem 0.72rem;
  border-radius: var(--r-sm);
  font-size: 0.905rem; font-weight: 600;
  color: var(--ink-soft);
  transition: color 150ms ease, background-color 150ms ease;
}
.menu a:hover { color: var(--ink); background: var(--bg-quiet); }
.menu a::after {
  content: ''; position: absolute; left: 0.72rem; right: 0.72rem; bottom: 0.24rem;
  height: 2px; border-radius: 2px; background: var(--plum);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms cubic-bezier(0.2,0.8,0.3,1);
}
.menu a[aria-current='true']::after { transform: scaleX(1); }
.menu a[aria-current='true'] { color: var(--ink); }

.atas-aksi { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.tbl-menu {
  display: none;
  width: 2.6rem; height: 2.6rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); cursor: pointer;
  flex-shrink: 0;
}
.tbl-menu span {
  display: block; width: 1.05rem; height: 2px; border-radius: 2px;
  background: currentColor; position: relative;
  transition: transform 200ms cubic-bezier(0.2,0.8,0.3,1), background-color 120ms;
}
.tbl-menu span::before, .tbl-menu span::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform 200ms cubic-bezier(0.2,0.8,0.3,1);
}
.tbl-menu span::before { top: -6px; }
.tbl-menu span::after  { top:  6px; }
.tbl-menu[aria-expanded='true'] span { background: transparent; }
.tbl-menu[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.tbl-menu[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }

.laci {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 0.75rem var(--pad) 1.25rem;
}
.laci.buka { display: block; animation: laci-turun 220ms cubic-bezier(0.2,0.8,0.3,1); }
@keyframes laci-turun {
  from { opacity: 0; transform: translateY(-8px) }
  to   { opacity: 1; transform: translateY(0) }
}
/* Hanya tautan navigasi langsung. Tanpa `>` aturan ini juga mengenai tombol
   di dalam .tbl-deret, dan warnanya menang atas warna tombolnya sendiri —
   tombol plum jadi bertulisan abu-abu di atas plum. */
.laci > a {
  display: block; padding: 0.72rem 0.5rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600; color: var(--ink-soft);
}
.laci > a:hover { color: var(--plum); }
.laci .tbl-deret { margin-top: 1rem; }
.laci .tbl { flex: 1; }

@media (max-width: 64rem) {
  .menu { display: none; }
  .tbl-menu { display: inline-flex; margin-left: auto; }
  .atas-aksi .tbl-hantu { display: none; }
}
@media (max-width: 30rem) {
  .atas-aksi > .tbl-utama { display: none; }
  .merek-tag { display: none; }
}

/* ========================================================================== */
/*  Hero                                                                      */
/* ========================================================================== */

.hero { padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }

/* Latar hero: petak titik yang meredup ke bawah. Bukan gradient warna —
   yang meredup adalah kepekatan titiknya lewat mask, sementara warnanya
   tetap satu. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px,
                    oklch(0.401 0.108 338 / 0.14) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 78% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

.hero-belah {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-belah > * { min-width: 0; }

.hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 3.9rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
}
.hero h1 .sorot {
  position: relative;
  color: var(--plum);
  white-space: nowrap;
}
/* Coretan di bawah kata kunci, digambar seperti sapuan spidol. Lebarnya
   dianimasikan sekali saat halaman dibuka — bukan berulang; hiasan yang
   bergerak terus-menerus di dekat teks membuat kalimatnya susah dibaca. */
.hero h1 .sorot::after {
  content: ''; position: absolute;
  left: -0.06em; bottom: 0.02em; height: 0.32em;
  background: var(--apricot); border-radius: 0.14em;
  z-index: -1;
  width: 0; opacity: 0.55;
  animation: coret 720ms cubic-bezier(0.2, 0.85, 0.3, 1) 480ms forwards;
}
@keyframes coret { to { width: calc(100% + 0.12em) } }

.hero .lead { max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

.hero-catatan {
  margin-top: 1.35rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
  font-size: 0.85rem; color: var(--ink-faint);
}
.hero-catatan li { display: flex; align-items: center; gap: 0.4rem; }
.hero-catatan svg { width: 1rem; height: 1rem; color: var(--success); flex-shrink: 0; }

@media (max-width: 62rem) {
  .hero-belah { grid-template-columns: minmax(0, 1fr); }
  .hero-belah .hero-teks { text-align: center; }
  .hero-belah .hero-teks .lead { margin-inline: auto; }
  .hero-belah .tbl-deret, .hero-catatan { justify-content: center; }
  .hero h1 .sorot { white-space: normal; }
}

/* ========================================================================== */
/*  Panggung ilustrasi                                                        */
/*  Setiap ilustrasi hidup di dalam .panggung — kotak dengan rasio tetap,     */
/*  supaya tata letaknya tidak melompat saat SVG-nya selesai dilukis.          */
/* ========================================================================== */

.panggung { position: relative; width: 100%; }
.panggung svg { width: 100%; height: auto; overflow: visible; }

.panggung-kartu {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--sh-lg);
  padding: clamp(1rem, 2.4vw, 1.6rem);
}
.bg-tua .panggung-kartu { background: oklch(0.272 0.030 340); }

/* ========================================================================== */
/*  Gerak bersama untuk semua ilustrasi                                       */
/*  Dikumpulkan di sini, bukan disebar per-ilustrasi, supaya iramanya sama    */
/*  di seluruh halaman: yang mengambang selalu 5–7 detik, yang berdenyut      */
/*  selalu 2–3 detik. Irama yang berbeda-beda terbaca sebagai kegaduhan.      */
/* ========================================================================== */

@keyframes apung   { 0%,100% { transform: translateY(0) }      50% { transform: translateY(-9px) } }
@keyframes apung-s { 0%,100% { transform: translateY(0) }      50% { transform: translateY(-5px) } }
@keyframes ayun    { 0%,100% { transform: rotate(-2.5deg) }    50% { transform: rotate(2.5deg) } }
@keyframes kedip   { 0%,100% { opacity: 0.25 }                 50% { opacity: 1 } }
@keyframes putar   { to { transform: rotate(360deg) } }
  100% { transform: scale(1.5);  opacity: 0 }
}
  82%  { opacity: 1 }
  100% { transform: translateX(14px);  opacity: 0 }
}
@keyframes tarik-garis { to { stroke-dashoffset: 0 } }
@keyframes jalan-putus { to { stroke-dashoffset: -240 } }
}
@keyframes muncul {
  from { opacity: 0; transform: translateY(10px) scale(0.94) }
  to   { opacity: 1; transform: translateY(0)    scale(1) }
}
}
  97%           { transform: rotate(5deg) }
}

.g-apung   { animation: apung 6s ease-in-out infinite; }
.g-apung-s { animation: apung-s 5s ease-in-out infinite; }
.g-ayun    { animation: ayun 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.g-kedip   { animation: kedip 2.6s ease-in-out infinite; }
.g-putar   { animation: putar 22s linear infinite; transform-box: fill-box; transform-origin: center; }
.g-tunda-1 { animation-delay: 0.4s }
.g-tunda-2 { animation-delay: 0.8s }
.g-tunda-3 { animation-delay: 1.2s }
.g-tunda-4 { animation-delay: 1.6s }
.g-tunda-5 { animation-delay: 2.0s }

/* Garis yang menggambar dirinya sendiri. Jalur diberi stroke-dasharray sama
   dengan panjangnya lewat atribut di HTML, jadi aturannya cukup satu. */
.g-tarik { animation: tarik-garis 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.g-alir  { animation: jalan-putus 3.2s linear infinite; }

/* ========================================================================== */
/*  Maskot                                                                    */
/* ========================================================================== */

@keyframes kancil-bob   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3.5px) } }
@keyframes kancil-blink { 0%,92%,100% { transform: scaleY(1) } 95% { transform: scaleY(0.06) } }
@keyframes kancil-ear   { 0%,88%,100% { transform: rotate(0deg) } 92% { transform: rotate(-13deg) } 96% { transform: rotate(6deg) } }
@keyframes kancil-tilt  { 0%,100% { transform: rotate(0deg) } 50% { transform: rotate(-5deg) } }

.kancil-breathe { animation: kancil-bob 3.4s ease-in-out infinite; }
.kancil-eyes    { animation: kancil-blink 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.kancil-ear-l,
.kancil-ear-r   { animation: kancil-ear 7s ease-in-out infinite; transform-box: fill-box; }
.kancil-ear-r   { animation-delay: 0.35s; }
.kancil-think   { animation: kancil-tilt 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 70%; }

.kancil-bicara {
  display: flex; align-items: center; gap: 1rem;
}
.gelembung {
  position: relative;
  flex: 1 1 auto; min-width: 0; max-width: 34rem;
  padding: 0.95rem 1.15rem;
  border: 2px solid var(--line-strong); border-radius: 1.15rem;
  background: var(--bg);
  font-size: 0.94rem; line-height: 1.6;
}
.gelembung::before {
  content: ''; position: absolute; left: -9px; top: 50%;
  width: 1rem; height: 1rem; transform: translateY(-50%) rotate(45deg);
  border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong);
  background: var(--bg);
}
@media (max-width: 40rem) {
  .kancil-bicara { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .gelembung { max-width: none; width: 100%; }
  .gelembung::before {
    left: 2.25rem; top: -9px;
    transform: rotate(135deg);
  }
}

/* ========================================================================== */
/*  Munculnya isi saat digulir                                                */
/*  Dikendalikan IntersectionObserver di app.js. Kalau JS mati, .tampil        */
/*  tidak pernah dipasang — karena itu keadaan dasarnya harus tetap terbaca,  */
/*  dan penyembunyiannya baru dinyalakan setelah .js-aktif ada di <html>.     */
/* ========================================================================== */

.js-aktif .muncul {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.2,0.8,0.3,1),
              transform 620ms cubic-bezier(0.2,0.8,0.3,1);
}
.js-aktif .muncul.tampil { opacity: 1; transform: none; }
.muncul-1 { transition-delay: 80ms }
.muncul-2 { transition-delay: 160ms }
.muncul-3 { transition-delay: 240ms }
.muncul-4 { transition-delay: 320ms }
.muncul-5 { transition-delay: 400ms }
.muncul-6 { transition-delay: 480ms }

/* ========================================================================== */
/*  Angka besar                                                               */
/* ========================================================================== */

.angka-deret {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}
.angka-deret > * { min-width: 0; }
.angka-sel {
  padding: clamp(1.15rem, 2.6vw, 1.75rem);
  background: var(--bg);
  text-align: center;
}
.angka-nilai {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bg-tua .angka-nilai { color: var(--apricot); }
.angka-label { margin-top: 0.35rem; font-size: 0.83rem; color: var(--ink-faint); }
@media (max-width: 46rem) { .angka-deret { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ========================================================================== */
/*  Tab                                                                       */
/* ========================================================================== */

.tab-bilah {
  display: flex; gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-quiet);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.tab-bilah::-webkit-scrollbar { display: none; }
.tab-bilah button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 0.9rem; font-weight: 700;
  white-space: nowrap; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease,
              box-shadow 180ms ease, border-color 180ms ease;
}
.tab-bilah button svg { width: 1.05rem; height: 1.05rem; }
.tab-bilah button:hover { color: var(--ink); }
.tab-bilah button[aria-selected='true'] {
  background: var(--bg); color: var(--plum);
  border-color: var(--line);
  box-shadow: var(--sh-xs);
}
.tab-panel[hidden] { display: none; }
.tab-panel { animation: muncul 380ms cubic-bezier(0.2,0.8,0.3,1); }

/* ========================================================================== */
/*  Akordeon                                                                  */
/* ========================================================================== */

.tanya {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.tanya + .tanya { margin-top: 0.7rem; }
.tanya[open] { border-color: var(--plum-line); box-shadow: var(--sh-sm); }
.tanya summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 700; font-size: 1rem;
  cursor: pointer; list-style: none;
}
.tanya summary::-webkit-details-marker { display: none; }
.tanya summary::after {
  content: ''; flex-shrink: 0; margin-left: auto;
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms cubic-bezier(0.2,0.8,0.3,1);
}
.tanya[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tanya summary:hover { color: var(--plum); }
.tanya-isi {
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-soft); font-size: 0.94rem; line-height: 1.72;
}
.tanya-isi p + p { margin-top: 0.7rem; }

/* ========================================================================== */
/*  Daftar centang                                                            */
/* ========================================================================== */

.centang li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.945rem; line-height: 1.7;
  color: var(--ink-soft);
}
.centang li + li { margin-top: 0.7rem; }
.centang li::before {
  content: ''; position: absolute; left: 0; top: 0.42rem;
  width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: color-mix(in oklab, var(--success) 15%, transparent);
}
.centang li::after {
  content: ''; position: absolute; left: 0.36rem; top: 0.66rem;
  width: 0.42rem; height: 0.22rem;
  border-left: 2px solid var(--success); border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}
.centang strong { color: var(--ink); font-weight: 700; }

/* ========================================================================== */
/*  Harga                                                                     */
/* ========================================================================== */

.harga-petak {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.harga-petak > * { min-width: 0; }
@media (max-width: 62rem) { .harga-petak { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; } }

.paket { display: flex; flex-direction: column; height: 100%; padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.paket-unggul {
  border-color: var(--plum);
  box-shadow: var(--sh-lg);
}
.paket-pita {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  padding: 0.28rem 0.85rem; border-radius: 999px;
  background: var(--apricot); color: var(--apricot-ink);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--sh-sm);
}
.paket-nama { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.paket-guna { margin-top: 0.3rem; font-size: 0.875rem; color: var(--ink-faint); }
.paket-angka {
  margin-top: 1.15rem;
  display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap;
}
.paket-angka b {
  font-size: clamp(1.75rem, 3.4vw, 2.2rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
}
.paket-angka span { font-size: 0.85rem; color: var(--ink-faint); }
.paket .centang { margin-top: 1.35rem; }
.paket .tbl { margin-top: 1.5rem; width: 100%; }
.paket-kaki { margin-top: auto; padding-top: 1.35rem; }

/* ========================================================================== */
/*  Testimoni                                                                 */
/* ========================================================================== */

.suara { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.suara blockquote { margin: 0; font-size: 0.985rem; line-height: 1.72; color: var(--ink); }
.suara figcaption { margin-top: auto; display: flex; align-items: center; gap: 0.7rem; }
.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in oklab, var(--tint, var(--plum)) 16%, var(--bg));
  color: var(--tint, var(--plum));
  font-weight: 800; font-size: 0.9rem;
  border: 1px solid color-mix(in oklab, var(--tint, var(--plum)) 28%, transparent);
}
.suara-nama { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.suara-peran { font-size: 0.79rem; color: var(--ink-faint); }
.bintang { display: flex; gap: 0.15rem; color: var(--apricot); }
.bintang svg { width: 1rem; height: 1rem; }

/* ========================================================================== */
/*  Kaki halaman                                                              */
/* ========================================================================== */

.kaki { background: var(--plum-deeper); color: oklch(0.905 0.006 340); }
.kaki-atas {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}
.kaki-atas > * { min-width: 0; }
.kaki .kaki-judul {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: oklch(0.700 0.020 340);
  margin-bottom: 1rem;
}
.kaki li + li { margin-top: 0.6rem; }
.kaki li a { font-size: 0.9rem; color: oklch(0.860 0.008 340); transition: color 150ms ease; }
.kaki li a:hover { color: var(--apricot); }
.kaki-tentang { font-size: 0.9rem; line-height: 1.72; color: oklch(0.790 0.012 340); max-width: 26rem; }
.kaki-bawah {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid oklch(0.320 0.024 340);
  font-size: 0.83rem; color: oklch(0.700 0.014 340);
}
.sosial { display: flex; gap: 0.5rem; }
.sosial a {
  width: 2.35rem; height: 2.35rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: 1px solid oklch(0.330 0.024 340);
  color: oklch(0.850 0.010 340);
  transition: background-color 160ms ease, color 160ms ease,
              transform 160ms ease, border-color 160ms ease;
}
.sosial a:hover {
  background: var(--apricot); color: var(--apricot-ink);
  border-color: var(--apricot); transform: translateY(-2px);
}
.sosial svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 56rem) { .kaki-atas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .kaki-atas { grid-template-columns: minmax(0, 1fr); } }

/* ========================================================================== */
/*  Serba-serbi                                                               */
/* ========================================================================== */

.pil {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-quiet);
  font-size: 0.775rem; font-weight: 700; color: var(--ink-soft);
  white-space: nowrap;
}
.pil svg { width: 0.9rem; height: 0.9rem; }
.pil-deret { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.kode {
  font-family: var(--mono); font-size: 0.83em;
  padding: 0.12em 0.42em; border-radius: 0.35rem;
  background: var(--bg-quiet); border: 1px solid var(--line);
}
.bg-tua .kode { background: oklch(0.290 0.028 340); }

hr.pisah { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2.5rem, 5vw, 4rem); }

/* Pita berjalan. Dua salinan isi bergeser 50% — tanpa salinannya akan ada
   celah kosong setiap kali putaran diulang. */
.pita { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                                  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pita-jalur { display: flex; width: max-content; animation: geser 34s linear infinite; }
.pita:hover .pita-jalur { animation-play-state: paused; }
.pita-set { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); padding-right: clamp(1.5rem, 4vw, 3rem); }
@keyframes geser { to { transform: translateX(-50%) } }

/* ========================================================================== */
/*  Hormati prefers-reduced-motion                                            */
/*  Semua gerak dimatikan, bukan diperlambat. Yang tersisa harus tetap        */
/*  menyampaikan hal yang sama — karena itu tidak ada satu pun informasi di   */
/*  halaman ini yang hanya disampaikan lewat gerakan.                         */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-aktif .muncul { opacity: 1 !important; transform: none !important; }
  .hero h1 .sorot::after { width: calc(100% + 0.12em) !important; }

  /* Mematikan animasi saja tidak cukup. Animasi yang berputar tanpa henti
     dimulai dari keadaan tersembunyi — begitu putarannya dihentikan, yang
     tersisa adalah bidang kosong. Semua yang di bawah ini dikembalikan ke
     keadaan akhirnya secara manual, supaya isi yang sama tetap tersampaikan
     kepada orang yang meminta gerak dikurangi. */
  svg [class*='s-'] { opacity: 1 !important; }

  .s-muncul, .s-centang, .s-baris, .s-teks, .s-periksa, .s-lulus, .s-sertifikat,
  .s-muncul-lihat, .s-blok, .s-nav, .s-baris-lihat, .s-baris-baru, .s-petak,
  .s-jenjang, .s-notif, .s-pasang, .s-pintasan, .s-cap, .s-sah, .s-pilih,
  .s-modul, .s-angka, .s-tekan, .s-kepala-putar, .s-jarum, .s-lembar,
  .s-gembok-lengan, .s-lencana-aman, .s-unggah, .s-unduh, .s-api,
  .s-tombol-main, .s-sakelar-bulat, .s-pancar, .s-debu, .s-xp,
  .g-apung, .g-apung-s, .g-ayun, .g-putar { transform: none !important; }

  /* Angka yang memang bukan 100% tidak boleh berubah jadi 100% hanya karena
     gerakannya dimatikan. */
  .s-bar        { transform: scaleX(var(--w, 1)) !important; }
  .s-sorot      { transform: scaleX(1) !important; }
  .s-batang     { transform: scaleY(1) !important; }
  .s-cincin-isi { stroke-dashoffset: var(--sisa, 0) !important; }
  .s-tandai     { stroke-dashoffset: 0 !important; }
  .s-jam        { stroke-dasharray: 18 472 !important; }
  .g-tarik      { stroke-dashoffset: 0 !important; }

  /* Yang memang harus tetap tersembunyi: pasangan "keadaan sebelum" dari
     sesuatu yang keadaan sesudahnya sudah ditampilkan, dan penunjuk tetikus
     yang tanpa gerakan hanya jadi panah yang tergeletak. */
  .s-kosong-tombol, .s-kursor, .s-cincin { opacity: 0 !important; }
}

/* Cetak: halaman ini kadang dicetak jadi proposal. Yang gelap dibalik, yang
   bergerak dibekukan, dan navigasinya dibuang. */
@media print {
  .atas, .laci, .sosial, .tbl-deret { display: none !important; }
  .bg-tua, .kaki { background: #fff !important; color: #000 !important; }
  .kartu { box-shadow: none !important; border-color: #ccc !important; }
}

/* ==========================================================================
   Gerak khusus per ilustrasi
   --------------------------------------------------------------------------
   Aturannya satu: yang bergerak harus menjelaskan sesuatu. Simpul yang muncul
   berurutan menjelaskan "dikerjakan satu per satu"; batang yang tumbuh dari
   kiri menjelaskan "terisi sampai sekian"; cincin yang mengembang menjelaskan
   "yang ini sedang berjalan". Gerak yang tidak menjelaskan apa pun tidak
   ditambahkan.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

@keyframes s-pop {
  0%   { opacity: 0; transform: scale(0.5) }
  62%  { opacity: 1; transform: scale(1.12) }
  100% { opacity: 1; transform: scale(1) }
}
.s-muncul {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: s-pop 620ms cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}

/* Cincin denyut pada simpul yang sedang dikerjakan. Sengaja lambat (2,4 s):
   denyut cepat di sebelah teks terbaca sebagai peringatan, bukan sebagai
   penanda posisi. */
@keyframes s-cincin {
  0%   { transform: scale(1);   opacity: 0.75 }
  70%  { transform: scale(1.85); opacity: 0 }
  100% { transform: scale(1.85); opacity: 0 }
}
.s-cincin { transform-box: fill-box; transform-origin: center;
            animation: s-cincin 2.4s cubic-bezier(0.3,0.7,0.4,1) infinite; }

/* Api runtutan: kerlip tak beraturan, bukan denyut rata — api yang berdenyut
   rata terbaca sebagai lampu. */
@keyframes s-api {
  0%, 100% { transform: scaleY(1)    translateY(0) }
  28%      { transform: scaleY(1.12) translateY(-1px) }
  46%      { transform: scaleY(0.94) translateY(0.5px) }
  72%      { transform: scaleY(1.07) translateY(-0.5px) }
}
.s-api { transform-box: fill-box; transform-origin: 50% 100%;
         animation: s-api 1.9s ease-in-out infinite; }

/* XP: melayang naik lalu hilang, seperti di aplikasinya saat satu materi
   ditandai selesai. */
@keyframes s-xp {
  0%   { opacity: 0; transform: translateY(16px) scale(0.85) }
  16%  { opacity: 1; transform: translateY(0)    scale(1) }
  62%  { opacity: 1; transform: translateY(-10px) scale(1) }
  100% { opacity: 0; transform: translateY(-30px) scale(0.96) }
}
.s-xp { transform-box: fill-box; transform-origin: center;
        animation: s-xp 4.2s cubic-bezier(0.2,0.8,0.3,1) infinite; }

@keyframes s-bar { from { transform: scaleX(0) } to { transform: scaleX(var(--w, 1)) } }
.s-bar { transform-box: fill-box; transform-origin: left center;
         transform: scaleX(0);
         animation: s-bar 1.1s cubic-bezier(0.2,0.8,0.3,1) forwards; }

@keyframes s-centang {
  0%   { opacity: 0; transform: scale(0.4) rotate(-14deg) }
  60%  { opacity: 1; transform: scale(1.16) rotate(3deg) }
  100% { opacity: 1; transform: scale(1) rotate(0) }
}
.s-centang { opacity: 0; transform-box: fill-box; transform-origin: center;
             animation: s-centang 560ms cubic-bezier(0.3,1.4,0.5,1) forwards; }

/* Gerak yang baru dimulai saat ilustrasinya benar-benar terlihat. Batang yang
   tumbuh sebelum orangnya sempat menoleh sama saja dengan tidak tumbuh. */
.js-aktif .s-lihat { animation-play-state: paused; }
.js-aktif .tampil .s-lihat,
.js-aktif .tampil.s-lihat { animation-play-state: running; }

/* --- masalah ------------------------------------------------------------- */

@keyframes s-debu {
  0%   { opacity: 0;   transform: translate(0, 6px)   scale(0.6) }
  25%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(10px, -34px) scale(1.15) }
}
.s-debu { transform-box: fill-box; animation: s-debu 4.4s ease-out infinite; }

/* Kursor mendekat, mengetuk, lalu menghilang — lalu diulang. Ketukan
   ditandai satu getaran kecil, bukan lingkaran riak: pada ukuran 260px
   riak hanya jadi noda. */
@keyframes s-kursor {
  0%   { opacity: 0; transform: translate(196px, 116px) }
  14%  { opacity: 1; transform: translate(196px, 116px) }
  46%  { opacity: 1; transform: translate(78px, 56px) }
  54%  { opacity: 1; transform: translate(76px, 58px) }
  62%  { opacity: 1; transform: translate(78px, 56px) }
  86%  { opacity: 1; transform: translate(78px, 56px) }
  100% { opacity: 0; transform: translate(78px, 56px) }
}
.s-kursor { animation: s-kursor 4.6s cubic-bezier(0.4,0,0.2,1) infinite; }

@keyframes s-tandai {
  0%, 46%  { stroke-dashoffset: 18; opacity: 0 }
  52%      { stroke-dashoffset: 18; opacity: 1 }
  62%      { stroke-dashoffset: 0;  opacity: 1 }
  94%      { stroke-dashoffset: 0;  opacity: 1 }
  100%     { stroke-dashoffset: 0;  opacity: 0 }
}
.s-tandai { stroke-dasharray: 18; animation: s-tandai 4.6s linear infinite; }

@keyframes s-baris {
  from { opacity: 0; transform: translateX(-10px) }
  to   { opacity: 1; transform: translateX(0) }
}
.s-baris { opacity: 0; animation: s-baris 520ms cubic-bezier(0.2,0.8,0.3,1) forwards; }

/* --- cara kerja ---------------------------------------------------------- */

.langkah-deret {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.35rem);
  counter-reset: langkah;
}
.langkah-deret > * { min-width: 0; }
@media (max-width: 68rem) { .langkah-deret { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .langkah-deret { grid-template-columns: minmax(0, 1fr); } }

.langkah { display: flex; flex-direction: column; }
.langkah .panggung { margin-bottom: 1.1rem; }
.langkah h3 { font-size: 1.05rem; }
.langkah-nomor {
  position: absolute; top: -0.85rem; left: 1.25rem;
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: var(--plum); color: #fff;
  font-size: 0.9rem; font-weight: 800;
  box-shadow: var(--sh-sm);
  border: 3px solid var(--bg-sunk);
}

@keyframes s-giliran { 0%, 14% { opacity: 1 } 26%, 100% { opacity: 0.24 } }
.s-giliran { opacity: 0.24; animation: s-giliran 3.2s linear infinite; }

@keyframes s-sheet {
  0%       { transform: translateY(52px); opacity: 0 }
  12%, 78% { transform: translateY(0);    opacity: 1 }
  92%,100% { transform: translateY(52px); opacity: 0 }
}
.s-sheet { animation: s-sheet 5.4s cubic-bezier(0.2,0.8,0.3,1) infinite; }

@keyframes s-ketik { 0%, 22% { opacity: 0 } 34%, 100% { opacity: 1 } }
.s-ketik { animation: s-ketik 5.4s linear infinite; }

@keyframes s-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.s-kursor-teks { animation: s-caret 1s steps(1) infinite; }

/* Syarat dicentang satu per satu, lalu semuanya diam sejenak sebelum diulang —
   jeda itu yang memberi waktu membaca ketiganya. */
@keyframes s-periksa {
  0%, 6%   { opacity: 0; transform: translateX(-6px) }
  14%, 88% { opacity: 1; transform: translateX(0) }
  100%     { opacity: 0; transform: translateX(-6px) }
}
.s-periksa { opacity: 0; animation: s-periksa 5s ease-out infinite; }

@keyframes s-lulus {
  0%, 42%  { opacity: 0; transform: scale(0.8) }
  52%      { opacity: 1; transform: scale(1.08) }
  58%, 88% { opacity: 1; transform: scale(1) }
  100%     { opacity: 0; transform: scale(0.8) }
}
.s-lulus { opacity: 0; transform-box: fill-box; transform-origin: left center;
           animation: s-lulus 5s cubic-bezier(0.3,1.3,0.5,1) infinite; animation-delay: 1.9s; }

@keyframes s-pancar {
  0%, 100% { opacity: 0;   transform: scale(0.4) }
  30%      { opacity: 0.7; transform: scale(1) }
  60%      { opacity: 0;   transform: scale(1.35) }
}
.s-pancar { transform-box: fill-box; transform-origin: center;
            animation: s-pancar 2.8s ease-out infinite; }

.s-muncul-lihat {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: s-pop 620ms cubic-bezier(0.3,1.4,0.5,1) forwards;
}
.js-aktif .s-muncul-lihat { animation-play-state: paused; }
.js-aktif .tampil .s-muncul-lihat { animation-play-state: running; }

@keyframes s-sertifikat {
  0%, 10%  { opacity: 0; transform: translate(-18px, 8px) rotate(-6deg) }
  26%, 82% { opacity: 1; transform: translate(0, 0) rotate(0) }
  96%,100% { opacity: 0; transform: translate(-18px, 8px) rotate(-6deg) }
}
.s-sertifikat { opacity: 0; transform-box: fill-box; transform-origin: left bottom;
                animation: s-sertifikat 5.6s cubic-bezier(0.2,0.8,0.3,1) infinite; }

/* --- aplikasi pendamping ------------------------------------------------- */

@keyframes s-angka { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.s-angka { transform-box: fill-box; animation: s-angka 700ms cubic-bezier(0.2,0.8,0.3,1) both; }

/* Cincin progres. `from` sengaja tidak ditulis: nilainya diambil dari atribut
   stroke-dashoffset di HTML, jadi satu aturan melayani cincin mana pun. */
@keyframes s-cincin-isi { to { stroke-dashoffset: var(--sisa, 0) } }
.s-cincin-isi { animation: s-cincin-isi 1.5s cubic-bezier(0.2,0.8,0.3,1) forwards; }

@keyframes s-batang { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.s-batang { transform-box: fill-box; transform-origin: bottom;
            animation: s-batang 780ms cubic-bezier(0.2,0.9,0.3,1) both; }

/* Tombol centang kebiasaan: ditekan, lalu terisi. Turunnya 40 ms seperti di
   aplikasinya — itu yang membuat sebuah tombol terasa ditekan, bukan diklik. */
@keyframes s-tekan {
  0%, 24%  { transform: scale(1) }
  27%      { transform: scale(0.9) }
  34%, 100%{ transform: scale(1) }
}
.s-tekan { transform-box: fill-box; transform-origin: 240px 72px;
           animation: s-tekan 4.4s cubic-bezier(0.2,0.8,0.3,1) infinite; }
@keyframes s-isi-tombol   { 0%, 26% { opacity: 0 } 34%, 88% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes s-kosong-tombol{ 0%, 26% { opacity: 1 } 34%, 88% { opacity: 0 } 96%, 100% { opacity: 1 } }
.s-isi-tombol    { opacity: 0; animation: s-isi-tombol 4.4s linear infinite; }
.s-kosong-tombol { animation: s-kosong-tombol 4.4s linear infinite; }

.s-modul { animation: apung-s 6s ease-in-out infinite; }

@keyframes s-baris-baru {
  0%, 12%   { opacity: 0; transform: translateY(-10px) }
  24%, 84%  { opacity: 1; transform: translateY(0) }
  96%, 100% { opacity: 0; transform: translateY(-10px) }
}
.s-baris-baru { opacity: 0; animation: s-baris-baru 5.6s cubic-bezier(0.2,0.8,0.3,1) infinite; }

@keyframes s-sakelar-isi   { 0%, 34% { opacity: 0 } 46%, 86% { opacity: 1 } 96%, 100% { opacity: 0 } }
@keyframes s-sakelar-bulat { 0%, 34% { transform: translateX(0) } 46%, 86% { transform: translateX(16px) } 96%, 100% { transform: translateX(0) } }
.s-sakelar-isi   { opacity: 0; animation: s-sakelar-isi 5.6s linear infinite; }
.s-sakelar-bulat { animation: s-sakelar-bulat 5.6s cubic-bezier(0.3,1.3,0.5,1) infinite; }

/* Daftar bernomor dengan angkanya sendiri — <ol> bawaan tidak bisa diberi
   kotak tanpa merusak penomorannya di pembaca layar, jadi angkanya ditulis. */
.urut li { display: flex; gap: 0.9rem; align-items: flex-start; }
.urut li + li { margin-top: 0.95rem; }
.urut b {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; margin-top: 0.1rem;
  border-radius: 999px;
  background: var(--plum-tint); color: var(--plum);
  font-size: 0.82rem; font-weight: 800;
  border: 1px solid var(--plum-line);
}
.urut div { min-width: 0; font-size: 0.945rem; line-height: 1.68; color: var(--ink-soft); }
.urut strong { color: var(--ink); }

/* --- jenis materi -------------------------------------------------------- */

@keyframes s-kepala-putar { from { transform: translateX(-81px) } to { transform: translateX(0) } }
.s-kepala-putar { animation: s-kepala-putar 3s cubic-bezier(0.35,0,0.65,1) infinite; }

@keyframes s-teks {
  from { opacity: 0; transform: translateX(-8px) }
  to   { opacity: 1; transform: translateX(0) }
}
.s-teks { opacity: 0; animation: s-teks 620ms cubic-bezier(0.2,0.8,0.3,1) forwards; }
.js-aktif .s-teks { animation-play-state: paused; }
.js-aktif .tampil .s-teks { animation-play-state: running; }

/* Sorotan catatan: melebar dari kiri seperti spidol yang benar-benar disapukan,
   lalu diam lama sebelum hilang. */
@keyframes s-sorot {
  0%, 34%  { transform: scaleX(0) }
  50%, 86% { transform: scaleX(1) }
  96%,100% { transform: scaleX(0) }
}
.s-sorot { transform-box: fill-box; transform-origin: left center;
           animation: s-sorot 5s cubic-bezier(0.2,0.8,0.3,1) infinite; }

/* Halaman e-book membalik: diputar dari tepi kiri, bukan digeser — geseran
   terbaca sebagai kartu yang ditarik, bukan sebagai halaman. */
@keyframes s-lembar {
  0%, 62%  { transform: rotate(0deg);   opacity: 1 }
  78%      { transform: rotate(-9deg);  opacity: 0.55 }
  86%      { transform: rotate(-3deg);  opacity: 1 }
  100%     { transform: rotate(0deg);   opacity: 1 }
}
.s-lembar { transform-box: fill-box; transform-origin: left center;
            animation: s-lembar 4.6s cubic-bezier(0.4,0,0.3,1) infinite; }

@keyframes s-pilih {
  0%, 18%  { opacity: 0; transform: scale(0.86) }
  30%      { opacity: 1; transform: scale(1.04) }
  38%, 88% { opacity: 1; transform: scale(1) }
  100%     { opacity: 0; transform: scale(0.86) }
}
.s-pilih { opacity: 0; transform-box: fill-box; transform-origin: center;
           animation: s-pilih 4.6s cubic-bezier(0.3,1.3,0.5,1) infinite; }

@keyframes s-gembok {
  0%, 46%  { opacity: 0.25 }
  60%,90%  { opacity: 1 }
  100%     { opacity: 0.25 }
}
@keyframes s-gembok-lengan {
  0%, 46%  { transform: rotate(0deg)   translateX(0) }
  62%,90%  { transform: rotate(-24deg) translateX(1px) }
  100%     { transform: rotate(0deg)   translateX(0) }
}
.s-gembok { animation: s-gembok 5s ease-out infinite; }
.s-gembok-lengan { transform-box: fill-box; transform-origin: right bottom;
                   animation: s-gembok-lengan 5s cubic-bezier(0.3,1.2,0.5,1) infinite; }

@keyframes s-unduh {
  0%, 100% { transform: translateY(0) }
  16%      { transform: translateY(-6px) }
  38%      { transform: translateY(5px) }
  56%      { transform: translateY(0) }
}
.s-unduh { transform-box: fill-box; animation: s-unduh 2.6s cubic-bezier(0.3,0.9,0.4,1) infinite; }

/* --- dua gaya tampilan --------------------------------------------------- */

@keyframes s-nav { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: none } }
.s-nav { opacity: 0; animation: s-nav 520ms cubic-bezier(0.2,0.8,0.3,1) forwards; }
.s-blok { opacity: 0; transform-box: fill-box; transform-origin: center;
          animation: s-pop 540ms cubic-bezier(0.3,1.3,0.5,1) forwards; }
.js-aktif .s-nav, .js-aktif .s-blok { animation-play-state: paused; }
.js-aktif .tampil .s-nav, .js-aktif .tampil .s-blok { animation-play-state: running; }

/* Tombol mode Main: balok berbibir 4px yang tenggelam penuh saat ditekan.
   Diamnya jauh lebih lama daripada tekanannya — tombol yang berkedip terus
   terbaca sebagai peringatan. */
@keyframes s-tombol-main {
  0%, 72%   { transform: translateY(0) }
  76%, 84%  { transform: translateY(4px) }
  90%, 100% { transform: translateY(0) }
}
.s-tombol-main { transform-box: fill-box;
                 animation: s-tombol-main 4.6s cubic-bezier(0.2,0.8,0.3,1) infinite; }

/* --- tabel perbandingan -------------------------------------------------- */

.banding {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  /* Tabel adalah isi lebar. Ia menggulir di dalam wadahnya sendiri, bukan
     memaksa seluruh halaman bisa digeser ke samping. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--sh-xs);
}
.banding table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.92rem; }
.banding caption { text-align: left; }
.banding th, .banding td {
  padding: 0.85rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.banding thead th {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg-quiet);
  white-space: nowrap;
}
.banding tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.banding tbody td { color: var(--ink-soft); }
.banding tbody tr:last-child th, .banding tbody tr:last-child td { border-bottom: 0; }
.banding tbody td:last-child { color: var(--plum); font-weight: 600; }

/* --- gamifikasi & pengingat ---------------------------------------------- */

@keyframes s-petak { from { opacity: 0; transform: scale(0.3) } to { opacity: 1; transform: scale(1) } }
.s-petak { opacity: 0; transform-box: fill-box; transform-origin: center;
           animation: s-petak 420ms cubic-bezier(0.3,1.2,0.5,1) forwards; }
.js-aktif .s-petak { animation-play-state: paused; }
.js-aktif .tampil .s-petak { animation-play-state: running; }

/* Satu ruas kecil pada piringan jam. Dianimasikan lewat dasharray, bukan
   lewat lebar stroke, supaya panjangnya bertambah searah jarum jam. */
@keyframes s-jam { to { stroke-dasharray: 18 472 } }
.s-jam { animation: s-jam 900ms cubic-bezier(0.3,1.2,0.5,1) forwards; animation-delay: .5s; }

.s-jarum { animation: putar 40s linear infinite; }

@keyframes s-notif {
  0%       { opacity: 0; transform: translate(26px, -10px) scale(0.94) }
  10%      { opacity: 1; transform: translate(0, 0) scale(1) }
  14%      { transform: translate(0, 0) scale(1.015) }
  18%, 86% { transform: translate(0, 0) scale(1) }
  96%,100% { opacity: 0; transform: translate(26px, -10px) scale(0.94) }
}
.s-notif { opacity: 0; transform-box: fill-box; transform-origin: right top;
           animation: s-notif 6.5s cubic-bezier(0.2,0.8,0.3,1) infinite; }

@keyframes s-jenjang { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } }
.s-jenjang { opacity: 0; animation: s-jenjang 560ms cubic-bezier(0.2,0.8,0.3,1) forwards; }
.js-aktif .s-jenjang { animation-play-state: paused; }
.js-aktif .tampil .s-jenjang { animation-play-state: running; }

/* --- panel pemantauan ---------------------------------------------------- */

@keyframes s-baris-lihat { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.s-baris-lihat { opacity: 0; animation: s-baris-lihat 560ms cubic-bezier(0.2,0.8,0.3,1) forwards; }
.js-aktif .s-baris-lihat { animation-play-state: paused; }
.js-aktif .tampil .s-baris-lihat { animation-play-state: running; }

/* --- fondasi ------------------------------------------------------------- */

/* Satu paket data yang benar-benar menempuh jarak antara dua kotak. Garis
   putus-putusnya sudah berjalan lewat .g-alir; titik ini yang membuat arahnya
   tidak bisa salah dibaca. */
@keyframes s-paket {
  0%   { opacity: 0; transform: translateX(0) }
  12%  { opacity: 1 }
  88%  { opacity: 1 }
  100% { opacity: 0; transform: translateX(64px) }
}
.s-paket { animation: s-paket 2.4s cubic-bezier(0.4,0,0.2,1) infinite; }

@keyframes s-lencana-aman {
  0%, 70%, 100% { transform: scale(1) }
  78%           { transform: scale(1.12) }
  86%           { transform: scale(0.98) }
}
.s-lencana-aman { transform-box: fill-box; transform-origin: center;
                  animation: s-lencana-aman 3.4s cubic-bezier(0.3,1.2,0.5,1) infinite; }

@keyframes s-unggah {
  0%, 100% { transform: translateY(0) }
  22%      { transform: translateY(-7px) }
  44%      { transform: translateY(2px) }
  60%      { transform: translateY(0) }
}
.s-unggah { transform-box: fill-box; animation: s-unggah 2.8s cubic-bezier(0.3,0.9,0.4,1) infinite; }

/* Cap: jatuh dari atas, mendarat lebih besar dari ukurannya, lalu mengecil ke
   ukuran sebenarnya. Itulah yang membedakan "dicap" dari "muncul". */
@keyframes s-cap {
  0%, 34%  { opacity: 0; transform: scale(2.1) rotate(-16deg) }
  46%      { opacity: 1; transform: scale(0.92) rotate(-4deg) }
  54%, 88% { opacity: 1; transform: scale(1) rotate(0deg) }
  100%     { opacity: 0; transform: scale(2.1) rotate(-16deg) }
}
.s-cap { opacity: 0; transform-box: fill-box; transform-origin: center;
         animation: s-cap 5.2s cubic-bezier(0.3,1.2,0.5,1) infinite; }

@keyframes s-sah {
  0%, 46%  { opacity: 0; transform: scale(0.5) }
  58%      { opacity: 1; transform: scale(1.14) }
  66%, 90% { opacity: 1; transform: scale(1) }
  100%     { opacity: 0; transform: scale(0.5) }
}
.s-sah { opacity: 0; transform-box: fill-box; transform-origin: center;
         animation: s-sah 5.2s cubic-bezier(0.3,1.3,0.5,1) infinite; }

@keyframes s-pasang {
  0%, 8%   { opacity: 0; transform: scale(0.3) }
  22%      { opacity: 1; transform: scale(1.1) }
  30%, 88% { opacity: 1; transform: scale(1) }
  100%     { opacity: 0; transform: scale(0.3) }
}
.s-pasang { opacity: 0; transform-box: fill-box; transform-origin: center;
            animation: s-pasang 5.6s cubic-bezier(0.3,1.3,0.5,1) infinite; }

@keyframes s-pintasan {
  0%, 32%   { opacity: 0; transform: translateY(-10px) scaleY(0.7) }
  44%, 88%  { opacity: 1; transform: translateY(0) scaleY(1) }
  100%      { opacity: 0; transform: translateY(-10px) scaleY(0.7) }
}
.s-pintasan { opacity: 0; transform-box: fill-box; transform-origin: top center;
              animation: s-pintasan 5.6s cubic-bezier(0.2,0.8,0.3,1) infinite; }

.s-sinyal { animation: kedip 2.2s ease-in-out infinite; }

/* --- ajakan penutup ------------------------------------------------------ */

.tutup {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: oklch(0.278 0.030 340);
}
.tutup-maskot { flex-shrink: 0; }
.tutup-teks { min-width: 0; }
.tutup .lead { margin-top: 1rem; max-width: 40rem; }
@media (max-width: 52rem) {
  .tutup { flex-direction: column; text-align: center; }
  .tutup .lead { margin-inline: auto; }
  .tutup .tbl-deret { justify-content: center; }
}

/* Kerangka halaman adalah gambar yang isinya teks kecil. Diperas ke lebar
   ponsel ia tidak lagi bisa dibaca sama sekali, jadi di layar sempit ia
   dibiarkan melebihi wadahnya dan digeser — bukan dikecilkan sampai hilang. */
@media (max-width: 56rem) {
  .panggung-geser { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panggung-geser svg { min-width: 40rem; }
}

.petunjuk-geser {
  display: none;
  margin-top: 2rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink-faint);
}
@media (max-width: 56rem) { .petunjuk-geser { display: block; } }

/* ==========================================================================
   Halaman teks (kebijakan privasi, syarat layanan)
   ========================================================================== */

.teks { max-width: 46rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.teks h1 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
.teks .tanggal { margin-top: 0.85rem; font-size: 0.875rem; color: var(--ink-faint); }
.teks h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.teks h3 { margin-top: 1.75rem; font-size: 1rem; }
.teks p, .teks li { margin-top: 0.9rem; color: var(--ink-soft); line-height: 1.78; }
.teks strong { color: var(--ink); }
.teks ul { margin-top: 0.5rem; }
.teks ul li { position: relative; padding-left: 1.35rem; }
.teks ul li::before {
  content: ''; position: absolute; left: 0.25rem; top: 0.78rem;
  width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--plum);
}
.teks a:not(.tbl) { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }

.catatan {
  margin-top: 2rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--apricot-soft);
  border-radius: var(--r-lg);
  background: var(--apricot-tint);
  font-size: 0.9rem; line-height: 1.7;
  color: var(--apricot-ink);
}
.catatan strong { color: var(--apricot-ink); }