/* =====================================================================
   STUDIUM JUNIOR — gaya situs
   junior.studium.id

   Susunan berkas ini:
     1. Token          warna, huruf, jarak — satu-satunya tempat nilai mentah
     2. Dasar          reset ringan, tipografi, fokus keyboard
     3. Komponen       tombol, kartu, label, tabel, formulir, penanda kosong
     4. Bagian         hero, studio, langkah, faq, kaki — TATA LETAK PONSEL
     5. Desktop        @media (min-width:900px) — TATA LETAK BERBEDA, bukan
                       sekadar versi lebar dari yang di atas

   Warnanya bukan pilihan bebas. Navy, hijau, krem, dan pink di bawah adalah
   gaya rumah yang sudah dikunci di CLAUDE.md (tabel gaya .docx) dan dipakai
   game akuisisi. Situs ini sengaja memakai bahasa rupa yang sama supaya anak
   yang datang dari gamenya merasa masih di tempat yang sama.

   Tidak ada satu pun permintaan ke luar: tanpa font CDN, tanpa gambar luar,
   tanpa pelacak. Halaman anak tidak boleh memanggil pihak ketiga.
   ===================================================================== */

/* =====================================================================
   1. TOKEN
   ===================================================================== */
:root{
  /* warna rumah */
  --navy:#1E2761;
  --navy-2:#141B45;
  --navy-3:#0E1436;
  --hijau:#2C5F2D;
  --hijau-tekan:#1F4520;
  --hijau-muda:#EDF3EA;
  --krem:#FDF8EF;
  --krem-2:#F6EFE2;
  --pink:#E2547C;
  --kuning:#FFD34D;

  /* netral — sengaja dicondongkan ke navy dan hijau, bukan abu-abu murni,
     supaya sehalaman terbaca sebagai satu keluarga warna */
  --teks:#1F2328;
  --redup:#5B6470;
  --garis:#E2E6E2;
  --garis-2:#D3D9D3;
  --putih:#FFFFFF;

  /* penanda "belum diisi" — sama seperti .perlu di game akuisisi */
  --awas-latar:#FBF3DC;
  --awas-garis:#E0CB8E;
  --awas-teks:#7A6015;

  /* huruf: gaya rumah .docx — Cambria untuk judul, huruf sistem untuk isi.
     Tidak ada webfont yang diunduh, jadi tidak ada kedip huruf saat muat. */
  --judul:Cambria,Georgia,"Times New Roman",serif;
  --isi:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* tangga ukuran */
  --t-xs:0.78rem;
  --t-sm:0.875rem;
  --t-md:1rem;
  --t-lg:1.125rem;
  --t-xl:clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  --t-2xl:clamp(1.6rem, 1.25rem + 1.8vw, 2.2rem);
  --t-3xl:clamp(2rem, 1.4rem + 3vw, 3.2rem);

  /* jarak */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;

  --pad:20px;               /* sisi halaman di ponsel */
  --lebar:1180px;           /* lebar maksimum isi di desktop */
  --r-kecil:10px;
  --r:14px;
  --r-besar:22px;
}

/* Situs ini sengaja satu dunia rupa: kertas krem, tinta navy. Bukan
   kelalaian — warna latar dan teks dicat eksplisit supaya halamannya
   tetap utuh di peramban bertema gelap sekalipun. */
:root{ color-scheme: light; }

/* =====================================================================
   2. DASAR
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
/* Komponen di bawah memasang display:flex/block sendiri, dan itu mengalahkan
   aturan bawaan peramban untuk [hidden]. Tanpa baris ini, bagian yang
   disembunyikan JavaScript tetap terlihat. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--krem);
  color:var(--teks);
  font-family:var(--isi);
  font-size:var(--t-md);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--judul); color:var(--navy); margin:0; line-height:1.18; text-wrap:balance; }
h1{ font-size:var(--t-3xl); }
h2{ font-size:var(--t-2xl); }
h3{ font-size:var(--t-xl); }
h4{ font-size:var(--t-lg); }
p{ margin:0; }
img,svg,canvas,iframe{ max-width:100%; }
a{ color:var(--hijau); text-underline-offset:3px; }
a:hover{ color:var(--hijau-tekan); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--pink);
  outline-offset:2px;
  border-radius:6px;
}

.lewati{                              /* lompat ke isi, untuk pemakai papan tik */
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 18px; border-radius:0 0 var(--r) 0;
}
.lewati:focus{ left:0; }

.sr{                                   /* teks khusus pembaca layar */
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.bungkus{ width:100%; max-width:var(--lebar); margin-inline:auto; padding-inline:var(--pad); }

/* jarak antar bagian diatur tata letak, bukan margin per elemen */
.blok{ padding-block:var(--s7); }
.blok > .bungkus{ display:flex; flex-direction:column; gap:var(--s5); }
.blok--gelap{ background:var(--navy); color:#E7E9F2; }
.blok--gelap h2,.blok--gelap h3,.blok--gelap h4{ color:#fff; }
.blok--krem2{ background:var(--krem-2); }
.blok--hijau{ background:var(--hijau-muda); }

.kepala-blok{ display:flex; flex-direction:column; gap:var(--s2); max-width:62ch; }
.mata{                                  /* eyebrow */
  font-size:var(--t-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hijau); margin:0;
}
.blok--gelap .mata,
.hero .mata{ color:var(--kuning); }
.utama{ color:var(--redup); font-size:var(--t-lg); max-width:60ch; }
.blok--gelap .utama{ color:#BFC5DE; }

/* =====================================================================
   3. KOMPONEN
   ===================================================================== */

/* --- tombol -------------------------------------------------------- */
/* Bentuknya sengaja diambil dari game akuisisi: tebal, bayangan padat di
   bawah, dan turun 2px saat ditekan. Itu tombol pertama yang disentuh
   anak; situsnya memakai bahasa yang sama. */
.tombol{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:inherit; font-weight:800; font-size:var(--t-md);
  padding:14px 22px; border:0; border-radius:var(--r);
  background:var(--hijau); color:#fff; cursor:pointer; text-decoration:none;
  box-shadow:0 3px 0 var(--hijau-tekan);
  transition:transform .06s ease, box-shadow .06s ease;
}
.tombol:hover{ color:#fff; }
.tombol:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--hijau-tekan); }
.tombol--kedua{ background:var(--putih); color:var(--navy);
  border:1px solid var(--garis-2); box-shadow:0 3px 0 var(--garis-2); }
.tombol--kedua:hover{ color:var(--navy); }
.tombol--kedua:active{ box-shadow:0 1px 0 var(--garis-2); }
.tombol--garis{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 2px var(--navy); }
.tombol--garis:active{ transform:translateY(2px); }
.blok--gelap .tombol--kedua{ background:var(--krem); }
.tombol--besar{ font-size:var(--t-lg); padding:17px 28px; }
.tombol--penuh{ width:100%; }
.tombol[disabled]{ background:#B6BCB6; box-shadow:0 3px 0 #949A94; cursor:not-allowed; }

.tombol-baris{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* --- label kecil --------------------------------------------------- */
.pil{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:var(--t-xs); font-weight:700; line-height:1;
  padding:6px 11px; border-radius:20px;
  background:var(--putih); color:var(--navy); border:1px solid var(--garis);
}
.pil--hijau{ background:var(--hijau-muda); border-color:#CBDBC6; color:var(--hijau); }
.pil--pink{ background:#FFF3F6; border-color:#F3C9D6; color:#B03257; }
.pil--kuning{ background:#FFF8E2; border-color:#EBD79A; color:var(--awas-teks); }
.pil-baris{ display:flex; flex-wrap:wrap; gap:var(--s2); }

/* --- kartu --------------------------------------------------------- */
.kartu{
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-besar);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.kartu--datar{ background:transparent; border-style:dashed; }
.kartu__no{
  font-family:var(--judul); font-size:var(--t-2xl); line-height:1;
  color:var(--pink); font-variant-numeric:tabular-nums;
}
.kartu p{ color:var(--redup); font-size:var(--t-sm); }
.kartu h3 + p{ margin-top:calc(var(--s1) * -1); }

/* --- daftar bertanda ---------------------------------------------- */
.daftar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); }
.daftar li{ display:flex; gap:var(--s3); align-items:flex-start; }
.daftar .tanda{ flex:none; width:22px; height:22px; margin-top:2px; }
.daftar b{ color:var(--navy); }
.blok--gelap .daftar b{ color:#fff; }

/* --- penanda "belum diisi" ---------------------------------------- */
/* Satu-satunya cara jujur menampilkan nilai yang belum diputuskan:
   ditulis besar, bukan disamarkan dengan angka contoh. */
.kosong{
  display:block; background:var(--awas-latar); border:1px solid var(--awas-garis);
  color:var(--awas-teks); border-radius:var(--r-kecil);
  padding:12px 14px; font-size:var(--t-sm); font-weight:700;
}
.kosong span{ display:block; font-weight:400; margin-top:2px; }

/* --- tabel lesson -------------------------------------------------- */
.tabel-gulung{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; font-size:var(--t-sm); }
thead th{
  background:var(--hijau); color:#fff; font-weight:700; text-align:left;
  padding:10px 12px; white-space:nowrap;
}
tbody td{ padding:10px 12px; border-bottom:1px solid var(--garis); vertical-align:top; }
tbody tr:nth-child(even){ background:#F7F9F7; }
td.no{ font-variant-numeric:tabular-nums; color:var(--redup); width:2.5rem; }
td.judul-lesson{ color:var(--navy); font-weight:600; }

/* --- akordeon (details) ------------------------------------------- */
details{ border:1px solid var(--garis); border-radius:var(--r); background:var(--putih); }
details + details{ margin-top:var(--s3); }
summary{
  cursor:pointer; list-style:none; padding:16px 18px;
  font-weight:700; color:var(--navy); display:flex; justify-content:space-between; gap:var(--s3);
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-family:var(--judul); font-size:1.3em; line-height:1; color:var(--pink); }
details[open] summary::after{ content:"–"; }
details .isi{ padding:0 18px 18px; }

/* --- formulir ------------------------------------------------------ */
.medan{ display:flex; flex-direction:column; gap:6px; }
.medan label{ font-weight:700; font-size:var(--t-sm); color:var(--navy); }
.medan .bantu{ font-size:var(--t-xs); color:var(--redup); }
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  font:inherit; font-size:16px;                 /* 16px menahan zoom otomatis iOS */
  width:100%; padding:12px 14px; color:var(--teks);
  background:var(--putih); border:2px solid var(--garis); border-radius:var(--r-kecil);
}
input:focus,select:focus,textarea:focus{ outline:0; border-color:var(--hijau); }
input[aria-invalid="true"],select[aria-invalid="true"]{ border-color:var(--pink); background:#FFF7F9; }
.salah{ color:#B03257; font-size:var(--t-xs); font-weight:700; }
fieldset{ border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s3); }
legend{ font-family:var(--judul); color:var(--navy); font-size:var(--t-lg); padding:0; }
.pilih-baris{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.pilih-baris input{ position:absolute; opacity:0; pointer-events:none; }
.pilih-baris label{
  border:2px solid var(--garis); border-radius:22px; padding:9px 15px;
  font-weight:700; font-size:var(--t-sm); color:var(--navy); cursor:pointer; background:var(--putih);
}
.pilih-baris input:checked + label{ background:var(--pink); border-color:var(--pink); color:#fff; }
.pilih-baris input:focus-visible + label{ outline:3px solid var(--pink); outline-offset:2px; }

/* persetujuan: sengaja TIDAK memakai .pilih-baris. Persetujuan orang tua
   harus terlihat seperti kotak centang sungguhan, bukan pil yang bisa
   disangka tombol pilihan biasa. */
.centang{ display:flex; align-items:flex-start; gap:10px; }
.centang input{ flex:none; width:22px; height:22px; margin-top:2px; accent-color:var(--hijau); }
.centang label{ font-weight:700; font-size:var(--t-sm); color:var(--navy); cursor:pointer; }

/* =====================================================================
   4. BAGIAN — TATA LETAK PONSEL (dasar)
   Satu kolom, tombol besar, dan bilah aksi yang menempel di bawah layar
   supaya "Coba gratis" selalu berada dalam jangkauan ibu jari.
   ===================================================================== */

/* --- kepala -------------------------------------------------------- */
.kepala{
  position:sticky; top:0; z-index:40;
  background:rgba(253,248,239,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--garis);
}
.kepala__isi{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-block:12px; }
.merek{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.merek__tanda{ width:34px; height:34px; flex:none; }
.merek__teks{ font-family:var(--judul); font-weight:700; color:var(--navy); line-height:1.05; font-size:1.02rem; }
.merek__teks span{ display:block; font-family:var(--isi); font-size:.62rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hijau); }

.nav-buka{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:11px; border:1px solid var(--garis);
  border-radius:var(--r-kecil); background:var(--putih); cursor:pointer;
}
.nav-buka i{ display:block; width:100%; height:2px; background:var(--navy); border-radius:2px; }
.nav-tautan{ display:none; }
.kepala .tombol{ display:none; }

/* laci navigasi ponsel */
.laci{
  position:fixed; inset:0; z-index:50; display:none;
  background:rgba(14,20,54,.55);
}
.laci[open],.laci.tampil{ display:block; }
.laci__panel{
  position:absolute; inset:0 0 0 auto; width:min(320px,86vw);
  background:var(--krem); padding:var(--s5) var(--s5) var(--s7);
  display:flex; flex-direction:column; gap:var(--s4);
  box-shadow:-12px 0 40px rgba(0,0,0,.25);
}
.laci a{ font-size:var(--t-lg); font-weight:700; color:var(--navy); text-decoration:none; }
.laci a:hover{ color:var(--hijau); }
.laci__tutup{
  align-self:flex-end; width:44px; height:44px; border:1px solid var(--garis);
  background:var(--putih); border-radius:var(--r-kecil); font-size:1.3rem; cursor:pointer; color:var(--navy);
}

/* --- bilah aksi bawah (khas ponsel) -------------------------------- */
.aksi-bawah{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; gap:10px; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(253,248,239,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--garis);
}
.aksi-bawah .tombol{ flex:1; padding:13px 10px; font-size:var(--t-sm); }
body{ padding-bottom:76px; }              /* ruang untuk bilah itu */

/* --- hero ---------------------------------------------------------- */
.hero{ background:var(--navy); color:#E7E9F2; padding-block:var(--s6) var(--s7); position:relative; overflow:hidden; }
.hero__isi{ display:flex; flex-direction:column; gap:var(--s4); position:relative; z-index:2; }
.hero h1{ color:#fff; }
.hero .utama{ color:#C3C9E4; }
.hero__pil{ margin-top:var(--s1); }
.hero__taburan{ position:absolute; inset:auto 0 -10px 0; height:120px; opacity:.16; z-index:1; }

/* kartu ajakan main — pengganti sematan game di layar kecil */
.coba{
  background:linear-gradient(160deg,#243070,#161d4d);
  border:1px solid #333C7D; border-radius:var(--r-besar);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); position:relative; z-index:2;
}
.coba h3{ color:#fff; }
.coba p{ color:#BFC5DE; font-size:var(--t-sm); }
.coba__gambar{ border-radius:var(--r); background:#0E1436; padding:var(--s3); }
.sematan{ display:none; }                 /* game disematkan hanya di desktop */

/* --- deret studio -------------------------------------------------- */
/* Di ponsel: geser mendatar, satu kartu memenuhi layar. Menumpuk enam
   kartu ke bawah membuat halaman panjangnya tidak masuk akal. */
.studio-deret{
  display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--s3); margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  scrollbar-width:thin;
}
.studio{
  scroll-snap-align:start; flex:0 0 82%; min-width:0;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-besar);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.studio__atas{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.studio__no{ font-family:var(--judul); font-size:var(--t-xl); color:var(--pink); font-variant-numeric:tabular-nums; }
.studio__meta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:auto; }
.studio p{ color:var(--redup); font-size:var(--t-sm); }
.studio--siap{ border-style:dashed; background:transparent; }
.geser-petunjuk{ font-size:var(--t-xs); color:var(--redup); }

/* --- langkah bernomor --------------------------------------------- */
.langkah{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s4); counter-reset:l; }
.langkah li{ display:flex; gap:var(--s4); counter-increment:l; }
.langkah li::before{
  content:counter(l); flex:none;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--hijau); color:#fff; font-weight:800; font-family:var(--judul);
}
.blok--gelap .langkah li::before{ background:var(--kuning); color:var(--navy-3); }
.langkah h3{ font-size:var(--t-lg); }
.langkah p{ color:var(--redup); font-size:var(--t-sm); }
.blok--gelap .langkah p{ color:#BFC5DE; }

/* --- kutipan besar ------------------------------------------------- */
.kutip{
  font-family:var(--judul); font-size:var(--t-2xl); color:var(--navy);
  line-height:1.3; border-left:5px solid var(--kuning); padding-left:var(--s4); max-width:22ch;
}
.blok--gelap .kutip{ color:#fff; }
.kutip--kecil{ font-size:var(--t-lg); max-width:56ch; line-height:1.5; border-left-width:4px; }

/* --- kisi umum ----------------------------------------------------- */
.kisi{ display:grid; gap:var(--s4); }
.kisi--2,.kisi--3,.kisi--4{ grid-template-columns:1fr; }

/* --- kaki ---------------------------------------------------------- */
.kaki{ background:var(--navy-3); color:#AEB5D6; padding-block:var(--s6); font-size:var(--t-sm); }
.kaki a{ color:#fff; text-decoration:none; }
.kaki a:hover{ text-decoration:underline; }
.kaki__kisi{ display:flex; flex-direction:column; gap:var(--s5); }
.kaki h4{ color:#fff; font-size:var(--t-md); margin-bottom:var(--s2); }
.kaki ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.kaki__bawah{ border-top:1px solid #26307A; margin-top:var(--s5); padding-top:var(--s4); color:#8791C4; }

/* =====================================================================
   5. DESKTOP — @media (min-width:900px)
   Bukan versi melebar dari tata letak ponsel. Yang berubah mendasar:
     · navigasi jadi bilah mendatar, laci dan bilah aksi bawah dimatikan
     · hero jadi dua kolom, dan gamenya BENAR-BENAR disematkan hidup
       di sebelah kanan — di ponsel itu mustahil, layarnya sudah penuh
     · deret studio yang tadinya digeser jadi kisi tiga kolom
     · halaman kursus mendapat rel navigasi menempel di kiri
   ===================================================================== */
@media (min-width:900px){

  body{ padding-bottom:0; }
  .aksi-bawah{ display:none; }
  .nav-buka{ display:none; }
  .laci{ display:none !important; }

  .nav-tautan{
    display:flex; align-items:center; gap:var(--s5);
    font-weight:700; font-size:var(--t-sm);
  }
  .nav-tautan a{ color:var(--navy); text-decoration:none; padding-block:6px; border-bottom:2px solid transparent; }
  .nav-tautan a:hover{ color:var(--hijau); border-bottom-color:var(--hijau); }
  .nav-tautan a[aria-current="page"]{ border-bottom-color:var(--pink); }
  .kepala .tombol{ display:inline-flex; padding:11px 18px; font-size:var(--t-sm); }
  .kepala__isi{ padding-block:14px; }
  .merek__tanda{ width:40px; height:40px; }
  .merek__teks{ font-size:1.15rem; }

  .blok{ padding-block:var(--s8); }
  .blok > .bungkus{ gap:var(--s6); }

  /* hero dua kolom + game hidup */
  .hero{ padding-block:var(--s8); }
  .hero > .bungkus{
    display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:var(--s7); align-items:center;
  }
  .hero__isi{ gap:var(--s5); }
  .coba{ display:none; }
  .sematan{
    display:block; position:relative; z-index:2;
    justify-self:end; width:100%; max-width:430px;
  }
  .sematan__bingkai{
    border:10px solid var(--navy-3); border-radius:34px; overflow:hidden;
    background:var(--krem); box-shadow:0 30px 70px rgba(0,0,0,.45);
    aspect-ratio:43/58;
  }
  .sematan iframe{ width:100%; height:100%; border:0; display:block; }
  .sematan__ket{ margin-top:var(--s3); font-size:var(--t-xs); color:#9AA2CC; text-align:center; }

  /* dua tombol hero cukup satu baris di lebar ini; membiarkannya turun
     membuat tepi kanan kolom terlihat compang-camping */
  .hero .tombol--besar{ font-size:var(--t-md); padding:15px 22px; }

  /* studio: kisi, bukan geseran */
  .studio-deret{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5);
    overflow:visible; margin-inline:0; padding-inline:0; padding-bottom:0;
  }
  .studio{ flex:initial; }
  .geser-petunjuk{ display:none; }

  .kisi--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kisi--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kisi--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .kisi--sisi{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s7); align-items:start; }

  .langkah{ flex-direction:row; gap:var(--s5); }
  .langkah li{ flex:1; flex-direction:column; gap:var(--s3); }

  .kutip{ font-size:clamp(1.9rem,1.2rem + 1.6vw,2.6rem); }

  /* halaman panjang: rel menempel di kiri */
  .dua-kolom{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:var(--s7); align-items:start; }
  .rel{ position:sticky; top:92px; display:flex; flex-direction:column; gap:var(--s2); font-size:var(--t-sm); }
  .rel a{ color:var(--redup); text-decoration:none; padding:7px 12px; border-left:3px solid var(--garis); font-weight:600; }
  .rel a:hover{ color:var(--navy); background:var(--putih); }
  .rel a.aktif{ color:var(--hijau); border-left-color:var(--hijau); background:var(--hijau-muda); }

  .kaki__kisi{ flex-direction:row; justify-content:space-between; gap:var(--s7); }

  .formulir{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
  .formulir .lebar-penuh{ grid-column:1 / -1; }
}

@media (min-width:1200px){
  .hero > .bungkus{ gap:var(--s8); }
}

/* =====================================================================
   6. GERAK
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .naik{ animation:naik .5s cubic-bezier(.2,.7,.3,1) both; }
  .naik:nth-child(2){ animation-delay:.06s; }
  .naik:nth-child(3){ animation-delay:.12s; }
  @keyframes naik{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
}

@media print{
  .kepala,.aksi-bawah,.laci,.sematan{ display:none !important; }
  body{ background:#fff; padding:0; }
}