/* Wordmark resmi CCC: Plus Jakarta Sans 800, ".id" oranye (sama dengan LP Kelas Motion) */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../font/pjs-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../font/pjs-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Career Code Club — halaman utama v2. Rasa Apple, identitas CCC (oranye seperlunya). */
:root {
  --ink: #1d1d1f;
  --teks: #6e6e73;
  --pudar: #86868b;
  --abu: #f5f5f7;
  --abu-2: #e8e8ed;
  --garis: #d2d2d7;
  --hitam: #000;
  --hitam-2: #161617;
  --putih: #fff;
  --oranye: #ff6b35;           /* hiasan, ikon, titik */
  --oranye-besar: #e4531f;     /* teks besar (>= 24px) di latar terang */
  --oranye-teks: #c2410c;      /* tautan & teks kecil di latar terang */
  --oranye-tombol: #c9431a;    /* latar tombol utama, teks putih 4,9:1 */
  --oranye-tombol-2: #b23a14;
  --oranye-malam: #ff8a5c;     /* teks oranye di latar hitam */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;  /* v7: SF Pro di iPhone/Mac, Inter di Android/Windows */
  --lebar: 1080px;
  --lebar-l: 1260px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-o: cubic-bezier(.16, 1, .3, 1);
  --nav: 48px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 12px); overflow-x: clip; }
body {
  margin: 0; background: var(--putih); color: var(--ink);
  font-family: var(--font); font-optical-sizing: auto;
  font-size: 17px; line-height: 1.47; letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg.ik { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--oranye-teks); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sup.ck { font-size: .45em; vertical-align: super; line-height: 0; font-weight: 500; margin-left: .05em; }
sup.ck a { color: inherit; }

.wadah { width: 100%; max-width: calc(var(--lebar) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wadah-l { width: 100%; max-width: calc(var(--lebar-l) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.tengah { text-align: center; }

/* ---------- Tipografi ---------- */
.eyebrow { display: block; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.01em; color: var(--oranye-teks); margin: 0 0 10px; }
.h-hero { font-size: clamp(48px, 6vw, 84px); font-weight: 650; line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.h-1 { font-size: clamp(38px, 5.6vw, 72px); font-weight: 650; line-height: 1.05; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.h-2 { font-size: clamp(30px, 4vw, 52px); font-weight: 650; line-height: 1.08; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.h-3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 650; line-height: 1.12; letter-spacing: -.022em; margin: 0; }
.intro { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; font-weight: 500; color: var(--teks); margin: 16px 0 0; max-width: 34em; text-wrap: pretty; }
.intro b { color: var(--ink); font-weight: 600; }
.tengah .intro { margin-left: auto; margin-right: auto; }
.badan { font-size: 17px; color: var(--teks); margin: 0; }
.kecil { font-size: 13px; color: var(--teks); line-height: 1.45; }

/* ---------- Tombol & tautan ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 980px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  background: var(--oranye-tombol); color: #fff; transition: background .25s var(--ease), transform .25s var(--ease);
}
.tombol:hover { background: var(--oranye-tombol-2); }
.tombol:active { transform: scale(.98); }
.tombol.kecil { min-height: 36px; padding: 0 16px; font-size: 14px; }
.tombol.gelap { background: var(--ink); }
.tombol.gelap:hover { background: #000; }
.tombol.terang { background: #fff; color: var(--ink); }
.tombol.terang:hover { background: var(--abu); }
.tombol.garis { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.tombol.garis:hover { background: rgba(0, 0, 0, .04); }
.tautan { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 500; color: var(--oranye-teks); }
.tautan::after { content: "›"; font-size: 1.25em; line-height: 1; margin-left: 3px; transform: translateY(-.04em); transition: transform .25s var(--ease); }
.tautan:hover { text-decoration: underline; text-underline-offset: 3px; }
.tautan:hover::after { transform: translate(2px, -.04em); }
.aksi { display: flex; align-items: center; justify-content: center; gap: 14px 28px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav);
  background: rgba(251, 251, 253, .78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .06); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.nav.malam { background: rgba(22, 22, 23, .78); color: #f5f5f7; border-color: rgba(255, 255, 255, .08); }
.nav-dalam { height: 100%; display: flex; align-items: center; gap: 22px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.logo-tanda { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--oranye); color: #fff; font-size: 12px; font-weight: 750; letter-spacing: -.04em; }
.nav-tautan { display: flex; gap: 26px; margin-left: auto; font-size: 13px; }
.nav-tautan a { opacity: .82; transition: opacity .2s; }
.nav-tautan a:hover { opacity: 1; }
.nav .tombol { min-height: 30px; padding: 0 14px; font-size: 13px; margin-left: 4px; }
.burger { display: none; flex: none; width: 40px; height: 40px; place-items: center; font-size: 20px; margin-right: -8px; }
.menu-hp { position: fixed; inset: 0; z-index: 70; background: rgba(255, 255, 255, .98); padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.menu-hp.buka { opacity: 1; visibility: visible; }
.menu-hp-atas { height: var(--nav); display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.menu-hp a.m { font-size: 28px; font-weight: 650; letter-spacing: -.025em; padding: 8px 0; }
.menu-hp .tombol { margin-top: auto; }

/* ---------- Pita pengumuman ---------- */
.pita { margin-top: var(--nav); background: var(--abu); text-align: center; padding: 14px var(--gutter); font-size: 14px; color: var(--ink); }
.pita .tautan { font-size: 14px; margin-left: 6px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 4vw, 56px) 0 0; text-align: center; }
.hero .eyebrow { display: none; } /* mengulang logo di nav; layar pertama dipakai untuk tombol dan perangkat */
.hero .sub-besar { font-size: clamp(26px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.028em; line-height: 1.12; margin: 14px 0 0; color: var(--pudar); }
.hero .sub-besar b { color: var(--ink); font-weight: 650; }
.hero .badan { margin: 14px auto 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); }
.hero .aksi { margin-top: 22px; }
.hero .kecil { margin-top: 14px; }
@media (max-height: 700px) and (min-width: 901px) { .hero { padding-top: 32px; } }
.js .hero-masuk > * { opacity: 0; transform: translateY(18px); animation: masuk 1s var(--ease-o) forwards; }
.js .hero-masuk > *:nth-child(2) { animation-delay: .08s; }
.js .hero-masuk > *:nth-child(3) { animation-delay: .16s; }
.js .hero-masuk > *:nth-child(4) { animation-delay: .24s; }
.js .hero-masuk > *:nth-child(5) { animation-delay: .32s; }
.js .hero-masuk > *:nth-child(6) { animation-delay: .4s; }
@keyframes masuk { to { opacity: 1; transform: none; } }

/* Panggung laptop (ditahan scroll) */
.panggung { position: relative; height: 290vh; margin-top: 8px; }
.panggung-tahan { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden; }
.perangkat { position: relative; width: min(980px, 86vw, 118vh); transform: translateY(var(--ty, 0)) scale(var(--sk, 1)); transform-origin: 50% 0; will-change: transform; }
.laptop-layar { position: relative; aspect-ratio: 16 / 10; background: #0d0d0f; border-radius: 20px 20px 6px 6px; padding: 1.6% 1.6% 2.3%; box-shadow: 0 0 0 1px #2c2c2e, 0 50px 90px -50px rgba(0, 0, 0, .45); }
.laptop-layar::before { content: ""; position: absolute; top: .55%; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #1f1f22; }
.layar { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 5px; background: #fff; }
.layar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .9s var(--ease); }
.layar img.aktif { opacity: 1; }
.laptop-alas { position: relative; height: clamp(11px, 1.7vw, 20px); width: 114%; margin-left: -7%; border-radius: 2px 2px 16px 16px / 2px 2px 12px 12px; background: linear-gradient(#f2f2f4 0%, #dcdde1 45%, #b8bac0 100%); }
.laptop-alas::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 9px 9px; background: linear-gradient(#c6c8ce, #e0e2e6); }
.hp { position: absolute; right: -3%; bottom: -5%; width: 21%; aspect-ratio: 600 / 1300; border-radius: 15% / 7%; background: #0d0d0f; padding: 2.4%; box-shadow: 0 0 0 1px #2c2c2e, 0 40px 70px -30px rgba(0, 0, 0, .5); transform: translateX(var(--hx, 30%)); opacity: var(--ho, 0); will-change: transform; }
.hp .layar { border-radius: 12% / 5.6%; }
.hp::before { content: ""; position: absolute; top: 3.4%; left: 50%; width: 28%; height: 2.6%; transform: translateX(-50%); background: #0d0d0f; border-radius: 999px; z-index: 2; }
.keterangan-layar { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--teks); min-height: 24px; }
.keterangan-layar b { color: var(--ink); font-weight: 600; }
.titik { display: flex; gap: 6px; }
.titik i { width: 7px; height: 7px; border-radius: 50%; background: var(--garis); transition: background .4s; }
.titik i.aktif { background: var(--ink); }

/* ---------- Sekilas angka ---------- */
.sekilas { padding: clamp(96px, 12vw, 150px) 0; }
.angka-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; text-align: left; }
.angka-grid > div { border-top: 1px solid var(--garis); padding-top: 22px; }
.angka-besar { display: block; font-size: clamp(40px, 4.6vw, 64px); font-weight: 650; letter-spacing: -.04em; line-height: 1; color: var(--oranye-besar); font-variant-numeric: tabular-nums; }
.angka-grid p { margin: 12px 0 0; color: var(--teks); font-size: 15px; }

/* ---------- Narasi menyala (latar hitam) ---------- */
.narasi { position: relative; height: 260vh; background: var(--hitam); color: #f5f5f7; }
.narasi-tahan { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.narasi .eyebrow { color: var(--pudar); }
.narasi-teks { font-size: clamp(30px, 4.4vw, 58px); font-weight: 650; letter-spacing: -.03em; line-height: 1.14; margin: 0; max-width: 20em; }
.narasi-teks .k { color: #3a3a3c; transition: color .35s var(--ease); }
.narasi-teks .k.nyala { color: #f5f5f7; }
.narasi-teks .penutup .k.nyala { color: var(--oranye-malam); }
.narasi .kecil { color: var(--pudar); margin-top: 28px; }

/* ---------- Fitur: website (HP dengan label) ---------- */
.fitur { padding: clamp(96px, 12vw, 150px) 0 0; }
.fitur-panggung { position: relative; height: 230vh; }
.fitur-tahan { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 4vw, 64px); }
.hp-besar { width: clamp(220px, 22vw, 300px); aspect-ratio: 600 / 1300; border-radius: 15% / 7%; background: #0d0d0f; padding: 10px; box-shadow: 0 0 0 1px #2c2c2e, 0 50px 80px -40px rgba(0, 0, 0, .45); position: relative; }
.hp-besar .layar { border-radius: 12% / 5.6%; }
.hp-besar .layar img { opacity: 1; }
.hp-besar::before { content: ""; position: absolute; top: 3.4%; left: 50%; width: 28%; height: 2.6%; transform: translateX(-50%); background: #0d0d0f; border-radius: 999px; z-index: 2; }
.label-kolom { display: flex; flex-direction: column; gap: 34px; }
.label-kolom.kiri { align-items: flex-end; text-align: right; }
.label-fitur { max-width: 250px; opacity: .18; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease-o); }
.label-fitur.nyala { opacity: 1; transform: none; }
.label-fitur .ik { display: block; font-size: 28px; color: var(--oranye); stroke-width: 1.6; margin-bottom: 10px; }
.label-kolom.kiri .label-fitur .ik { margin-left: auto; }
.label-fitur b { display: block; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.label-fitur span { display: block; font-size: 15px; color: var(--teks); margin-top: 2px; }

/* ---------- Fitur: automasi (chat) ---------- */
.automasi { background: var(--abu); }
.chat-panggung { position: relative; height: 240vh; }
.chat-tahan { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.chat-hp { width: 100%; max-width: 380px; justify-self: center; border-radius: 46px; background: #0d0d0f; padding: 11px; box-shadow: 0 0 0 1px #2c2c2e, 0 50px 80px -40px rgba(0, 0, 0, .4); }
.chat-layar { border-radius: 36px; overflow: hidden; background: #efeae2; height: min(640px, 72vh); display: flex; flex-direction: column; }
.chat-atas { background: #fff; padding: 40px 16px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.chat-atas .ava { width: 34px; height: 34px; border-radius: 50%; background: var(--abu-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink); flex: none; }
.chat-atas b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.chat-atas small { font-size: 12px; color: var(--teks); }
.chat-atas .konsep { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--teks); background: var(--abu); padding: 4px 9px; border-radius: 999px; }
.chat-isi { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.gel { max-width: 84%; padding: 8px 11px 6px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .45s var(--ease), transform .55s var(--ease-o); }
.gel.tampil { opacity: 1; transform: none; }
.gel small { display: block; text-align: right; font-size: 11px; color: rgba(0, 0, 0, .5); margin-top: 1px; }
.gel.pembeli { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.gel.otomatis { align-self: flex-end; background: #ffe6da; border-top-right-radius: 4px; }
.gel.otomatis .tag { display: block; font-size: 11px; font-weight: 650; color: var(--oranye-teks); margin-bottom: 2px; }
.rekap { align-self: center; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 600; color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease-o); }
.rekap.tampil { opacity: 1; transform: none; }
.rekap .ik { color: var(--oranye-teks); }

/* ---------- Layanan (bento) ---------- */
.seksi { padding: clamp(96px, 12vw, 150px) 0; }
.seksi.abu { background: var(--abu); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.ubin { position: relative; overflow: hidden; border-radius: 28px; background: var(--abu); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; min-height: 380px; }
.seksi.abu .ubin { background: #fff; }
.ubin.l4 { grid-column: span 4; }
.ubin.l3 { grid-column: span 3; }
.ubin.l2 { grid-column: span 2; }
.ubin .kat { font-size: 14px; font-weight: 600; color: var(--oranye-teks); margin-bottom: 8px; }
.ubin h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; letter-spacing: -.024em; line-height: 1.12; margin: 0; }
.ubin p { font-size: 16px; color: var(--teks); margin: 10px 0 0; max-width: 30em; }
.ubin .bawah { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ubin .harga { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.ubin .harga.sesuai { font-size: 15px; font-weight: 500; color: var(--teks); }
.ubin .tautan { font-size: 15px; }
.ubin.malam { background: var(--hitam-2) !important; color: #f5f5f7; }
.ubin.malam p, .ubin.malam .harga.sesuai { color: #a1a1a6; }
.ubin.malam .kat, .ubin.malam .tautan { color: var(--oranye-malam); }
.ubin.oranye { background: linear-gradient(160deg, #e95a26, var(--oranye-tombol) 70%) !important; color: #fff; }
.ubin.oranye p { color: rgba(255, 255, 255, .92); }
.ubin.oranye .tombol { align-self: flex-start; margin-top: auto; }
.ubin .gambar { margin: 24px calc(clamp(26px, 3vw, 40px) * -1) calc(clamp(26px, 3vw, 40px) * -1); flex: 1; min-height: 180px; }
.ubin .gambar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ubin-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: stretch; }
.ubin-dua .teks { display: flex; flex-direction: column; }
.ubin-dua .mini-laptop { align-self: center; }
.mini-laptop .laptop-layar { border-radius: 12px 12px 4px 4px; padding: 1.8% 1.8% 2.5%; box-shadow: 0 0 0 1px #2c2c2e, 0 30px 50px -30px rgba(0, 0, 0, .4); }
.mini-laptop .layar img { opacity: 1; }
.mini-laptop .laptop-alas { height: 10px; }
.kipas-app { display: flex; justify-content: center; margin-top: 26px; }
.kipas-app img { width: 31%; border-radius: 18px; border: 5px solid #0d0d0f; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .5); }
.kipas-app img:nth-child(1) { transform: rotate(-7deg) translate(18%, 6%); }
.kipas-app img:nth-child(2) { position: relative; z-index: 2; }
.kipas-app img:nth-child(3) { transform: rotate(7deg) translate(-18%, 6%); }
.mini-chat { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.mini-chat span { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.mini-chat span:nth-child(odd) { align-self: flex-start; background: #2c2c2e; color: #f5f5f7; border-top-left-radius: 4px; }
.mini-chat span:nth-child(even) { align-self: flex-end; background: #ffe6da; color: var(--ink); border-top-right-radius: 4px; }

/* ---------- Galeri (geser dengan tombol) ---------- */
.galeri-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.galeri-jalur { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 40px var(--gutter) 8px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; scroll-padding-left: var(--gutter); }
.galeri-jalur::-webkit-scrollbar { display: none; }
.slide { flex: none; width: min(560px, 80vw); scroll-snap-align: start; margin: 0; }
.slide .foto { border-radius: 24px; overflow: hidden; background: var(--abu-2); aspect-ratio: 4 / 3; }
.slide .foto img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { margin-top: 14px; font-size: 15px; color: var(--teks); }
.slide figcaption b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.galeri-kontrol { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 22px; }
.galeri-kontrol button { width: 40px; height: 40px; border-radius: 50%; background: var(--abu-2); display: grid; place-items: center; font-size: 18px; color: var(--ink); transition: background .2s, opacity .2s; }
.galeri-kontrol button:hover { background: var(--garis); }
.galeri-kontrol button:disabled { opacity: .35; cursor: default; }
.seksi.abu .galeri-kontrol button { background: #fff; }
.app-baris { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.app { margin: 0; text-align: center; }
.app img { width: 100%; aspect-ratio: 520 / 1130; object-fit: cover; object-position: top; border-radius: 22px; border: 6px solid #0d0d0f; box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .5); }
.app figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; }

/* ---------- Cara kerja ---------- */
.langkah-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.langkah { border-radius: 24px; background: var(--abu); padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.langkah .no { font-size: 14px; font-weight: 600; color: var(--oranye-teks); }
.langkah h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.langkah p { margin: 0; font-size: 15px; color: var(--teks); }
.langkah .contoh-ui { margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--ink); }
.langkah .contoh-ui span { display: block; background: #fff; border-radius: 14px; padding: 10px 12px; line-height: 1.4; }

/* ---------- Harga (perbandingan) ---------- */
.banding { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.paket { background: #fff; border-radius: 28px; padding: 36px 28px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.paket .nama { font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
.paket .harga { font-size: clamp(30px, 3vw, 40px); font-weight: 650; letter-spacing: -.03em; margin-top: 6px; }
.paket .untuk { font-size: 15px; color: var(--teks); margin: 10px 0 0; min-height: 3em; max-width: 22em; }
.paket .tombol { margin-top: 20px; }
.paket .spek { width: 100%; margin-top: 28px; border-top: 1px solid var(--abu-2); }
.paket .spek div { padding: 16px 0; border-bottom: 1px solid var(--abu-2); }
.paket .spek b { display: block; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.paket .spek small { font-size: 13px; color: var(--teks); }
.paket ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.paket li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.paket li .ik { color: var(--oranye-teks); font-size: 20px; stroke-width: 2; }
.harga-catatan { margin: 28px auto 0; max-width: 46em; text-align: center; font-size: 15px; color: var(--teks); }
.harga-catatan b { color: var(--ink); }

/* ---------- Janji ---------- */
.janji-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; margin-top: 56px; }
.janji-grid .ik { display: block; font-size: 32px; color: var(--oranye); stroke-width: 1.5; margin-bottom: 14px; }
.janji-grid h3 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.022em; }
.janji-grid p { margin: 8px 0 0; color: var(--teks); }

/* ---------- Kelas ---------- */
.kelas-harga { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 24px; }
.kelas-harga b { font-size: 48px; font-weight: 650; letter-spacing: -.035em; }
.kelas-harga span { color: var(--teks); font-size: 15px; }
.daftar-kursus { margin: 48px auto 0; max-width: 820px; background: #fff; border-radius: 28px; padding: 8px 28px; }
.kursus { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--abu-2); }
.kursus:last-child { border-bottom: 0; }
.kursus b { font-weight: 600; font-size: 17px; letter-spacing: -.012em; }
.kursus span { color: var(--teks); font-size: 15px; white-space: nowrap; }
.kelas-tim { margin: 20px auto 0; max-width: 820px; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 22px 28px; border-radius: 28px; background: #fff; }
.kelas-tim p { margin: 0; flex: 1 1 380px; font-size: 15px; color: var(--teks); }
.komunitas { margin-top: 18px; display: flex; justify-content: center; gap: 10px 28px; flex-wrap: wrap; }
.testi-judul { margin-top: 96px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.testi { margin: 0; background: #fff; border-radius: 28px; padding: 30px 28px; display: flex; flex-direction: column; gap: 22px; }
.testi blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.testi .orang { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi .orang img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi .orang b { display: block; font-size: 15px; font-weight: 600; }
.testi .orang small { font-size: 13px; color: var(--teks); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 48px auto 0; }
.faq h3 { font-size: 15px; font-weight: 600; color: var(--teks); margin: 40px 0 6px; }
.faq h3:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--garis); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.016em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ik { font-size: 20px; color: var(--teks); transition: transform .3s var(--ease); }
.faq details[open] summary .ik { transform: rotate(45deg); }
.faq details p { margin: 0 0 24px; color: var(--teks); max-width: 40em; }
.faq-kontak { text-align: center; margin-top: 40px; color: var(--teks); }

/* ---------- Penutup ---------- */
.akhir { background: var(--hitam); color: #f5f5f7; text-align: center; padding: clamp(110px, 14vw, 180px) 0; }
.akhir .h-1 { color: #f5f5f7; }
.akhir .intro { color: #a1a1a6; margin-left: auto; margin-right: auto; }
.akhir .tautan { color: var(--oranye-malam); }
.kolom-cerita { margin: 36px auto 0; display: flex; align-items: center; gap: 8px; max-width: 600px; height: 60px; padding: 6px 6px 6px 22px; border-radius: 980px; background: #fff; color: var(--ink); }
.kolom-cerita input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; height: 100%; }
.kolom-cerita input::placeholder { color: var(--teks); }
.kolom-cerita .tombol { min-height: 48px; }
.kolom-cerita:focus-within { box-shadow: 0 0 0 4px rgba(255, 107, 53, .4); }
.akhir .kecil { color: #a1a1a6; margin-top: 16px; }
.akhir-kedua { margin-top: 56px; padding-top: 36px; border-top: 1px solid #2c2c2e; display: flex; justify-content: center; align-items: center; gap: 10px 20px; flex-wrap: wrap; color: #a1a1a6; }
.akhir-kedua b { color: #f5f5f7; font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--abu); color: var(--teks); font-size: 12px; line-height: 1.5; padding: 24px 0 28px; }
.catatan-kaki { margin: 0; padding: 0 0 18px 16px; border-bottom: 1px solid var(--garis); display: flex; flex-direction: column; gap: 8px; }
.catatan-kaki li { padding-left: 2px; }
.footer-kolom { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--garis); }
.footer h3, .footer h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: inherit; line-height: inherit; color: var(--ink); }
.footer ul.tautan-footer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.footer a:hover { text-decoration: underline; color: var(--ink); }
.footer .logo { color: var(--ink); font-size: 14px; }
.footer-tagline { margin: 10px 0 0; max-width: 24em; }
.footer-bawah { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; }

/* ---------- Muncul saat terlihat ---------- */
.js .muncul { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-o), transform 1.1s var(--ease-o); }
.js .muncul.tampak { opacity: 1; transform: none; }
.js .muncul[data-tunda="1"] { transition-delay: .07s; }
.js .muncul[data-tunda="2"] { transition-delay: .14s; }
.js .muncul[data-tunda="3"] { transition-delay: .21s; }

/* ---------- Tanpa JS ---------- */
html:not(.js) .panggung, html:not(.js) .narasi, html:not(.js) .fitur-panggung, html:not(.js) .chat-panggung { height: auto; }
html:not(.js) .panggung-tahan, html:not(.js) .narasi-tahan, html:not(.js) .fitur-tahan, html:not(.js) .chat-tahan { position: relative; height: auto; padding: 60px 0; }
html:not(.js) .hp, html:not(.js) .label-fitur, html:not(.js) .gel, html:not(.js) .rekap { opacity: 1; transform: none; }
html:not(.js) .narasi-teks .k { color: #f5f5f7; }

/* ---------- Responsif ---------- */
@media (max-width: 1068px) {
  .nav-tautan { display: none; }
  .burger { display: grid; }
  .nav .tombol { margin-left: auto; }
  /* tanpa JS tombol menu mati: sembunyikan (tombol tutup di .menu-hp tidak kena) */
  html:not(.js) .nav .burger { display: none; }
}
@media (min-width: 769px) and (max-width: 1068px) {
  html:not(.js) .nav-tautan { display: flex; gap: 18px; }
  html:not(.js) .nav .tombol { margin-left: 4px; }
}
/* HP sempit: logo + tombol + burger harus muat dalam 328 px (360 - 2 x 16) */
@media (max-width: 420px) {
  .nav-dalam { gap: 12px; }
  .nav .nav-panjang { display: none; }
  .burger { flex: none; }
}
@media (max-width: 900px) {
  .angka-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .fitur-panggung { height: auto; }
  .fitur-tahan { position: relative; top: 0; height: auto; grid-template-columns: 1fr; justify-items: start; gap: 28px; padding: 48px var(--gutter) 96px; max-width: 520px; }
  .fitur-tahan .hp-besar { justify-self: center; }
  .fitur-tahan .hp-besar { order: -1; width: min(250px, 62vw); }
  .label-kolom, .label-kolom.kiri { display: contents; }
  .label-fitur { order: var(--u); width: 100%; text-align: left; }
  .label-kolom.kiri .label-fitur .ik { margin-left: 0; }
  .label-fitur { opacity: 1; transform: none; max-width: none; }
  .chat-panggung { height: auto; }
  .chat-tahan { position: relative; top: 0; height: auto; grid-template-columns: 1fr; padding: 96px 0; gap: 40px; }
  .chat-layar { height: 560px; }
  .bento { grid-template-columns: 1fr; }
  .ubin.l4, .ubin.l3, .ubin.l2 { grid-column: auto; }
  .ubin { min-height: 0; }
  .ubin-dua { grid-template-columns: 1fr; }
  .app-baris { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .langkah-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banding { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .janji-grid { grid-template-columns: 1fr; gap: 36px; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-kolom { grid-template-columns: 1fr 1fr; }
  .footer-kolom > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .panggung { height: 220vh; margin-top: 28px; }
  .perangkat { width: 92vw; }
  .hp { width: 25%; right: -1%; }
  .narasi { height: 230vh; }
  .langkah-grid { grid-template-columns: 1fr; }
  .app-baris { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
  .app-baris::-webkit-scrollbar { display: none; }
  .app { flex: none; width: 42vw; scroll-snap-align: start; }
  .kursus { flex-direction: column; align-items: flex-start; gap: 2px; }
  .daftar-kursus, .kelas-tim { padding-left: 20px; padding-right: 20px; border-radius: 22px; }
  .faq summary { font-size: 17px; }
  .kolom-cerita { height: auto; flex-direction: column; padding: 8px; border-radius: 26px; }
  .kolom-cerita input { height: 48px; width: 100%; padding: 0 12px; }
  .kolom-cerita .tombol { width: 100%; }
  .paket .spek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--abu-2); }
  .paket .spek div { border-bottom: 0; padding: 14px 4px; }
  .paket .spek div + div { border-left: 1px solid var(--abu-2); }
  .paket .spek b { font-size: 21px; }
  .paket .spek small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   TOKO KELAS (v3): komponen tambahan
   ===================================================================== */
/* Hero: tiga perangkat, satu per kelas */
.trio-panggung { position: relative; height: 150vh; margin-top: 0; }
.trio-tahan { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); height: calc(100svh - var(--nav)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.trio { position: relative; width: min(1100px, 92vw); aspect-ratio: 1100 / 560; transform: translateY(var(--ty, 0)) scale(var(--sk, 1)); transform-origin: 50% 0; will-change: transform; }
.trio .laptop { position: absolute; left: 50%; bottom: 0; width: 64%; transform: translateX(-50%); }
.trio .hp-kiri, .trio .hp-kanan { position: absolute; bottom: -2%; width: 19%; aspect-ratio: 600 / 1300; border-radius: 15% / 7%; background: #0d0d0f; padding: 1.1%; box-shadow: 0 0 0 1px #2c2c2e, 0 40px 70px -30px rgba(0, 0, 0, .5); transition: transform .2s linear; }
.trio .hp-kiri { left: 4%; transform: translateX(calc(var(--buka, 0) * -18%)) rotate(calc(var(--buka, 0) * -4deg)); }
.trio .hp-kanan { right: 4%; transform: translateX(calc(var(--buka, 0) * 18%)) rotate(calc(var(--buka, 0) * 4deg)); }
.trio .hp-kiri .layar, .trio .hp-kanan .layar { border-radius: 12% / 5.6%; }
.trio .layar img, .trio .layar video { opacity: 1; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.trio-label { position: absolute; bottom: -54px; font-size: 14px; color: var(--teks); white-space: nowrap; transform: translateX(-50%); opacity: var(--lbl, 0); transition: opacity .4s; }
.trio-label b { color: var(--ink); font-weight: 600; }
/* kotak trio setinggi laptop supaya trio benar-benar di tengah layar; margin bawah menampung label */
@media (min-width: 641px) { .trio { aspect-ratio: 1100 / 460; margin-bottom: 54px; } }
/* sumber layar laptop lebih tinggi dari layarnya: pudarkan tepi bawah supaya tidak ada baris huruf yang terbelah */
.laptop-layar .layar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; z-index: 1; }

/* Deretan kartu kelas */
.deretan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.kartu-kelas { background: var(--abu); border-radius: 28px; padding: 36px 30px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.kartu-kelas .gambar-kelas { height: 230px; width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 26px; }
.kartu-kelas .gambar-kelas img, .kartu-kelas .gambar-kelas video { max-height: 100%; width: auto; border-radius: 16px; box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .5); }
.kartu-kelas .mini-hp { height: 100%; aspect-ratio: 600 / 1300; border-radius: 22px; background: #0d0d0f; padding: 5px; overflow: hidden; }
.kartu-kelas .mini-hp img, .kartu-kelas .mini-hp video { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 17px; box-shadow: none; }
.kartu-kelas .nama { font-size: 26px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; }
.kartu-kelas .untuk { font-size: 16px; color: var(--teks); margin: 10px 0 0; max-width: 22em; }
.kartu-kelas .ringkas { font-size: 14px; color: var(--ink); font-weight: 500; margin-top: 14px; }
.kartu-kelas .harga { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin-top: 18px; }
.kartu-kelas .aksi { margin-top: 18px; flex-direction: column; gap: 14px; }
.kartu-kelas .lantai { margin-top: auto; width: 100%; }
.kartu-kelas h3.nama { margin: 0; }
/* Kartu Codex: daftar judul kursus bergaya daftar Apple (pengganti gambar) */
.daftar-mini { width: 100%; max-width: 320px; max-height: 100%; overflow: hidden; background: #fff; border-radius: 18px; padding: 12px 16px 6px; text-align: left; box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .35); }
.daftar-mini-judul { display: block; padding-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--teks); }
.daftar-mini ul { list-style: none; margin: 0; padding: 0; counter-reset: kursus; }
.daftar-mini li { counter-increment: kursus; padding: 6px 0; border-top: 1px solid var(--abu-2); font-size: 13px; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daftar-mini li::before { content: counter(kursus); display: inline-block; width: 18px; color: var(--pudar); font-variant-numeric: tabular-nums; }

/* Bagian produk per kelas */
.produk { padding: clamp(96px, 12vw, 160px) 0; }
.produk.abu { background: var(--abu); }
.produk.malam { background: var(--hitam); color: #f5f5f7; }
.produk.malam .intro, .produk.malam .poin p, .produk.malam .syarat li, .produk.malam .catatan-tombol { color: #a1a1a6; }
.produk.malam .eyebrow { color: var(--oranye-malam); }
.produk.malam .tautan { color: var(--oranye-malam); }
.produk-kepala { text-align: center; }
.produk-kepala .intro { margin-left: auto; margin-right: auto; }
.produk-beli { display: flex; justify-content: center; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 28px; }
.produk-beli .harga { font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
/* Baris daftar penutup di akhir tiap bagian kelas */
.produk-beli-akhir { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--garis); }
.produk.malam .produk-beli-akhir { border-top-color: rgba(255, 255, 255, .14); }
.catatan-tombol { text-align: center; font-size: 14px; color: var(--teks); margin: 14px auto 0; max-width: 34em; }
.produk-visual { margin: 64px auto 0; display: flex; justify-content: center; align-items: flex-end; gap: 24px; }
.produk-visual .hp-besar { width: clamp(200px, 20vw, 270px); }
.produk-visual .laptop-kecil { width: min(760px, 70vw); }
.poin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; margin-top: 72px; }
.poin .ik { display: block; font-size: 30px; color: var(--oranye); stroke-width: 1.5; margin-bottom: 12px; }
.poin h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.poin p { margin: 8px 0 0; font-size: 16px; color: var(--teks); }
.hasil-syarat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 64px; }
.kotak-info { border-radius: 28px; padding: 30px 32px; background: var(--abu); }
.produk.abu .kotak-info { background: #fff; }
.produk.malam .kotak-info { background: var(--hitam-2); }
.kotak-info h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--oranye-teks); }
.produk.malam .kotak-info h3 { color: var(--oranye-malam); }
.kotak-info p { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.018em; line-height: 1.35; }
.syarat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.syarat li { display: flex; gap: 10px; font-size: 16px; color: var(--ink); line-height: 1.45; }
.produk.malam .syarat li { color: #e8e8ed; }
.syarat li .ik { color: var(--oranye-teks); font-size: 18px; margin-top: 2px; stroke-width: 2.2; }
.produk.malam .syarat li .ik { color: var(--oranye-malam); }
.bukti { text-align: center; font-size: 17px; color: var(--teks); margin: 48px auto 0; max-width: 40em; }
.bukti b { color: var(--ink); }
.produk.malam .bukti b { color: #f5f5f7; }

/* Galeri video (diputar otomatis tanpa suara) */
.rel-video { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 10px; margin: 56px calc(var(--gutter) * -1) 0; scrollbar-width: none; justify-content: safe center; }
.rel-video::-webkit-scrollbar { display: none; }
.klip { flex: none; width: clamp(170px, 15vw, 210px); scroll-snap-align: center; margin: 0; }
.klip .bingkai-klip { aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 1px #2c2c2e; }
.klip video, .klip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klip figcaption { margin-top: 12px; font-size: 14px; color: #a1a1a6; text-align: center; }
.produk:not(.malam) .klip figcaption { color: var(--teks); }

/* Deretan screenshot testimoni WA */
.rel-wa { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 10px; margin: 32px calc(var(--gutter) * -1) 0; scrollbar-width: none; }
.rel-wa::-webkit-scrollbar { display: none; }
.rel-wa figure { flex: none; width: 230px; margin: 0; scroll-snap-align: start; }
.rel-wa img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .45); }
/* Rel memanjang sampai tepi layar; kartu pertama tetap sejajar isi .wadah-l. --tepi = jarak isi .wadah-l ke tepi layar. */
.rel-video, .rel-wa { --tepi: max(var(--gutter), calc((100vw - var(--lebar-l)) / 2)); margin-left: calc(var(--tepi) * -1); margin-right: calc(var(--tepi) * -1); padding-left: var(--tepi); padding-right: var(--tepi); scroll-padding-inline: var(--tepi); }
.rel-wa { padding-bottom: 40px; margin-bottom: -30px; } /* ruang untuk bayangan screenshot */
/* Layar lebar: keenam item muat tanpa perlu digeser */
@media (min-width: 1100px) {
  .klip { flex: 1 1 0; min-width: 0; width: auto; max-width: 210px; }
  .rel-wa figure { flex: 1 1 0; min-width: 0; width: auto; max-width: 230px; }
}
.geser-petunjuk { display: none; margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--teks); }
.produk.malam .geser-petunjuk { color: #a1a1a6; }
/* Tombol jeda/putar video contoh: monokrom, gaya tautan */
.jeda-video { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 44px; margin: 40px auto 0; padding: 0 16px; border-radius: 980px; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--garis); transition: background .2s var(--ease); }
.jeda-video:hover { background: rgba(0, 0, 0, .04); }
.produk.malam .jeda-video { color: #f5f5f7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.produk.malam .jeda-video:hover { background: rgba(255, 255, 255, .08); }
.jeda-video[hidden] { display: none; }
.jeda-video + .rel-video { margin-top: 16px; }
.foto-bukti { margin: 40px auto 0; max-width: 760px; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .5); }
.foto-bukti img { width: 100%; }
.keterangan-foto { text-align: center; font-size: 13px; color: var(--teks); margin-top: 12px; }

/* Tabel banding */
.tabel-banding { margin-top: 56px; overflow-x: auto; }
.tabel-banding table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 16px; }
.tabel-banding th, .tabel-banding td { padding: 18px 16px; text-align: center; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel-banding thead th { border-bottom: 0; padding-bottom: 24px; vertical-align: bottom; }
.tabel-banding thead .nama { display: block; font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.tabel-banding thead .harga { display: block; font-size: 17px; font-weight: 500; color: var(--teks); margin: 6px 0 14px; }
.tabel-banding tbody th { text-align: left; font-weight: 600; font-size: 14px; color: var(--teks); width: 22%; }
.tabel-banding td { color: var(--ink); }
/* Baris harga dan tombol daftar khusus HP (di desktop harga dan tombol ada di thead) */
.tabel-banding .hanya-hp, .banding-aksi { display: none; }

/* Langkah tiga */
.langkah-grid.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .trio-panggung { height: 150vh; }
  .deretan { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .poin { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .hasil-syarat { grid-template-columns: 1fr; }
  .produk-visual { gap: 12px; }
  .produk-visual .laptop-kecil { width: 88vw; }
  .langkah-grid.tiga { grid-template-columns: 1fr; }
  .rel-video { justify-content: flex-start; }
}
/* di bawah 1100 px deretan video meluap: beri petunjuk geser */
@media (max-width: 1099px) { .geser-petunjuk { display: block; } }
html:not(.js) .trio-panggung { height: auto; }
html:not(.js) .trio-tahan { position: relative; height: auto; padding: 40px 0 80px; }
/* Pengguna yang meminta gerak dikurangi: perangkat langsung di keadaan akhir, tanpa area sticky yang diam */
@media (prefers-reduced-motion: reduce) {
  .trio { --sk: 1 !important; --ty: 0px !important; --buka: 1 !important; --lbl: 1 !important; }
  .trio-panggung { height: auto; }
  .trio-tahan { position: relative; top: auto; height: auto; padding: 40px 0 80px; }
}
@media (max-width: 640px) {
  /* HP: tanpa sticky (tidak ada layar putih kosong), ponsel tetap di dalam layar, label jadi daftar di bawah gambar */
  .trio-panggung { height: auto; margin-top: 0; }
  .trio-tahan { position: relative; top: auto; height: auto; padding: 24px 0 0; }
  .trio { width: 92vw; margin-bottom: 104px; }
  .trio .laptop { width: 70%; }
  .trio .hp-kiri, .trio .hp-kanan { width: 22%; }
  .trio-label { display: block; opacity: 1; left: 50% !important; bottom: auto; font-size: 15px; }
  .trio-label:nth-of-type(1) { top: calc(100% + 28px); }
  .trio-label:nth-of-type(2) { top: calc(100% + 54px); }
  .trio-label:nth-of-type(3) { top: calc(100% + 80px); }
  .poin { grid-template-columns: 1fr; }
  .kotak-info { padding: 24px 22px; }
  .kotak-info p { font-size: 19px; }
  .klip { width: 40vw; }
  .rel-wa figure { width: 62vw; }
  .produk-visual .hp-besar { width: 46vw; }
  .produk-beli-akhir { margin-top: 40px; }
  .produk-beli-akhir .tombol { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {
  .tabel-banding table { min-width: 0; }
  .tabel-banding thead { display: none; }
  .tabel-banding table, .tabel-banding tbody, .tabel-banding tr, .tabel-banding th, .tabel-banding td { display: block; width: 100%; }
  .tabel-banding tr { padding: 18px 0; border-bottom: 1px solid var(--garis); }
  .tabel-banding tbody th { padding: 0 0 8px; border: 0; width: auto; font-size: 13px; }
  .tabel-banding td { display: flex; justify-content: space-between; gap: 16px; text-align: right; padding: 6px 0; border: 0; font-size: 15px; }
  .tabel-banding td::before { content: attr(data-kelas); text-align: left; color: var(--teks); font-weight: 500; flex: none; max-width: 48%; }
  .tabel-banding tr.hanya-hp { display: block; }
  .tabel-banding .baris-harga td b { font-weight: 650; color: var(--ink); }
  .banding-aksi { display: grid; gap: 10px; margin-top: 28px; }
  .banding-aksi .tombol { width: 100%; justify-content: center; white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; line-height: 1.25; }
}

/* =====================================================================
   PEMBUKA (v4): kenapa AI, keunggulan, mentor, komunitas
   ===================================================================== */
.angka-sumber { display: block; margin-top: 8px; font-size: 13px; color: var(--teks); }
.angka-grid:empty { display: none; }
/* Demo di #kenapa: tiga kartu bersambung (kamu menulis -> AI menyusun draf -> kamu cek lalu kirim) */
.demo { list-style: none; margin: 56px auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; text-align: left; }
.demo > * { position: relative; margin: 0; background: var(--abu); border-radius: 28px; padding: 24px 24px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.demo > * + *::before { content: ""; position: absolute; top: 50%; left: -48px; width: 48px; height: 1px; background: var(--garis); }
.demo > * + *::after { content: ""; position: absolute; top: 50%; left: -40px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: inset 0 0 0 1px var(--garis); }
.demo-label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; color: var(--teks); background: #fff; border-radius: 999px; padding: 6px 10px; }
.demo h3, .demo-judul { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.018em; line-height: 1.25; color: var(--ink); }
.demo p, .demo-isi { margin: 4px 0 0; max-width: 100%; padding: 12px 14px; border-radius: 18px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
/* 1: pesanmu ke AI (gelembung gelap di kanan), 2: draf dari AI (gelembung putih di kiri), 3: catatan cek (bergaris) */
.demo > :nth-child(1) :is(p, .demo-isi) { align-self: flex-end; background: var(--ink); color: #f5f5f7; border-top-right-radius: 6px; box-shadow: none; }
.demo > :nth-child(2) :is(p, .demo-isi) { border-top-left-radius: 6px; }
.demo > :nth-child(3) :is(p, .demo-isi) { background: transparent; box-shadow: inset 0 0 0 1px var(--garis); color: var(--teks); }
@media (max-width: 900px) {
  .demo { grid-template-columns: 1fr; max-width: 480px; gap: 40px; }
  .demo > * + *::before { top: -40px; left: 50%; width: 1px; height: 40px; }
  .demo > * + *::after { top: -36px; left: 50%; margin: 0 0 0 -16px; transform: rotate(90deg); }
}
.kerja-penutup { margin: 56px auto 0; max-width: 40em; text-align: center; font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.unggul-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.unggul { background: var(--abu); border-radius: 28px; padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; }
.seksi.abu .unggul { background: #fff; }
.unggul .ik { font-size: 30px; color: var(--oranye); stroke-width: 1.5; margin-bottom: 6px; }
.unggul h3 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.22; }
.unggul p { margin: 0; font-size: 16px; color: var(--teks); }
.unggul .bukti-kecil { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 600; color: var(--oranye-teks); }
.mentor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.mentor { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mentor .foto { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; background: var(--abu-2); margin-bottom: 14px; display: grid; place-items: center; font-size: 44px; font-weight: 650; color: #fff; }
.mentor .foto.inisial { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--garis); font-size: 48px; font-weight: 600; letter-spacing: -.02em; }
.mentor .foto img { width: 100%; height: 100%; object-fit: cover; }
.mentor b { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.mentor .peran { font-size: 14px; font-weight: 600; color: var(--oranye-teks); }
.mentor p { margin: 6px 0 0; font-size: 15px; color: var(--teks); max-width: 22em; }
.komunitas-blok { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: center; }
.komunitas-blok > div { background: #fff; border-radius: 28px; padding: 34px 20px 30px; }
.komunitas-blok .angka-besar { font-size: clamp(44px, 5vw, 72px); }
.komunitas-blok p { margin: 10px 0 0; color: var(--teks); font-size: 15px; }
.foto-lebar { margin: 48px auto 0; max-width: 980px; border-radius: 28px; overflow: hidden; }
.foto-lebar img { width: 100%; }
@media (max-width: 900px) {
  .unggul-grid { grid-template-columns: 1fr 1fr; }
  .mentor-grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .komunitas-blok { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .unggul-grid { grid-template-columns: 1fr; }
  .mentor .foto { width: 104px; height: 104px; font-size: 36px; }
  .mentor .foto.inisial { font-size: 38px; }
  .mentor b { font-size: 18px; }
}

/* Foto praktik Zoom sebagai sel ke-6 grid keunggulan */
.unggul.unggul-foto { padding: 0; overflow: hidden; position: relative; min-height: 300px; margin: 0; background: #0d0d0f; }
.unggul-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.unggul-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 18px; font-size: 14px; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
@media (max-width: 640px) { .unggul.unggul-foto { min-height: 360px; } }

/* =====================================================================
   v5 (18 Okt 2026): tanpa contoh, kelas diarahkan ke LP, kartu berposter
   ===================================================================== */
.hero-foto { width: min(920px, 90vw); margin: clamp(36px, 5vw, 56px) auto 0; }
.hero-foto .layar img { opacity: 1; object-fit: cover; object-position: center; }
.hero-foto .keterangan-foto { margin-top: 14px; }

.mentor-grid.dua { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 48px; }

.kepala-kelas { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.kepala-kelas .intro { max-width: 36em; }
.kepala-kelas .galeri-kontrol { margin: 0; flex: none; }
.jalur-kelas { padding-top: 40px; padding-bottom: 24px; gap: 22px; }

.kartu-poster { flex: none; width: min(390px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1px var(--abu-2), 0 24px 48px -36px rgba(0, 0, 0, .45); transition: transform .35s var(--ease-o), box-shadow .35s var(--ease-o); color: var(--ink); }
.kartu-poster:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--garis), 0 34px 60px -36px rgba(0, 0, 0, .5); }
.kartu-poster:focus-visible { outline: 3px solid var(--oranye-teks); outline-offset: 3px; }

.poster { position: relative; aspect-ratio: 16 / 10; padding: 22px 24px; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.tema-apk .poster { background: radial-gradient(120% 90% at 85% 10%, rgba(255, 107, 53, .55), transparent 55%), linear-gradient(155deg, #26282e 0%, #121316 100%); }
.tema-motion .poster { background: radial-gradient(110% 90% at 85% 0%, #ff9a6b 0%, transparent 55%), linear-gradient(155deg, #f26a33 0%, #c9431a 55%, #8a2c0f 100%); }
.tema-codex .poster { background: radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(155deg, #2b2e38 0%, #0e1014 100%); }
.poster-hias { position: absolute; right: -6px; top: 10px; width: 62%; height: auto; fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tema-apk .poster-hias, .tema-codex .poster-hias { stroke: rgba(255, 255, 255, .22); }
.poster-lencana { position: absolute; left: 20px; top: 18px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--oranye-teks); font-size: 12px; font-weight: 650; letter-spacing: .01em; }
.poster-ikon { position: absolute; right: 22px; top: 18px; width: 56px; height: 56px; border-radius: 16px; background: #fff; display: grid; place-items: center; font-size: 26px; color: var(--oranye-tombol); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55); }
.poster-ikon .ik { stroke-width: 1.9; }
.poster-label { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.poster-judul { position: relative; font-size: clamp(30px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: 6px; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }

.kartu-isi { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.penyelenggara { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); flex-wrap: wrap; }
.penyelenggara .logo-tanda { width: 22px; height: 22px; font-size: 11px; border-radius: 50%; }
.centang-biru { width: 16px; height: 16px; border-radius: 50%; background: var(--oranye-tombol); color: #fff; display: grid; place-items: center; font-size: 10px; }
.centang-biru .ik { stroke-width: 3.2; }
.penyelenggara .kategori { font-weight: 500; color: var(--teks); }
.kartu-isi h3 { margin: 4px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.kartu-isi .untuk { margin: 0; font-size: 15px; color: var(--teks); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta-kelas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 14px; color: var(--teks); }
.meta-kelas > span:not(.chip-video) + span::before { content: "·"; margin-right: 10px; color: var(--garis); }
.chip-video { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff3ee; color: var(--oranye-teks); font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px #ffd9c7; }
.chip-video .ik { font-size: 15px; }
.kaki-kartu { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kaki-kartu .harga { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.chip-level { padding: 6px 12px; border-radius: 999px; background: var(--abu); color: var(--teks); font-size: 13px; font-weight: 500; white-space: nowrap; }
.kartu-isi .tautan { font-size: 15px; margin-top: 4px; }

@media (max-width: 900px) {
  .kepala-kelas { flex-direction: column; align-items: flex-start; }
  .kepala-kelas .galeri-kontrol { align-self: flex-end; }
}
@media (max-width: 640px) {
  .mentor-grid.dua { grid-template-columns: 1fr 1fr; gap: 20px; }
  .kartu-poster { width: 84vw; }
  .poster-ikon { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
}

/* =====================================================================
   v6: adegan data pembuka (angka besar satu per satu saat scroll)
   ===================================================================== */
.data-adegan { position: relative; background: var(--hitam); color: #f5f5f7; }
.data-tahan { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.data-tahan .wadah { position: relative; width: 100%; }
.data-adegan .eyebrow { color: var(--pudar); text-align: center; }
.data-panggung { position: relative; display: grid; min-height: clamp(320px, 52vh, 460px); margin-top: 18px; }
.data-langkah { grid-area: 1 / 1; align-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .8s var(--ease-o); pointer-events: none; }
.data-langkah.aktif { opacity: 1; transform: none; pointer-events: auto; }
.data-langkah.lewat { transform: translateY(-28px); }
.data-angka { font-size: clamp(76px, 15vw, 196px); font-weight: 700; letter-spacing: -.05em; line-height: .95; color: var(--oranye-malam); font-variant-numeric: tabular-nums; }
.data-ket { margin: 0; max-width: 30em; font-size: clamp(20px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: #f5f5f7; text-wrap: balance; }
.data-arti { margin: 0; max-width: 34em; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: #a1a1a6; text-wrap: pretty; }
.data-sumber { font-size: 13px; color: #a1a1a6; max-width: 46em; }
.data-penutup .h-1 { color: #f5f5f7; max-width: 15em; }
.data-penutup .intro { color: #a1a1a6; text-align: center; margin-left: auto; margin-right: auto; }
.data-titik { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.data-titik i { width: 8px; height: 8px; border-radius: 999px; background: #3a3a3c; transition: width .4s var(--ease), background .4s; }
.data-titik i.aktif { width: 26px; background: var(--oranye-malam); }
html:not(.js) .data-adegan { height: auto !important; }
html:not(.js) .data-tahan { position: relative; height: auto; padding: 96px 0; }
html:not(.js) .data-panggung { display: flex; flex-direction: column; gap: 72px; }
html:not(.js) .data-langkah { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .data-adegan { height: auto !important; }
  .data-tahan { position: relative; height: auto; padding: 96px 0; }
  .data-panggung { display: flex; flex-direction: column; gap: 72px; }
  .data-langkah { opacity: 1; transform: none; }
  .data-titik { display: none; }
}

/* =====================================================================
   v7 (18 Okt 2026): kelas premium ala Apple
   ===================================================================== */
/* Hero: judul bergradasi, laptop membesar saat digulir, cahaya hangat di belakang */
.h-hero .aksen { background: linear-gradient(96deg, #f0602a 0%, #d24a17 45%, #9a3412 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .06em; }
.hero-foto { position: relative; isolation: isolate; }
.hero-foto::before { content: ""; position: absolute; left: 6%; right: 6%; top: 14%; bottom: -4%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 107, 53, .26), rgba(255, 107, 53, 0)); filter: blur(36px); }
.hero-foto .laptop { transform: scale(var(--sk, 1)); transform-origin: 50% 100%; will-change: transform; }
.hero-foto .laptop-layar { box-shadow: 0 0 0 1px #2c2c2e, 0 60px 110px -50px rgba(0, 0, 0, .55); }

/* Adegan data: angka bergradasi + cahaya */
.data-tahan::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(980px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 107, 53, .15), rgba(255, 107, 53, 0) 72%); pointer-events: none; }
.data-angka { background: linear-gradient(180deg, #ffd0b5 0%, #ff8a5c 42%, #ff5a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .03em; }

/* Kegunaan AI: bento berilustrasi */
.bento-ai { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.ubin-ai { --bg-ubin: var(--abu); grid-column: span 2; position: relative; overflow: hidden; border-radius: 30px; background: var(--bg-ubin); padding: clamp(28px, 2.8vw, 40px); display: flex; flex-direction: column; gap: 28px; min-height: 460px; color: var(--ink); }
.ubin-ai h3 { margin: 0; font-size: clamp(24px, 2.1vw, 30px); font-weight: 650; letter-spacing: -.024em; line-height: 1.12; text-wrap: balance; }
.ubin-ai p { margin: 12px 0 0; font-size: 17px; line-height: 1.47; color: var(--teks); max-width: 28em; }
.ubin-ai.u-0 { --bg-ubin: #0b0b0d; grid-column: span 4; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 40px; color: #f5f5f7; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 107, 53, .26), rgba(255, 107, 53, 0) 60%), var(--bg-ubin); }
.ubin-ai.u-0 h3 { font-size: clamp(30px, 3vw, 44px); }
.ubin-ai.u-0 p { color: #a1a1a6; font-size: clamp(17px, 1.4vw, 19px); }
.ubin-gambar { margin-top: auto; color: #8e8e93; }
.ubin-ai.u-0 .ubin-gambar { margin-top: 0; color: rgba(255, 255, 255, .55); }
.il { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .7s var(--ease-o); }
.il .isi { fill: currentColor; fill-opacity: .07; }
.il .tutup { fill: var(--bg-ubin); fill-opacity: 1; }
.ubin-ai:not(.u-0) .il .tutup { fill: #fbfbfd; }
.il .redup { opacity: .45; }
.il .redup-isi, .il .redup-isi * { fill: currentColor; fill-opacity: .16; stroke: none; }
.il .aksen { stroke: var(--oranye); }
.il .aksen-isi { fill: var(--oranye); stroke: none; }
.ubin-ai:hover .il { transform: translateY(-6px) scale(1.025); }
.kerja-penutup { margin-top: 64px; }
@media (max-width: 1068px) {
  .bento-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ubin-ai, .ubin-ai.u-0 { grid-column: span 1; }
  .ubin-ai.u-0 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento-ai { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; }
  .ubin-ai, .ubin-ai.u-0 { grid-column: auto; min-height: 0; display: flex; flex-direction: column; gap: 24px; padding: 28px 24px; border-radius: 26px; }
  .il { max-width: 300px; }
}

/* Keunggulan: foto menempel di kiri, lima aturan bernomor di kanan */
.unggul-tata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); margin-top: 72px; align-items: start; }
.unggul-media { position: sticky; top: calc(var(--nav) + 32px); margin: 0; height: min(76vh, 720px); border-radius: 30px; overflow: hidden; background: #0d0d0f; box-shadow: 0 50px 90px -60px rgba(0, 0, 0, .6); }
.unggul-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.unggul-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 26px 22px; font-size: 14px; font-weight: 500; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); }
.unggul-daftar { list-style: none; margin: 0; padding: 0; }
.unggul-daftar li { padding: 44px 0; border-top: 1px solid var(--garis); }
.unggul-daftar li:first-child { border-top: 0; padding-top: 12px; }
.unggul-no { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--oranye-teks); font-variant-numeric: tabular-nums; }
.unggul-daftar h3 { margin: 0; font-size: clamp(26px, 2.5vw, 34px); font-weight: 650; letter-spacing: -.026em; line-height: 1.1; }
.unggul-daftar p { margin: 12px 0 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: var(--teks); max-width: 30em; }
.unggul-daftar .bukti-kecil { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--oranye); font-size: 15px; color: var(--ink); }
@media (max-width: 900px) {
  .unggul-tata { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .unggul-media { position: relative; top: auto; height: auto; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; }
  .unggul-daftar li { padding: 32px 0; }
  .unggul-daftar li:first-child { padding-top: 8px; }
}

/* Pengajar: kartu besar */
.mentor-grid.dua { grid-template-columns: repeat(2, minmax(0, 480px)); gap: 24px; justify-content: center; margin-top: 64px; }
.mentor-grid.dua .mentor { background: #fff; border-radius: 30px; padding: 48px 36px 44px; gap: 4px; }
.mentor-grid.dua .mentor .foto { width: 168px; height: 168px; margin-bottom: 24px; box-shadow: 0 0 0 6px var(--abu), 0 24px 44px -26px rgba(0, 0, 0, .45); }
.mentor h3 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; letter-spacing: -.024em; line-height: 1.15; }
.mentor-grid.dua .mentor .peran { font-size: 15px; margin-top: 4px; }
.mentor-grid.dua .mentor p { margin-top: 14px; font-size: 17px; line-height: 1.5; }
@media (max-width: 640px) {
  .mentor-grid.dua { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; }
  .mentor-grid.dua .mentor { padding: 36px 24px 32px; border-radius: 26px; }
  .mentor-grid.dua .mentor .foto { width: 132px; height: 132px; }
}

/* Komunitas: angka besar tanpa kotak, dipisah garis tipis */
.komunitas-blok { gap: 0; margin-top: 72px; }
.komunitas-blok > div { background: none; border-radius: 0; padding: 8px 24px; border-left: 1px solid var(--garis); }
.komunitas-blok > div:first-child { border-left: 0; }
.komunitas-blok .angka-besar { font-size: clamp(56px, 6.4vw, 92px); letter-spacing: -.045em; background: linear-gradient(180deg, #ff7a45 0%, #c2410c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.komunitas-blok p { font-size: 17px; }
@media (max-width: 900px) {
  .komunitas-blok { margin-top: 48px; }
  .komunitas-blok > div { border-left: 0; border-top: 1px solid var(--garis); padding: 28px 0; }
  .komunitas-blok > div:first-child { border-top: 0; padding-top: 0; }
}

/* Testimoni: kartu abu, kutipan lebih besar */
#testimoni .testi { background: var(--abu); border-radius: 30px; padding: 36px 32px 32px; }
#testimoni .testi blockquote { font-size: clamp(18px, 1.45vw, 20px); font-weight: 500; letter-spacing: -.014em; line-height: 1.45; }
#testimoni .testi blockquote::before { content: "\201C"; display: block; height: 30px; font-size: 64px; font-weight: 700; line-height: .9; color: var(--oranye); }

/* Penutup: baris tiga kelas ala halaman banding produk */
.akhir .h-1, .akhir > .wadah-l > .intro { text-align: center; margin-left: auto; margin-right: auto; }
.akhir-kelas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1100px; margin: 64px auto 0; }
.akhir-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 28px 34px; border-radius: 30px; background: #161617; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .3s var(--ease), transform .4s var(--ease-o); }
.akhir-item:hover { background: #1d1d1f; transform: translateY(-4px); }
.akhir-ikon { width: 60px; height: 60px; margin-bottom: 12px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; color: #fff; background: linear-gradient(160deg, #ff8a5c 0%, #c9431a 100%); box-shadow: 0 18px 30px -16px rgba(255, 107, 53, .6); }
.akhir-ikon .ik { stroke-width: 1.8; }
.akhir-item b { font-size: clamp(22px, 2vw, 26px); font-weight: 650; letter-spacing: -.022em; color: #f5f5f7; }
.akhir-untuk { font-size: 15px; line-height: 1.45; color: #a1a1a6; max-width: 22em; min-height: 4.35em; }
.akhir-harga { margin-top: 6px; font-size: 21px; font-weight: 600; letter-spacing: -.016em; color: #f5f5f7; }
.akhir-item .tombol { margin-top: 14px; }
.akhir .kecil { text-align: center; margin-top: 40px; }
@media (max-width: 900px) {
  .akhir-kelas { grid-template-columns: 1fr; max-width: 480px; gap: 14px; margin-top: 48px; }
  .akhir-untuk { min-height: 0; }
}
@media (max-width: 640px) {
  .h-hero .pecah { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-foto .laptop { transform: none; }
  .ubin-ai:hover .il { transform: none; }
}

/* Wordmark */
.merek { font-family: "Plus Jakarta Sans", var(--font); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.merek > span { color: var(--oranye-teks); }
.logo { font-size: 17px; font-weight: 800; letter-spacing: -.03em; gap: 0; }
.nav.malam .merek > span { color: var(--oranye); }
.footer .logo { font-size: 16px; }
.penyelenggara .merek { font-size: 14px; color: var(--ink); }
.nav .tombol { gap: .3em; }
@media (max-width: 640px) {
  .hero .sub-besar { font-size: 21px; line-height: 1.22; }
}
@media (max-width: 380px) {
  .h-hero { font-size: 42px; }
}

/* =====================================================================
   v8 (18 Okt 2026): audit "tanpa AI slop" — warna polos, tanpa cahaya, ubin berikon
   ===================================================================== */
.h-hero .aksen { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--oranye-besar); padding-bottom: 0; }
.hero-foto::before, .data-tahan::before { display: none; }
.data-angka { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--oranye-malam); padding: 0; }
.komunitas-blok .angka-besar { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); padding-bottom: 0; }
#testimoni .testi blockquote::before { content: none; }
.unggul-daftar .bukti-kecil { border-left-color: var(--garis); color: var(--teks); }

/* Kegunaan AI: lima ubin abu, ikon garis di atas, teks di bawah */
.bento-ai { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ubin-ai, .ubin-ai.u-0 { --bg-ubin: var(--abu); grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 340px; background: var(--abu); color: var(--ink); }
.ubin-ai.u-3, .ubin-ai.u-4 { grid-column: span 3; }
.ubin-ai h3, .ubin-ai.u-0 h3 { font-size: clamp(24px, 2.2vw, 30px); }
.ubin-ai p, .ubin-ai.u-0 p { color: var(--teks); font-size: 17px; }
.ubin-ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--oranye-teks); font-size: 26px; }
.ubin-ikon .ik { stroke-width: 1.7; }
@media (max-width: 1068px) {
  .bento-ai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ubin-ai, .ubin-ai.u-0, .ubin-ai.u-3, .ubin-ai.u-4 { grid-column: span 1; }
  .ubin-ai.u-4 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento-ai { grid-template-columns: 1fr; }
  .ubin-ai, .ubin-ai.u-0, .ubin-ai.u-3, .ubin-ai.u-4 { grid-column: auto; min-height: 0; gap: 32px; }
}

/* Kartu kelas: nama hanya di poster, baris kategori polos */
h3.poster-judul { margin: 6px 0 0; }
.kartu-isi .kategori { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--teks); }
.kartu-isi .untuk { color: var(--ink); font-size: 16px; }

/* Penutup: satu ajakan */
.akhir .aksi { margin-top: 36px; }
/* Data singkat kelas: dua baris tanpa titik pemisah (titik di awal baris saat terlipat terlihat rusak) */
.kartu-isi .meta-kelas { flex-direction: column; align-items: flex-start; gap: 2px; }
.kartu-isi .meta-kelas > span + span::before { content: none; }

/* Susunan baru (18 Okt 2026): adegan cara belajar lebih pendek, FAQ satu kolom dengan panah bawah */
.narasi { height: 200vh; }
@media (max-width: 640px) { .narasi { height: 190vh; } }
.tanya-jawab { margin-top: 48px; }
.tanya-jawab summary { font-size: clamp(17px, 1.5vw, 20px); }
.tanya-jawab summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 1.8px solid var(--teks); border-bottom: 1.8px solid var(--teks); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.tanya-jawab details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.tanya-jawab details p { font-size: 17px; line-height: 1.55; }
/* Hero: foto laptop + HP berisi screenshot Zoom asli, dalam kartu abu membulat */
.hero-foto-gambar { width: min(1120px, 92vw); }
.hero-foto-gambar::before { display: none; }
.bingkai-hero { border-radius: 28px; overflow: hidden; background: #e9e8eb; transform: scale(var(--sk, 1)); transform-origin: 50% 100%; will-change: transform; }
.bingkai-hero img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .hero-foto-gambar { width: 100%; padding: 0 12px; } .bingkai-hero { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .bingkai-hero { transform: none; } }

/* Logo alat yang dipakai di kelas (di bawah foto hero) */
.alat-kelas { width: min(1080px, 100%); margin: clamp(48px, 5vw, 64px) auto 0; padding: 0 var(--gutter) clamp(64px, 7vw, 88px); text-align: center; }
.alat-judul { margin: 0 0 28px; font-size: 15px; font-weight: 600; color: var(--teks); }
.alat-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 28px 16px; }
.alat-daftar li { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #6e6e73; transition: color .25s var(--ease); }
.alat-daftar li:hover { color: var(--ink); }
.logo-alat { width: 34px; height: 34px; }
.alat-daftar span { font-size: 13px; line-height: 1.3; color: var(--teks); }
@media (max-width: 900px) { .alat-daftar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .alat-daftar { gap: 24px 8px; } .logo-alat { width: 30px; height: 30px; } .alat-daftar span { font-size: 12px; } }
/* 9 logo alat: satu baris di desktop, 3 × 3 di HP */
.alat-daftar { grid-template-columns: repeat(9, minmax(0, 1fr)); }
@media (max-width: 900px) { .alat-daftar { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) { .alat-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================================
   Tab Kelas & Layanan di nav (19 Okt 2026): panel menuju LP tiap kelas
   ===================================================================== */
.nav-grup { position: static; display: flex; align-items: center; }
.nav-buka { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: inherit; opacity: .82; transition: opacity .2s; height: var(--nav); }
.nav-buka:hover, .nav-buka[aria-expanded="true"] { opacity: 1; }
.nav-buka svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.nav-buka[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { position: absolute; left: 0; right: 0; top: var(--nav); background: rgba(251, 251, 253, .97); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .3s var(--ease-o), visibility .22s; }
.nav-grup.buka .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav.malam .nav-panel { background: rgba(22, 22, 23, .97); border-color: rgba(255, 255, 255, .08); }
.panel-isi { padding-top: 28px; padding-bottom: 32px; }
.panel-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.panel-daftar a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border-radius: 18px; transition: background .2s var(--ease); }
.panel-daftar a:hover, .panel-daftar a:focus-visible { background: rgba(0, 0, 0, .05); }
.nav.malam .panel-daftar a:hover { background: rgba(255, 255, 255, .08); }
.panel-daftar b { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.panel-daftar span { font-size: 14px; line-height: 1.45; color: var(--teks); }
.nav.malam .panel-daftar span { color: #a1a1a6; }
.panel-daftar em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--oranye-teks); }
.nav.malam .panel-daftar em { color: var(--oranye-malam); }
.panel-isi > .tautan { display: inline-flex; margin: 18px 0 0 22px; font-size: 14px; }
.nav.malam .panel-isi > .tautan { color: var(--oranye-malam); }

/* Menu HP: grup Kelas & Layanan */
.menu-hp { overflow-y: auto; }
.menu-hp .m-label { margin: 22px 0 6px; font-size: 13px; font-weight: 600; color: var(--teks); }
.menu-hp a.m-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--abu-2); }
.menu-hp a.m-sub b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.menu-hp a.m-sub span { font-size: 14px; color: var(--oranye-teks); white-space: nowrap; }
.menu-hp .tombol { margin-top: 28px; }

/* Bagian Layanan */
.grid-layanan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.kartu-layanan { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 3vw, 40px); border-radius: 28px; background: var(--abu); color: var(--ink); transition: transform .35s var(--ease-o), background .25s var(--ease); }
.kartu-layanan:hover { transform: translateY(-4px); background: #efeff2; }
.layanan-label { font-size: 13px; font-weight: 600; color: var(--teks); }
.kartu-layanan h3 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 650; letter-spacing: -.026em; line-height: 1.1; }
.kartu-layanan p { margin: 0; max-width: 30em; font-size: 17px; line-height: 1.5; color: var(--teks); }
.layanan-harga { margin-top: 12px; font-size: 19px; font-weight: 650; letter-spacing: -.016em; }
.kartu-layanan .tautan { font-size: 17px; }
@media (max-width: 1068px) { .nav-grup { display: none; } }
@media (max-width: 760px) { .grid-layanan { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; } }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } }
.nav-tautan { align-items: center; align-self: stretch; }
.nav-masuk { font-size: 13px; opacity: .82; white-space: nowrap; transition: opacity .2s; }
.nav-masuk:hover { opacity: 1; }
@media (max-width: 1068px) { .nav-dalam > .nav-masuk { margin-left: auto; } .nav .tombol { margin-left: 0; } }
@media (max-width: 420px) { .nav-dalam > .nav-masuk { display: none; } }

/* =====================================================================
   Kintsugi 19 Okt 2026 (diagnosis cek/kintsugi-20261019): 3 butir — skala huruf, warna nyaris sama,
   sudut bulat. Kartu poster kelas dikecualikan (permintaan pemilik).
   ===================================================================== */
/* ---------- Butir 1: skala huruf per peran ---------- */
/* judul kecil (h3): 2 tingkat = 12 (footer) dan 28 (isi) */
.ubin-ai h3, .ubin-ai.u-0 h3, .unggul-daftar h3 { font-size: 28px !important; }
/* teks utama: 13 (kecil) / 17 (isi) / 21 (pengantar) */
.catatan-kaki li, .alat-daftar span { font-size: 13px !important; }
.badan, .data-arti, .testi blockquote, #testimoni .testi blockquote, .alat-judul, .ubin-ai p, .ubin-ai.u-0 p, .unggul-daftar p, .tanya-jawab details p, .kerja-penutup { font-size: 17px !important; }
.intro, .data-ket, .hero .sub-besar, .data-penutup .intro { font-size: 21px !important; }
/* keterangan: 12 (tanda catatan) / 13 (keterangan foto, nama) */
sup.ck, sup.ck a { font-size: 12px !important; line-height: 0; }
.keterangan-foto, .unggul-media figcaption, .testi .orang b, .testi .orang small, .unggul-daftar .bukti-kecil { font-size: 13px !important; }
/* tombol & tautan: 13 / 17 (harga tetap besar) */
.pita, .pita .tautan, .nav-tautan { font-size: 13px !important; }
.tautan, .galeri-kontrol button, .tombol { font-size: 17px !important; }
.nav .tombol, .pita .tautan { font-size: 13px !important; }
/* lainnya: 13 (sumber, kaki) / 17 (label bagian, peran, merek) */
.footer-bawah span, .data-sumber, .angka-grid p, .komunitas-blok p { font-size: 13px !important; }
.eyebrow, .mentor .peran, .mentor-grid.dua .mentor .peran, .footer .logo, .penyelenggara .merek { font-size: 17px !important; }

/* ---------- Butir 2: warna nyaris sama ---------- */
:root { --ink: #000; --oranye-tombol: #c2410c; --oranye-besar: #c2410c; }
.hero .sub-besar { color: #6e6e73 !important; }                         /* #86868B → #6E6E73, kontras 5,0 di putih */
.data-adegan .eyebrow, .narasi .eyebrow, .narasi .kecil { color: #a1a1a6 !important; } /* di latar hitam: ke #A1A1A6 (8,1), bukan #6E6E73 (4,2 melanggar) */
.h-hero .aksen { color: #c2410c !important; }
.nav { background: rgba(245, 245, 247, .82) !important; }
.galeri-kontrol button, .mentor .foto { background: #f5f5f7 !important; }
.unggul-media, .unggul.unggul-foto { background: #000 !important; }        /* alas di bawah foto, tidak tampil */

/* ---------- Butir 3: sudut bulat 3 jenis ---------- */
.ubin-ikon { border-radius: 14px !important; }
.rel-wa img, .bingkai-hero, .ubin-ai, .ubin-ai.u-0, .unggul-media, .testi, #testimoni .testi,
.mentor-grid.dua .mentor, .slide .foto, .foto-bukti, .daftar-kursus, .kelas-tim { border-radius: 28px !important; }
@media (max-width: 640px) {
  .ubin-ai, .ubin-ai.u-0, .mentor-grid.dua .mentor, .bingkai-hero { border-radius: 28px !important; }
}

/* Kartu poster kelas tetap seperti aslinya (aturan global di atas tidak boleh mengubahnya) */
.kartu-isi .tautan { font-size: 15px !important; }
.kartu-poster { --ink: #1d1d1f; }
/* Kintsugi putaran 2 (tanpa menyentuh kartu kelas): satukan ukuran sisa ke tingkat yang sudah ada */
.footer-tagline { font-size: 13px !important; }
.faq summary, .tanya-jawab summary { font-size: 17px !important; }
.layanan-harga { font-size: 24px !important; }
.mentor h3, .mentor-grid.dua .mentor h3 { font-size: 28px !important; }
@media (max-width: 640px) { .mentor h3, .mentor-grid.dua .mentor h3 { font-size: 24px !important; } }
.footer ul.tautan-footer a, .footer ul.tautan-footer li { font-size: 13px !important; }
.kartu-layanan h3 { font-size: 28px !important; }
@media (max-width: 640px) { .mentor h3, .mentor-grid.dua .mentor h3 { font-size: 28px !important; } }

/* ---------- Halaman kelas /kelas/<nama>/ dan katalog /kelas/ (19 Okt 2026, satu cetakan untuk semua kelas) ---------- */
.hal-kelas main { padding-top: var(--nav); }
.hk-hero { padding: clamp(28px, 4vw, 48px) 0 clamp(72px, 9vw, 120px); }
.hk-remah { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--teks); margin-bottom: clamp(24px, 3.5vw, 40px); }
.hk-remah a { color: var(--oranye-teks); }
.hk-hero-tata { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hk-hero .eyebrow { font-size: 17px; }
.hk-hero h1 { font-size: clamp(36px, 4.6vw, 60px); }
.hk-fakta { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hk-fakta li { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 550; }
.hk-fakta .ik { font-size: 18px; color: var(--oranye-teks); stroke-width: 2.4; }
.hk-beli { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.hk-harga { font-size: clamp(28px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hk-catatan { font-size: 13px; color: var(--teks); line-height: 1.5; margin: 12px 0 0; max-width: 52ch; }
.hk-kedua { margin: 16px 0 0; }
.hk-poster .poster { aspect-ratio: 5 / 4; border-radius: 28px; padding: clamp(26px, 3vw, 40px); box-shadow: 0 50px 90px -56px rgba(0, 0, 0, .7); }
.hk-poster .poster-judul { display: block; font-size: clamp(36px, 4vw, 56px); }
.hk-poster .poster-lencana { left: clamp(22px, 2.6vw, 34px); top: clamp(22px, 2.6vw, 32px); font-size: 13px; }
.hk-poster .poster-ikon { right: clamp(22px, 2.6vw, 34px); top: clamp(20px, 2.4vw, 30px); width: 64px; height: 64px; font-size: 30px; }
@media (max-width: 900px) {
  .hk-hero-tata { grid-template-columns: 1fr; }
  .hk-poster .poster { aspect-ratio: 16 / 10; }
}

/* data bersumber (gelap) */
.hk-data { background: var(--hitam); color: #f5f5f7; }
.hk-data .eyebrow { color: #a1a1a6 !important; }
.hk-data .h-1 { max-width: 18em; font-size: clamp(32px, 4.4vw, 56px); }
.hk-angka-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.hk-angka .angka-besar { color: #fff; font-size: clamp(72px, 9vw, 120px); font-weight: 700; letter-spacing: -.05em; }
.hk-ket { font-size: 21px; line-height: 1.4; color: #f5f5f7; margin: 16px 0 0; max-width: 26em; }
.hk-arti { font-size: 17px; color: #a1a1a6; margin: 10px 0 0; }
.hk-sumber { font-size: 13px; color: #86868b; margin: clamp(32px, 4vw, 48px) 0 0; }

/* isi kelas: baris bernomor dengan durasi */
.hk-isi { list-style: none; padding: 0; margin: clamp(32px, 4vw, 48px) 0 0; display: grid; gap: 12px; }
.hk-isi li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; background: #fff; border-radius: 28px; padding: 22px 26px; }
.hk-no { font-size: 13px; font-weight: 650; color: var(--oranye-teks); padding-top: 6px; font-variant-numeric: tabular-nums; }
.hk-isi h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.hk-isi p { margin: 6px 0 0; font-size: 17px; color: var(--teks); line-height: 1.5; }
.hk-waktu { font-size: 13px; font-weight: 600; color: var(--teks); white-space: nowrap; padding-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .hk-isi li { grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 20px; }
  .hk-waktu { grid-column: 2; padding-top: 0; }
}

/* contoh APK: HP + foto kelas */
.hk-contoh-apk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 56px); }
.hk-contoh-apk figure { margin: 0; }
.hk-contoh-apk .foto-bukti { margin: 0; max-width: none; border-radius: 28px; }
.hk-contoh-apk .hp-besar { margin: 0 auto; }
.hk-contoh-apk .keterangan-foto { text-align: center; margin-top: 14px; }
@media (max-width: 760px) { .hk-contoh-apk { grid-template-columns: 1fr; } .hk-contoh-apk .hp-besar { width: min(240px, 64vw); } }

/* dua bagian putih berurutan tidak perlu jarak ganda */
.hal-kelas .seksi:not(.abu):not(.hk-data) + .seksi:not(.abu):not(.hk-data) { padding-top: 0; }
.hal-kelas .seksi:not(.abu) .mentor-grid.dua .mentor { background: var(--abu); }
.mentor-grid.dua.satu { grid-template-columns: minmax(0, 480px); }

/* harga */
.hk-harga-kartu { max-width: 640px; margin: clamp(32px, 4vw, 48px) auto 0; background: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 44px); box-shadow: 0 30px 60px -48px rgba(0, 0, 0, .4); }
.hk-harga-atas { display: flex; flex-direction: column; gap: 4px; padding-bottom: 24px; border-bottom: 1px solid var(--abu-2); }
.hk-nama { font-size: 17px; font-weight: 600; color: var(--teks); }
.hk-harga-kartu .hk-harga { font-size: clamp(44px, 5vw, 60px); line-height: 1.05; }
.hk-sekali { font-size: 13px; color: var(--teks); }
.hk-harga-kartu h3 { margin: 24px 0 12px; font-size: 17px; font-weight: 650; }
.hk-termasuk { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hk-termasuk li { display: flex; gap: 10px; font-size: 17px; line-height: 1.45; }
.hk-termasuk .ik { flex: none; font-size: 18px; color: var(--oranye-teks); stroke-width: 2.4; margin-top: 3px; }
.hk-rinci { margin: 24px 0 0; padding-top: 6px; border-top: 1px solid var(--abu-2); }
.hk-rinci dt { margin-top: 16px; font-size: 13px; font-weight: 650; color: var(--teks); }
.hk-rinci dd { margin: 4px 0 0; font-size: 17px; line-height: 1.5; }
.hk-harga-kartu .tombol { width: 100%; margin-top: 28px; }
.hk-harga-kartu .hk-catatan { text-align: center; margin-left: auto; margin-right: auto; }

/* katalog /kelas/ */
.hk-katalog { padding-top: clamp(48px, 6vw, 80px); }
.hk-katalog h1.h-1 { font-size: clamp(38px, 5.6vw, 72px); }
@media (max-width: 640px) {
  .hk-angka-grid { grid-template-columns: 1fr; }
  .hk-angka .angka-besar { font-size: 80px; }
}

/* ---------- Layanan dari portofolio + produk "Segera" (19 Okt 2026) ---------- */
.grid-layanan.kecil { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.kartu-layanan.kecil { padding: clamp(24px, 2.4vw, 32px); }
.kartu-layanan.kecil h3 { font-size: 21px !important; letter-spacing: -.02em; line-height: 1.25; }
.kartu-layanan.kecil p { font-size: 15px; }
.kartu-layanan.kecil .layanan-harga { font-size: 21px !important; margin-top: auto; padding-top: 10px; }
.kartu-layanan.kecil .tautan { font-size: 15px !important; }
.segera { margin-top: clamp(56px, 7vw, 88px); }
.segera-judul { margin: 0; font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
.segera-daftar { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.segera-daftar li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 28px; box-shadow: inset 0 0 0 1.5px var(--abu-2); }
.segera-chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--abu); color: var(--oranye-teks); font-size: 13px; font-weight: 650; }
.segera-daftar h4 { margin: 4px 0 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.segera-daftar p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--teks); }
.segera-kaki { margin: 18px 0 0; font-size: 15px; color: var(--teks); }
.segera-kaki .tautan { font-size: 15px !important; }
.hk-segera { padding-top: 0; }
.hk-segera .segera { margin-top: 0; }
.hk-segera .segera-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .segera-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid-layanan.kecil { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .grid-layanan.kecil, .segera-daftar, .hk-segera .segera-daftar { grid-template-columns: 1fr; }
}
/* Panel tab nav: latar pekat, karena panel Layanan kini tinggi dan menutupi judul hero */
.nav-panel { background: #fbfbfd; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.malam .nav-panel { background: #161617; }

/* ---------- Halaman kelas pola Classai (19 Okt 2026): info kiri + kartu beli menempel di kanan ---------- */
.hk2-hero { padding: clamp(28px, 4vw, 44px) 0 clamp(64px, 8vw, 104px); }
.hk2-kembali { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--teks); }
.hk2-kembali:hover { color: var(--ink); }
.hk2-kembali .ik { font-size: 16px; }
.hk2-tata { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 72px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.hk2-info { padding-top: clamp(8px, 2vw, 28px); }
.hk2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hk2-chip { padding: 6px 13px; border-radius: 999px; font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1.5px var(--abu-2); }
.hk2-chip.utama { background: #fff1ea; color: var(--oranye-teks); box-shadow: none; }
.hk2-judul { margin: 22px 0 0; font-size: clamp(44px, 5.6vw, 80px); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.hk2-tagline { margin: 22px 0 0; font-size: 21px; line-height: 1.45; color: var(--ink); max-width: 32em; }
.hk2-pengajar { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.hk2-foto { display: flex; }
.hk2-foto img, .hk2-avatar-c { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 2px #fff; background: var(--abu); }
.hk2-foto img + img { margin-left: -10px; }
.hk2-avatar-c { display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 800; font-size: 19px; }
.hk2-pengajar b { display: block; font-size: 15px; font-weight: 650; }
.hk2-pengajar small { display: block; font-size: 13px; color: var(--teks); }
.hk2-pils { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.hk2-pil, .hk2-alat { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: 15px; font-weight: 500; }
.hk2-pil { box-shadow: inset 0 0 0 1.5px var(--abu-2); }
.hk2-pil .ik { font-size: 17px; color: var(--oranye-teks); }
.hk2-alat { background: var(--abu); color: var(--ink); }
.hk2-deskripsi { margin: 26px 0 0; font-size: 17px; line-height: 1.6; color: var(--teks); max-width: 38em; }

.hk2-kartu { position: sticky; top: calc(var(--nav) + 24px); background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--abu-2), 0 40px 80px -48px rgba(0, 0, 0, .45); }
.hk2-kartu .poster { aspect-ratio: 16 / 10; border-radius: 0; }
.hk2-kartu .poster-judul { display: block; font-size: clamp(32px, 3vw, 42px); }
.hk2-kartu-isi { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); }
.hk2-hasil { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--abu); }
.hk2-hasil span { font-size: 13px; color: var(--teks); }
.hk2-hasil b { font-size: 17px; font-weight: 650; line-height: 1.4; }
.hk2-harga { margin-top: 20px; font-size: clamp(36px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hk2-harga-sub { font-size: 13px; color: var(--teks); margin-top: 4px; }
.hk2-kartu-isi .tombol { width: 100%; margin-top: 18px; }
.hk2-kartu-isi .tombol.garis { margin-top: 10px; }
.hk2-kartu-isi .tombol.garis .ik { font-size: 18px; }
.hk2-mikro { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--teks); text-align: center; }
.hk2-info-biaya { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff6f0; font-size: 13px; line-height: 1.5; color: #7c2d12; }

.hk2-dua { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.hk2-dua .h-2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.hk2-cocok, .hk2-kuasai { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.hk2-kuasai { grid-template-columns: 1fr 1fr; }
.hk2-cocok li, .hk2-kuasai li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #fff; font-size: 17px; line-height: 1.4; box-shadow: 0 0 0 1px var(--abu-2); }
.hk2-cocok .ik, .hk2-kuasai .ik { flex: none; font-size: 19px; color: var(--oranye-teks); margin-top: 1px; stroke-width: 2.2; }

.hk2-kur { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hk2-kur-kiri { position: sticky; top: calc(var(--nav) + 32px); }
.hk2-kur-kiri .h-1 { font-size: clamp(36px, 4.2vw, 56px); }
.hk2-modul-daftar { display: grid; gap: 14px; }
.hk2-modul { border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--abu-2); }
.hk2-m-kepala { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--abu); }
.hk2-m-no { font-size: 13px; font-weight: 700; color: var(--oranye-teks); font-variant-numeric: tabular-nums; }
.hk2-m-kepala b { flex: 1; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.hk2-m-jml { font-size: 13px; color: var(--teks); white-space: nowrap; }
.hk2-modul ul { list-style: none; margin: 0; padding: 0; }
.hk2-modul li { display: flex; align-items: center; gap: 12px; padding: 13px 20px; border-top: 1px solid var(--abu-2); font-size: 15px; line-height: 1.4; }
.hk2-modul li .ik { flex: none; font-size: 17px; color: #a1a1a6; }
.hk2-modul li.gratis .ik { color: var(--oranye-teks); }
.hk2-l-judul { flex: 1; }
.hk2-gratis { padding: 3px 10px; border-radius: 999px; background: #fff1ea; color: var(--oranye-teks); font-size: 13px; font-weight: 650; }
.hk2-l-waktu { font-size: 13px; color: var(--teks); white-space: nowrap; font-variant-numeric: tabular-nums; }

.hk2-ulasan-kepala { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.hk2-ulasan-kepala .h-1 { font-size: clamp(32px, 4vw, 52px); }
.hk2-ulasan-kepala .intro { font-size: 17px; margin: 0; }

.hk2-lain { display: grid; grid-template-columns: repeat(2, minmax(0, 390px)); gap: 22px; margin-top: 36px; }
.hk2-lain .kartu-poster { width: auto; }
.hal-kelas .h-2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; margin: 0; }

@media (max-width: 960px) {
  .hk2-tata, .hk2-kur, .hk2-dua, .hk2-ulasan-kepala { grid-template-columns: 1fr; }
  .hk2-kartu, .hk2-kur-kiri { position: static; }
  .hk2-kartu { max-width: 520px; }
}
@media (max-width: 640px) {
  .hk2-kuasai { grid-template-columns: 1fr; }
  .hk2-lain { grid-template-columns: 1fr; }
  .hk2-modul li { padding: 12px 16px; }
  .hk2-m-kepala { padding: 14px 16px; }
  .hk2-tagline { font-size: 19px; }
}