/* ============================================================
   ARUMANIS — Fun Learn Play
   Sistem desain situs publik, versi 2 (Oktober 2026).

   Dasarnya tetap Guideline Arumanis.pdf dan poster program: langit berawan,
   judul huruf warna-warni, font bulat, Aru dan Uni. Yang naik kelas adalah
   cara semua itu BERGERAK dan DISUSUN:

     header yang menyatu dengan langit lalu berubah jadi kaca saat digulir,
     menu ponsel selembar penuh yang bisa dijangkau ibu jari,
     tombol yang terasa bisa ditekan, kartu yang terangkat saat disentuh,
     pita kegiatan yang berjalan, linimasa 90 menit, jadwal terdekat yang
     diambil dari jadwal sungguhan, dan bilah ajakan yang menempel di ponsel.

   SEMUA nama kelas versi pertama tetap berlaku. Isi ketiga belas halaman
   tinggal di basis data dan ditulis memakai kelas-kelas itu; mengganti
   namanya di sini berarti merusak halaman yang tidak sedang disentuh siapa
   pun - dan kerusakan semacam itu baru ketahuan saat orang tua mengeluh.

   Semua gerak tunduk pada prefers-reduced-motion (aturan di bagian akhir).
   ============================================================ */

:root{
  /* Palet primer (guideline) */
  --pink-1:#ffa7a7; --pink-2:#ffb8b8; --pink-3:#ffcccc; --pink-4:#ffd9d9; --pink-5:#fce6e6;
  /* Palet opsional (guideline) */
  --kuning-1:#f1d45f; --kuning-2:#f2da77; --kuning-3:#f2e094; --kuning-4:#f2e6b1; --kuning-5:#faf3d6;
  --biru-1:#95a1d4;   --biru-2:#a9b5db;  --biru-3:#bac5e0;  --biru-4:#cad3e5; --biru-5:#d8dfea;
  --hijau-1:#86d86f;  --hijau-2:#9ce585; --hijau-3:#b0ea9b; --hijau-4:#c5f2b3; --hijau-5:#e6f8dc;

  /* Langit berawan — mengikuti latar poster */
  --langit-1:#b9e3f6; --langit-2:#d9f0fb; --langit-3:#eff9fe;

  /* Turunan digital — WAJIB untuk keterbacaan. Palet guideline seluruhnya
     pastel dan tidak satu pun lolos kontras teks; ia hanya boleh jadi latar
     dan aksen. */
  --tinta:#3D2B2E;         /* teks utama      — 13,3:1 di atas putih */
  --tinta-lembut:#6B5457;  /* teks sekunder   —  6,9:1 di atas putih */
  --aksi:#B03A48;          /* tombol utama    —  5,9:1 dengan teks putih */
  --aksi-gelap:#8F2E3A;
  --aksi-tipis:#FBE4E7;

  /* Huruf warna-warni judul — hanya tiga warna brand, persis seperti poster:
     pink, kuning, biru. Keterbacaan dijaga oleh garis tepi gelap, bukan dengan
     menggelapkan warnanya. */
  --judul-pink:#FBA0A0; --judul-kuning:#F0CE5C; --judul-biru:#9AA6DA;
  --garis-judul:#3D2B2E;

  --putih:#ffffff;
  --krem:#FFFBF9;
  --garis:#F0DCDC;
  --garis-kuat:#E6C9CB;

  --lebar:1140px;
  --radius:28px;
  --radius-s:16px;
  --radius-xs:10px;

  /* Bayangan berlapis: yang satu lapis terbaca sebagai kotak yang digambar,
     yang berlapis terbaca sebagai kartu yang benar-benar terangkat. */
  --bayang:0 1px 2px rgba(61,43,46,.05),0 8px 24px rgba(61,43,46,.08);
  --bayang-kuat:0 2px 6px rgba(61,43,46,.06),0 20px 48px rgba(61,43,46,.16);
  /* Gaya "stiker": garis tinta tebal + bayangan padat bergeser. Dipakai
     hemat - hanya pada benda yang mengundang disentuh. */
  --stiker:0 6px 0 rgba(61,43,46,.14);
  --stiker-tekan:0 2px 0 rgba(61,43,46,.14);

  --pegas:cubic-bezier(.34,1.56,.64,1);
  --halus:cubic-bezier(.22,1,.36,1);

  --tinggi-atas:76px;

  --font-teks:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-judul:'Baloo 2','Poppins',sans-serif;      /* bulat & gembung, seperti poster */
  --font-riang:'Grandstander','Poppins',sans-serif; /* meloncat, untuk label kecil */
}

/* ---------- 1. Dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* Judul yang dilompati lewat tautan #jangkar tidak boleh tertutup header
     yang menempel. */
  scroll-padding-top:calc(var(--tinggi-atas) + 16px)}
body{
  margin:0;
  font-family:var(--font-teks);
  font-size:17px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--krem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--pink-3);color:var(--tinta)}
img{max-width:100%;height:auto;display:block}
a{color:var(--aksi);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:8px}

h1,h2,h3{font-family:var(--font-judul);line-height:1.12;margin:0 0 .45em;letter-spacing:0;
  text-wrap:balance}
h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.9vw,2.8rem);font-weight:800}
h3{font-size:clamp(1.25rem,2.3vw,1.6rem);font-weight:700}
h4{font-size:1.06rem;font-weight:700;font-family:var(--font-teks);margin:0 0 .5em;line-height:1.35}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--lebar);margin:0 auto;padding:0 24px}
.sempit{max-width:760px;margin-left:auto;margin-right:auto}
.tengah{text-align:center}
.lewati{position:absolute;left:-9999px;top:0;z-index:999}
.lewati:focus{left:16px;top:12px;background:var(--putih);padding:12px 18px;border-radius:12px;
  box-shadow:var(--bayang-kuat);color:var(--tinta);font-weight:600}
.hanya-baca{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
/* Atribut hidden harus benar-benar menyembunyikan. Aturan bawaan peramban
   untuknya kalah oleh display apa pun yang ditulis di sini - .tombol yang
   diberi hidden tetap tampil sebagai inline-flex. Aturan yang sama sudah
   lama ada di psaud.css. */
[hidden]{display:none!important}

/* Ikon garis. Satu gaya untuk seluruh situs: ujung membulat, garis 1,8 -
   cocok dengan huruf Poppins yang juga membulat. Emoji dihindari untuk ikon
   karena tiap ponsel menggambarnya berbeda. */
.ikon-svg{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}

/* ---------- 2. Judul huruf warna-warni ---------- */
.judul-warna{letter-spacing:.012em}
.judul-warna span{
  display:inline-block;
  -webkit-text-stroke:.052em var(--garis-judul); /* ikut ukuran huruf, tidak menebal di layar kecil */
  paint-order:stroke fill;
  filter:drop-shadow(0 .05em 0 rgba(61,43,46,.15));
}
.judul-warna .w1{color:var(--judul-pink)}
.judul-warna .w2{color:var(--judul-kuning)}
.judul-warna .w3{color:var(--judul-biru)}
.judul-warna .spasi{width:.34em;-webkit-text-stroke:0;filter:none}
/* Tiap huruf muncul bergantian saat halaman dibuka */
.judul-warna span{opacity:0;transform:translateY(14px) scale(.86);animation:hurufMuncul .5s var(--pegas) forwards}
@keyframes hurufMuncul{to{opacity:1;transform:none}}
/* Pembungkus kata. Tiap huruf adalah kotak sebaris sendiri, dan peramban
   boleh mematahkan baris di antara dua kotak - "Tumbuh Bersa / ma" pernah
   terjadi persis begitu. Kata dibungkus supaya patahnya hanya di antara
   kata. Pembungkusnya sendiri tidak ikut beranimasi. */
.judul-warna .kata{display:inline-block;white-space:nowrap;opacity:1;transform:none;animation:none;
  -webkit-text-stroke:0;filter:none}
/* Setelah muncul, huruf yang disentuh melompat kecil. Hanya di perangkat
   yang punya penunjuk sungguhan - di ponsel, hover tertinggal setelah ketukan. */
@media (hover:hover){
  .judul-warna span:not(.spasi):not(.kata){transition:transform .25s var(--pegas)}
  .judul-warna span:not(.spasi):not(.kata):hover{transform:translateY(-.12em) rotate(-4deg)}
}

/* ---------- 3. Bilah kemajuan baca ---------- */
.progres-gulir{
  position:fixed;left:0;top:0;right:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--pink-1),var(--kuning-1),var(--biru-1));
  transform-origin:0 50%;transform:scaleX(var(--p,0));
}

/* ---------- 4. Header ----------
   Di puncak halaman header MENYATU dengan langit hero: latarnya warna langit
   yang sama, tanpa garis. Begitu halaman digulir ia berubah jadi kaca krem
   dan sedikit memendek - isi tetap terbaca di belakangnya, tapi menunya
   tidak pernah hilang. Halaman yang tidak dibuka dengan langit (halaman
   "terkirim") memberi body kelas .tanpa-langit. */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--atas-latar,var(--langit-1));
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
body.tanpa-langit{--atas-latar:var(--krem)}
.header.tergulir{
  background:rgba(255,251,249,.84);
  -webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);
  border-bottom-color:rgba(240,220,220,.9);
  box-shadow:0 10px 30px -18px rgba(61,43,46,.3);
}
.header-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--tinggi-atas);padding:0 24px;max-width:1200px;margin:0 auto;
  transition:height .3s var(--halus);
}
.header.tergulir .header-in{height:64px}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--tinta)}
.logo:hover{text-decoration:none}
.logo b{font-family:var(--font-judul);font-weight:800;font-size:1.5rem;letter-spacing:.05em}
.logo span{font-family:var(--font-riang);font-size:.62rem;letter-spacing:.2em;color:var(--tinta-lembut);margin-top:2px;text-transform:uppercase;font-weight:600}

.nav{display:flex;align-items:center;gap:2px}
/* Tombol di dalam menu (Masuk, Daftar Trial) memakai gaya tombolnya sendiri:
   tanpa :not(.tombol), aturan tautan menu - yang lebih spesifik - menimpa
   latarnya, dan "Daftar Trial" yang disorot jadi tulisan putih di atas putih. */
.nav a:not(.tombol){position:relative;color:var(--tinta);font-size:.92rem;font-weight:500;padding:9px 12px;
  border-radius:12px;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.nav a:not(.tombol):hover{background:rgba(255,255,255,.65);text-decoration:none}
.header.tergulir .nav a:not(.tombol):hover{background:var(--pink-5)}
.nav a[aria-current="page"]{font-weight:600;color:var(--aksi-gelap)}
/* Penanda halaman aktif: titik di bawah tautan, bukan blok warna penuh -
   blok penuh di samping tombol "Daftar Trial" bersaing jadi dua ajakan. */
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:6px;height:6px;
  margin-left:-3px;border-radius:50%;background:var(--aksi)}
.nav .nav-ikon,.nav .nav-panah,.nav-kaki{display:none}
.nav .tombol{margin-left:6px}
.nav .tombol + .tombol{margin-left:4px}

/* Tombol menu: tiga garis yang berubah jadi silang. */
.menu-btn{display:none;position:relative;width:46px;height:46px;flex:none;
  background:var(--putih);border:2px solid var(--tinta);border-radius:14px;cursor:pointer;
  box-shadow:0 3px 0 rgba(61,43,46,.16);color:var(--tinta);padding:0}
.menu-btn span{position:absolute;left:11px;right:11px;height:2.5px;border-radius:2px;background:currentColor;
  transition:transform .3s var(--halus),opacity .2s ease,top .3s var(--halus)}
.menu-btn span:nth-child(1){top:14px}
.menu-btn span:nth-child(2){top:20.5px}
.menu-btn span:nth-child(3){top:27px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:20.5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){top:20.5px;transform:rotate(-45deg)}

/* Sembilan butir menu butuh ruang; di bawah 1100px menu jadi LEMBAR PENUH.
   Bukan menu tarik-turun kecil: yang membukanya sering Ayah Bunda dengan
   satu tangan memegang anak - butirnya harus besar dan jauh dari tepi. */
@media(max-width:1100px){
  .menu-btn{display:block}
  .nav{
    position:fixed;left:0;right:0;bottom:0;top:var(--tinggi-atas);z-index:99;
    flex-direction:column;align-items:stretch;gap:4px;
    background:var(--krem);
    padding:14px 18px calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;transform:translateY(-12px);
    transition:opacity .25s ease,transform .3s var(--halus),visibility 0s linear .3s;
  }
  .header.tergulir .nav{top:64px}
  .nav.buka{visibility:visible;opacity:1;transform:none;transition:opacity .25s ease,transform .3s var(--halus)}
  .nav a:not(.tombol){display:flex;align-items:center;gap:14px;padding:13px 14px;font-size:1.05rem;font-weight:600;
    border-radius:16px;background:var(--putih);border:1px solid var(--garis)}
  .nav a:not(.tombol):hover{background:var(--pink-5)}
  .nav a[aria-current="page"]{background:var(--pink-4);border-color:var(--pink-2)}
  .nav a[aria-current="page"]::after{display:none}
  .nav .nav-ikon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
    background:var(--langit-3);color:var(--aksi);flex:none}
  .nav .nav-ikon .ikon-svg{width:20px;height:20px}
  .nav .nav-panah{display:block;margin-left:auto;color:var(--tinta-lembut)}
  .nav .tombol{margin:10px 0 0;justify-content:center;font-size:1.05rem;padding:15px 20px;border-radius:999px}
  .nav .tombol + .tombol{margin-left:0}
  .nav .tombol.garis{background:var(--putih)}
  .nav-kaki{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;
    font-size:.88rem;color:var(--tinta-lembut)}
  .nav .nav-kaki a{display:inline;background:none;border:0;padding:6px 10px;font-size:.88rem;font-weight:500;color:var(--aksi)}
  body.menu-terbuka{overflow:hidden}
}

/* ---------- 5. Tombol ---------- */
.tombol{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--aksi);color:var(--putih);
  font-family:var(--font-judul);font-weight:700;font-size:1.05rem;line-height:1.2;
  padding:14px 28px;border-radius:999px;
  border:none;cursor:pointer;text-align:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14),0 8px 18px -8px rgba(176,58,72,.7);
  transition:background-color .15s ease,transform .2s var(--pegas),box-shadow .2s ease;
}
.tombol:hover{background:var(--aksi-gelap);color:var(--putih);text-decoration:none;transform:translateY(-2px)}
.tombol:active{transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.14),0 4px 10px -6px rgba(176,58,72,.7)}
.tombol:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.tombol .ikon-svg{width:1.1em;height:1.1em;transition:transform .2s var(--pegas)}
.tombol:hover .ikon-svg.maju{transform:translateX(3px)}
.tombol.garis{background:transparent;color:var(--aksi);border:2.5px solid var(--aksi);box-shadow:none;padding:11.5px 25.5px}
.tombol.garis:hover{background:var(--aksi);color:var(--putih)}
.tombol.putih{background:var(--putih);color:var(--tinta);box-shadow:var(--stiker);border:2.5px solid var(--tinta);padding:11.5px 25.5px}
.tombol.putih:hover{background:var(--kuning-4);color:var(--tinta)}
.tombol.kecil{padding:9px 20px;font-size:.95rem}
.tombol.garis.kecil,.tombol.putih.kecil{padding:6.5px 17.5px}
.tombol.wa{background:#1c7f45;color:var(--putih);box-shadow:inset 0 -3px 0 rgba(0,0,0,.14)}
.tombol.wa:hover{background:#166a39;color:var(--putih)}
.tombol-grup{display:flex;flex-wrap:wrap;gap:12px}
.tengah .tombol-grup{justify-content:center}

/* ---------- 6. Langit berawan ---------- */
.langit{
  position:relative;
  background:linear-gradient(180deg,var(--langit-1) 0%,var(--langit-2) 48%,var(--langit-3) 100%);
  overflow:hidden;isolation:isolate;
}
/* Dua cahaya lembut di balik langit - pink di kiri, kuning di kanan - supaya
   langitnya punya kedalaman dan tidak terbaca sebagai gradasi datar. */
.langit::before,.langit::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;filter:blur(10px)}
.langit::before{width:520px;height:520px;left:-180px;bottom:-220px;
  background:radial-gradient(circle,rgba(255,204,204,.75),rgba(255,204,204,0) 68%)}
.langit::after{width:460px;height:460px;right:-140px;top:-160px;
  background:radial-gradient(circle,rgba(242,224,148,.6),rgba(242,224,148,0) 68%)}
.langit > .wrap{position:relative;z-index:2}

.awan{position:absolute;fill:#fff;pointer-events:none;z-index:1;
  filter:drop-shadow(0 6px 10px rgba(110,160,190,.12))}
.awan.a{top:6%;left:-3%;width:230px;opacity:.95}
.awan.b{top:16%;right:-2%;width:300px;opacity:.8}
.awan.c{bottom:22%;left:8%;width:160px;opacity:.65}
.awan.d{top:44%;right:22%;width:120px;opacity:.5}
@media(max-width:880px){
  .awan.a{width:150px;top:3%}
  .awan.b{width:170px;top:9%}
  .awan.c,.awan.d{display:none}
}

/* Awan yang hanyut. Satu putaran 26-41 detik dengan simpangan sekitar 70px:
   cukup terlihat sebagai awan yang bergerak, cukup pelan untuk tidak
   menarik perhatian dari judul. Jeda negatif supaya semuanya sudah di
   tengah jalan begitu halaman terbuka. Hanya transform yang digerakkan. */
.awan{animation:hanyut 30s ease-in-out infinite}
.awan.a{animation-duration:34s; animation-delay:-9s}
.awan.b{animation-duration:41s; animation-delay:-19s}
.awan.c{animation-duration:26s; animation-delay:-13s}
.awan.d{animation-duration:30s; animation-delay:-4s}
@keyframes hanyut{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(78px,-16px,0)}
}
.awan.b,.awan.d{animation-name:hanyut-balik}
@keyframes hanyut-balik{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-64px,13px,0)}
}

/* Tepi bawah berbentuk awan */
.awan-pembatas{display:block;width:100%;height:60px;position:relative;z-index:2;margin-top:-1px}
.awan-pembatas path{fill:var(--krem)}
.awan-pembatas.ke-putih path{fill:var(--putih)}
.awan-pembatas.ke-pink path{fill:var(--pink-5)}

/* Bintang dekoratif (motif logo: anak menggapai bintang) — berkelip pelan. */
.bintang{position:absolute;pointer-events:none;z-index:1;animation:kelip 3.6s ease-in-out infinite}
.bintang.a{top:12%;right:14%;width:44px;opacity:.85}
.bintang.b{bottom:30%;left:3%;width:28px;opacity:.7;animation-delay:-1.2s}
.bintang.c{top:30%;left:44%;width:20px;opacity:.6;animation-delay:-2.1s}
.bintang.d{top:68%;right:6%;width:24px;opacity:.7;animation-delay:-.6s}
.bintang.e{top:8%;left:38%;width:16px;opacity:.55;animation-delay:-2.8s}
@keyframes kelip{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(.72) rotate(18deg)}
}
@media(max-width:880px){.bintang{display:none}}

/* ---------- 7. Hero ---------- */
.hero{padding:64px 0 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-bottom:24px}
.hero .kicker,.kicker{
  display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.86);color:var(--tinta);
  font-family:var(--font-riang);font-size:.84rem;font-weight:700;
  padding:8px 18px 8px 12px;border-radius:999px;margin-bottom:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,var(--bayang);
  border:1px solid rgba(255,255,255,.9);
}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--aksi);
  box-shadow:0 0 0 4px rgba(176,58,72,.16);flex:none}
.hero h1{margin-bottom:.3em}
.hero .lead,.lead{font-size:1.12rem;color:var(--tinta-lembut);max-width:33em;margin-bottom:1.5em}
.hero-bukti{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;font-size:.86rem;color:var(--tinta-lembut)}
.hero-bukti b{color:var(--tinta);font-weight:800;display:block;font-size:1.35rem;font-family:var(--font-judul);line-height:1.1}
.hero-maskot{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;min-width:0;
}
.hero-maskot img{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 12px 22px rgba(61,43,46,.16))}
@media(max-width:980px){
  .hero{padding:40px 0 0}
  .hero-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .tombol-grup,.hero-bukti{justify-content:center}
  .hero-maskot img{max-width:300px}
  .hero-balon{max-width:420px}
}

/* Hero beranda versi 2: panggung maskot dengan matahari, label kegiatan yang
   melayang, dan baris bukti berikon. Kelas lama (.hero, .hero-grid) tetap
   dipakai sebagai kerangka. */
.hero-utama{padding:56px 0 0}
.hero-utama .hero-grid{gap:48px;padding-bottom:36px;min-height:min(640px,calc(100svh - var(--tinggi-atas) - 80px))}
.hero-utama h1{font-size:clamp(2.3rem,5.3vw,4.1rem)}
/* Empat bukti dalam kisi 2x2. Empat sejajar di kolom selebar ini memaksa
   "Anak per kelas" patah jadi tiga baris. */
.hero-bukti.berikon{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:12px;margin-top:34px}
.hero-bukti.berikon > div{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.95);border-radius:18px;padding:9px 16px 9px 10px;
  box-shadow:var(--bayang);line-height:1.25;font-size:.8rem;white-space:nowrap}
.hero-bukti.berikon b{font-size:1.15rem}
.hero-bukti .bukti-ikon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;color:var(--tinta)}
.hero-bukti .bukti-ikon .ikon-svg{width:19px;height:19px}
.bukti-ikon.pink{background:var(--pink-3)} .bukti-ikon.kuning{background:var(--kuning-3)}
.bukti-ikon.biru{background:var(--biru-4)} .bukti-ikon.hijau{background:var(--hijau-4)}
@media(max-width:980px){.hero-bukti.berikon{justify-content:center}}
@media(max-width:480px){
  .hero-bukti.berikon{grid-template-columns:1fr 1fr;gap:8px;text-align:left}
  .hero-bukti.berikon > div{white-space:normal;padding:8px 10px 8px 8px;gap:8px;font-size:.74rem}
  .hero-bukti .bukti-ikon{width:30px;height:30px;border-radius:10px}
  .hero-bukti.berikon b{font-size:1.02rem}
}

.panggung{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-width:0;padding-top:12px}
/* Matahari di balik Aru dan Uni: lingkaran krem bercahaya yang memberi
   maskot "panggung", bukan menempel di langit kosong. */
.panggung-matahari{position:absolute;z-index:0;left:50%;bottom:6%;width:min(440px,92%);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#fff 0 46%,rgba(255,255,255,.55) 47% 60%,rgba(255,255,255,0) 61%),
             radial-gradient(circle,rgba(242,224,148,.55),rgba(242,224,148,0) 70%)}
.panggung .hero-balon{position:relative;z-index:3}
/* Kotak seukuran gambar maskot. Label melayang ditambatkan ke TEPI kotak ini,
   bukan ke kolomnya: peta transparansi aru-uni.png menunjukkan Aru dan Uni
   memenuhi hampir seluruh kotak gambarnya, jadi label yang diletakkan di
   dalam kotak itu pasti menutupi wajah atau tangan seseorang. */
.panggung-maskot{position:relative;z-index:2;width:min(100%,400px);margin:0 auto}
.panggung-maskot > img{width:100%;max-width:none}
.melayang{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.9);border:2px solid var(--tinta);border-radius:16px;
  padding:8px 13px 8px 9px;font-family:var(--font-judul);font-weight:700;font-size:.92rem;line-height:1.15;
  box-shadow:0 5px 0 rgba(61,43,46,.13);white-space:nowrap;
  animation:mengambang-kecil 5s ease-in-out infinite}
.melayang .ikon-bulat{width:30px;height:30px;border-radius:10px}
.melayang .ikon-bulat .ikon-svg{width:17px;height:17px}
/* Ketiganya mengorbit di LUAR kotak gambar, di langit kosong: dua di kiri
   (sejajar baris tombol dan bukti, di mana kolom teks sudah selesai), satu di
   kanan. Dijaga ukuran: piksel maskot yang tertutup diukur 0%. */
.melayang.satu{right:calc(100% - 4px);top:54%;animation-delay:-1s}
.melayang.dua{left:calc(100% - 6px);top:26%;animation-delay:-2.6s}
.melayang.tiga{right:calc(100% - 10px);top:78%;animation-delay:-3.8s}
@keyframes mengambang-kecil{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
@media(max-width:980px){
  .hero-utama{padding:34px 0 0}
  .hero-utama .hero-grid{min-height:0;gap:20px}
  .panggung-maskot{width:min(100%,300px)}
}
/* Di ponsel tidak ada langit kosong di samping maskot - label yang tetap
   dipaksa tampil pasti menutupi seseorang. */
@media(max-width:640px){.melayang{display:none}}

/* Hero ringkas untuk halaman dalam */
.hero-dalam{padding:60px 0 46px}
.hero-dalam h1{font-size:clamp(2.1rem,5vw,3.4rem)}
@media(max-width:880px){.hero-dalam{padding:40px 0 32px}}

/* ---------- 8. Pita kegiatan yang berjalan ----------
   Isinya dua salinan daftar yang sama; salinan kedua aria-hidden. Animasi
   menggeser seluruhnya sejauh separuh lebar, jadi ujung salinan pertama
   bertemu awal salinan kedua tanpa sambungan yang terlihat. Berhenti saat
   disentuh, supaya bisa dibaca. */
/* Bingkainya yang memotong: pita miring yang lebih lebar dari layar tidak
   boleh menambah guliran mendatar di ponsel. Latarnya putih supaya menyambung
   dengan seksi putih di bawahnya. */
.pita-bingkai{position:relative;z-index:3;overflow:hidden;background:var(--putih);padding:16px 0 26px;margin-top:-1px}
.pita-berjalan{position:relative;overflow:hidden;background:var(--tinta);color:var(--krem);
  transform:rotate(-1.4deg);margin:0 -16px;padding:14px 0;
  box-shadow:0 10px 26px -14px rgba(61,43,46,.6)}
.pita-trek{display:flex;width:max-content;animation:berjalan 38s linear infinite}
.pita-berjalan:hover .pita-trek{animation-play-state:paused}
.pita-trek ul{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.pita-trek li{display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap;
  font-family:var(--font-judul);font-weight:700;font-size:1.18rem;letter-spacing:.01em}
.pita-trek li::after{content:"";width:16px;height:16px;flex:none;background:var(--kuning-1);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.pita-trek li:nth-child(3n+2)::after{background:var(--pink-1)}
.pita-trek li:nth-child(3n)::after{background:var(--biru-2)}
@keyframes berjalan{to{transform:translateX(-50%)}}

/* ---------- 9. Seksi ---------- */
.seksi{padding:84px 0;position:relative}
.seksi.rapat{padding:56px 0}
.seksi.pink{background:var(--pink-5)}
.seksi.putih{background:var(--putih)}
.seksi.biru{background:var(--biru-5)}
.seksi.kuning{background:var(--kuning-5)}
.seksi-kepala{max-width:660px;margin-bottom:44px}
.seksi-kepala.tengah{margin-left:auto;margin-right:auto;text-align:center}
.seksi-kepala p{color:var(--tinta-lembut);font-size:1.05rem;margin-bottom:0}
/* Label kecil di atas judul seksi: pil dengan bintang - motif logo yang sama. */
.label{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-riang);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--aksi);margin-bottom:14px;
  background:rgba(255,255,255,.75);border:1.5px solid var(--pink-3);padding:5px 14px 5px 11px;border-radius:999px;
  line-height:1.4;
}
.label::before{content:"";width:12px;height:12px;flex:none;background:currentColor;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@media(max-width:640px){.seksi{padding:60px 0}.seksi.rapat{padding:42px 0}.seksi-kepala{margin-bottom:32px}}

/* ---------- 10. Kartu & kisi ---------- */
.kisi{display:grid;gap:24px}
.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))}
@media(max-width:1000px){.kisi-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.kisi-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.kisi-2{grid-template-columns:1fr}}
@media(max-width:640px){.kisi-2,.kisi-3,.kisi-4{grid-template-columns:1fr}}

.kartu{background:var(--putih);border-radius:var(--radius);padding:30px;box-shadow:var(--bayang);
  border:1px solid var(--garis);transition:transform .25s var(--halus),box-shadow .25s ease,border-color .25s ease}
.kartu:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat);border-color:var(--garis-kuat)}
.kartu h3{margin-bottom:.35em}
.kartu p{color:var(--tinta-lembut);font-size:.96rem}
.kartu > .ikon-bulat{margin-bottom:16px}

/* Ikon dalam lingkaran pastel - dipakai kartu, langkah, dan label melayang. */
.ikon-bulat{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;flex:none;
  color:var(--tinta);background:var(--pink-4)}
.ikon-bulat .ikon-svg{width:26px;height:26px}
.ikon-bulat.pink{background:var(--pink-3)}.ikon-bulat.kuning{background:var(--kuning-3)}
.ikon-bulat.biru{background:var(--biru-4)}.ikon-bulat.hijau{background:var(--hijau-4)}

/* Grid bento: kartu "kenapa" dengan ikon, satu nada pastel per kartu. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bento-kartu{position:relative;overflow:hidden;border-radius:var(--radius);padding:30px 28px 32px;
  background:var(--putih);border:1px solid var(--garis);box-shadow:var(--bayang);
  transition:transform .25s var(--halus),box-shadow .25s ease}
.bento-kartu:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--bayang-kuat)}
.bento-kartu .ikon-bulat{margin-bottom:22px}
.bento-kartu h3{font-size:1.45rem}
.bento-kartu p{color:var(--tinta-lembut);font-size:.97rem}
/* Lingkaran pucat di pojok - cukup untuk memberi tiap kartu warnanya sendiri
   tanpa mewarnai latar penuh (yang membuat teks abu-abu sulit dibaca). */
.bento-kartu::after{content:"";position:absolute;right:-60px;top:-60px;width:170px;height:170px;border-radius:50%;
  background:var(--warna-bento,var(--pink-5));z-index:0;opacity:.85}
.bento-kartu > *{position:relative;z-index:1}
.bento-kartu.pink{--warna-bento:var(--pink-5)}
.bento-kartu.kuning{--warna-bento:var(--kuning-5)}
.bento-kartu.biru{--warna-bento:#e9edf6}
@media(max-width:900px){.bento{grid-template-columns:1fr}}

/* Kartu kelompok usia — tiap usia punya warna dari palet guideline */
.usia{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);padding:32px;color:var(--tinta);
  display:flex;flex-direction:column;height:100%;text-decoration:none;
  border:2.5px solid transparent;
  transition:transform .25s var(--pegas),box-shadow .25s ease,border-color .25s ease;
}
.usia:hover{text-decoration:none;transform:translateY(-6px) rotate(-.6deg);border-color:var(--tinta);box-shadow:0 10px 0 rgba(61,43,46,.16)}
.usia .rentang{font-family:var(--font-judul);font-weight:800;font-size:1.8rem;margin-bottom:2px;display:block;line-height:1.1}
.usia .judul{display:inline-block;align-self:flex-start;font-family:var(--font-riang);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;margin-bottom:16px;background:rgba(255,255,255,.55);
  padding:3px 11px;border-radius:999px}
.usia p{font-size:.95rem;margin-bottom:20px;flex:1}
.usia .lanjut{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-judul);font-weight:700;font-size:1rem;
  color:var(--tinta);position:relative;z-index:2}
.usia .lanjut::after{content:"";width:28px;height:28px;border-radius:50%;background:var(--putih);
  border:2px solid var(--tinta);flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D2B2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size:15px;background-position:center;background-repeat:no-repeat;
  transition:transform .25s var(--pegas)}
.usia:hover .lanjut::after{transform:translateX(4px)}
/* Maskot mengintip dari pojok kanan bawah kartu. */
.usia-maskot{position:absolute;right:-6px;bottom:-14px;width:96px;z-index:1;opacity:.95;pointer-events:none;
  transition:transform .35s var(--pegas)}
.usia:hover .usia-maskot{transform:translateY(-8px) rotate(-6deg)}
.usia-maskot.lebar{width:124px;right:-12px}
.usia.bermaskot p,.usia.bermaskot .lanjut{padding-right:62px}
.usia--bayi{background:var(--pink-1)}
.usia--batita{background:var(--kuning-2)}
.usia--pra{background:var(--hijau-2)}

/* ---------- 11. Langkah ---------- */
.langkah{counter-reset:l;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0;margin:0;position:relative}
@media(max-width:760px){.langkah{grid-template-columns:1fr;gap:20px}}
.langkah li{list-style:none;position:relative;padding-left:62px}
.langkah li::before{
  counter-increment:l;content:counter(l);
  position:absolute;left:0;top:-4px;width:46px;height:46px;
  background:var(--aksi);color:var(--putih);border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-family:var(--font-judul);font-size:1.3rem;
  box-shadow:0 0 0 6px var(--putih),0 0 0 8px var(--pink-3);
}
.langkah h3{font-size:1.2rem;margin-bottom:.2em}
.langkah p{font-size:.94rem;color:var(--tinta-lembut);margin:0}
/* Versi kartu: tiap langkah berdiri sebagai kartu, dihubungkan garis putus
   di layar lebar. */
.langkah.berkartu{gap:26px}
.langkah.berkartu li{padding:34px 26px 28px;background:var(--krem);border:1px solid var(--garis);
  border-radius:var(--radius);text-align:center}
.langkah.berkartu li::before{left:50%;top:-23px;transform:translateX(-50%)}
.langkah.berkartu .ikon-bulat{margin:6px auto 16px}
@media(min-width:761px){
  .langkah.berkartu::before{content:"";position:absolute;left:16%;right:16%;top:0;border-top:3px dashed var(--pink-2);z-index:0}
  .langkah.berkartu li{z-index:1}
}
@media(max-width:760px){.langkah.berkartu{gap:40px;margin-top:20px}}

/* ---------- 12. Linimasa 90 menit ----------
   Delapan kegiatan dalam urutan sungguhan kelas. Di layar lebar empat kolom
   bersambung garis; di ponsel jadi daftar tegak dengan garis di kiri - urutan
   tetap terbaca dari atas ke bawah. */
.linimasa{counter-reset:lm;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
.linimasa li{counter-increment:lm;position:relative;background:var(--putih);border:1px solid var(--garis);border-radius:22px;
  padding:26px 22px 22px;box-shadow:var(--bayang);transition:transform .25s var(--halus),box-shadow .25s ease}
.linimasa li:hover{transform:translateY(-4px);box-shadow:var(--bayang-kuat)}
.linimasa li::before{content:counter(lm,decimal-leading-zero);position:absolute;top:-17px;left:20px;
  display:grid;place-items:center;min-width:44px;height:34px;padding:0 10px;border-radius:999px;
  background:var(--warna-lm,var(--pink-3));border:2px solid var(--tinta);
  font-family:var(--font-judul);font-weight:800;font-size:1rem;color:var(--tinta)}
.linimasa li:nth-child(4n+2){--warna-lm:var(--kuning-3)}
.linimasa li:nth-child(4n+3){--warna-lm:var(--biru-4)}
.linimasa li:nth-child(4n){--warna-lm:var(--hijau-4)}
.linimasa h4{margin:4px 0 .35em;font-size:1.04rem}
.linimasa p{margin:0;font-size:.9rem;color:var(--tinta-lembut);line-height:1.6}
@media(min-width:1001px){
  /* Garis penyambung ke kartu berikutnya, kecuali di ujung baris. */
  .linimasa li:not(:nth-child(4n))::after{content:"";position:absolute;top:0;right:-23px;width:24px;border-top:3px dashed var(--pink-2)}
}
@media(max-width:1000px){.linimasa{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .linimasa{grid-template-columns:1fr;gap:26px;padding-left:16px}
  .linimasa::before{content:"";position:absolute;left:9px;top:10px;bottom:10px;border-left:3px dashed var(--pink-2)}
  .linimasa{position:relative}
  .linimasa li::before{left:-30px;top:18px;min-width:38px;height:30px;font-size:.88rem}
  .linimasa li{margin-left:14px}
}

/* ---------- 13. Gambar ---------- */
.gambar{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(140deg,var(--pink-3),var(--pink-5) 60%,var(--kuning-4));
  display:grid;place-items:center;text-align:center;padding:28px;
  min-height:280px;border:1px dashed rgba(61,43,46,.18);
}
.gambar.tinggi{min-height:420px}
.gambar.potret{aspect-ratio:3/4;min-height:0}
.gambar.persegi{aspect-ratio:1/1;min-height:0}
.gambar small{display:block;color:var(--tinta-lembut);font-size:.78rem;line-height:1.5;max-width:24em}
.gambar .ikon{font-size:2rem;margin-bottom:8px;display:block}
.gambar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gambar:has(img){border:0;box-shadow:var(--bayang-kuat)}

/* Foto dengan bingkai berlapis dan lencana yang melayang di atasnya. */
.foto-berbingkai{position:relative}
.foto-berbingkai::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:var(--radius);
  background:var(--kuning-3);border:2.5px solid var(--tinta);z-index:0}
.foto-berbingkai .gambar{position:relative;z-index:1;border:2.5px solid var(--tinta)}
.lencana-melayang{position:absolute;z-index:2;left:-22px;bottom:34px;display:flex;align-items:center;gap:12px;
  background:var(--putih);border:2.5px solid var(--tinta);border-radius:20px;padding:12px 18px 12px 12px;
  box-shadow:var(--stiker);animation:mengambang-kecil 6s ease-in-out infinite}
.lencana-melayang b{display:block;font-family:var(--font-judul);font-size:1.3rem;line-height:1.05}
.lencana-melayang span{font-size:.8rem;color:var(--tinta-lembut);line-height:1.3}
@media(max-width:860px){.foto-berbingkai::before{inset:12px -10px -12px 10px}.lencana-melayang{left:10px;bottom:16px}}

/* Bingkai maskot (gambar transparan, bukan foto) */
.maskot-bingkai{
  border-radius:var(--radius);display:grid;place-items:end center;
  padding:24px 24px 0;min-height:300px;overflow:hidden;
}
.maskot-bingkai img{max-height:290px;width:auto;filter:drop-shadow(0 10px 18px rgba(61,43,46,.14))}
.maskot-bingkai.pink{background:linear-gradient(180deg,var(--pink-4),var(--pink-2))}
.maskot-bingkai.biru{background:linear-gradient(180deg,var(--biru-4),var(--biru-2))}

/* ---------- 14. Fasilitator ---------- */
.profil{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:48px;align-items:center}
@media(max-width:900px){.profil{grid-template-columns:1fr;gap:32px}}
.kredensial{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.kredensial li{background:var(--pink-4);color:var(--tinta);font-size:.85rem;font-weight:600;padding:7px 16px;border-radius:999px}

/* ---------- 15. Tabel harga ---------- */
.harga-kisi{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:980px){.harga-kisi{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.harga-kartu{background:var(--putih);border:2px solid var(--garis);border-radius:var(--radius);padding:34px 30px;
  display:flex;flex-direction:column;position:relative;
  transition:transform .25s var(--halus),box-shadow .25s ease,border-color .25s ease}
.harga-kartu:hover{transform:translateY(-5px);box-shadow:var(--bayang-kuat);border-color:var(--garis-kuat)}
.harga-kartu.unggulan{border:2.5px solid var(--tinta);box-shadow:0 10px 0 rgba(61,43,46,.14);
  background:linear-gradient(180deg,var(--pink-5),var(--putih) 42%)}
.harga-kartu.unggulan:hover{box-shadow:0 14px 0 rgba(61,43,46,.14);border-color:var(--tinta)}
.harga-kartu .pita{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--aksi);color:var(--putih);font-family:var(--font-riang);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 18px;border-radius:999px;white-space:nowrap;border:2px solid var(--tinta);
}
.harga-kartu .nama{font-family:var(--font-judul);font-weight:800;font-size:1.4rem;margin-bottom:2px;line-height:1.2}
.harga-kartu .nominal{font-family:var(--font-judul);font-weight:800;font-size:2.7rem;line-height:1.1;margin:14px 0 2px;color:var(--aksi)}
.harga-kartu .satuan{font-size:.9rem;color:var(--tinta-lembut);margin-bottom:20px}
.harga-kartu ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
.harga-kartu li{padding-left:28px;position:relative;font-size:.94rem;margin-bottom:10px;color:var(--tinta-lembut)}
.harga-kartu li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;background:var(--kuning-1);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.harga-kartu .tombol-grup{flex-direction:column;gap:10px}
.harga-kartu .tombol-grup .tombol{width:100%}

/* ---------- 16. Formulir ---------- */
.form{background:var(--putih);border-radius:var(--radius);padding:36px;box-shadow:var(--bayang-kuat);border:1px solid var(--garis)}
@media(max-width:560px){.form{padding:26px 20px}}
.form-baris{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.form-baris{grid-template-columns:1fr}}
.bidang{margin-bottom:18px}
.bidang label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.bidang .bantu{font-weight:400;color:var(--tinta-lembut);font-size:.82rem}
.bidang input,.bidang select,.bidang textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--garis-kuat);border-radius:var(--radius-s);
  font-family:var(--font-teks);font-size:1rem;color:var(--tinta);background:var(--krem);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.bidang input:hover,.bidang select:hover,.bidang textarea:hover{border-color:var(--pink-1)}
.bidang input:focus,.bidang select:focus,.bidang textarea:focus{outline:none;border-color:var(--aksi);background:var(--putih);
  box-shadow:0 0 0 4px rgba(176,58,72,.14)}
.bidang textarea{min-height:110px;resize:vertical}
fieldset{border:none;padding:0;margin:0 0 18px}
legend{font-weight:600;font-size:.9rem;margin-bottom:9px;padding:0}
.pilihan{display:flex;flex-wrap:wrap;gap:10px}
.pilihan label{
  display:flex;align-items:center;gap:8px;background:var(--krem);border:1.5px solid var(--garis-kuat);
  padding:10px 16px;border-radius:999px;cursor:pointer;font-size:.92rem;font-weight:500;margin:0;
  transition:background-color .15s ease,border-color .15s ease,transform .15s var(--pegas);
}
.pilihan label:hover{border-color:var(--pink-1)}
/* 20px, sama seperti .ceklis-daftar. Ukuran bawaan peramban 13px terlalu
   kecil untuk melihat mana yang sudah tercentang di ponsel - ini formulir
   yang diisi orang tua sambil memegang anak. */
.pilihan input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--aksi)}
.pilihan label:has(input:checked){background:var(--pink-4);border-color:var(--aksi)}
.catatan-form{font-size:.85rem;color:var(--tinta-lembut);margin-top:16px}

/* ---------- 17. FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius-s);margin-bottom:12px;overflow:hidden;
  transition:box-shadow .2s ease,border-color .2s ease}
.faq details:hover{border-color:var(--garis-kuat)}
.faq details[open]{box-shadow:var(--bayang);border-color:var(--pink-2)}
.faq summary{padding:20px 24px;font-weight:600;cursor:pointer;list-style:none;position:relative;padding-right:64px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--pink-5);
  font-size:1.4rem;color:var(--aksi);line-height:1;font-family:var(--font-judul);transition:transform .25s var(--pegas),background-color .2s ease}
.faq details[open] summary::after{content:"−";background:var(--pink-3);transform:translateY(-50%) rotate(180deg)}
.faq details[open] summary{background:var(--pink-5)}
.faq .isi{padding:4px 24px 22px;color:var(--tinta-lembut);font-size:.96rem}

/* ---------- 18. Testimoni (placeholder) ---------- */
.testi-kosong{
  position:relative;background:var(--putih);border:1.5px dashed var(--garis-kuat);border-radius:var(--radius);
  padding:42px 30px 34px;text-align:center;color:var(--tinta-lembut);
}
.testi-kosong::before{content:"\201C";position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  width:48px;height:48px;border-radius:50%;background:var(--kuning-3);border:2px solid var(--tinta);
  display:grid;place-items:center;font-family:Georgia,serif;font-size:2.2rem;line-height:1.35;color:var(--tinta)}
.testi-kosong .ikon{display:none}
.testi-kosong strong{display:block;color:var(--tinta);margin-bottom:6px;font-size:1rem}
.testi-kosong small{font-size:.85rem}
.kisi:has(.testi-kosong){row-gap:44px;margin-top:20px}

/* ---------- 19. Daftar centang ---------- */
.centang{list-style:none;padding:0;margin:0}
.centang li{padding-left:30px;position:relative;margin-bottom:12px;color:var(--tinta-lembut)}
.centang li::before{content:"";position:absolute;left:0;top:.38em;width:17px;height:17px;background:var(--kuning-1);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.centang strong{color:var(--tinta)}

/* ---------- 20. Fasilitas ---------- */
.fasilitas{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.fasilitas li{display:inline-flex;align-items:center;gap:9px;background:var(--putih);border:1.5px solid var(--garis);
  border-radius:999px;padding:9px 18px 9px 10px;font-size:.92rem;font-weight:500;
  transition:transform .2s var(--pegas),background-color .15s ease,border-color .15s ease}
.fasilitas li:hover{transform:translateY(-2px);background:var(--kuning-4);border-color:var(--kuning-2)}
.fasilitas li .ikon-svg{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--langit-3);color:var(--aksi)}
.fasilitas li:not(:has(.ikon-svg)){padding-left:18px}

/* ---------- 21. Ajakan (CTA) ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:linear-gradient(135deg,var(--pink-1) 0%,var(--pink-2) 45%,var(--kuning-3) 120%);
  border-radius:calc(var(--radius) + 6px);padding:62px 40px;border:2.5px solid var(--tinta);
  box-shadow:0 12px 0 rgba(61,43,46,.14)}
.cta::before,.cta::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.35)}
.cta::before{width:300px;height:300px;left:-90px;top:-130px}
.cta::after{width:220px;height:220px;right:18%;bottom:-150px;background:rgba(255,255,255,.25)}
.cta h2{margin-bottom:.35em}
.cta .tombol-grup{justify-content:center;position:relative;z-index:2}
.cta p{color:var(--tinta);opacity:.88;max-width:34em;margin:0 auto 1.7em}
.cta .tombol.garis{background:rgba(255,255,255,.6);color:var(--aksi-gelap);border-color:var(--aksi-gelap)}
.cta .tombol.garis:hover{background:var(--aksi-gelap);color:var(--putih)}
.cta-maskot{position:absolute;bottom:0;right:24px;width:150px;opacity:.97;pointer-events:none}
.cta-maskot.kiri{right:auto;left:30px;width:116px}
/* Dua maskot mengapit judul hanya muat di layar lebar; di bawah itu Aru
   mundur dan tinggal Uni, lalu keduanya mundur di ponsel. */
@media(max-width:1080px){.cta-maskot.kiri{display:none}}
@media(max-width:820px){.cta-maskot{display:none}}
@media(max-width:620px){.cta{padding:44px 22px;border-radius:var(--radius)}}

/* ---------- 22. Peta ---------- */
.peta{border-radius:var(--radius);overflow:hidden;border:1px solid var(--garis);box-shadow:var(--bayang);line-height:0}
.peta iframe{width:100%;height:400px;border:0}

/* ---------- 23. Jadwal terdekat (blok dinamis di beranda) ----------
   Diambil dari tabel sesi setiap kali halaman dibuka. Kalau belum ada jadwal,
   bloknya tidak dirender sama sekali - "belum ada kelas" di beranda adalah
   kabar buruk yang tidak perlu diumumkan. */
.jadwal-dekat-kisi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.jadwal-dekat-kartu{display:flex;flex-direction:column;gap:14px;background:var(--putih);border:2px solid var(--tinta);
  border-radius:22px;padding:20px;box-shadow:var(--stiker);text-decoration:none;color:var(--tinta);
  transition:transform .2s var(--pegas),box-shadow .2s ease}
.jadwal-dekat-kartu:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 10px 0 rgba(61,43,46,.14)}
.jadwal-dekat-atas{display:flex;align-items:center;gap:14px}
.jadwal-dekat-tgl{flex:none;width:62px;text-align:center;border-radius:16px;padding:7px 0 8px;background:var(--pink-4);line-height:1.05}
.jadwal-dekat-tgl small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--aksi)}
.jadwal-dekat-tgl b{display:block;font-family:var(--font-judul);font-size:1.7rem;font-weight:800}
.jadwal-dekat-tgl span{display:block;font-size:.7rem;color:var(--tinta-lembut)}
.jadwal-dekat-judul{font-family:var(--font-judul);font-weight:700;font-size:1.1rem;line-height:1.2}
.jadwal-dekat-jam{font-size:.85rem;color:var(--tinta-lembut)}
/* Boleh membungkus: di kartu sempit "Pilih" turun ke baris sendiri dan
   menepi ke kanan, bukan memeras label kursi jadi dua baris. */
.jadwal-dekat-bawah{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;margin-top:auto;
  padding-top:12px;border-top:1px dashed var(--garis-kuat)}
.jadwal-dekat-bawah .jadwal-dekat-pilih{margin-left:auto}
.kursi{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;border-radius:999px;padding:4px 11px;white-space:nowrap}
.kursi::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.kursi.longgar{background:var(--hijau-5);color:#2f6b1f}
.kursi.hampir{background:var(--kuning-5);color:#7a5a00}
.kursi.penuh{background:#eef0f7;color:#4a5280}
.jadwal-dekat-pilih{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-judul);font-weight:700;font-size:.95rem;color:var(--aksi);white-space:nowrap}
.jadwal-dekat-pilih .ikon-svg{transition:transform .2s var(--pegas)}
.jadwal-dekat-kartu:hover .jadwal-dekat-pilih .ikon-svg{transform:translateX(3px)}

/* ---------- 24. Footer ---------- */
.footer{position:relative;background:var(--tinta);color:#E8DCDD;padding:72px 0 28px;margin-top:48px}
.footer::before{content:"";position:absolute;left:0;right:0;top:-38px;height:40px;
  background:var(--tinta);
  -webkit-mask:radial-gradient(28px at 50% 100%,#000 98%,transparent) 0 0/56px 40px repeat-x;
  mask:radial-gradient(28px at 50% 100%,#000 98%,transparent) 0 0/56px 40px repeat-x}
.footer a{color:var(--pink-3)}
.footer-kisi{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:44px}
@media(max-width:980px){.footer-kisi{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.footer-kisi{grid-template-columns:1fr;gap:30px}}
.footer h4{color:var(--putih);font-family:var(--font-riang);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:9px;font-size:.93rem}
.footer li a{display:inline-flex;align-items:center;gap:9px}
.footer .logo b{color:var(--putih)}
.footer .logo span{color:var(--pink-3)}
.footer p{font-size:.93rem;opacity:.85;max-width:30em}
.sosial{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sosial a{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.08);
  color:var(--putih);border:1px solid rgba(255,255,255,.14);transition:background-color .15s ease,transform .2s var(--pegas)}
.sosial a:hover{background:var(--aksi);transform:translateY(-3px);text-decoration:none}
.sosial .ikon-svg{width:20px;height:20px}
.footer-bawah{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:.85rem;opacity:.75;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.footer-maskot{position:absolute;right:max(24px,calc(50% - 600px));top:-104px;width:92px;pointer-events:none}
@media(max-width:700px){.footer-maskot{width:70px;top:-80px}}

/* ---------- 25. Bilah ajakan yang menempel (ponsel) ----------
   Muncul setelah hero terlewati, di jangkauan ibu jari. Disembunyikan di
   halaman jadwal - di sana formulirnya sendiri adalah ajakannya. */
.cta-lengket{display:none}
@media(max-width:760px){
  .cta-lengket{position:fixed;z-index:90;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
    display:flex;gap:10px;align-items:center;padding:8px;border-radius:22px;
    background:rgba(255,251,249,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border:2px solid var(--tinta);box-shadow:0 6px 0 rgba(61,43,46,.16),0 18px 40px -16px rgba(61,43,46,.45);
    transform:translateY(140%);transition:transform .35s var(--halus)}
  .cta-lengket.tampil{transform:none}
  .cta-lengket .tombol{flex:1;padding:12px 16px;font-size:1rem}
  .cta-lengket .wa-bulat{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;flex:none;
    background:#1c7f45;color:#fff}
  .cta-lengket .wa-bulat .ikon-svg{width:24px;height:24px}
  body:has(.cta-lengket) .footer{padding-bottom:110px}
}

/* ---------- 26. Kembali ke atas (layar lebar) ---------- */
.ke-atas{position:fixed;z-index:80;right:22px;bottom:22px;width:50px;height:50px;border-radius:16px;
  display:grid;place-items:center;background:var(--putih);color:var(--tinta);border:2px solid var(--tinta);
  box-shadow:var(--stiker);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .3s var(--pegas),visibility 0s linear .3s}
.ke-atas.tampil{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s var(--pegas)}
.ke-atas:hover{background:var(--kuning-4)}
.ke-atas .ikon-svg{width:22px;height:22px}
@media(max-width:760px){.ke-atas{display:none}}

/* ---------- 27. Utilitas ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}
/* :not(.tombol) - "kecil" juga nama ukuran tombol (.tombol.kecil). Tanpa
   pengecualian ini, utilitas teks abu-abu menimpa warna putih tombol "Daftar
   Trial" di header: tulisan abu-abu di atas merah, kontras sekitar 2:1. */
.kecil:not(.tombol){font-size:.88rem;color:var(--tinta-lembut)}
.sorot{background:var(--kuning-3);padding:2px 7px;border-radius:6px;font-weight:600;color:var(--tinta)}

/* ============================================================
   ARU & UNI YANG HIDUP + BAGIAN INTERAKTIF
   ============================================================ */

/* ---------- Maskot mengambang ---------- */
.maskot-hidup{animation:mengambang 4.5s ease-in-out infinite;transform-origin:50% 100%}
.maskot-hidup.lambat{animation-duration:5.6s;animation-delay:-1.4s}
@keyframes mengambang{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(-1.2deg)}
}

/* ---------- Balon ucapan ---------- */
.balon{
  position:relative;background:var(--putih);border:2.5px solid var(--tinta);
  border-radius:22px;padding:18px 22px;box-shadow:0 6px 0 rgba(61,43,46,.14);
  font-family:var(--font-riang);font-weight:600;font-size:1rem;line-height:1.5;color:var(--tinta);
}
.balon::after,.balon::before{content:"";position:absolute;width:0;height:0;border-style:solid}
.balon::before{bottom:-19px;left:40px;border-width:19px 15px 0 0;border-color:var(--tinta) transparent transparent transparent}
.balon::after{bottom:-14px;left:43px;border-width:15px 11px 0 0;border-color:var(--putih) transparent transparent transparent}
.balon.kanan::before{left:auto;right:40px;border-width:19px 0 0 15px}
.balon.kanan::after{left:auto;right:43px;border-width:15px 0 0 11px}
/* Ekor menghadap kiri — untuk balon yang berdiri di sebelah kanan maskot */
.balon.kiri::before{bottom:auto;left:-19px;top:26px;border-width:0 19px 15px 0;border-color:transparent var(--tinta) transparent transparent}
.balon.kiri::after{bottom:auto;left:-14px;top:29px;border-width:0 15px 11px 0;border-color:transparent var(--putih) transparent transparent}
@media(max-width:820px){.balon.kiri::before,.balon.kiri::after{display:none}}
.balon .ganti{display:block;animation:balonMasuk .4s ease}
@keyframes balonMasuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Balon di hero — selalu DI ATAS maskot, tidak pernah menutupi wajahnya.
   Sengaja tidak memakai position:absolute supaya tidak bisa bertabrakan
   dengan kolom teks di lebar layar mana pun. */
.hero-balon{
  max-width:330px;width:100%;margin:0 auto 6px;cursor:pointer;
  transition:transform .2s ease;text-align:left;
}
.hero-balon:hover{transform:translateY(-2px) rotate(-1deg)}
.hero-balon::before{left:50%;transform:translateX(-11px)}
.hero-balon::after{left:50%;transform:translateX(-8px)}
.hero-balon .petunjuk{display:block;font-family:var(--font-teks);font-weight:400;font-size:.72rem;color:var(--tinta-lembut);margin-top:7px}

/* ---------- Tur "Kenalan dengan Arumanis" ---------- */
.tur{position:relative;background:var(--putih);border:2.5px solid var(--tinta);border-radius:32px;padding:38px;
  box-shadow:0 10px 0 rgba(61,43,46,.12);overflow:hidden}
/* Bilah kemajuan bersegmen di puncak kartu: enam ruas, yang sudah dilewati
   terisi. Lebih cepat terbaca daripada enam titik kecil di bawah. */
.tur-progres{position:absolute;left:0;right:0;top:0;display:flex;gap:4px;padding:0}
.tur-progres span{flex:1;height:6px;background:var(--pink-5);transition:background-color .3s ease}
.tur-progres span.lewat{background:var(--aksi)}
.tur-panggung{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:34px;align-items:center;min-height:280px}
@media(max-width:820px){
  .tur{padding:30px 20px 26px}
  .tur-panggung{grid-template-columns:1fr;gap:18px;text-align:center}
}
.tur-maskot{position:relative;display:grid;place-items:end center}
.tur-maskot::before{content:"";position:absolute;left:50%;bottom:0;width:190px;height:190px;transform:translateX(-50%);
  border-radius:50%;background:var(--warna-tur,var(--kuning-4));transition:background-color .35s ease;z-index:0}
.tur-maskot[data-siapa="uni"]{--warna-tur:var(--biru-4)}
.tur-maskot img{position:relative;z-index:1;max-height:250px;width:auto;filter:drop-shadow(0 10px 16px rgba(61,43,46,.16))}
@media(max-width:820px){.tur-maskot img{max-height:170px}.tur-maskot::before{width:140px;height:140px}}
.tur-nama{
  display:inline-block;font-family:var(--font-riang);font-weight:700;font-size:.8rem;
  padding:5px 14px;border-radius:999px;margin-bottom:12px;
}
.tur-nama.aru{background:var(--kuning-3)}
.tur-nama.uni{background:var(--biru-4)}
.tur-isi h3{margin-bottom:.3em}
.tur-isi p{color:var(--tinta-lembut);margin-bottom:1em}
.tur-isi.ganti-isi{animation:balonMasuk .35s ease}
.tur-kendali{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.tur-nav{
  width:50px;height:50px;border-radius:50%;border:2.5px solid var(--tinta);
  background:var(--putih);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--tinta);
  display:grid;place-items:center;box-shadow:0 4px 0 rgba(61,43,46,.14);
  transition:background-color .15s ease,transform .2s var(--pegas),box-shadow .15s ease;
}
.tur-nav:hover:not(:disabled){background:var(--kuning-3);transform:translateY(-2px)}
.tur-nav:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(61,43,46,.14)}
.tur-nav:disabled{opacity:.3;cursor:not-allowed}
.tur-titik{display:flex;gap:9px}
.tur-titik button{
  width:12px;height:12px;border-radius:50%;border:2px solid var(--tinta);
  background:var(--putih);padding:0;cursor:pointer;transition:background-color .15s ease,transform .15s ease,width .25s var(--halus);
}
.tur-titik button[aria-current="true"]{background:var(--aksi);border-color:var(--aksi);width:28px;border-radius:999px}
.tur-hitung{font-family:var(--font-riang);font-weight:700;font-size:.85rem;color:var(--tinta-lembut);min-width:3.5em;text-align:center}

/* ---------- Pemandu usia ---------- */
.pemandu{max-width:820px;margin:0 auto}
.pemandu-tombol{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:30px}
.pemandu-tombol button{
  font-family:var(--font-judul);font-weight:700;font-size:1rem;
  background:var(--putih);border:2.5px solid var(--tinta);border-radius:999px;
  padding:12px 24px;cursor:pointer;color:var(--tinta);box-shadow:0 4px 0 rgba(61,43,46,.14);
  transition:background-color .15s ease,transform .2s var(--pegas),box-shadow .15s ease;
}
.pemandu-tombol button:hover{transform:translateY(-2px);background:var(--kuning-4)}
.pemandu-tombol button:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(61,43,46,.14)}
.pemandu-tombol button[aria-pressed="true"]{background:var(--tinta);color:var(--putih)}
.pemandu-hasil{display:none}
.pemandu-hasil.tampil{display:block;animation:balonMasuk .35s ease}
.hasil-kartu{
  border-radius:28px;padding:32px;border:2.5px solid var(--tinta);
  box-shadow:0 8px 0 rgba(61,43,46,.12);
  display:grid;grid-template-columns:130px 1fr;gap:26px;align-items:center;
}
@media(max-width:640px){.hasil-kartu{grid-template-columns:1fr;text-align:center;padding:26px 20px}}
.hasil-kartu img{max-height:180px;width:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(61,43,46,.16))}
.hasil-kartu h3{margin-bottom:.25em}
.hasil-kartu p{margin-bottom:1em;color:var(--tinta)}
.hasil-kartu.bayi{background:var(--pink-3)}
.hasil-kartu.batita{background:var(--kuning-3)}
.hasil-kartu.pra{background:var(--hijau-3)}
.hasil-kartu.lain{background:var(--biru-4)}

/* ---------- Ceklis milestone ---------- */
.ceklis-hasil{display:none}
.ceklis-hasil.tampil{display:block;animation:balonMasuk .35s ease}
.ceklis-kotak{
  background:var(--putih);border:2.5px solid var(--tinta);border-radius:28px;
  padding:32px;box-shadow:0 8px 0 rgba(61,43,46,.12);max-width:720px;margin:0 auto;
}
@media(max-width:620px){.ceklis-kotak{padding:24px 20px}}
.ceklis-kotak h3{margin-bottom:.2em}
.ceklis-kotak .kecil{margin-bottom:1.4em}
.ceklis-daftar{list-style:none;padding:0;margin:0 0 26px}
.ceklis-daftar li{margin-bottom:10px}
.ceklis-daftar label{
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  background:var(--krem);border:1.5px solid var(--garis);border-radius:var(--radius-s);
  padding:14px 16px;transition:background-color .15s ease,border-color .15s ease;
}
.ceklis-daftar label:hover{background:var(--pink-5)}
.ceklis-daftar label:has(input:checked){background:var(--hijau-4);border-color:var(--hijau-1)}
.ceklis-daftar input{margin:3px 0 0;width:20px;height:20px;flex:none;accent-color:var(--aksi)}
.ceklis-daftar span{font-size:.97rem;line-height:1.5}
.ceklis-tutup{
  background:var(--biru-5);border-radius:var(--radius-s);padding:20px 22px;
  font-size:.95rem;line-height:1.6;
}
.ceklis-tutup strong{display:block;margin-bottom:6px;font-family:var(--font-judul);font-size:1.1rem}

/* ---------- Kartu video Instagram ---------- */
.video-kartu{
  border-radius:28px;overflow:hidden;border:2.5px solid var(--tinta);
  box-shadow:0 8px 0 rgba(61,43,46,.12);background:var(--putih);
  transition:transform .25s var(--pegas),box-shadow .25s ease;
}
.video-kartu:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 12px 0 rgba(61,43,46,.12)}
.video-tirai{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;aspect-ratio:9/14;padding:28px 22px;border:0;cursor:pointer;text-align:center;
  background:linear-gradient(160deg,var(--biru-3),var(--pink-3) 55%,var(--kuning-3));
  color:var(--tinta);font-family:var(--font-teks);overflow:hidden;
  transition:filter .18s ease;
}
/* Kilau tipis yang lewat saat disentuh - tanda bahwa kartunya bisa diputar. */
.video-tirai::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform .7s var(--halus)}
.video-tirai:hover::after{transform:translateX(100%)}
.video-tirai:hover{filter:brightness(1.04)}
.video-tirai:focus-visible{outline:3px solid var(--tinta);outline-offset:-6px}
.video-main{
  width:70px;height:70px;border-radius:50%;background:var(--putih);border:2.5px solid var(--tinta);
  display:grid;place-items:center;font-size:1.4rem;padding-left:5px;margin-bottom:12px;
  box-shadow:0 4px 0 rgba(61,43,46,.18);transition:transform .25s var(--pegas);
  animation:denyut 2.6s ease-in-out infinite;
}
@keyframes denyut{0%,100%{box-shadow:0 4px 0 rgba(61,43,46,.18),0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 4px 0 rgba(61,43,46,.18),0 0 0 14px rgba(255,255,255,0)}}
.video-tirai:hover .video-main{transform:scale(1.1)}
.video-tema{font-family:var(--font-riang);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.video-judul{font-family:var(--font-judul);font-weight:800;font-size:1.3rem;line-height:1.2}
.video-catatan{font-size:.86rem;line-height:1.45;opacity:.85;max-width:22em}
.video-kartu iframe{display:block;width:100%;aspect-ratio:9/14;border:0;background:var(--putih)}
@media(max-width:900px){.video-tirai{aspect-ratio:4/3}.video-kartu iframe{aspect-ratio:9/13}}

/* Kisi yang di ponsel menjadi baris geser mendatar: tiga kartu video
   setinggi layar yang ditumpuk berarti tiga kali menggulir melewati hal yang
   sama. Kartu berikutnya sengaja mengintip di tepi - tanda bahwa ada lagi. */
@media(max-width:640px){
  .geser-ponsel{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 24px 18px;margin:0 -24px;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .geser-ponsel::-webkit-scrollbar{display:none}
  .geser-ponsel > *{scroll-snap-align:center}
}
.geser-titik{display:none}
@media(max-width:640px){
  .geser-titik{display:flex;justify-content:center;gap:8px;margin-top:6px}
  .geser-titik span{width:8px;height:8px;border-radius:999px;background:var(--garis-kuat);transition:width .25s var(--halus),background-color .2s ease}
  .geser-titik span.kini{width:22px;background:var(--aksi)}
}

/* ---------- Muncul saat digulir ----------
   --i memberi jeda bertingkat pada anak-anak sebuah kisi, supaya kartu
   muncul satu per satu dari kiri, bukan serentak seperti satu gambar. */
.muncul{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .7s var(--halus)}
.muncul.terlihat{opacity:1;transform:none}
.muncul-anak > *{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .65s var(--halus);
  transition-delay:calc(var(--i,0) * 80ms)}
.muncul-anak.terlihat > *{opacity:1;transform:none}
/* Kartu yang punya transform:hover sendiri tetap boleh melompat setelah
   muncul - transition-delay hanya berlaku sekali saat muncul. */
.muncul-anak.terlihat > *:hover{transition-delay:0ms}

/* Angka yang dihitung naik (data-hitung) memakai lebar tetap per digit
   supaya teks di sebelahnya tidak berguncang selama penghitungan. */
[data-hitung]{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .judul-warna span{opacity:1;transform:none}
  .muncul,.muncul-anak > *{opacity:1;transform:none}
  .pita-trek{transform:none}
  .progres-gulir{display:none}
}

/* ---------- Jadwal kelas dan formulir pendaftaran ----------

   Ditambahkan saat halaman /jadwal berubah dari naskah statis menjadi jadwal
   sungguhan. Semua yang bisa memakai kelas yang sudah ada (.kartu, .form,
   .bidang, .pilihan, .tombol) memakainya; yang di bawah ini hanya bentuk yang
   memang belum pernah ada di situs. */

.jadwal-hari{
  display:flex;gap:22px;align-items:flex-start;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:14px;box-shadow:var(--bayang);
}
/* Keping tanggal. Tanggal yang berdiri sendiri terbaca jauh lebih cepat
   daripada tanggal di tengah kalimat - dan halaman ini dipindai, bukan
   dibaca. */
.jadwal-tanggal{
  flex:none;width:76px;text-align:center;background:var(--pink-5);
  border:2px solid var(--tinta);border-radius:var(--radius-s);padding:10px 0 12px;
  box-shadow:0 4px 0 rgba(61,43,46,.12);
}
.jadwal-hari-nama{display:block;font-size:.72rem;font-weight:700;color:var(--aksi);
  text-transform:uppercase;letter-spacing:.06em}
.jadwal-angka{display:block;font-family:var(--font-judul);font-size:1.9rem;
  font-weight:800;color:var(--tinta);line-height:1.05}
.jadwal-bulan{display:block;font-size:.74rem;color:var(--tinta-lembut)}

.jadwal-sesi{flex:1;min-width:0;display:grid;gap:10px}
.jadwal-baris{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding:12px 16px;border-radius:var(--radius-s);background:var(--krem);
  border-left:5px solid var(--garis);
}
.jadwal-baris .kecil{display:block;font-size:.86rem;color:var(--tinta-lembut);margin-top:2px}
.jadwal-kanan{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jadwal-kursi{font-size:.86rem;font-weight:600;color:var(--tinta-lembut);white-space:nowrap}

/* Tiga keadaan kursi. Penuh sengaja BUKAN merah: penuh adalah kabar baik bagi
   Arumanis, dan bagi pengunjung ia informasi - bukan galat. Yang diberi warna
   paling kuat justru yang hampir habis, karena itu yang menuntut keputusan. */
.jadwal-baris.keadaan-longgar{border-left-color:var(--hijau-2)}
.jadwal-baris.keadaan-hampir{border-left-color:var(--kuning-1);background:#FEFBEF}
.jadwal-baris.keadaan-penuh{border-left-color:var(--biru-3);opacity:.78}

@media(max-width:640px){
  .jadwal-hari{flex-direction:column;gap:14px;padding:18px}
  .jadwal-tanggal{width:100%;display:flex;align-items:baseline;justify-content:center;gap:8px}
  .jadwal-angka{font-size:1.3rem}
  .jadwal-kanan{width:100%;justify-content:space-between}
}

/* Perangkap robot. Bukan display:none dan bukan type=hidden - robot pengisi
   formulir melewati keduanya. Ia harus "ada" bagi mesin tapi tak terjangkau
   manusia: di luar layar, tanpa tinggi, dan dijauhkan dari urutan Tab lewat
   atribut di HTML-nya. */
.jebakan{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Radio bertumpuk, untuk pilihan yang labelnya kalimat penuh. */
.pilihan.tumpuk{flex-direction:column;align-items:stretch}
.pilihan.tumpuk label{border-radius:var(--radius-s);justify-content:flex-start}

/* Kedipan singkat saat sesi terpilih dari tombol di daftar jadwal. Tanpa ini,
   tombol "Pilih sesi ini" terasa tidak melakukan apa pun: halaman melompat ke
   formulir, dan menu yang sudah terisi ada jauh di bawah layar. */
@keyframes sesi-terpilih{
  0%{border-color:var(--aksi);background:var(--pink-4)}
  100%{border-color:var(--garis-kuat);background:var(--krem)}
}
.bidang select.berubah{animation:sesi-terpilih 1.4s ease-out}
@media(prefers-reduced-motion:reduce){.bidang select.berubah{animation:none}}

/* Usia anak: dua kotak angka dengan satuannya terlihat di sebelahnya. */
.label-grup{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.usia-duet{display:flex;gap:12px;flex-wrap:wrap}
.usia-satuan{display:flex;align-items:center;gap:10px;flex:1 1 110px;
  flex-wrap:nowrap;margin-bottom:0;font-weight:400}
/* width:auto membatalkan .bidang input{width:100%}, yang tanpa ini mendorong
   satuannya membungkus ke baris berikutnya. */
.usia-satuan input{width:auto;flex:1 1 60px;min-width:0}
.usia-satuan > span{flex:none;color:var(--tinta-lembut);font-size:.9rem;
  white-space:nowrap}

/* Galat yang menempel di medannya sendiri. */
.salah-medan{margin:7px 0 0;color:#8E3436;font-size:.86rem;font-weight:600}

/* Kartu "sesi mana untuk usia berapa" di halaman jadwal. */
.sesi-usia{margin:0 0 26px;max-width:640px}
.sesi-usia h3{margin:0 0 10px;font-size:1.05rem}
.sesi-usia ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.sesi-usia li{padding:10px 14px;background:var(--krem);border-radius:12px}
.sesi-usia p{margin:0}

/* Catatan untuk pemilik. Dibuang dari jawaban sebelum dikirim ke pengunjung -
   lihat App\Support\Naskah - jadi gaya ini HANYA pernah terlihat staf yang
   sedang masuk. Sengaja mencolok. */
.pemilik-blok{
  margin:26px 0;border:2.5px dashed var(--aksi);border-radius:18px;
  padding:18px 20px;background:#FFFBF7;
}
.pemilik-blok > :last-child{margin-bottom:0}
.pemilik-tanda{
  margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aksi);
}
.pemilik-blok .seksi,.pemilik-blok .wrap{padding:0}
.pemilik-blok .kartu{border:0;box-shadow:none;padding:0;background:none}

/* Pita "pratinjau" - hanya muncul di halaman pratinjau penyunting situs,
   supaya tab pratinjau yang tertinggal terbuka tidak dikira halaman live. */
.pita-pratinjau{position:sticky;top:0;z-index:130;display:flex;justify-content:center;gap:12px;align-items:center;
  background:repeating-linear-gradient(135deg,var(--kuning-2) 0 14px,var(--kuning-3) 14px 28px);
  color:var(--tinta);font-weight:700;font-size:.9rem;padding:9px 16px;border-bottom:2px solid var(--tinta);text-align:center}

/* ---------- Formulir pendaftaran bertahap ----------

   Tiga langkah - anak, kontak, kelas - hanya kalau JavaScript-nya jalan
   (kelas .bertahap dipasang skrip). Tanpa skrip, ketiga fieldset tampil
   berurutan seperti formulir biasa dan tidak ada yang tersembunyi.

   Di ponsel, tombol Lanjut/Kembali menempel di bawah layar selama formulir
   terlihat: tombol di ujung bawah langkah yang panjang berarti menggulir dulu
   hanya untuk menemukannya. */

.lompat-daftar{margin:14px 0 0}
.lompat-daftar .tombol{gap:7px}

.daftar-langkah{display:flex;gap:6px;list-style:none;margin:0 0 22px;padding:0}
.daftar-langkah li{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;
  background:var(--krem);border:1.5px solid var(--garis);font-weight:600;font-size:.88rem;color:var(--tinta-lembut);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.daftar-langkah-no{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--putih);border:1.5px solid var(--garis-kuat);font-size:.8rem;font-weight:700}
.daftar-langkah li[aria-current="step"]{background:var(--aksi-tipis);border-color:var(--aksi);color:var(--aksi-gelap)}
.daftar-langkah li[aria-current="step"] .daftar-langkah-no{background:var(--aksi);border-color:var(--aksi);color:var(--putih)}
.daftar-langkah li.selesai{color:var(--tinta)}
.daftar-langkah li.selesai .daftar-langkah-no{background:var(--hijau-4);border-color:#5d9c47;color:#25561a;font-size:0}
.daftar-langkah li.selesai .daftar-langkah-no::after{content:"";width:10px;height:6px;border:2.4px solid #25561a;
  border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
@media(max-width:420px){
  .daftar-langkah li{flex-direction:column;gap:4px;padding:8px 6px;text-align:center;font-size:.8rem}
}

/* min-width:0 - fieldset bawaan peramban selebar isi terpanjangnya
   (min-content), dan satu label kursi yang tidak boleh patah sudah cukup
   untuk mendorong seluruh langkah keluar dari layar ponsel. */
.daftar-bagian{margin:0 0 6px;min-width:0}
.daftar-judul{font-family:var(--font-judul);font-size:1.35rem;font-weight:700;color:var(--tinta);margin:0 0 14px;
  scroll-margin-top:calc(var(--tinggi-atas) + 16px)}
.daftar-judul:focus{outline:none}
/* Tanpa skrip, judul tiap bagian membuka bagiannya - garis pemisah halus
   di antara ketiganya supaya tetap terbaca sebagai tiga kelompok isian. */
.daftar-form:not(.bertahap) .daftar-bagian + .daftar-bagian{border-top:1px dashed var(--garis-kuat);padding-top:22px}
.daftar-form.bertahap .daftar-bagian:not(.kini){display:none}

.daftar-nav{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:8px}
.daftar-nav [data-mundur]{padding-left:20px;padding-right:22px}
.daftar-nav [data-maju],.daftar-nav [data-kirim-nav]{margin-left:auto;min-width:150px;white-space:nowrap}
.daftar-nav .ikon-svg{width:1.05em;height:1.05em}
@media(max-width:640px){
  .daftar-nav{position:sticky;bottom:0;z-index:5;margin:8px -20px -26px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--garis);
    border-radius:0 0 var(--radius) var(--radius)}
  .daftar-nav .tombol{padding-top:12px;padding-bottom:12px}
  .daftar-nav [data-maju],.daftar-nav [data-kirim-nav]{flex:1;min-width:0}
}

.daftar-usia-kabar,.daftar-wa-cek{margin:9px 0 0;font-size:.88rem;line-height:1.45;color:var(--tinta-lembut)}
.daftar-wa-cek:empty{display:none}
.daftar-usia-kabar b,.daftar-wa-cek b{color:var(--tinta)}
.daftar-wa-cek.baik{color:#2f6b1f}
.daftar-wa-cek.salah{color:#8E3436;font-weight:600}
.daftar-usia-kabar{padding:10px 14px;border-radius:12px;background:var(--langit-3);border:1px solid var(--biru-4)}

.daftar-sesi-terbawa{margin:-6px 0 18px;padding:10px 14px;border-radius:14px;background:var(--hijau-5);
  border:1px solid var(--hijau-3);font-size:.9rem;color:#25561a}
.daftar-sesi-terbawa b{color:var(--tinta)}

/* Kartu jenis pendaftaran. Bulatan radio tetap terlihat - kartu yang
   menyembunyikannya membuat orang tidak yakin mana yang sudah terpilih. */
.jenis-kartu{display:grid;gap:10px}
.bidang .jenis-pilih{position:relative;display:flex;gap:12px;align-items:flex-start;margin:0;cursor:pointer;
  padding:14px 16px;border-radius:var(--radius-s);border:1.5px solid var(--garis-kuat);background:var(--krem);
  font-weight:400;transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
.jenis-pilih:hover{border-color:var(--pink-1)}
.bidang .jenis-pilih input{width:20px;height:20px;flex:none;margin:3px 0 0;padding:0;accent-color:var(--aksi)}
.jenis-pilih:has(input:checked){border-color:var(--aksi);background:var(--putih);box-shadow:0 0 0 3px rgba(176,58,72,.12)}
.jenis-pilih:has(input:focus-visible){outline:3px solid var(--tinta);outline-offset:2px}
.jenis-isi{display:grid;gap:2px;min-width:0}
.jenis-nama{font-family:var(--font-judul);font-weight:700;font-size:1.08rem;line-height:1.2;color:var(--tinta)}
.jenis-harga{font-weight:700;color:var(--aksi);font-size:1rem}
.jenis-harga small{font-weight:500;color:var(--tinta-lembut);font-size:.82rem}
.jenis-ket{font-size:.86rem;color:var(--tinta-lembut);line-height:1.45}

/* Daftar sesi sebagai kartu yang bisa diketuk. */
.sesi-pilih-daftar{display:grid;gap:8px}
.bidang .sesi-pilih{display:flex;gap:12px;align-items:center;margin:0;cursor:pointer;font-weight:400;
  padding:11px 14px;border-radius:var(--radius-s);border:1.5px solid var(--garis-kuat);background:var(--krem);
  transition:border-color .15s ease,background-color .15s ease}
.sesi-pilih:hover{border-color:var(--pink-1)}
.bidang .sesi-pilih input{width:20px;height:20px;flex:none;margin:0;padding:0;accent-color:var(--aksi)}
.sesi-pilih:has(input:checked){border-color:var(--aksi);background:var(--putih);box-shadow:0 0 0 3px rgba(176,58,72,.12)}
.sesi-pilih:has(input:focus-visible){outline:3px solid var(--tinta);outline-offset:2px}
.sesi-pilih-tgl{flex:none;width:48px;text-align:center;border-radius:12px;padding:5px 0 6px;background:var(--pink-4);line-height:1.05}
.sesi-pilih-tgl small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--aksi)}
.sesi-pilih-tgl b{display:block;font-family:var(--font-judul);font-size:1.3rem;font-weight:800}
.sesi-pilih-tgl span{display:block;font-size:.66rem;color:var(--tinta-lembut)}
.sesi-pilih-isi{display:grid;gap:3px;min-width:0}
.sesi-pilih-isi b{line-height:1.25}
.sesi-pilih-isi .kecil{font-size:.84rem;color:var(--tinta-lembut);line-height:1.4}
.sesi-pilih-isi .kursi{justify-self:start;margin-top:2px;white-space:normal}
.sesi-pilih.keadaan-penuh{opacity:.85}
@media(max-width:420px){
  .bidang .sesi-pilih{gap:10px;padding:10px 12px}
  .sesi-pilih-tgl{width:44px}
  .sesi-pilih-isi .kursi{font-size:.76rem;padding:3px 9px}
}
.bidang .sesi-pilih-bantu{background:var(--putih)}
/* Sesi untuk kelompok usia lain: disembunyikan, bukan dihapus - dan yang
   sudah terpilih tetap terlihat apa pun kelompoknya. */
.sesi-pilih-daftar:not(.semua) .sesi-pilih.lain-kelompok:not(:has(input:checked)){display:none}
.sesi-semua{margin-top:10px;background:none;border:0;padding:4px 0;font:inherit;font-size:.88rem;font-weight:600;
  color:var(--aksi);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* Kedipan saat sesi terpilih dari tombol "Pilih sesi ini" di jadwal. */
.sesi-pilih.berubah{animation:sesi-terpilih 1.4s ease-out}
@media(prefers-reduced-motion:reduce){.sesi-pilih.berubah{animation:none}}

/* Empat sesi yang ada (Kamis/Jumat, pagi/sore) sebagai kotak centang
   berbentuk kartu kecil, dua kolom - jamnya di bawah nama sesinya. Kotak
   centangnya disembunyikan secara visual tapi tetap bisa dijangkau Tab dan
   pembaca layar; tanda fokusnya dipindah ke kartunya. */
.pilihan-waktu > label,.pilihan-waktu > .label-grup{display:block}
.slot-daftar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:440px}
.bidang .slot-cek{position:relative;margin:0;font-weight:500}
.bidang .slot-cek input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;border:0}
.slot-cek span{display:grid;gap:1px;padding:10px 14px 10px 38px;border-radius:var(--radius-s);position:relative;
  border:1.5px solid var(--garis-kuat);background:var(--krem);cursor:pointer;user-select:none;
  transition:background-color .15s ease,border-color .15s ease}
.slot-cek span::before{content:"";position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;
  border-radius:6px;border:1.5px solid var(--garis-kuat);background:var(--putih)}
.slot-cek b{font-size:.95rem;line-height:1.25}
.slot-cek small{font-size:.8rem;color:var(--tinta-lembut);font-variant-numeric:tabular-nums}
.slot-cek span:hover{border-color:var(--pink-1)}
.slot-cek input:checked + span{background:var(--pink-4);border-color:var(--aksi)}
.slot-cek input:checked + span::before{background:var(--aksi);border-color:var(--aksi)}
/* Centang digambar dengan garis, bukan karakter: huruf brand tidak punya
   glyph centang dan cadangannya berbeda di tiap ponsel. */
.slot-cek input:checked + span::after{content:"";position:absolute;left:18px;top:50%;width:6px;height:10px;
  margin-top:-7px;border:solid var(--putih);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
.slot-cek input:checked + span b{color:var(--aksi-gelap)}
.slot-cek input:focus-visible + span{outline:3px solid var(--tinta);outline-offset:2px}

/* Ringkasan sebelum dikirim. */
.daftar-ringkas{margin:6px 0 20px;padding:16px 18px;border-radius:var(--radius-s);background:var(--kuning-5);
  border:1.5px dashed #d9bf55}
.daftar-ringkas h3{margin:0 0 10px;font-size:1.05rem}
.daftar-ringkas dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.92rem}
.daftar-ringkas dt{color:var(--tinta-lembut);white-space:nowrap}
.daftar-ringkas dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.daftar-ringkas dd button{margin-left:6px;background:none;border:0;padding:0;font:inherit;font-size:.82rem;
  font-weight:600;color:var(--aksi);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(max-width:420px){.daftar-ringkas dl{grid-template-columns:1fr;gap:0}.daftar-ringkas dd{margin-bottom:8px}}

@media(prefers-reduced-motion:reduce){
  .daftar-langkah li,.jenis-pilih,.sesi-pilih,.slot-cek span{transition:none}
}

/* ---------- Halaman "formulir terkirim" ---------- */
.terkirim-maskot{display:block;width:133px;height:auto;margin:0 auto 18px}
.terkirim h1{font-size:clamp(1.6rem,6vw,2.3rem)}
.terkirim-lede{font-size:1.06rem;max-width:34em;margin:0 auto}
.terkirim-kode{display:grid;justify-items:center;gap:2px;margin:26px auto 0;max-width:360px;padding:16px 20px;
  border-radius:var(--radius-s);background:var(--putih);border:2px dashed var(--aksi);text-align:center}
.terkirim-kode span{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--aksi)}
.terkirim-kode b{font-family:var(--font-judul);font-size:2.2rem;font-weight:800;letter-spacing:.22em;
  color:var(--tinta);line-height:1.15;padding-left:.22em}
.terkirim-kode small{font-size:.84rem;color:var(--tinta-lembut)}
.terkirim-aksi{justify-content:center;margin-top:22px}
.terkirim-aksi .tombol .ikon-svg{width:1.25em;height:1.25em}
.terkirim-judul{margin:44px 0 16px;font-size:1.4rem}
.terkirim-langkah{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:langkah}
.terkirim-langkah li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius-s);
  background:var(--krem);border:1px solid var(--garis)}
.terkirim-no{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--pink-4);color:var(--aksi)}
.terkirim-no .ikon-svg{width:22px;height:22px}
.terkirim-langkah h3{margin:0 0 4px;font-size:1.05rem}
.terkirim-langkah p{margin:0 0 6px;font-size:.94rem;color:var(--tinta-lembut)}
.terkirim-langkah p:last-child{margin-bottom:0}
.terkirim-langkah .kecil a{display:inline-flex;gap:6px;align-items:center;font-weight:600}
@media(max-width:480px){
  .terkirim-langkah li{padding:16px;gap:12px}
  .terkirim-no{width:38px;height:38px;border-radius:12px}
  .terkirim-aksi .tombol{width:100%}
}