/* =====================================================================
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 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// ---------- */
.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"; }
}
/* Ringkasan pengajar di hero kelas (22 Okt 2026) */
.hk2-pengajar-ringkas { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #A1A1A6; max-width: 46ch; }
.hk2-pengajar-ringkas .tautan { color: #fff; margin-left: 4px; white-space: nowrap; }
.hk2-pengajar b { display: inline-flex; align-items: center; gap: 6px; }
.hk2-centang { width: 17px; height: 17px; color: #FF6B35; flex: none; }
/* ===== 22 Okt 2026: proyek pengajar + paket studio (kelas privat), Mentoring, Jadwal ===== */
.pj-grid, .pk-grid, .mt-grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 735px) { .pj-grid, .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.pj-kartu { background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); overflow: hidden; display: flex; flex-direction: column; }
.pj-kartu img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e9e8eb; }
.pj-isi { padding: 20px 22px 24px; display: grid; gap: 6px; }
.pj-jenis, .pk-nama, .mt-bidang { font-size: 13px; font-weight: 600; color: var(--r-oranye-teks); letter-spacing: .01em; }
.pj-isi h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.pj-isi p { margin: 0; color: var(--r-teks); font-size: 15px; line-height: 1.55; }
.pj-isi .tautan { margin-top: 4px; font-size: 15px; }
.pk-kartu { background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.pk-kartu.utama { background: #111; color: #fff; }
.pk-kartu.utama .pk-sub, .pk-kartu.utama .pk-poin span { color: rgba(255, 255, 255, .72); }
.pk-kartu.utama .pk-nama { color: #ffb08f; }
.pk-kartu.utama .tombol { background: #fff; color: #111; }
.pk-harga { font-size: 32px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; }
.pk-sub { font-size: 14px; color: var(--r-teks); }
.pk-poin { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 10px; flex: 1; }
.pk-poin li, .mt-topik li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.pk-poin .ik, .mt-topik .ik { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
.pk-kartu .tombol, .mt-kaki .tombol { width: 100%; justify-content: center; }
.mt-hero { padding-top: clamp(40px, 8vw, 88px); }
.mt-harga-pil { display: inline-flex; gap: 6px; align-items: baseline; margin-top: 18px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: var(--r-bayang-2); font-size: 15px; color: var(--r-teks); }
.mt-harga-pil b { color: var(--ink, #111); font-size: 17px; }
.mt-kartu { background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.mt-kepala { display: flex; gap: 16px; align-items: center; }
.mt-kepala img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--r-garis); }
.mt-kepala h3 { margin: 2px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.mt-peran { margin: 0; font-size: 14px; color: var(--r-teks); }
.mt-isi p { margin: 0 0 10px; color: var(--r-teks); font-size: 15px; line-height: 1.6; }
.mt-label { margin: 0; font-size: 13px; font-weight: 600; }
.mt-topik { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.mt-kaki { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--r-garis); display: grid; gap: 12px; }
.mt-kaki b { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.mt-kaki span { margin-left: 6px; font-size: 14px; color: var(--r-teks); }
.mt-kartu > .tautan { font-size: 15px; }
.mt-langkah { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; }
@media (min-width: 735px) { .mt-langkah { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.mt-langkah li { background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); padding: 24px; display: grid; gap: 6px; }
.mt-langkah p { margin: 0; color: var(--r-teks); font-size: 15px; line-height: 1.55; }
.mt-no { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.jd-seksi { padding-top: clamp(40px, 8vw, 88px); }
.jd-form select.isian { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #5e5e63 50%), linear-gradient(135deg, #5e5e63 50%, transparent 50%) !important; background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50% !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; padding-right: 40px !important; text-overflow: ellipsis; }
.jd-form .isian { width: 100%; min-height: 50px; }
.jd-pilihan { border: 0; padding: 0; margin: 0; min-width: 0; }
.jd-pilihan legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.jd-waktu { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
@media (min-width: 520px) { .jd-waktu { grid-template-columns: 76px 1fr 140px; align-items: center; } }
.jd-no { font-size: 13px; font-weight: 600; color: var(--r-teks); }
.jd-form [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b42318 !important; }
.jd-form [hidden] { display: none !important; }
/* ===== 22 Okt 2026: deret logo "Alat yang kami ajarkan" di hero beranda (pola Corporate) ===== */
.alat-kelas.al-wadah { width: 100%; max-width: none; padding-left: 0; padding-right: 0; text-align: center; }
.al-judul { margin: 0 0 24px; padding: 0 var(--gutter); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.035em; color: #fff; }
.al-deret { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.al-deret + .al-deret { margin-top: 10px; }
.al-jalur { display: flex; width: max-content; animation: al-geser 60s linear infinite; }
.al-deret.balik .al-jalur { animation-direction: reverse; animation-duration: 66s; }
.al-deret:hover .al-jalur, .al-deret:focus-within .al-jalur { animation-play-state: paused; }
.al-isi { list-style: none; margin: 0; padding: 0 10px 0 0; display: flex; gap: 10px; }
.al-isi li { display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 980px; background: #1c1c1e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #f5f5f7; font-size: 16px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap; }
.al-logo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #000; }
.al-logo .logo-alat { width: 22px; height: 22px; margin: 0; color: #000; }
.al-logo.inisial { font-size: 19px; font-weight: 800; letter-spacing: -.04em; font-family: "Plus Jakarta Sans", var(--font); }
.al-catatan { margin: 20px 0 0; padding: 0 var(--gutter); font-size: 14px; color: rgba(245, 245, 247, .55); }
@keyframes al-geser { to { transform: translateX(-50%); } }
@media (max-width: 734px) { .al-isi li { font-size: 15px; padding: 6px 16px 6px 6px; gap: 10px; } .al-logo { width: 38px; height: 38px; border-radius: 10px; } .al-logo .logo-alat { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) { .al-jalur { animation: none; } .al-deret { overflow-x: auto; } }
/* ===== 22 Okt 2026: pengajar beranda ringkas (baris kecil + keahlian) ===== */
.mr-grid { display: grid; gap: 16px; margin: 36px auto 0; max-width: 960px; }
@media (min-width: 735px) { .mr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.mr-kartu { background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); padding: 22px 22px 24px; text-align: left; }
.mr-kartu .hk2-pengajar { margin: 0; }
.mr-label { margin: 18px 0 10px; font-size: 13px; font-weight: 600; color: var(--r-teks); }
.mr-keahlian { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.mr-keahlian li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.mr-keahlian .ik { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; }
.mr-kartu .hk2-pengajar b { color: #111; font-size: 16px; }
.mr-kartu .hk2-pengajar small { color: var(--r-teks); font-size: 13px; }
.mr-kartu .hk2-pengajar > span:last-child { display: grid; gap: 1px; text-align: left; }
.mr-kartu .hk2-foto img { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--r-garis); }
/* 22 Okt 2026, pemilik: "selalu tambahkan verify icon orange pada nama-nama ini" (Abdul, Erdi) */
.mt-kepala h3, .ct-orang-kepala h3 { display: flex; align-items: center; gap: 6px; }
.mt-kepala h3 .hk2-centang, .ct-orang-kepala h3 .hk2-centang { width: 18px; height: 18px; flex: none; color: #FF6B35; }
.mt-bidang { display: block; }
/* ===== 22 Okt 2026: galeri render kelas arsitektur (grid di desktop, rel geser di HP) ===== */
.gl-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; margin: 28px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gl-grid::-webkit-scrollbar { display: none; }
.gl-item { margin: 0; scroll-snap-align: start; }
.gl-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 20px; background: #e9e8eb; box-shadow: var(--r-bayang-2); }
.gl-item figcaption { margin-top: 10px; font-size: 14px; color: var(--r-teks); }
@media (min-width: 735px) {
.gl-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 24px 20px; margin: 36px 0 0; padding: 0; overflow: visible; }
.gl-item:first-child { grid-column: span 2; grid-row: span 2; }
.gl-item:first-child img { height: calc(100% - 34px); aspect-ratio: auto; }
.gl-item img { border-radius: 24px; }
}
/* ===== 22 Okt 2026: kalender pilihan jadwal (/jadwal/) ===== */
.kal { margin-top: 12px; background: #f5f5f7; border-radius: 20px; padding: 14px; }
.kal[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b42318; }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kal-kepala b { font-size: 16px; font-weight: 700; text-transform: capitalize; }
.kal-nav { width: 40px; height: 40px; border-radius: 999px; background: #fff; box-shadow: var(--r-bayang-2); font-size: 22px; line-height: 1; color: #111; }
.kal-nav:disabled { opacity: .3; box-shadow: none; }
.kal-hari, .kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.kal-hari span { font-size: 12px; font-weight: 600; color: var(--r-teks); padding: 4px 0; }
.kal-tgl { position: relative; aspect-ratio: 1; max-height: 52px; width: 100%; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; color: #111; }
.kal-tgl:disabled { background: transparent; color: #c4c4c8; font-weight: 400; }
.kal-tgl:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px #111; }
.kal-tgl.aktif { background: #111; color: #fff; }
.kal-tgl.ada::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #FF6B35; }
.kal-jam { margin-top: 14px; }
.kal-jam-judul { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.kal-jam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .kal-jam-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kal-slot { height: 44px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--r-garis); font-size: 14px; font-weight: 600; color: #111; }
.kal-slot.aktif { background: #111; color: #fff; box-shadow: none; }
.kal-slot:disabled { opacity: .35; }
.kal-pilihan { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.kal-pilihan li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--r-garis); font-size: 14px; font-weight: 600; }
.kal-hapus { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--r-teks); background: #f5f5f7; }
/* 22 Okt 2026, pemilik: kartu mentor "rapihkan, sejajar" → baris kedua kartu disejajarkan dengan subgrid */
@media (min-width: 735px) {
.mt-grid { grid-template-rows: repeat(6, auto); align-items: start; }
.mt-kartu { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 14px; }
.mt-kartu > .mt-kaki { margin-top: 0; align-self: end; }
.mt-kartu > .mt-label { align-self: end; }
}
@media (min-width: 520px) { .kal-tgl { aspect-ratio: auto; height: 46px; } .kal { padding: 18px; } }
/* 22 Okt 2026, pemilik: "buat semua gambar dalam kartu yang rapi dan bisa di zoom" → kartu seragam + lightbox (zoom.js) */
.gl-item { background: #fff; border-radius: 22px; box-shadow: var(--r-bayang-2); padding: 8px 8px 0; display: flex; flex-direction: column; }
.gl-buka { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; cursor: zoom-in; }
.gl-buka img, .gl-item img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; border-radius: 16px; box-shadow: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.gl-buka:hover img { transform: scale(1.04); }
.gl-buka:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.gl-item figcaption { margin: 0; padding: 10px 8px 12px; font-size: 14px; font-weight: 600; color: #111; }
@media (min-width: 735px) {
.gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gl-item:first-child { grid-column: auto; grid-row: auto; }
.gl-item:first-child img { height: auto; aspect-ratio: 3 / 2; }
.gl-item img { border-radius: 16px; }
}
@media (min-width: 1000px) { .gl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .gl-item figcaption { font-size: 13px; } }
.hk2-hasil-datar .hk2-klip img[data-zoom] { cursor: zoom-in; }
/* Lightbox */
.zoom-kotak { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: rgba(10, 10, 12, .94); color: #fff; }
.zoom-kotak::backdrop { background: rgba(10, 10, 12, .94); }
.zoom-isi { position: absolute; inset: 56px 0 72px; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; }
.zoom-isi img { max-width: min(96vw, 1400px); max-height: 100%; width: auto; height: auto; border-radius: 12px; cursor: zoom-in; touch-action: pinch-zoom; }
.zoom-isi.besar { place-items: start; }
.zoom-isi.besar img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; }
@media (min-width: 735px) { .zoom-isi.besar img { width: min(2000px, 180vw); } }
.zoom-tutup, .zoom-nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; line-height: 1; border: 0; cursor: pointer; }
.zoom-tutup { top: 8px; right: 12px; }
.zoom-nav { bottom: 16px; }
.zoom-nav.kiri { left: 16px; } .zoom-nav.kanan { right: 16px; }
.zoom-ket { position: absolute; left: 72px; right: 72px; bottom: 24px; margin: 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); }
.zoom-hitung { position: absolute; top: 20px; left: 20px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
/* 22 Okt 2026: baris keterangan "biaya layanan dibayar pembeli" di kalkulator creator & affiliate (bukan potongan) */
.cr-rincian tr.info th, .cr-rincian tr.info td, .af-rincian tr.info th, .af-rincian tr.info td { color: var(--r-teks) !important; font-weight: 400 !important; font-size: 13px !important; padding-top: 14px !important; border-top: 1px dashed var(--r-garis) !important; }
/* 22 Okt 2026, audit HP: target sentuh tautan kecil minimal ±44 px tinggi area ketuk (tanpa mengubah tampilan) */
@media (max-width: 734px) {
.footer-bawah a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
.tautan-footer a { display: inline-block; padding: 6px 0; }
.mt-kartu > .tautan, .cr-setuju a, .cr-centang a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}
/* 22 Okt 2026: menu "Tool AI" ditambah → di laptop kecil (≤1279 px) dua jangkar beranda disembunyikan supaya menu tetap satu baris */
.nav-tautan > a, .nav-buka { white-space: nowrap; }
/* Menu HP baru (22 Okt 2026, pemilik: "menu ini pada mobile sangat mengganggu"): latar solid abu terang,
kartu putih per kelompok, baris 56 px berikon, tombol Masuk + Lihat kelas menempel di bawah. */
.menu-hp.mh { background: #f5f5f7; padding: 0; display: flex; flex-direction: column; overflow: hidden; color: #1d1d1f;
transform: translateY(12px); transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .3s; }
.menu-hp.mh.buka { transform: none; }
.mh .menu-hp-atas { flex: none; margin: 0; padding: 0 16px; height: 60px; background: #f5f5f7; }
.mh .menu-hp-atas .logo, .mh .menu-hp-atas .merek { color: #1d1d1f; }
.mh .mh-tutup { width: 40px; height: 40px; border-radius: 50%; background: #e8e8ed; color: #1d1d1f; place-items: center; border: 0; }
.mh .mh-tutup .ik { width: 18px; height: 18px; }
.mh-isi { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 20px; }
.mh-grup + .mh-grup { margin-top: 18px; }
.mh-label { margin: 0 0 8px 6px; font-size: 13px; font-weight: 600; color: #6e6e73; letter-spacing: .01em; }
.mh-kartu { background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05); overflow: hidden; }
.mh-baris { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 14px; color: #1d1d1f; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; }
.mh-baris + .mh-baris::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; border-top: 1px solid #ececf0; }
.mh-baris:active { background: #f2f2f5; }
.mh-ikon { flex: none; width: 36px; height: 36px; border-radius: 11px; background: #f2f2f5; display: grid; place-items: center; color: #1d1d1f; }
.mh-ikon .ik { width: 18px; height: 18px; }
.mh-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mh-teks b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.mh-teks small { font-size: 13px; color: #6e6e73; line-height: 1.35; }
.mh-chev { flex: none; width: 18px; height: 18px; fill: none; stroke: #b0b0b6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-bawah { flex: none; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(245,245,247,.92); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid #e3e3e7; }
.mh-bawah .tombol { margin: 0 !important; min-height: 50px; justify-content: center; font-size: 16px; }
.mh-bawah .tombol.garis { background: #fff; color: #1d1d1f; border: 1px solid #d9d9de; }
@media (prefers-reduced-motion: reduce) { .menu-hp.mh { transform: none; transition: opacity .15s, visibility .15s; } }
/* Halaman /tampak/ (22 Okt 2026) */
.tp-hero { padding-top: clamp(40px, 8vw, 88px); }
.tp-hero-isi { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .tp-hero-isi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; } }
.tp-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tp-aksi .tombol { min-height: 48px; }
.tp-kecil { font-size: 14px; color: var(--r-teks); margin-top: 12px; }
.tp-tengah { text-align: center; margin-top: 20px; }
.tp-hero-foto { margin: 0; }
.tp-hero-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; display: block; box-shadow: var(--r-bayang-2); background: #e9e8eb; }
.tp-hero-foto figcaption { font-size: 13px; color: var(--r-teks); margin-top: 10px; }
.tp-banding-wadah { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .tp-banding-wadah { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.tp-banding { position: relative; aspect-ratio: 4 / 5; max-width: 520px; width: 100%; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: var(--r-bayang-2); background: #e9e8eb; touch-action: pan-y; }
.tp-banding img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-banding .tp-sebelum { clip-path: inset(0 calc(100% - var(--posisi)) 0 0); }
.tp-garis { position: absolute; top: 0; bottom: 0; left: var(--posisi); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.tp-garis::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.tp-tag { position: absolute; bottom: 12px; padding: 6px 12px; border-radius: 980px; background: rgba(17,17,17,.72); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; }
.tp-tag.kiri { left: 12px; } .tp-tag.kanan { right: 12px; }
.tp-geser { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.tp-label { display: block; font-size: 12px; font-weight: 500; color: var(--r-teks); margin-top: 2px; }
.tp-tabel { margin-top: 28px; background: #fff; border-radius: var(--r-rad-kartu); box-shadow: var(--r-bayang-2); overflow-x: auto; }
.tp-tabel table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.tp-tabel th, .tp-tabel td { text-align: left; padding: 14px 18px; border-bottom: 1px solid #ececf0; vertical-align: top; }
.tp-tabel thead th { font-size: 13px; color: var(--r-teks); font-weight: 600; }
.tp-tabel tbody tr:last-child th, .tp-tabel tbody tr:last-child td { border-bottom: 0; }
.tp-tabel td:last-child { white-space: nowrap; }
@media (max-width: 600px) {
.tp-tabel { overflow: visible; background: none; box-shadow: none; }
.tp-tabel table, .tp-tabel tbody { display: block; min-width: 0; }
.tp-tabel thead { display: none; }
.tp-tabel tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: #fff; border-radius: 18px; box-shadow: var(--r-bayang-2); padding: 14px 16px; margin-bottom: 10px; }
.tp-tabel th, .tp-tabel td { padding: 0; border: 0; }
.tp-tabel tbody th { font-size: 16px; }
.tp-tabel td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--r-teks); font-size: 14px; }
.tp-tabel td:nth-child(3) { grid-column: 1; grid-row: 3; color: var(--r-teks); font-size: 13px; }
.tp-tabel td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
.tp-tutup { margin: 20px 0 0; }
.tombol.tp-mati { opacity: .45; pointer-events: none; }
@media (min-width: 1000px) { #contoh .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #contoh .gl-item figcaption { font-size: 14px; } }
.tp-aksi-tengah { justify-content: center; margin-top: 28px; }
/* 22 Okt 2026, pemilik (gambar tombol "Konsultasikan"): "buat seperti ini" → tombol "Lihat kelas" di menu memakai gaya
pil hitam yang sama (gradasi, garis tipis, bayangan). Border transparan 7 px lama dibuang karena bayangan/garis
jatuh di tepi luarnya; area ketuk 44 px kini dari ::after. */
body .nav .tombol:not(.kartu-poster *) { border: 0 !important; min-height: 32px !important; border-radius: 980px !important; position: relative;
background: var(--r-pil-hitam) !important; background-clip: border-box !important; color: #fff !important; box-shadow: var(--r-bayang-pil) !important; }
body .nav .tombol:not(.kartu-poster *):hover { background: linear-gradient(180deg, #3a3a3d 0%, #151516 100%) !important; }
body .nav .tombol::after { content: ""; position: absolute; inset: -6px -4px; }
body .nav.malam .tombol, body [data-gelap] .nav .tombol { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 18px -6px rgba(0, 0, 0, .5) !important; }
/* Kartu "Kelas Meta Ads" (kunci affiliate, 22 Okt 2026 malam) */
.tema-affiliate .poster { background: radial-gradient(120% 90% at 85% 10%, rgba(255, 107, 53, .45), transparent 55%), linear-gradient(160deg, #1d1c20 0%, #0b0b0d 100%); }
.tema-affiliate .poster-hias { stroke: rgba(255, 255, 255, .22); }
/* 22 Okt 2026 malam, pemilik: "ganti semua ceklis di website ini menjadi hitam bulat ceklis di tengah putih".
Semua centang memakai