/* =====================================================================
   DASAR REFERENSI · 22 Okt 2026 — lapisan desain dari 7 gambar referensi pemilik.
   Spesifikasi: desain-referensi/SPESIFIKASI.md. Dimuat PALING AKHIR di semua halaman.
   Kartu poster kelas (.kartu-poster, .poster, .hk-poster) SENGAJA tidak diubah: token & huruf lamanya dikunci di bawah.
   Kembalikan: hapus <link> dasar-ref.css (cadangan: _cadangan/redesain-ref-20261022/).
   ===================================================================== */

/* ---------- 0. Token ---------- */
:root {
  --r-putih: #fff;
  --r-kanvas: #f2f2f4;
  --r-kanvas-2: #e8e8eb;
  --r-grafit-0: #0b0b0c;
  --r-grafit-1: #121214;
  --r-grafit-2: #1c1c1e;
  --r-tinta: #0b0b0c;
  --r-teks: #5e5e63;
  --r-teks-2: #6e6e73;
  --r-teks-g: #a1a1a6;
  --r-teks-g2: #98989d;
  --r-garis: #e3e3e7;
  --r-garis-g: rgba(255, 255, 255, .12);
  --r-oranye: #ff6b35;
  --r-oranye-teks: #c2410c;
  --r-rad-panggung: 40px;
  --r-rad-kartu: 28px;
  --r-rad-ubin: 20px;
  --r-rad-ikon: 14px;
  --r-rad-isian: 14px;
  --r-bayang-1: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06);
  --r-bayang-2: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
  --r-bayang-3: 0 2px 6px rgba(0, 0, 0, .05), 0 32px 80px -24px rgba(0, 0, 0, .22);
  --r-bayang-gelap: 0 40px 100px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
  --r-bayang-pil: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .85), 0 8px 18px -6px rgba(0, 0, 0, .4);
  --r-pil-hitam: linear-gradient(180deg, #2c2c2f 0%, #0b0b0c 100%);
  --r-pil-terang: linear-gradient(180deg, #fff 0%, #e9e9ec 100%);
  --r-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --r-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .16 0 0 0 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --r-sorot: radial-gradient(42% 52% at 56% -6%, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 72%);
  /* token lama diselaraskan (dipakai komponen gaya.css) */
  --ink: #0b0b0c;
  --teks: #5e5e63;
  --pudar: #6e6e73;
  --abu: #f2f2f4;
  --abu-2: #e8e8eb;
  --garis: #dcdce0;
  --hitam: #0b0b0c;
  --hitam-2: #121214;
}
/* Kartu poster kelas dikunci: token & huruf seperti sebelum rombakan (keputusan pemilik) */
.kartu-poster, .poster, .hk-poster {
  --ink: #1d1d1f; --teks: #6e6e73; --pudar: #86868b; --abu: #f5f5f7; --abu-2: #e8e8ed; --garis: #d2d2d7;
  font-family: var(--font);
}

/* ---------- 1. Dasar & tipografi ---------- */
body { font-family: var(--r-font); color: var(--r-tinta); letter-spacing: -.011em; }
::selection { background: #0b0b0c; color: #fff; }
:focus-visible { outline: 2px solid var(--r-tinta) !important; outline-offset: 3px; }
.kartu-poster:focus-visible { outline: 3px solid var(--oranye-teks) !important; }   /* seperti aslinya */
[data-gelap] :focus-visible, .r-gelap :focus-visible, .footer :focus-visible { outline-color: #fff !important; }
.r-panggung > .wadah-l :focus-visible { outline-color: var(--r-tinta) !important; }

body .h-hero { font-size: clamp(42px, 6.2vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: 1.0; }
body .h-1 { font-size: clamp(32px, 4.8vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
body .h-2, body .hal-kelas .h-2 { font-size: clamp(26px, 3.4vw, 44px); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; }
body .h-3 { font-weight: 750; letter-spacing: -.03em; }
body .intro { font-size: clamp(17px, 1.55vw, 20px) !important; line-height: 1.5; font-weight: 400; color: var(--r-teks); }
body .intro b { color: var(--r-tinta); font-weight: 650; }
body .badan { color: var(--r-teks); line-height: 1.55; }
/* Label bagian: teks abu kecil dengan titik, bukan pil berwarna */
body .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px !important; font-weight: 600; letter-spacing: -.005em; color: var(--r-teks-2); margin: 0 0 14px; }
body .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
body .tengah .eyebrow, body .tengah > .eyebrow { justify-content: center; }
body .hero .eyebrow { display: none; }

/* ---------- 2. Tombol & tautan ---------- */
body .tombol:not(.kartu-poster *) {
  background: var(--r-pil-hitam); color: #fff; box-shadow: var(--r-bayang-pil);
  font-weight: 650; letter-spacing: -.01em; transition: transform .2s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
body .tombol:not(.kartu-poster *):hover { background: var(--r-pil-hitam); filter: brightness(1.18); }
body .tombol:not(.kartu-poster *):active { transform: scale(.98); }
body .tombol.garis:not(.kartu-poster *), body .tombol.terang:not(.kartu-poster *) {
  background: #fff; color: var(--r-tinta); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--r-bayang-1); filter: none;
}
body .tombol.garis:not(.kartu-poster *):hover { background: var(--r-kanvas); }
/* Tautan bergaris bawah (ref-1) + panah dalam lingkaran abu (ref-3) */
body .tautan:not(.kartu-poster *) {
  color: var(--r-tinta); font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
body .tautan:not(.kartu-poster *)::after {
  content: ""; width: 18px; height: 18px; margin-left: 8px; flex: none; border-radius: 50%; transform: none;
  background: rgba(0, 0, 0, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230b0b0c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h6M9.5 6.5 12 9l-2.5 2.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .25s var(--ease);
}
body .tautan:not(.kartu-poster *):hover { text-decoration-thickness: 2px; }
body .tautan:not(.kartu-poster *):hover::after { transform: translateX(2px); }
.catatan .tautan::after, .pesan .tautan::after { content: none !important; }

/* Konteks gelap: tombol utama jadi pil terang, tautan putih */
.r-gelap .tombol:not(.kartu-poster *), [data-gelap]:not(.r-panggung) .tombol:not(.hk2-kartu *):not(.kartu-poster *), .nav.malam .tombol {
  background: var(--r-pil-terang); color: var(--r-tinta); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 24px -8px rgba(0, 0, 0, .6);
}
.r-gelap .tombol.garis:not(.kartu-poster *), [data-gelap]:not(.r-panggung) .tombol.garis:not(.hk2-kartu *) {
  background: rgba(255, 255, 255, .04); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.r-gelap .tautan:not(.kartu-poster *), [data-gelap]:not(.r-panggung) .tautan:not(.hk2-kartu *):not(.kartu-poster *), .pita .tautan, .footer .tautan { color: #fff; }
.r-gelap .tautan:not(.kartu-poster *)::after, [data-gelap]:not(.r-panggung) .tautan:not(.hk2-kartu *):not(.kartu-poster *)::after, .pita .tautan::after {
  background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9h6M9.5 6.5 12 9l-2.5 2.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- 3. Panggung gelap: grain + sorotan (ref-1, ref-3) ---------- */
.r-gelap, .hero-r, .hk2-hero, .cr-hero, .af-hero, .data-adegan, .akhir, .r-panggung, .pita {
  background-color: var(--r-grafit-0);
}
.hero-r, .hk2-hero, .cr-hero, .af-hero {
  background-image: var(--r-grain), radial-gradient(70% 60% at 82% 0%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #19191b 0%, #0b0b0c 70%);
  color: #f5f5f7;
}
.r-panggung, .akhir, .data-adegan { background-image: var(--r-grain), var(--r-sorot); color: #f5f5f7; }

/* Garis vertikal tipis + titik (ref-1). Titik oranye = aksen merek. */
.r-garis { position: relative; padding-left: 28px; margin-top: 22px; }
.r-garis::before { content: ""; position: absolute; left: 3px; top: 12px; bottom: -36px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.r-garis::after { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--r-oranye); box-shadow: 0 0 0 4px rgba(255, 107, 53, .14); pointer-events: none; }
.r-garis > :first-child { margin-top: 0 !important; }

/* ---------- 4. Nav, menu HP, pita, footer ---------- */
.nav { background: rgba(255, 255, 255, .82) !important; border-bottom-color: rgba(0, 0, 0, .06); }
.nav.malam { background: rgba(11, 11, 12, .78) !important; border-bottom-color: rgba(255, 255, 255, .08); color: #f5f5f7; }
.nav-tautan a, .nav-buka, .nav-masuk { opacity: .78; }
.nav .tombol { padding: 0 16px; }
.nav-panel { background: #fff !important; }
.nav.malam .nav-panel { background: #121214 !important; }
.panel-daftar a { border-radius: var(--r-rad-ubin); }
.panel-daftar a:hover, .panel-daftar a:focus-visible { background: var(--r-kanvas); }
.panel-daftar em { color: var(--r-tinta) !important; }
.nav.malam .panel-daftar em { color: #f5f5f7 !important; }
.nav.malam .panel-daftar a:hover { background: rgba(255, 255, 255, .06); }
.menu-hp { background: rgba(255, 255, 255, .98); }
.menu-hp a.m { font-weight: 750; letter-spacing: -.03em; }
.menu-hp a.m-sub { border-bottom-color: var(--r-garis); }
.menu-hp a.m-sub span { color: var(--r-teks) !important; }
.menu-hp .m-label { color: var(--r-teks-2); }

.pita { margin-top: 0; padding: calc(var(--nav) + 12px) var(--gutter) 12px; background-image: none; color: var(--r-teks-g); border-bottom: 1px solid rgba(255, 255, 255, .06); }

.footer { background: var(--r-grafit-0); color: var(--r-teks-g); border-top: 1px solid rgba(255, 255, 255, .06); padding: 40px 0 36px; }
.footer .logo, .footer h4, .footer h3 { color: #f5f5f7; }
.footer .merek > span { color: var(--r-oranye); }
.footer a:hover { color: #fff; }
.footer .catatan-kaki, .footer-kolom { border-color: rgba(255, 255, 255, .1); }
.footer-tagline, .footer ul.tautan-footer a, .footer-bawah span { color: var(--r-teks-g); }
.footer-bawah a { color: #d2d2d7; }
.footer ul.tautan-footer { gap: 0; }
.footer ul.tautan-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 5. Beranda ---------- */
/* Hero gelap dua kolom (ref-1 + ref-2) */
.hero.hero-r { padding: clamp(48px, 6vw, 88px) 0 0; text-align: left; position: relative; overflow: hidden; }
.hero-tata { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.hero-r .h-hero { font-size: clamp(42px, 5.4vw, 76px); }
.hero-r .h-hero { color: #fff; text-wrap: balance; }
.hero-r .h-hero .aksen { color: #fff !important; }
body .hero-r .sub-besar { color: var(--r-teks-g) !important; font-size: clamp(20px, 2vw, 26px) !important; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; margin: 18px 0 0; }
body .hero-r .badan { margin: 0; max-width: 30em; color: var(--r-teks-g); font-size: 17px !important; }
.hero-r .aksi { justify-content: flex-start; margin-top: 24px; gap: 14px 26px; }
.hero-r .kecil { color: var(--r-teks-g2); }
.hero-r .hero-foto-gambar { width: auto; margin: 0; padding: 0; }
.hero-r .bingkai-hero { border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-gelap); background-color: #e9e8eb !important; transform: none !important; }
.hero-r .keterangan-foto { color: var(--r-teks-g2); text-align: left; margin-top: 14px; }
.hero-r .alat-kelas { padding-bottom: clamp(56px, 7vw, 88px); border-top: 1px solid rgba(255, 255, 255, .08); padding-top: clamp(40px, 5vw, 56px); margin-top: clamp(48px, 6vw, 80px); width: min(1080px, 100% - 2 * var(--gutter)); padding-left: 0; padding-right: 0; }
.hero-r .alat-judul { color: var(--r-teks-g); }
.hero-r .alat-daftar li { color: #d2d2d7; }
.hero-r .alat-daftar li:hover { color: #fff; }
.hero-r .alat-daftar span { color: var(--r-teks-g2); }

/* Data: angka besar tipis (ref-3) */
.data-adegan .eyebrow { color: var(--r-teks-g) !important; }
.data-angka { font-weight: 400 !important; letter-spacing: -.055em; color: #fff !important; }
.data-ket { font-weight: 650; letter-spacing: -.025em; }
.data-arti, .data-sumber { color: var(--r-teks-g); }
.data-titik i { background: #3a3a3d; }
.data-titik i.aktif { background: var(--r-oranye) !important; }
.data-penutup .h-1 { color: #fff; }

/* Panggung gelap berisi kartu putih radius besar (ref-3) */
.r-panggung { padding: clamp(56px, 7vw, 112px) 0; }
.r-panggung > .wadah-l {
  position: relative; background: #fff; color: var(--r-tinta); border-radius: var(--r-rad-panggung);
  padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px); box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .8);
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--lebar-l) + var(--gutter) * 2);
}
/* Kegunaan AI di dalam kartu putih: ubin lembut abu, ikon dalam ubin putih berbayang (ref-4, ref-7) */
#kenapa .bento-ai { gap: 12px !important; }
#kenapa .ubin-ai, #kenapa .ubin-ai.u-0, #kenapa .ubin-ai.u-1, #kenapa .ubin-ai.u-2, #kenapa .ubin-ai.u-3, #kenapa .ubin-ai.u-4 {
  --bg-ubin: var(--r-kanvas) !important; background: linear-gradient(180deg, #f6f6f7 0%, #efeff2 100%) !important; color: var(--r-tinta) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, .03) !important; border-radius: var(--r-rad-ubin) !important;
}
#kenapa .ubin-ai h3 { color: var(--r-tinta) !important; font-weight: 750; letter-spacing: -.025em; }
#kenapa .ubin-ai p { color: var(--r-teks) !important; }
#kenapa .ubin-ai .ubin-ikon { background: linear-gradient(180deg, #fff 0%, #f4f4f6 100%) !important; color: var(--r-tinta) !important; box-shadow: var(--r-bayang-1); border-radius: var(--r-rad-ikon) !important; width: 42px; height: 42px; }
#kenapa .keuntungan-label { color: var(--r-teks-2) !important; font-weight: 650; }
#kenapa .kerja-penutup { color: var(--r-tinta); }

/* Narasi */
.narasi { background: var(--r-kanvas); }

/* Keunggulan: foto mengambang + timeline (ref-4) */
.unggul-media { border-radius: 32px !important; box-shadow: var(--r-bayang-3) !important; }
#keunggulan .unggul-daftar { counter-reset: unggul; position: relative; display: grid; gap: 6px; }
#keunggulan .unggul-daftar::before { content: ""; position: absolute; left: 41px; top: 48px; bottom: 48px; width: 1px; background: var(--r-garis); }
#keunggulan .unggul-daftar li { counter-increment: unggul; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding: 22px 18px; border: 0; border-radius: var(--r-rad-ubin); }
#keunggulan .unggul-daftar li:first-child { padding-top: 22px; background: var(--r-kanvas); }
#keunggulan .unggul-daftar li::before {
  content: counter(unggul, decimal-leading-zero); grid-row: 1 / span 3; position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-rad-ikon); background: linear-gradient(180deg, #fff 0%, #f4f4f6 100%); box-shadow: var(--r-bayang-1); font-size: 15px; font-weight: 750; color: var(--r-tinta); font-variant-numeric: tabular-nums;
}
#keunggulan .unggul-daftar li:first-child::before { background: var(--r-pil-hitam); color: #fff; box-shadow: var(--r-bayang-pil); }
#keunggulan .unggul-daftar h3 { font-size: clamp(20px, 2vw, 24px) !important; letter-spacing: -.03em; line-height: 1.2; margin-top: 2px; }
#keunggulan .unggul-daftar p { margin-top: 8px; }

/* Daftar kelas: panggung gelap + kartu putih; kartu poster di dalamnya tidak diubah */
#pilih-kelas > .wadah-l { padding-bottom: clamp(48px, 6vw, 88px); }

/* Pengajar: kartu putih mengambang (ref-6) */
.mentor-grid.dua .mentor { background: #fff; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2); }
.mentor-grid.dua .mentor .foto { box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--r-garis), var(--r-bayang-3) !important; }
.mentor .peran, .mentor-grid.dua .mentor .peran { color: var(--r-teks) !important; font-size: 15px !important; }
.hal-kelas .seksi:not(.abu) .mentor-grid.dua .mentor { background: #fff; }

/* Testimoni: ubin abu muda (ref-3) */
#testimoni .testi { background: var(--r-kanvas); border-radius: 24px !important; box-shadow: none; }
#testimoni .testi blockquote { color: var(--r-tinta); }

/* Penutup gelap */
.akhir { text-align: center; }
.akhir .h-1 { color: #fff !important; }
.akhir .intro { color: var(--r-teks-g) !important; }

/* ---------- 6. Carousel (ref-3): tombol bulat hitam + titik paginasi ---------- */
.galeri-kontrol { justify-content: center; gap: 16px; margin-top: 24px; }
.galeri-kontrol button, .seksi.abu .galeri-kontrol button {
  width: 44px; height: 44px; border-radius: 50%; background: var(--r-pil-hitam) !important; color: #fff; box-shadow: var(--r-bayang-pil);
  font-size: 22px !important; line-height: 1; padding-bottom: 3px;
}
.galeri-kontrol button:hover { filter: brightness(1.2); }
.galeri-kontrol button:disabled { opacity: .28; }
.galeri-titik { display: inline-flex; align-items: center; gap: 6px; }
.galeri-titik i { width: 6px; height: 6px; border-radius: 999px; background: #c7c7cc; transition: width .3s var(--ease), background .3s var(--ease); }
.galeri-titik i.aktif { width: 22px; background: var(--r-tinta); }
.rel-wa img, .rel-wa figure img { border-radius: var(--r-rad-ubin) !important; box-shadow: var(--r-bayang-2) !important; }
.rel-wa { padding-bottom: 44px; }
.bingkai-klip, div.bingkai-klip { border-radius: var(--r-rad-ubin) !important; box-shadow: var(--r-bayang-3); }
.jeda-video { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--r-bayang-1); background: #fff; }

/* ---------- 7. FAQ: kartu (ref-6), tombol buka kotak grafit ---------- */
.tanya-jawab { display: grid; gap: 10px; }
.tanya-jawab details { border: 0; border-radius: var(--r-rad-ubin); background: var(--r-kanvas); padding: 0 20px; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.seksi.abu .tanya-jawab details { background: #fff; box-shadow: var(--r-bayang-2); }
.tanya-jawab details[open] { background: #fff; box-shadow: var(--r-bayang-2), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.tanya-jawab summary { padding: 18px 0; min-height: 64px; font-weight: 650; letter-spacing: -.02em; gap: 16px; }
.tanya-jawab summary::after {
  flex: none; width: 32px !important; height: 32px !important; margin: 0 !important; border: 0 !important; border-radius: 10px;
  transform: none !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 14 5 5 5-5'/%3E%3C/svg%3E") center / 32px no-repeat, var(--r-pil-hitam);
  box-shadow: var(--r-bayang-pil); transition: transform .3s var(--ease) !important;
}
.tanya-jawab details[open] summary::after { transform: rotate(180deg) !important; }
.tanya-jawab details p { margin: -2px 0 20px; color: var(--r-teks); }
.faq h3 { color: var(--r-teks-2); }

/* ---------- 8. Ubin ikon (ref-4) ---------- */
.r-ubin-ikon, .ct-ikon, .ct-materi-ikon, .cr-warna-ikon, .ct-alir-logo {
  background: linear-gradient(180deg, #fff 0%, #f1f1f3 100%) !important; color: var(--r-tinta) !important; box-shadow: var(--r-bayang-1) !important; border-radius: var(--r-rad-ikon) !important;
}

/* ---------- 9. Timeline (ref-4): langkah creator, affiliate, corporate, akun ---------- */
.cr-langkah, .af-langkah, .ct-alur, .ak-langkah {
  position: relative; list-style: none; padding: 0; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important;
  max-width: 920px; margin-left: auto; margin-right: auto;
}
.cr-langkah::before, .af-langkah::before, .ct-alur::before, .ak-langkah::before {
  content: "" !important; display: block !important; position: absolute; left: 41px; top: 44px; bottom: 44px; right: auto; width: 1px; height: auto; background: var(--r-garis) !important; transform: none !important;
}
.ct-alur::after { display: none !important; }
.cr-langkah > li, .af-langkah > li, .ct-alur > li, .ak-langkah > li {
  position: relative; overflow: visible !important; grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-content: start;
  min-height: 0 !important; padding: 20px 18px !important; border-radius: var(--r-rad-ubin) !important; background: transparent !important; box-shadow: none !important; color: var(--r-tinta) !important;
}
.cr-langkah > li > :not(.cr-no), .af-langkah > li > :not(.af-no), .ct-alur > li > :not(.ct-no), .ak-langkah > li > :not(.ak-no) { grid-column: 2; }
.cr-langkah > li:first-child, .af-langkah > li:first-child, .ct-alur > li:first-child, .ak-langkah > li:first-child { background: var(--r-kanvas) !important; }
.seksi.abu .cr-langkah > li:first-child, .seksi.abu .af-langkah > li:first-child, .seksi.abu .ct-alur > li:first-child, .ct-seksi.abu .ct-alur > li:first-child, .akun-badan .ak-langkah > li:first-child { background: #fff !important; box-shadow: var(--r-bayang-2) !important; }
.cr-no, .af-no, .ct-no, .ak-no {
  position: relative !important; inset: auto !important; z-index: 1; grid-column: 1; grid-row: 1 / span 4; display: grid !important; place-items: center; width: 48px !important; height: 48px !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important; border-radius: var(--r-rad-ikon) !important; background: linear-gradient(180deg, #fff 0%, #f1f1f3 100%) !important; color: var(--r-tinta) !important;
  box-shadow: var(--r-bayang-1) !important; font-size: 15px !important; font-weight: 750 !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
li:first-child > .cr-no, li:first-child > .af-no, li:first-child > .ct-no, li:first-child > .ak-no { background: var(--r-pil-hitam) !important; color: #fff !important; box-shadow: var(--r-bayang-pil) !important; }
.cr-langkah h3, .af-langkah h3, .ct-alur h3, .ak-langkah h3 { margin: 4px 0 0 !important; font-size: clamp(18px, 1.7vw, 21px) !important; font-weight: 750 !important; letter-spacing: -.025em; line-height: 1.25; color: var(--r-tinta) !important; }
.cr-langkah p, .af-langkah p, .ct-alur p, .ak-langkah p { margin: 0 !important; font-size: 15px !important; line-height: 1.5; color: var(--r-teks) !important; max-width: 36em; }
.ak-langkah .tautan { justify-self: start; margin-top: 6px !important; }
/* Desktop: rel di tengah, langkah selang-seling (ref-4) */
@media (min-width: 900px) {
  .cr-langkah::before, .af-langkah::before, .ct-alur::before { left: 50%; }
  .cr-langkah > li, .af-langkah > li, .ct-alur > li { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); column-gap: 24px; padding: 22px 28px !important; }
  .cr-langkah > li > .cr-no, .af-langkah > li > .af-no, .ct-alur > li > .ct-no { grid-column: 2; justify-self: center; }
  .cr-langkah > li:nth-child(odd) > :not(.cr-no), .af-langkah > li:nth-child(odd) > :not(.af-no), .ct-alur > li:nth-child(odd) > :not(.ct-no) { grid-column: 3; text-align: left; }
  .cr-langkah > li:nth-child(even) > :not(.cr-no), .af-langkah > li:nth-child(even) > :not(.af-no), .ct-alur > li:nth-child(even) > :not(.ct-no) { grid-column: 1; text-align: right; justify-self: end; }
  .cr-langkah > li > h3, .af-langkah > li > h3, .ct-alur > li > h3 { grid-row: 1; }
  .cr-langkah > li > p, .af-langkah > li > p, .ct-alur > li > p { grid-row: 2; }
}

/* ---------- 10. Segmented control (ref-5) ---------- */
.cr-pil-grup, .af-pil-grup, .ak-pil {
  display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; padding: 5px; border-radius: 26px; background: #fff; box-shadow: var(--r-bayang-2), inset 0 0 0 1px rgba(0, 0, 0, .04); max-width: 100%;
}
.cr-pil span, .af-pil span, .ak-pil-satu span, .seksi.abu .af-kal-isi .af-pil span {
  min-height: 44px; padding: 0 16px; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--r-teks) !important; font-weight: 600;
}
.cr-pil span:hover, .af-pil span:hover, .ak-pil-satu span:hover { color: var(--r-tinta) !important; }
.cr-pil input:checked + span, .af-pil input:checked + span, .ak-pil-satu input:checked + span, .seksi.abu .af-kal-isi .af-pil input:checked + span {
  background: var(--r-pil-hitam) !important; color: #fff !important; box-shadow: var(--r-bayang-pil) !important;
}
.af-pil input:checked + span small { color: #c7c7cc !important; }
.cr-pil input:focus-visible + span, .af-pil input:focus-visible + span, .ak-pil-satu input:focus-visible + span { outline: 2px solid var(--r-tinta) !important; outline-offset: 2px; }

/* ---------- 11. Centang hitam (ref-5) ---------- */
.cr-kolom .cr-centang input[type=checkbox], .af-centang input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px !important; height: 24px !important; margin: 0 !important; border-radius: 8px; cursor: pointer;
  background: var(--r-kanvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3L17 9'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1) !important; transition: background-color .2s var(--ease);
}
.cr-kolom .cr-centang input[type=checkbox]:checked, .af-centang input[type=checkbox]:checked {
  background: #0b0b0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3L17 9'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: var(--r-bayang-pil) !important;
}
.cr-kolom .cr-centang input[aria-invalid="true"] { outline: 2px solid #b42318 !important; outline-offset: 2px; }

/* ---------- 12. Isian abu muda (ref-6) ---------- */
.isian, .cr-kolom input:not([type=checkbox]), .cr-kolom textarea, .af-isian, .af-link input, .cr-rp {
  background: var(--r-kanvas) !important; border: 0 !important; border-radius: var(--r-rad-isian) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04) !important; color: var(--r-tinta);
}
.isian, .af-isian { height: 52px; }
.cr-kolom input:not([type=checkbox]), .af-isian, .isian { font-size: 17px; }
.isian:focus, .cr-kolom input:not([type=checkbox]):focus, .cr-kolom textarea:focus, .af-isian:focus, .af-link input:focus, .cr-rp:focus-within {
  background: #fff !important; box-shadow: inset 0 0 0 2px var(--r-tinta), var(--r-bayang-1) !important; outline: none;
}
.cr-kolom [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b42318 !important; }
.isian::placeholder, .cr-kolom input::placeholder, .cr-kolom textarea::placeholder, .af-isian::placeholder { color: #8a8a8f; }

/* ---------- 13. Halaman kelas /kelas/<nama>/ ---------- */
.hero-gelap main, .hal-kelas.hero-gelap main { padding-top: 0 !important; }
.hk2-hero { padding: calc(var(--nav) + clamp(20px, 3vw, 36px)) 0 clamp(64px, 8vw, 104px) !important; }
.hk2-hero .hk2-kembali { color: var(--r-teks-g); }
.hk2-hero .hk2-kembali:hover { color: #fff; }
.hk2-chips { gap: 0 !important; align-items: center; }
.hk2-chip, .hk2-chip.utama { padding: 0 !important; background: none !important; box-shadow: none !important; color: var(--r-teks-g) !important; font-size: 14px !important; font-weight: 600; border-radius: 0; }
.hk2-chip + .hk2-chip::before { content: "·"; margin: 0 9px; color: var(--r-teks-g2); }
.hk2-judul { color: #fff; font-weight: 800 !important; letter-spacing: -.045em; }
.hk2-hero .r-garis { margin-top: 22px; }
.hk2-hero .r-garis::before { bottom: -18px; }
.hk2-tagline { margin-top: 0 !important; color: #e8e8ed !important; }
.hk2-pengajar b { color: #fff; }
.hk2-pengajar small { color: var(--r-teks-g); }
.hk2-foto img, .hk2-avatar-c { box-shadow: 0 0 0 2px var(--r-grafit-0); }
.hk2-avatar-c { background: #fff; color: var(--r-tinta); }
.hk2-pils { gap: 10px 20px !important; margin-top: 24px; }
.hk2-pil, .hk2-alat { padding: 0 !important; background: none !important; box-shadow: none !important; color: #d2d2d7 !important; font-size: 15px; font-weight: 500; border-radius: 0; }
.hk2-pil .ik { color: #fff !important; }
.hk2-alat::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--r-teks-g2); margin-right: 2px; }
.hk2-hasil-label { color: var(--r-teks-g) !important; }
.hk2-klip img, .hk2-klip video { border-radius: 18px !important; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08) !important; background: #1c1c1e !important; }
.hk2-hero .hk2-klip figcaption, .hk2-hero .hk2-klip figcaption a { color: var(--r-teks-g) !important; }
.hk2-hasil-kartu .hk2-klip img { background: #f5f5f7 !important; border-radius: 20px !important; }
.hk2-deskripsi { color: var(--r-teks-g) !important; }
.hk2-kartu, aside.hk2-kartu { background: #fff; color: var(--r-tinta); box-shadow: var(--r-bayang-gelap) !important; }
.hk2-kartu .hk2-hasil { background: var(--r-kanvas); border-radius: var(--r-rad-ikon) !important; }
.hk2-kartu .hk2-hasil span, .hk2-harga-sub, .hk2-mikro { color: var(--r-teks-2); }
.hk2-kartu .hk2-info-biaya { background: var(--r-kanvas) !important; color: var(--r-tinta) !important; border-radius: 12px !important; }
.hk2-kartu .hk2-harga { font-weight: 800; letter-spacing: -.045em; }
/* Untuk siapa / yang dikuasai: ubin putih lembut (ref-7) */
.hk2-dua .h-2 { font-weight: 800; }
.hk2-cocok li, .hk2-kuasai li, .seksi:not(.abu) .hk2-cocok li, .seksi:not(.abu) .hk2-kuasai li {
  background: #fff !important; border-radius: 16px !important; box-shadow: var(--r-bayang-1), inset 0 0 0 1px rgba(255, 255, 255, .8) !important; align-items: center; padding: 12px 16px 12px 12px;
}
.hk2-cocok .ik, .hk2-kuasai .ik { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--r-kanvas); color: var(--r-tinta) !important; margin-top: 0; font-size: 18px; }
/* Kurikulum: kartu modul mengambang */
.hk2-modul, div.hk2-modul { background: #fff; border-radius: 24px !important; box-shadow: var(--r-bayang-2), inset 0 0 0 1px rgba(0, 0, 0, .04) !important; }
.hk2-m-kepala { background: #fff; padding: 18px 20px; border-bottom: 1px solid var(--r-garis); }
.hk2-m-no { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--r-kanvas); color: var(--r-tinta) !important; font-size: 14px; }
.hk2-modul li { border-top-color: var(--r-garis); }
.hk2-modul li:first-child { border-top: 0; }
.hk2-modul li .ik { color: #9a9aa0; }
.hk2-modul li.gratis .ik { color: var(--r-tinta) !important; }
.hk2-gratis, span.hk2-gratis { padding: 0 !important; background: none !important; color: var(--r-tinta) !important; font-size: 14px !important; font-weight: 700; border-radius: 0; }
.hk2-kur-kiri .eyebrow { margin-bottom: 14px; }
/* Bar beli menempel: kaca putih, pil hitam */
.bar-beli { box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .18); }
.bar-beli .tombol { background: var(--r-pil-hitam) !important; color: #fff !important; box-shadow: var(--r-bayang-pil) !important; }
.bar-beli-teks span { color: var(--r-teks-2); }
/* dua bagian bertetangga tanpa jarak ganda: jaga jarak untuk kartu FAQ */
.hal-kelas #faq { padding-top: clamp(80px, 10vw, 140px) !important; }

/* ---------- 14. Katalog & Layanan ---------- */
.hk-katalog.r-panggung { padding-top: calc(var(--nav) + clamp(16px, 3vw, 40px)) !important; }
.hal-kelas:not(.hero-gelap) .hk-katalog { background: var(--r-kanvas); }
.segera-daftar li, .segera-daftar > li { background: var(--r-kanvas); box-shadow: none !important; border-radius: var(--r-rad-ubin) !important; }
.seksi.abu .segera-daftar > li { background: #fff; box-shadow: var(--r-bayang-2) !important; }
.segera-chip { padding: 0 !important; background: none !important; color: var(--r-teks-2) !important; font-size: 14px !important; font-weight: 650; letter-spacing: .01em; border-radius: 0; }
.segera-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 2px; }
/* /layanan/: daftar di kartu putih mengambang di atas kanvas */
#layanan .grid-layanan { background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); padding: 8px clamp(20px, 3vw, 36px) !important; column-gap: 48px !important; }
#layanan .grid-layanan + .grid-layanan { margin-top: 16px !important; }
#layanan .grid-layanan .kartu-layanan { border-top-color: var(--r-garis) !important; }
#layanan .grid-layanan > .kartu-layanan:nth-child(-n+2) { border-top-color: transparent !important; }
@media (max-width: 734px) { #layanan .grid-layanan > .kartu-layanan:nth-child(2) { border-top-color: var(--r-garis) !important; } }
#layanan .grid-layanan .kartu-layanan:hover h3 { color: var(--r-tinta) !important; text-decoration: underline; text-underline-offset: 4px; }
#layanan .segera-daftar > li { background: #fff; box-shadow: var(--r-bayang-2) !important; }
.layanan-label { color: var(--r-teks-2); }

/* ---------- 15. Creator ---------- */
.cr-hero { padding: calc(var(--nav) + clamp(40px, 6vw, 88px)) 0 clamp(64px, 8vw, 112px) !important; }
.cr-hero .eyebrow, .af-hero .eyebrow { color: var(--r-teks-g); }
.cr-hero .h-1, .af-hero .h-1 { color: #fff; }
.cr-hero .intro, .af-hero .intro { color: var(--r-teks-g) !important; margin-top: 0; }
.cr-hero .intro b, .af-hero .intro b { color: #fff; }
.cr-hero .aksi, .af-hero .aksi { margin-top: 24px; }
.cr-hero-poin li, .af-poin li { color: #e8e8ed; }
.cr-hero-poin .ik, .af-poin .ik { background: #fff !important; color: var(--r-tinta) !important; }
/* kartu contoh hitungan: poster tetap, bagian data jadi putih (ref-3) */
.cr-hero-kartu, .af-kartu { background: #fff !important; color: var(--r-tinta) !important; box-shadow: var(--r-bayang-gelap) !important; border-radius: var(--r-rad-kartu) !important; }
.cr-hero-data, .af-kartu-data { border-top: 0 !important; }
.cr-hero-contoh, .af-kartu .af-kecil-terang { color: var(--r-teks-2) !important; }
.cr-hero-angka, .af-kartu .af-angka-besar { color: var(--r-tinta) !important; }
.cr-hero-angka span, .af-kartu .af-angka-besar span { color: var(--r-teks) !important; }
.cr-rumus, .af-rumus { border-top-color: var(--r-garis) !important; }
.cr-rumus li, .af-rumus li { border-bottom-color: var(--r-garis) !important; }
.cr-op, .af-rumus .op { color: var(--r-teks-2) !important; }
.cr-suku b, .af-rumus .suku b { color: var(--r-tinta) !important; }
.cr-suku small, .af-rumus .suku small { color: var(--r-teks-2) !important; }
.cr-nilai, .af-rumus .nilai { color: var(--r-teks) !important; }
.cr-rumus li.ujung b, .cr-rumus li.ujung .cr-nilai, .af-rumus li.ujung b, .af-rumus li.ujung .nilai { color: var(--r-tinta) !important; font-weight: 800 !important; }
.cr-hero-tautan { margin-top: 16px !important; margin-bottom: -11px !important; color: var(--r-tinta) !important; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
/* kartu "Siapa yang cocok" & "Yang kami siapkan": kartu putih/abu mengambang (ref-6), ikon dalam ubin (ref-4) */
.cr-warna, .cr-warna.v-grafit, .cr-warna.v-oranye, .cr-warna.v-malam, .cr-warna.v-abu, .cr-warna.v-terang {
  background: var(--r-kanvas) !important; color: var(--r-tinta) !important; border-radius: var(--r-rad-kartu) !important; box-shadow: none;
}
.seksi.abu .cr-warna { background: #fff !important; box-shadow: var(--r-bayang-2); }
.cr-warna p, .cr-warna.v-oranye p { color: var(--r-teks) !important; }
.cr-warna-no, .cr-warna.v-abu .cr-warna-no, .cr-warna.v-terang .cr-warna-no { padding: 0 !important; background: none !important; box-shadow: none !important; color: var(--r-teks-2) !important; font-size: 15px !important; font-weight: 700; top: 30px !important; left: 26px !important; }
.cr-warna-ikon, .cr-warna.v-abu .cr-warna-ikon, .cr-warna.v-terang .cr-warna-ikon { width: 48px !important; height: 48px !important; }
/* kalkulator: kartu putih + panel grafit */
#hitung { background: var(--r-kanvas); }
.cr-kal-isi, .af-kal-isi, .seksi.abu .af-kal-isi { background: #fff !important; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2); }
.cr-rp { height: 60px; }
.cr-banding ul, .cr-banding li { border-color: var(--r-garis) !important; }
.cr-kal-hasil, .af-kal-hasil {
  background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%) !important;
  border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-3);
}
.cr-rincian tr.total td, .af-rincian tr.total td { color: #fff !important; }
.af-banding li.pilih b { color: var(--r-tinta) !important; }
/* ketentuan creator */
.cr-asli { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), var(--r-sorot) !important; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-3); }
.cr-asli .poster-lencana { position: absolute; padding: 0 !important; background: none !important; color: var(--r-teks-g) !important; font-size: 14px !important; font-weight: 600; letter-spacing: 0; }
.cr-asli .poster-ikon { background: linear-gradient(180deg, #fff 0%, #ececef 100%) !important; color: var(--r-tinta) !important; border-radius: var(--r-rad-ikon) !important; }
.cr-asli-chip { gap: 10px 22px !important; }
.cr-asli-chip li { padding: 0 !important; background: none !important; color: #e8e8ed !important; border-radius: 0; }
.cr-asli-chip .ik { width: 24px; height: 24px; padding: 5px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #fff !important; }
.cr-aturan li { border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2); }
.cr-aturan .cr-no { grid-row: auto; }
.cr-aturan li:first-child .cr-no { background: linear-gradient(180deg, #fff 0%, #f1f1f3 100%) !important; color: var(--r-tinta) !important; box-shadow: var(--r-bayang-1) !important; }
.cr-form, .seksi.abu .cr-form { background: #fff !important; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2); }
.cr-setuju { background: var(--r-kanvas) !important; border-radius: var(--r-rad-ubin) !important; }
.cr-status.ok::before { background: var(--r-tinta) !important; }

/* ---------- 16. Affiliate (publik + dasbor) ---------- */
.af-hero { padding: calc(var(--nav) + clamp(40px, 6vw, 88px)) 0 clamp(64px, 8vw, 112px) !important; }
.af-catatan-kotak, .seksi:not(.abu) .af-catatan-kotak { background: #fff !important; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2) !important; }
.af-aturan > li { border-bottom-color: var(--r-garis); }
.af-aturan > li::before { display: grid; place-items: center; width: 40px; height: 40px; padding: 0 !important; border-radius: 12px; background: var(--r-kanvas); color: var(--r-tinta) !important; font-size: 14px !important; font-weight: 750 !important; }
.af-aturan > li { grid-template-columns: 40px minmax(0, 1fr) !important; column-gap: 18px !important; }
.af-cta, .af-cta.af-grafit { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), var(--r-sorot) !important; border-radius: var(--r-rad-panggung) !important; box-shadow: var(--r-bayang-3); }
.af-cta .tombol.terang { background: var(--r-pil-terang) !important; }
.af-cta .tautan-terang { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; font-weight: 650; }
/* dasbor */
.af-kode-kartu, .af-kode-kartu.af-grafit { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), radial-gradient(70% 70% at 100% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%) !important; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-3); }
.af-tombol-terang { background: var(--r-pil-terang); box-shadow: inset 0 1px 0 #fff, 0 8px 20px -8px rgba(0, 0, 0, .6); }
.af-chip, .af-chip.aktif, .af-chip.tertunda, .af-chip.siap, .af-chip.dibayar, .af-chip.batal, .af-chip.dihentikan { box-shadow: none !important; }
.af-chip.siap { background: var(--r-tinta); color: #fff; }
.af-chip.dibayar { background: var(--r-kanvas); }
.af-ubin > div { background: var(--r-kanvas); border-radius: var(--r-rad-ubin); }
.af-ubin > div.gelap { background-color: var(--r-grafit-0); background-image: var(--r-grain), var(--r-sorot); }
.af-ubin > div.gelap .nilai { color: #fff !important; }
.af-progres i { background: #fff !important; }
.af-link { box-shadow: var(--r-bayang-2) !important; background: #fff; border-radius: var(--r-rad-kartu) !important; }
.af-link li { border-top-color: var(--r-garis); }
.af-salin { background: var(--r-pil-hitam) !important; box-shadow: var(--r-bayang-pil); }
.af-salin.ok { background: var(--r-pil-hitam) !important; }
.af-form { background: #fff !important; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2) !important; }
.af-form.dalam .af-isian { background: var(--r-kanvas) !important; }
.af-rek, .af-kosong { background: var(--r-kanvas); border-radius: var(--r-rad-ubin); }
.af-ringkas-aturan .ik { background: var(--r-tinta) !important; }
.af-tombol-garis { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--r-bayang-1); background: #fff; }

/* ---------- 17. Corporate ---------- */
.hal-korporat main.ct { font-family: var(--r-font); }
.ct-hero { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), radial-gradient(70% 60% at 82% 0%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #19191b 0%, #0b0b0c 70%) !important; }
.ct-hero::before { display: none; }
.ct-hero .r-garis { margin-top: 26px; }
.ct-hero .r-garis::before { bottom: 6px; }
.ct-hero-sub { margin-top: 0 !important; }
/* ringkasan di hero: kartu putih di atas latar gelap (ref-3) */
.ct-ringkas { background: #fff !important; color: var(--r-tinta); border: 0 !important; box-shadow: var(--r-bayang-gelap) !important; border-radius: var(--r-rad-kartu) !important; }
.ct-ringkas-kepala .merek { color: var(--r-tinta) !important; }
.ct-ringkas-kepala .merek > span { color: var(--r-oranye-teks) !important; }
.ct-ringkas-judul { color: var(--r-tinta) !important; }
.ct-ringkas-daftar { border-top-color: var(--r-garis) !important; }
.ct-ringkas-daftar > div { border-bottom-color: var(--r-garis) !important; }
.ct-ringkas-daftar dt { color: var(--r-teks) !important; }
.ct-ringkas-daftar dd { color: var(--r-tinta) !important; }
.ct-ringkas .ct-pil.putih { background: var(--r-pil-hitam) !important; color: #fff !important; box-shadow: var(--r-bayang-pil); }
.ct-ringkas-surel { color: var(--r-teks) !important; }
.ct-ringkas-surel:hover { color: var(--r-tinta) !important; }
.ct-pil.putih { background: var(--r-pil-terang); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -8px rgba(0, 0, 0, .6); }
.ct-pil.hitam { background: var(--r-pil-hitam); box-shadow: var(--r-bayang-pil); }
.ct-hero-foto img { box-shadow: var(--r-bayang-gelap); }
.ct-materi { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), var(--r-sorot) !important; }
.ct-materi::before, .ct-materi::after { display: none !important; }
.ct-materi-kartu { border-radius: var(--r-rad-kartu) !important; }
.ct-divisi { gap: 12px !important; background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.ct-divisi li { background: var(--r-kanvas) !important; border-radius: var(--r-rad-ubin); }
.ct-seksi.abu .ct-divisi li { background: #fff !important; box-shadow: var(--r-bayang-2); }
.ct-divisi .ct-ikon { margin-bottom: 18px; }
.ct-banding { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), var(--r-sorot); }
.ct-kolom.sesudah { box-shadow: var(--r-bayang-3); }
.ct-orang, .ct-kutip, .ct-paket, .ct-alir-wadah, .ct-divisi-kartu { border-radius: var(--r-rad-kartu) !important; }
.ct-seksi.abu .ct-orang, .ct-kai .ct-alir-wadah, .ct-kai .ct-divisi-kartu { box-shadow: var(--r-bayang-2) !important; }
.ct-kutip { background: var(--r-kanvas); }
.ct-kutip.besar { background-color: var(--r-grafit-0); background-image: var(--r-grain), var(--r-sorot); }
.ct-faq-item button[aria-expanded="true"] .ct-plus { background: var(--r-pil-hitam); box-shadow: var(--r-bayang-pil); }
.ct-akhir { background-color: var(--r-grafit-0) !important; background-image: var(--r-grain), var(--r-sorot) !important; }
.ct-akhir::before { display: none; }
.ct-alir-simpul { border-radius: var(--r-rad-ubin) !important; }
.ct-alir-simpul.manusia { background-color: var(--r-grafit-0); }
.ct-label { color: var(--r-teks-2); }
.ct-alur .ct-no { font-size: 17px !important; }
.ct-alur li.tampak .ct-no, html:not(.js) .ct-alur .ct-no { background: linear-gradient(180deg, #fff 0%, #f1f1f3 100%) !important; color: var(--r-tinta) !important; }
.ct-alur li:first-child.tampak .ct-no, html:not(.js) .ct-alur li:first-child .ct-no { background: var(--r-pil-hitam) !important; color: #fff !important; }

/* label Sebelum/Sesudah: teks kecil bertitik, bukan pil */
.ct-kolom h3, .ct-kolom.sebelum h3, .ct-kolom.sesudah h3 { display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; background: none !important; box-shadow: none !important; font-size: 14px !important; font-weight: 600; }
.ct-kolom h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.ct-kolom.sebelum h3 { color: var(--r-teks-g) !important; }
.ct-kolom.sesudah h3 { color: var(--r-teks-2) !important; }
/* FAQ corporate: kartu seperti FAQ lain (ref-6) */
.ct-faq { border-top: 0 !important; display: grid; gap: 10px; }
.ct-faq-item { border: 0 !important; border-radius: var(--r-rad-ubin); background: var(--r-kanvas); padding: 0 20px; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.ct-seksi.abu .ct-faq-item { background: #fff; box-shadow: var(--r-bayang-2); }
.ct-faq-item.buka { background: #fff; box-shadow: var(--r-bayang-2), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.ct-faq-item button { padding: 18px 0 !important; }
.ct-plus { border-radius: 10px !important; background: var(--r-pil-hitam) !important; color: #fff !important; box-shadow: var(--r-bayang-pil) !important; }
.ct-faq-isi p { padding-right: 8px !important; }

/* ---------- 18. Halaman akun (masuk, akun, beli, selesai, syarat, privasi) ---------- */
.akun-badan { background: var(--r-kanvas); }
.akun-nav { background: rgba(255, 255, 255, .82) !important; }
.akun-nav a.kanan, .ak-nav-kanan a { color: var(--r-tinta) !important; font-weight: 600; }
.ak-nav-kanan #keluar { color: var(--r-teks) !important; }
.akun-panel { border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2) !important; }
.akun-panel h1 { font-weight: 800 !important; letter-spacing: -.04em; }
.akun-panel p { color: var(--r-teks); }
.akun-panel .tombol:not(.garis) { background: var(--r-pil-hitam) !important; color: #fff !important; box-shadow: var(--r-bayang-pil) !important; }
.tombol-google { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--r-bayang-1) !important; }
.tombol-google:hover { background: var(--r-kanvas); }
.pemisah::before, .pemisah::after { background: var(--r-garis); }
.lihat { color: var(--r-tinta); }
.tautan-teks { color: var(--r-tinta) !important; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ringkas-beli, .instruksi { background: var(--r-kanvas); border: 0 !important; border-radius: var(--r-rad-ubin) !important; }
.pesan { border-radius: var(--r-rad-ikon) !important; }
.pesan.ok { background: var(--r-kanvas); color: var(--r-tinta); }
.dalam-app { background: var(--r-kanvas); border-radius: var(--r-rad-ubin); }
.dalam-app-aksi button { background: var(--r-pil-hitam) !important; box-shadow: var(--r-bayang-pil); }
.dalam-app-aksi a { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--r-bayang-1); }
.ak-label { color: var(--r-teks-2) !important; display: inline-flex; align-items: center; gap: 8px; }
.ak-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.ak-sapa h1 { font-weight: 800; }
.ak-langkah > li:first-child .ak-no { background: var(--r-pil-hitam) !important; }
.ak-panel, .ak-kartu-milik, .ak-tabel-wadah, .ak-kartu { background: #fff; border-radius: var(--r-rad-kartu) !important; box-shadow: var(--r-bayang-2); }
.ak-chip { background: none; padding: 0; color: var(--r-teks-2); }
.status, .status.lunas, .status.menunggu { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none !important; box-shadow: none !important; color: var(--r-tinta) !important; font-size: 14px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c7c7cc; }
.status.lunas::before { background: var(--r-tinta); }
.ak-bantuan { border-top-color: var(--r-garis); }
.aksi-kecil button { background: var(--r-kanvas); }
.aksi-kecil button.utama { background: var(--r-pil-hitam); }

/* ---------- 19. HP ---------- */
@media (max-width: 1068px) {
  .hero-tata { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-r .hero-foto-gambar { max-width: 760px; }
}
@media (max-width: 734px) {
  :root { --r-rad-panggung: 28px; --r-rad-kartu: 24px; }
  body .h-hero { font-size: clamp(40px, 11.6vw, 52px); }
  body .h-1 { font-size: clamp(30px, 8.6vw, 40px); }
  .hero-r .h-hero { font-size: clamp(40px, 11.6vw, 52px); }
  .hero.hero-r { padding-top: 40px; }
  .hero-r .aksi { gap: 14px 22px; }
  .hero-r .alat-kelas { margin-top: 48px; padding-top: 36px; }
  .r-panggung { padding: 12px 0; }
  .r-panggung > .wadah-l { width: 100%; padding: 48px var(--gutter); }
  .hk-katalog.r-panggung { padding-top: calc(var(--nav) + 12px) !important; }
  #keunggulan .unggul-daftar::before { left: 37px; }
  #keunggulan .unggul-daftar li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 18px 16px; }
  #keunggulan .unggul-daftar li::before { width: 44px; height: 44px; }
  .cr-langkah::before, .af-langkah::before, .ct-alur::before, .ak-langkah::before { left: 37px; }
  .cr-langkah > li, .af-langkah > li, .ct-alur > li, .ak-langkah > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 18px 16px !important; }
  .cr-no, .af-no, .ct-no, .ak-no { width: 44px !important; height: 44px !important; }
  .tanya-jawab details { padding: 0 16px; }
  .cr-pil-grup, .af-pil-grup, .ak-pil { border-radius: 24px; }
  .cr-pil span, .af-pil span, .ak-pil-satu span { padding: 0 14px; }
  .hk2-hero .hk2-tata { gap: 32px; }
  .cr-warna-no { top: 26px !important; left: 22px !important; }
}
@media (max-width: 420px) {
  .hero-r .aksi .tombol { flex: 1 1 auto; }
}

/* Tombol putar bersuara di ubin video sempit: boleh dua baris, tidak terpotong */
.hk2-klip .tombol-suara { white-space: normal; text-align: center; line-height: 1.2; max-width: calc(100% - 12px); padding: 6px 12px; justify-content: center; }
/* di dalam figure berketerangan: tombol diletakkan di bagian bawah video (9:16), bukan menimpa keterangan */
.hk2-klip .tombol-suara { top: 0; bottom: auto; left: 6px; right: 6px; transform: none; max-width: none; gap: 6px; padding: 6px 10px; border-radius: 16px; margin-top: calc(177.78% - 62px); }

/* ---------- 20. Gerak dikurangi ---------- */
@media (prefers-reduced-motion: reduce) {
  .galeri-titik i, .tanya-jawab details, .tanya-jawab summary::after, body .tautan::after { transition: none !important; }
}

/* Tombol nav: area ketuk 44 px memakai border transparan, jadi tanpa cincin bayangan di luar pil */
body .nav .tombol:not(.kartu-poster *), .nav.malam .tombol { box-shadow: none !important; }
@media (max-width: 420px) { .hk2-klip .tombol-suara svg { display: none; } .hk2-klip .tombol-suara { padding: 6px 8px; } }

/* Tombol suara di kartu hero sempit (HP): satu baris, ikon + "Suara"; teks lengkap tetap di aria-label. */
@media (max-width: 420px) {
  .hk2-klip .tombol-suara { white-space: nowrap; gap: 6px; padding: 0 12px; min-height: 40px; border-radius: 999px; left: 50%; right: auto; transform: translateX(-50%); }
  .hk2-klip .tombol-suara svg { display: block; width: 15px; height: 15px; }
  .hk2-klip .tombol-suara span { display: none; }
  .hk2-klip .tombol-suara::after { content: "Suara"; }
}