:root{
  --bg:#F3F6FC;--surface:#fff;--surface2:#F7FAFF;--text:#0A1F44;--muted:#51627F;
  --line:#E3EAF6;--blue:#1262CC;--blue-dark:#0F5BBF;--blue-soft:#E8F1FD;
  --green:#0B7A4D;--green-soft:#E3F5EC;--amber:#d78a0a;--amber-soft:#FFF1D6;--amber-text:#7A4F00;
  --red:#c23b2f;--red-soft:#fdeceb;
  --shadow:0 12px 36px rgba(24,39,75,.07);--radius:18px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}
a{text-decoration:none;color:inherit}
/* ---- Menu samping ---- */
.sidebar{position:fixed;z-index:40;left:0;top:0;bottom:0;width:264px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:30px;padding:26px 18px 22px;overflow-y:auto}
.brand{display:block;padding:0 6px}
.brandLogo{display:block;width:100%;max-width:184px;height:auto}
.nav{display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 14px;border-radius:12px;color:var(--muted);font-size:14px;font-weight:600;line-height:1.35}
.nav a:hover{background:var(--bg)}
.nav a.active{background:var(--blue-soft);color:var(--blue-dark);font-weight:700}
.navSvg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navText{flex:1;min-width:0}
.navTag{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 7px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text)}
.sidebarBottom{margin-top:auto}
.plan{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:var(--surface2);border-radius:18px;padding:16px}
.planTitle{font-size:13px;font-weight:800;line-height:1.4}
.plan p{font-size:12px;color:var(--muted);line-height:1.55;margin:0}
.plan .waBtn{margin-top:4px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;border:0;border-radius:12px;background:#25D366;color:#062B16;font-size:14px;font-weight:800;cursor:pointer}
.plan .waBtn:hover{background:#1fb855}
.plan .waBtn:focus-visible{outline:2px solid #128C7E;outline-offset:2px}
.waIcon{width:18px;height:18px;fill:currentColor;flex:none}
/* ---- Halaman utama ---- */
.main{margin-left:264px;padding:28px 40px 56px;max-width:1320px}
.mobileBrand{display:none}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.greeting small{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:2px}
.greeting h1{font-size:30px;line-height:1.2;margin:0;font-weight:800;letter-spacing:-.4px}
.topActions{display:flex;align-items:center;gap:14px}
.circleBtn{width:46px;height:46px;padding:0;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;color:var(--text);display:grid;place-items:center}
.circleBtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.authStatusBtn{min-height:46px;border:1px solid var(--line);background:#fff;color:var(--blue-dark);border-radius:12px;padding:0 16px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.authStatusBtn.on{color:var(--muted)}
#authModal,#lockModal{z-index:120}
.user{display:flex;align-items:center;gap:12px}
.avatar{width:46px;height:46px;border-radius:50%;background:#0B2D5C;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800}
.userName{font-size:14px;font-weight:700}
.userRole{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-top:2px}
/* ---- Banner ---- */
.hero{position:relative;overflow:hidden;background:var(--blue);border-radius:26px;color:#fff;padding:36px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;margin-bottom:30px}
.hero:before{content:"";position:absolute;width:420px;height:420px;border:56px solid rgba(255,255,255,.07);border-radius:50%;right:-110px;top:-150px}
.heroContent{position:relative;z-index:2;flex:1 1 380px;min-width:0;max-width:600px}
.heroEyebrow{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800}
.hero h2{font-size:34px;line-height:1.2;letter-spacing:-.6px;margin:14px 0;font-weight:800}
.hero p{font-size:15px;line-height:1.65;margin:0;max-width:520px}
.heroMeta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.heroMeta span{padding:7px 13px;border-radius:999px;background:#fff;color:var(--blue-dark);font-size:12px;font-weight:800}
.heroNext{position:relative;z-index:2;flex:0 0 300px;background:#fff;color:var(--text);border-radius:20px;padding:14px}
.heroNextThumb{height:104px;border-radius:14px;background:#0B2D5C center/cover no-repeat;display:grid;place-items:center}
.heroNextIcon{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.78);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.heroNextIcon .ic{filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.heroNextIcon .ic{width:22px;height:22px}
.heroNextBody{padding:12px 4px 2px}
.heroNextLabel{font-size:12px;font-weight:700;color:var(--muted)}
.heroNextTitle{margin-top:4px;font-size:15px;font-weight:800;line-height:1.35}
.heroNextMeta{margin-top:4px;font-size:12px;color:var(--muted)}
.heroNextBtn{margin-top:12px;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
/* ---- Daftar materi ---- */
.sectionHeader{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 24px}
.sectionHeader h2{font-size:22px;margin:0;font-weight:800;letter-spacing:-.2px}
.sectionHeader p{font-size:13px;color:var(--muted);margin:4px 0 0}
.courseProgress{width:240px;margin-left:auto;font-size:13px;color:var(--muted);text-align:right}
.courseProgress strong{color:var(--text);font-size:13px}
.overallBar{height:8px;background:var(--line);border-radius:999px;margin-top:8px;overflow:hidden}
.overallBar span{display:block;width:0;height:100%;background:var(--blue);border-radius:999px;transition:width .35s ease}
.chapterRow{margin:0 0 32px}
.chapterHeader{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.chapterLeft{display:flex;align-items:center;gap:14px}
.chapterNumber{width:40px;height:40px;border-radius:12px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center;font-size:14px;font-weight:800}
.chapterName{font-size:18px;font-weight:800}
.chapterDesc{font-size:13px;color:var(--muted);margin-top:2px}
.chapterStatus{font-size:13px;color:var(--muted);white-space:nowrap}
.rowScroll{display:flex;align-items:flex-start;gap:20px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#cdd7ea transparent}
.rowScroll:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:12px}
.rowScroll::-webkit-scrollbar{height:8px}
.rowScroll::-webkit-scrollbar-thumb{background:#cdd7ea;border-radius:8px}
.rowScroll::-webkit-scrollbar-track{background:transparent}
.videoGroup{flex:0 0 clamp(260px,calc((100% - 40px) / 3),340px);display:flex;flex-direction:column;gap:12px;min-width:0;scroll-snap-align:start}
.chapterRight{display:flex;align-items:center;gap:14px;margin-left:auto}
.rowNav{display:flex;gap:8px}
.rowNav.hidden{display:none}
.rowArrow{width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--text);display:grid;place-items:center;cursor:pointer}
.rowArrow:hover:not(:disabled){background:var(--blue-soft);border-color:#C9D6EC}
.rowArrow:disabled{opacity:.35;cursor:default}
.rowArrow .ic{width:18px;height:18px}
.mediaCard{width:100%;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}
.mediaCard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ic{display:block;width:100%;height:100%}
.mediaThumb{height:148px;position:relative;background-color:#0B2D5C;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.videoGroup:nth-child(3n+2) .mediaThumb{background-color:#1262CC}
.videoGroup:nth-child(3n) .mediaThumb{background-color:#0F7FD0}
.mediaNum{position:absolute;left:12px;top:12px;min-width:30px;height:26px;padding:0 9px;border-radius:8px;background:#fff;color:var(--text);font-size:12px;font-weight:800;display:grid;place-items:center}
.mediaPlay{width:52px;height:52px;padding:0;border:1.5px solid rgba(255,255,255,.78);border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(10,31,68,.22);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .2s,transform .2s}
.mediaPlay:hover{background:rgba(255,255,255,.36);transform:scale(1.05)}
.mediaPlay .ic{width:22px;height:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.mediaCheck{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.mediaCheck .ic{width:16px;height:16px}
.mediaDur{position:absolute;right:12px;bottom:12px;background:rgba(10,31,68,.88);color:#fff;padding:4px 9px;border-radius:8px;font-size:12px;font-weight:700}
.mediaBody{padding:16px;display:flex;flex-direction:column;gap:8px}
.badge{align-self:flex-start;display:inline-flex;padding:4px 10px;border-radius:999px;background:#EEF1F7;color:var(--muted);font-size:11px;font-weight:800}
.badge.done{background:var(--green-soft);color:var(--green)}
.mediaCard h4{font-size:16px;line-height:1.35;margin:0;font-weight:800;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mediaDesc{font-size:13px;color:var(--muted);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* ---- Kartu quiz (di bawah videonya) ---- */
.mediaCard.quizCard{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px}
.quizCardIcon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center}
.quizCardIcon .ic{width:20px;height:20px}
.quizCard.locked .quizCardIcon{background:#EEF1F7;color:var(--muted)}
.quizCard.done .quizCardIcon{background:var(--green-soft);color:var(--green)}
.quizInfo{flex:1;min-width:0}
.quizInfo b{display:block;font-size:14px;font-weight:800}
.quizInfo span{display:block;font-size:12px;color:var(--muted)}
.quizBtn{min-height:44px;padding:0 16px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.quizBtn.ghost{background:#fff;border:1px solid #C9D6EC;color:var(--text)}
.quizLock{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted)}
.quizLock .ic{width:16px;height:16px}
.siteFooter{margin-top:22px;text-align:center;font-size:11px;color:var(--muted)}
.siteFooter a{color:var(--muted);text-decoration:underline}
.mobileNav{display:none}

/* Modal */
.modalOverlay{position:fixed;inset:0;background:rgba(12,20,36,.62);z-index:100;display:none;align-items:center;justify-content:center;padding:18px}
.modal{width:min(820px,100%);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.24);transition:width .25s ease}
.modal.theater{width:min(1200px,96vw)}
/* video selalu 16:9: lebar jendela dibatasi tinggi layar supaya bingkai tidak terpotong */
#lessonModalCard{width:min(820px,100%,calc((100vh - 140px) * 16 / 9))}
#lessonModalCard.theater{width:min(1200px,96vw,calc((100vh - 140px) * 16 / 9))}
#lessonModalCard:fullscreen{width:100vw;height:100vh;max-height:100vh;border-radius:0;display:flex;flex-direction:column}
#lessonModalCard:fullscreen .player{flex:1;height:auto;aspect-ratio:auto}
#lessonModalCard:fullscreen .realFrame{position:static;width:min(100%,calc((100vh - 64px) * 16 / 9));height:auto;aspect-ratio:16/9;margin:auto}
#lessonModalCard:-webkit-full-screen{width:100vw;height:100vh;max-height:100vh;border-radius:0;display:flex;flex-direction:column}
#lessonModalCard:-webkit-full-screen .player{flex:1;height:auto;aspect-ratio:auto}
#lessonModalCard:-webkit-full-screen .realFrame{position:static;width:min(100%,calc((100vh - 64px) * 16 / 9));height:auto;aspect-ratio:16/9;margin:auto}
.modalHeader{display:flex;justify-content:space-between;align-items:center;padding:16px 19px;border-bottom:1px solid var(--line)}
.modalHeader b{font-size:13px}
.headerBtns{display:flex;align-items:center;gap:8px}
.iconBtn,.close{width:31px;height:31px;border:0;border-radius:8px;background:#f0f2f6;color:#5c677a;cursor:pointer;font-size:13px}
.player{aspect-ratio:16/9;height:auto;background:#111827;position:relative;display:flex;align-items:center;justify-content:center}
.screen{width:84%;height:75%;border-radius:13px;background:linear-gradient(135deg,#16233e,#29426f);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff}
.screen b{font-size:23px;display:block;max-width:500px}
.screen small{display:block;margin-top:7px;opacity:.68;font-size:10px}
.controls{position:absolute;left:0;right:0;bottom:0;padding:18px 17px 13px;background:linear-gradient(transparent,rgba(0,0,0,.88));display:flex;align-items:center;gap:10px;color:#fff;font-size:10px}
.timeline{height:4px;background:#5d6677;border-radius:4px;flex:1}
.timeline span{display:block;width:0;height:100%;background:#fff;border-radius:4px}
.interactive{display:none;padding:18px 20px;border-top:1px solid var(--line)}
.interactive h4{font-size:13px;margin:0 0 10px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.answer{border:1px solid var(--line);background:#fff;border-radius:9px;text-align:left;padding:10px 11px;font-size:11px;cursor:pointer}
.answer:hover{border-color:#b9c8ff;background:#f8faff}
.answer.wrong{border-color:#f3c7cb;background:#fdf1f2}
.answer.correct{border-color:#b7e6cd;background:#eefbf3}
.feedback{font-size:11px;font-weight:800;min-height:15px;margin-top:9px}
.videoDoneBox{display:none;padding:18px 20px;text-align:center}
.videoDoneBox .doneIcon{width:44px;height:44px;border-radius:12px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 10px;font-size:19px}
.videoDoneBox h4{font-size:14px;margin:0 0 6px}
.videoDoneBox p{font-size:11.5px;color:var(--muted);margin:0 0 14px;line-height:1.6}
.quiz{padding:20px}
.quizBox{border:1px solid var(--line);border-radius:14px;background:#f8faff;padding:17px}
.quizBox h3{font-size:14px;margin:0 0 6px}
.quizBox p{font-size:11px;color:var(--muted);margin:0 0 13px}
.lockModal{width:min(470px,100%)}
.lockBody{text-align:center;padding:28px}
.lockIcon{width:52px;height:52px;border-radius:15px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center;margin:0 auto 13px}
.lockIcon svg{width:26px;height:26px}
.lockIcon.warn{background:var(--red-soft);color:var(--red)}
.lockBody h3{font-size:19px;margin:0}
.lockBody p{font-size:11.5px;line-height:1.65;color:var(--muted);max-width:370px;margin:8px auto 19px}
.modalBtn{border:0;background:var(--blue);color:#fff;border-radius:10px;padding:10px 16px;font-size:11px;font-weight:850;cursor:pointer;width:100%}
.modalBtn.subscribe{background:var(--green)}
.authOptions{display:flex;flex-direction:column;gap:9px;max-width:280px;margin:0 auto}
.authInput{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:12px;width:100%;box-sizing:border-box;font-family:inherit}
.linkBtn{border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:750;cursor:pointer;padding:6px}
.toast{position:fixed;right:23px;bottom:22px;background:#172033;color:#fff;border-radius:10px;padding:11px 14px;font-size:11px;display:none;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.2)}

@media(max-width:1050px){.hero h2{font-size:30px}}
@media(max-width:760px){
.sidebar{display:none}
.main{position:relative;margin:0;max-width:none;padding:calc(20px + env(safe-area-inset-top, 0px)) 20px calc(92px + env(safe-area-inset-bottom, 0px))}
.mobileBrand{display:block;margin:0 0 14px}
.mobileLogo{display:block;height:36px;width:auto}
.topbar{margin-bottom:18px}
.greeting h1{font-size:26px}
.userName{display:none}
.topActions{position:absolute;top:calc(15px + env(safe-area-inset-top, 0px));right:20px;gap:10px}
.mediaCard.quizCard{padding:12px}
.quizBtn{padding:0 12px}
.hero{padding:22px;border-radius:22px;gap:18px;margin-bottom:24px}
.hero h2{font-size:22px;margin:12px 0}
.hero p{font-size:14px}
.heroNext{flex:1 1 100%}
.sectionHeader{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}
.sectionHeader h2{font-size:18px}
.courseProgress{width:100%;text-align:left}
.chapterRow{margin-bottom:26px}
.chapterName{font-size:16px}
.chapterDesc{font-size:12px;max-width:230px}
.rowScroll{gap:14px;margin-right:-20px;padding:4px 20px 12px 0}
.rowNav{display:none}
.chapterStatus{white-space:normal;text-align:right}
.rowScroll::-webkit-scrollbar{height:6px}
.rowScroll::-webkit-scrollbar-thumb{background:#d7deec;border-radius:6px}
.videoGroup{flex:0 0 280px;scroll-snap-align:start}
.mediaThumb{height:130px}
.mobileNav{position:fixed;left:0;right:0;bottom:0;height:calc(72px + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom, 0px);background:#fff;border-top:1px solid var(--line);z-index:60;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mobileNav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:12px;font-weight:600}
.mobileNav a.active{color:var(--blue-dark);font-weight:800}
.mobileNav .navSvg{width:22px;height:22px}
.mTag{position:absolute;top:8px;left:calc(50% + 6px);font-style:normal;font-size:9px;font-weight:800;padding:2px 5px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text)}
.answers{grid-template-columns:1fr}
.modalHeader{padding:14px 15px}
.toast{bottom:calc(84px + env(safe-area-inset-bottom, 0px));right:12px;left:12px;text-align:center}
}

.modalBtn{display:block;text-align:center;text-decoration:none}
.modalBtn.ghost{background:var(--blue-soft);color:var(--blue)}
.authError{color:var(--red);font-size:11px;min-height:15px;text-align:left}
.loadingBox{padding:40px 0;text-align:center;color:var(--muted);font-size:13px}
.loadError{margin-top:26px;padding:18px 20px;border:1px solid #f3c7cb;background:#fdf1f2;border-radius:14px;font-size:12px;line-height:1.7;color:#7a2a23}
.loadError small{color:#a05a54}
/* ---- Akun, hapus akun, footer ---- */
.modalBtn.dangerGhost{background:var(--red-soft);color:var(--red)}
.accAvatar{font-size:22px;font-weight:850;color:#3152a6;background:#e3eaff}
.siteFooter{margin-top:22px;text-align:center;font-size:11px;color:var(--muted)}
.siteFooter a{color:var(--muted);text-decoration:underline}
.user{cursor:pointer}
/* Pemutar video sungguhan (iframe Bunny Stream) */
.realFrame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.dbgBox{position:absolute;left:8px;top:8px;z-index:5;background:rgba(0,0,0,.78);color:#7cfc9a;font:11px/1.5 ui-monospace,Consolas,monospace;padding:7px 9px;border-radius:7px;white-space:pre;pointer-events:none;max-width:92%}
/* Penutup gambar saat popup login/VIP tampil */
.gateCover{position:absolute;inset:0;z-index:6;background:#000;display:grid;place-items:center;font-size:44px;opacity:1}
/* ---- Pilih paket ---- */
#plansModal{z-index:130}
.plansModal{width:min(940px,100%);max-height:92vh;overflow:auto}
.plansBody{padding:18px 20px 22px}
.plansBody>p{margin:0 0 14px;font-size:12px;line-height:1.6;color:var(--muted)}
.planGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.planCard{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 16px 16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.planCard.current{border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,85,231,.13)}
.planCard.focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(215,138,10,.17)}
.planName{font-size:18px;font-weight:850}
.planPrice{min-height:16px;font-size:12px;color:var(--muted)}
.planCard ul{flex:1;margin:4px 0 10px;padding-left:17px;font-size:11.5px;line-height:1.7;color:#3d4963}
.planTag{display:none;position:absolute;top:12px;right:12px;padding:4px 7px;border-radius:7px;background:var(--blue-soft);color:var(--blue);font-size:9px;font-weight:800}
.planCard.focus .planTag{background:var(--amber-soft);color:var(--amber)}
.planBtn{border:0;border-radius:10px;padding:11px 12px;background:var(--blue);color:#fff;font-size:11px;font-weight:850;cursor:pointer}
.planBtn.max{background:var(--green)}
.planBtn.ghost{background:var(--blue-soft);color:var(--blue)}
.plansFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:11px;color:var(--muted)}
@media(max-width:760px){
  .planGrid{grid-template-columns:1fr}
.plansFoot{flex-direction:column;align-items:stretch;text-align:center}
}
/* ---- Quiz: satu quiz per materi, beberapa soal ---- */
.quizTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.quizTop h3{margin:0}
.quizStep{font-size:11px;font-weight:800;color:var(--blue)}
.quizProgress{height:6px;border-radius:6px;background:#e3e9fa;overflow:hidden;margin-bottom:15px}
#quizProgressFill{height:100%;width:0;border-radius:6px;background:var(--blue);transition:width .2s}
.quizBox p.quizQ{font-size:13px;font-weight:700;line-height:1.55;color:#18233f;margin:0 0 13px}
.answer.selected{border-color:var(--blue);background:#eef3ff;font-weight:700}
.quizNav{display:flex;gap:10px;margin-top:16px}
.quizNav .modalBtn{flex:1;margin:0}
.quizNav .modalBtn:disabled{opacity:.45;cursor:not-allowed}
.quizScore{font-size:40px;font-weight:900;margin:4px 0 2px}
.quizScore.pass{color:var(--green)}
.quizScore.fail{color:var(--amber)}
.quizBox p.quizResultText{font-size:12px;font-weight:700;color:#18233f;margin:0 0 6px}
.quizBox p.quizWrong{font-size:12px;margin:0 0 6px}

/* ---- Atribut hidden selalu menang ---- */
[hidden]{display:none!important}

/* ---- Modul Pembelajaran: rak modul ---- */
.modulIntro{margin:-8px 0 22px;font-size:14px;color:var(--muted)}
.modulToolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-bottom:22px}
.modulTabs{display:flex;flex-wrap:wrap;gap:8px}
.modulTab{min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.modulTab.active{background:#0B2D5C;border-color:#0B2D5C;color:#fff;font-weight:800}
.modulSearch{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;width:300px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--muted)}
.modulSearch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.modulSearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--text)}
.modulGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.modulCard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.modulCard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.modulCover{position:relative;height:150px;display:grid;place-items:center}
.modulCat{position:absolute;left:12px;top:12px;background:#fff;color:var(--text);font-size:12px;font-weight:800;padding:4px 10px;border-radius:8px}
.modulIcon{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--blue-dark);display:grid;place-items:center}
.modulIcon .ic{width:26px;height:26px}
.modulBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:16px}
.modulMeta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.modulFmt{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dark)}
.modulBody h3{margin:0;font-size:16px;line-height:1.35;font-weight:800}
.modulBody p{margin:0;font-size:13px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modulFoot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.modulTime{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.modulTime .ic{width:14px;height:14px}
.modulOpen{min-height:44px;padding:0 22px;border:1px solid #C9D6EC;border-radius:12px;background:#fff;color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.modulChevron{display:none;flex:none;width:20px;height:20px;color:var(--muted)}
.modulEmpty{text-align:center;color:var(--muted);padding:40px 0;margin:0}

/* ---- Modul: keadaan "segera hadir" ---- */
.modulSoon{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:36px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:44px 48px}
.modulSoonText{flex:1 1 420px;min-width:0;max-width:580px;display:flex;flex-direction:column;gap:16px}
.soonChip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;padding:7px 13px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text)}
.soonChip .ic{width:14px;height:14px}
.modulSoonText h2{margin:0;font-size:34px;line-height:1.2;font-weight:800;letter-spacing:-.4px}
.modulSoonText p{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}
.soonBtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.soonWa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:14px;background:#25D366;color:#062B16;font-size:14px;font-weight:800;cursor:pointer}
.soonBack{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid #C9D6EC;border-radius:14px;background:#fff;color:var(--text);font-size:14px;font-weight:700;cursor:pointer}
.soonArt{position:relative;flex:0 0 300px;width:300px;height:250px}
.soonArt i{position:absolute;display:block;border-radius:20px}
.soonArt .a1{left:6px;top:34px;width:170px;height:200px;background:#0B2D5C;transform:rotate(-7deg)}
.soonArt .a2{left:56px;top:12px;width:170px;height:200px;background:var(--blue);transform:rotate(4deg)}
.soonArt .a3{position:absolute;left:104px;top:38px;width:176px;height:204px;box-sizing:border-box;border-radius:20px;background:#fff;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 14px 30px rgba(10,31,68,.14)}
.a3 .tile{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center}
.a3 .bar{height:10px;border-radius:6px;background:var(--line)}

/* ---- Modul: popup akses (belum login / belum MAX / di aplikasi) ---- */
#modulGateModal,#privGateModal{z-index:130}
.gateBox{position:relative;box-sizing:border-box;width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border-radius:26px;padding:34px;box-shadow:0 24px 60px rgba(10,31,68,.3)}
.gateClose{position:absolute;right:18px;top:18px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--bg);color:var(--text);display:grid;place-items:center;cursor:pointer}
.gateClose svg{width:18px;height:18px}
#modulGateBody,#privGateBody{display:flex;flex-direction:column;gap:16px}
.gateHead{display:flex;align-items:center;gap:12px}
.gateIcon{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center}
.gateIcon .ic{width:26px;height:26px}
.gatePill{font-size:11px;font-weight:800;letter-spacing:.6px;padding:5px 11px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text)}
#modulGateBody h2,#privGateBody h2{margin:0;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.3px}
#modulGateBody p,#privGateBody p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.gateList{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.gateList li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.gateList li span{flex:0 0 24px;height:24px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.gateList li span .ic{width:14px;height:14px}
.gatePrice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--surface2);border:1px solid var(--line)}
.gatePrice span{font-size:13px;color:var(--muted)}
.gatePrice b{font-size:15px;font-weight:800}
.gateBtns{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.gateBtn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border:1px solid #C9D6EC;border-radius:14px;background:#fff;color:var(--text);font-size:14px;font-weight:700;cursor:pointer}
.gateBtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.gateBtn.wa{background:#25D366;border-color:#25D366;color:#062B16;font-weight:800}
.gateBtn.text{border-color:transparent;background:transparent;color:var(--muted);min-height:44px}
.gateBtn .waIcon{width:18px;height:18px}
#modulGateBody .gateNote,#privGateBody .gateNote{text-align:center;font-size:12px;line-height:1.5}

/* ---- Modul: pembaca PDF ---- */
#modulReader{background:#E9EEF7;align-items:stretch;justify-content:stretch;z-index:110}
.readerShell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0}
.readerBar{flex:none;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top, 0px));background:#fff;border-bottom:1px solid var(--line)}
.readerClose{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--bg);color:var(--text);display:grid;place-items:center;cursor:pointer}
.readerTitle{flex:1;min-width:0;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readerPageInfo{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.readerBody{flex:1;min-height:0;overflow:auto;padding:16px 12px 40px;display:flex;flex-direction:column;align-items:center;gap:12px;-webkit-overflow-scrolling:touch}
.readerPg{flex:none;background:#fff;border-radius:4px;box-shadow:0 4px 16px rgba(10,31,68,.12)}
.readerPg canvas{display:block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.readerStatus{position:absolute;left:0;right:0;top:60px;bottom:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-size:14px;line-height:1.7;pointer-events:none}
.readerStatus:empty{display:none}
.readerStatus .readerRetry{pointer-events:auto;margin-top:14px;min-width:160px}

@media(max-width:760px){
  .modulIntro{margin:0 0 16px}
  .modulSoon{padding:22px;gap:20px;border-radius:22px}
  .modulSoonText h2{font-size:22px}
  .soonArt{flex:0 0 auto;align-self:center;transform:scale(.7);transform-origin:center top;height:180px;margin:0 auto}
  .soonBtns{flex-direction:column}
  .soonWa,.soonBack{width:100%}
  .modulSearch{width:100%}
  .modulTabs{flex-wrap:nowrap;overflow-x:auto;margin-right:-20px;padding-right:20px;scrollbar-width:none}
  .modulTabs::-webkit-scrollbar{display:none}
  .modulTab{flex:0 0 auto}
  .modulGrid{grid-template-columns:1fr;gap:12px}
  .modulCard{flex-direction:row;align-items:center;gap:14px;padding:12px;border-radius:18px}
  .modulCover{flex:0 0 64px;width:64px;height:64px;border-radius:14px}
  .modulCat,.modulBody p,.modulFoot,.modulMeta span:not(.modulFmt){display:none}
  .modulIcon{width:44px;height:44px;background:transparent;color:#fff}
  .modulIcon .ic{width:28px;height:28px}
  .modulBody{padding:0;gap:6px}
  .modulBody h3{font-size:15px}
  .modulChevron{display:block}
  #modulGateModal,#privGateModal{align-items:flex-end}
  .gateBox{width:100%;max-width:none;max-height:90vh;border-radius:26px 26px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom, 0px))}
  #modulGateBody h2,#privGateBody h2{font-size:22px}
}

/* ---- Private dengan Tutor: halaman pilihan ---- */
.gatePill.blue{background:var(--blue-soft);color:var(--blue-dark)}
.backLink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-8px 0 8px;font-size:13px;font-weight:700;color:var(--blue-dark);text-decoration:none}
.backLink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.doors{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:28px}
.door{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden}
.doorArt{position:relative;height:210px;overflow:hidden}
.mapArt{background-color:#0B2D5C;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:30px 30px}
.mRoad{position:absolute;display:block;border-radius:8px;background:rgba(255,255,255,.14)}
.mRoad.r1{left:-40px;top:112px;width:620px;height:14px;transform:rotate(-11deg)}
.mRoad.r2{left:250px;top:-30px;width:14px;height:300px;transform:rotate(17deg)}
.mRing{position:absolute;left:50%;top:50%;display:block;border-radius:50%;border:2px solid rgba(255,255,255,.14)}
.mRing.a{width:190px;height:190px;margin:-105px 0 0 -95px}
.mRing.b{width:124px;height:124px;margin:-72px 0 0 -62px;border-color:rgba(255,255,255,.26)}
.pinBubble{position:absolute;left:50%;top:44px;width:64px;height:64px;margin-left:-32px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.pinBubble svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mapLabel{position:absolute;left:50%;top:124px;transform:translateX(-50%);background:#fff;color:var(--text);font-size:13px;font-weight:800;padding:6px 14px;border-radius:999px;white-space:nowrap}
.vidArt{background:var(--blue)}
.vidArt .ring{position:absolute;right:-70px;top:-110px;width:300px;height:300px;border-radius:50%;border:44px solid rgba(255,255,255,.08)}
.vidWin{position:absolute;left:50%;top:34px;width:280px;height:146px;margin-left:-150px;border-radius:18px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.vbar{display:flex;align-items:center;gap:6px}
.vbar i{display:block;width:8px;height:8px;border-radius:50%;background:#D5DDEC}
.vbar b{margin-left:auto;font-size:10px;font-weight:800;color:#1FA463}
.vpeople{display:flex;gap:10px;flex:1}
.vp{flex:1;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:800}
.vp.a{background:#0B2D5C;color:#fff}.vp.b{background:var(--blue-soft);color:var(--blue-dark)}
.vidTime{position:absolute;left:50%;top:130px;margin-left:52px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--amber-soft);color:var(--amber-text);box-shadow:0 10px 22px rgba(0,0,0,.2);font-size:14px;font-weight:800}
.vidTime svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doorBody{flex:1;display:flex;flex-direction:column;gap:12px;padding:26px 28px 28px}
.doorChip{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.6px;padding:5px 11px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dark)}
.doorBody h2{margin:0;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.3px}
.doorBody p{margin:0;font-size:14px;line-height:1.65;color:var(--muted)}
.cityBtn,.doorCta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;padding:0 20px;border-radius:16px;font-family:inherit;text-align:left}
button.cityBtn,button.doorCta{cursor:pointer}
.cityBtn{border:2px solid var(--blue);background:#F2F7FF;color:var(--text)}
.doorCta{border:0;background:var(--blue);color:#fff;font-size:15px;font-weight:800}
.cityTxt{display:flex;align-items:center;gap:12px}
.cityTxt b{display:block;font-size:15px;font-weight:800}
.cityTxt small{display:block;font-size:12px;font-weight:600;color:var(--green)}
.dotOn,.dotOff{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:#1FA463}
.dotOff{background:#C9D2E3}
.arrowBtn,.tickBtn{flex:none;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.doorCta .arrowBtn{background:rgba(255,255,255,.2)}
.arrowBtn svg,.tickBtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.doorNote{font-size:12px;color:var(--muted)}
.helpRow{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.helpCard{flex:0 1 360px;min-width:260px;display:flex;flex-direction:column;gap:10px;background:#EAF8F0;border:1px solid #CDEBDB;border-radius:22px;padding:24px 26px}
.helpCard h2{margin:0;font-size:18px;font-weight:800}
.helpCard p{margin:0;font-size:13px;line-height:1.6;color:#2F5A45}
.pCard{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 26px}
.pCard h2{margin:0;font-size:18px;font-weight:800}
.pSub{margin:-10px 0 0;font-size:13px;color:var(--muted)}
.stepsRow{display:flex;flex-wrap:wrap;gap:20px}
.stp{flex:1 1 180px;display:flex;gap:12px}
.stp>span{flex:0 0 34px;height:34px;border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center;font-size:14px;font-weight:800}
.stp b{display:block;font-size:14px;font-weight:800}
.stp p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.gateBtn.small{min-height:44px;flex:0 0 auto}

/* ---- Private Offline ---- */
.offGrid{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;margin-bottom:24px}
.offCol{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:24px}
.pCard.grow{flex:1}
.cityRow{display:flex;flex-wrap:wrap;gap:14px}
.cityRow .cityBtn,.cityRow .cityOff{flex:1 1 220px;width:auto;margin-top:0;min-height:68px}
.cityRow .cityBtn b{font-size:16px}
.cityOff{display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:16px;border:2px dashed #D5DDEC;background:#FBFCFE;color:var(--muted)}
.cityOff b{display:block;font-size:16px;font-weight:800}
.cityOff small{display:block;font-size:12px;font-weight:600}
.feat{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.feat li{display:flex;align-items:flex-start;gap:12px}
.feat li>span{flex:0 0 36px;height:36px;border-radius:10px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center}
.feat li>span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.feat b{display:block;font-size:14px;font-weight:800}
.feat em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:1.55;color:var(--muted)}
.pBtns{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px}
.pBtns .gateBtn{flex:1 1 200px}
.mapCard{position:relative;flex:1 1 400px;min-width:300px;min-height:440px;overflow:hidden;border-radius:26px;background-size:34px 34px}
.mapNote{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;font-weight:700}
.dotLive{display:block;width:9px;height:9px;border-radius:50%;background:#4ADE80}

/* ---- Private Online (contoh tampilan jadwal) ---- */
.demoRibbon{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:20px;padding:14px 18px;border-radius:16px;background:var(--amber-soft);border:1px solid #F3E2B0;color:var(--amber-text);font-size:13px;line-height:1.55}
.demoTag{font-size:11px;font-weight:800;letter-spacing:.6px;padding:5px 10px;border-radius:999px;background:#fff}
.demoRibbon .t{flex:1 1 260px}
.privTop{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:24px}
.nextCard{position:relative;overflow:hidden;flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px;border-radius:26px;padding:30px 32px;background:linear-gradient(135deg,#0B2D5C 0%,#1262CC 100%);color:#fff}
.nextCard .ringDeco{position:absolute;right:-80px;top:-120px;width:320px;height:320px;border-radius:50%;border:46px solid rgba(255,255,255,.07);pointer-events:none}
.nextCard>*{position:relative}
.nextChips{display:flex;flex-wrap:wrap;gap:10px}
.nextChips span{font-size:12px;font-weight:800;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.16)}
.nextChips span.amber{background:var(--amber-soft);color:var(--amber-text)}
.nextDate{font-size:15px;font-weight:600;opacity:.85}
.nextTime{margin-top:2px;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.4px}
.nextTitle{font-size:18px;font-weight:700;line-height:1.4}
.nextMeta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.tutorBox{display:flex;align-items:center;gap:10px}
.tutorBox small{display:block;font-size:12px;opacity:.8}
.tutorBox b{display:block;font-size:14px;font-weight:700}
.avaD{width:40px;height:40px;border-radius:50%;background:#fff;color:#0B2D5C;display:grid;place-items:center;font-size:15px;font-weight:800}
.platChip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.14)}
.platChip svg,.btnJoin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nextActs{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.btnJoin{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 28px;border:0;border-radius:14px;background:#fff;color:#0B2D5C;font-size:14px;font-weight:800;cursor:pointer}
.btnGhost{min-height:50px;padding:0 22px;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:transparent;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.nextHint{font-size:12px;opacity:.8}
.quotaCard{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px}
.ringBox{position:relative;width:128px;height:128px}
.ringBox svg{display:block}
.ringBox div{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:800}
.quotaCard h3{margin:0;font-size:18px;font-weight:800}
.quotaCard p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.btnLine{min-height:46px;padding:0 24px;border:1px solid #C9D6EC;border-radius:12px;background:#fff;color:var(--text);font-size:13px;font-weight:700;cursor:pointer}
.privBlock{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 26px}
.privBlock h2{margin:0;font-size:18px;font-weight:800}
.weekHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.weekHead span{font-size:13px;color:var(--muted)}
.weekGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;text-align:center}
.wd{padding:12px 4px;border-radius:16px;background:var(--surface2)}
.wd .dn{font-size:12px;font-weight:700;color:var(--muted)}
.wd .num{display:grid;place-items:center;width:36px;height:36px;margin:6px auto 0;border-radius:50%;font-size:15px;font-weight:700;color:var(--muted)}
.wd .num svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wd .sub{margin-top:6px;min-height:14px;font-size:11px;font-weight:700}
.wd.done .num{background:var(--green-soft);color:var(--green)}.wd.done .sub{color:var(--green)}
.wd.today{border:2px solid var(--blue);background:#fff}.wd.today .num{background:var(--blue);color:#fff;font-weight:800}.wd.today .sub{color:var(--blue)}
.wd.next{background:var(--blue-soft)}.wd.next .num{background:#fff;color:var(--text);font-weight:800}.wd.next .sub{color:var(--blue-dark);font-weight:800}
.wd.later{background:#FFF8E6}.wd.later .num{background:#fff;color:var(--text);font-weight:800}.wd.later .sub{color:var(--amber-text);font-weight:800}
.upRow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:14px 0;border-top:1px solid #E9EEF7}
.upDate{flex:0 0 64px;padding:8px 0;border-radius:14px;background:var(--blue-soft);text-align:center}
.upDate.amber{background:#FFF8E6}
.upDate small{display:block;font-size:11px;font-weight:800;color:var(--blue-dark)}
.upDate.amber small{color:var(--amber-text)}
.upDate b{display:block;font-size:22px;font-weight:800;line-height:1.1}
.upDate em{display:block;font-style:normal;font-size:11px;color:var(--muted)}
.upMain{flex:1 1 260px;min-width:0}
.upMain b{display:block;font-size:15px;font-weight:800}
.upMain span{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.stat{font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.stat.wait{background:var(--amber-soft);color:var(--amber-text)}
.notesRow{display:flex;flex-wrap:wrap;gap:20px}
.noteCard{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.noteCard.y{background:#FFF8E6;border-color:#F3E2B0}
.noteCard header{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;color:var(--muted)}
.noteCard.y header{color:var(--amber-text)}
.noteCard p{margin:0;font-size:14px;line-height:1.65}
.privCta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:#EAF8F0;border:1px solid #CDEBDB;border-radius:22px;padding:20px 26px}
.privCta b{display:block;font-size:16px;font-weight:800}
.privCta span{display:block;margin-top:4px;font-size:13px;color:#2F5A45}

@media(max-width:760px){
  .doors{gap:16px;margin-bottom:20px}
  .door{border-radius:22px}
  .doorArt{height:104px}
  .mRoad.r1{top:58px;width:460px;height:11px}
  .mRoad.r2{left:170px;width:11px;height:200px}
  .mRing{display:none}
  .pinBubble{top:14px;width:44px;height:44px;margin-left:-22px}
  .mapLabel{top:66px;font-size:11px;padding:4px 11px}
  .vidArt .ring{right:-50px;top:-80px;width:220px;height:220px;border-width:34px}
  .vidWin{top:16px;width:190px;height:78px;margin-left:-108px;border-radius:14px;padding:8px 10px;gap:6px}
  .vp{font-size:13px;border-radius:8px}
  .vidTime{top:54px;margin-left:50px;padding:7px 10px;border-radius:12px;font-size:12px;gap:6px}
  .vidTime svg{width:14px;height:14px}
  .doorBody{padding:16px;gap:10px}
  .doorBody h2{font-size:20px}
  .doorBody p{display:none}
  .cityBtn,.doorCta{min-height:56px;padding:0 16px;font-size:14px}
  .arrowBtn,.tickBtn{width:30px;height:30px}
  .helpRow{gap:14px}
  .pCard,.privBlock{padding:18px;border-radius:20px}
  .offGrid{gap:16px}
  .offCol{gap:16px;flex-basis:100%}
  .mapCard{flex:0 0 150px;min-height:150px;min-width:0;width:100%;border-radius:20px}
  .mapCard .mapLabel{font-size:12px}
  .mapCard .pinBubble{width:46px!important;height:46px!important;margin:-40px 0 0 -23px!important}
  .mapNote{left:12px;bottom:10px;padding:6px 11px;border-radius:10px;font-size:11px}
  .nextCard{padding:20px;border-radius:22px;gap:10px}
  .nextTime{font-size:26px}
  .nextTitle{font-size:15px}
  .nextActs{flex-wrap:nowrap}
  .btnJoin{flex:1;justify-content:center;padding:0 12px;min-height:48px}
  .btnGhost{min-height:48px;padding:0 18px}
  .quotaCard{padding:20px;border-radius:22px;flex-direction:row;text-align:left}
  .ringBox{width:88px;height:88px;flex:none}
  .ringBox svg{width:88px;height:88px}
  .ringBox div{font-size:18px}
  .weekGrid{gap:4px}
  .wd{padding:8px 0;border-radius:12px}
  .wd .dn{font-size:10px}
  .wd .num{width:26px;height:26px;margin-top:4px;font-size:12px}
  .wd .sub{display:none}
  .upRow{gap:10px 12px}
  .upDate{flex:0 0 52px}
  .upDate b{font-size:18px}
}

/* ---- Simulasi & Practice ---- */
.simCard .quizCardIcon{background:linear-gradient(135deg,#0B2D5C,#1262CC);color:#fff}
.simCard.locked .quizCardIcon{background:#EEF1F7;color:var(--muted)}
.simCard{border-color:#BCD3F3}
.simCard.locked{border-color:var(--line)}
.simMax{margin-left:8px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 7px;border-radius:999px;background:var(--amber-soft);color:var(--amber-text);vertical-align:middle}
.quizBtn.soon,.simGo.soon{background:#fff;border:1px solid #C9D6EC;color:var(--muted)}
#simTabs{margin-bottom:24px}
.simExplain{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:22px}
.simExp{flex:1 1 380px;min-width:0;display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.simExpIcon{flex:0 0 48px;height:48px;border-radius:14px;display:grid;place-items:center}
.simExpIcon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.simExpIcon.dark{background:linear-gradient(135deg,#0B2D5C,#1262CC);color:#fff}
.simExpIcon.green{background:var(--green-soft);color:var(--green)}
.simExpHead{display:flex;align-items:center;gap:10px}
.simExpHead b{font-size:16px}
.simExp p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
.simChip{font-size:11px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:999px;white-space:nowrap}
.simChip.sim{background:var(--blue-soft);color:var(--blue-dark)}
.simChip.quiz{background:var(--green-soft);color:var(--green)}
.simSection{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.simSection h2{margin:0;font-size:20px;font-weight:800}
.simGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.simItem{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.simItem:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.simItemTop{display:flex;align-items:center;justify-content:space-between}
.simItemIcon{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center}
.simItemIcon.quiz{background:var(--green-soft);color:var(--green)}
.simItemIcon .ic{width:22px;height:22px}
.simItemMain h3{margin:0;font-size:17px;font-weight:800}
.simTime{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;color:var(--muted)}
.simTime .ic{width:15px;height:15px;flex:none}
.simItemFoot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.simNote{font-size:12px;color:var(--muted)}
.simGo{min-height:44px;padding:0 22px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
@media(max-width:760px){
  .simExplain{flex-direction:column;gap:10px;margin-bottom:16px}
  .simExp{flex:none;padding:12px 14px;gap:10px;border-radius:16px;align-items:flex-start}
  .simExpIcon{display:none}
  .simExpHead{display:flex}
  .simExp p{margin:4px 0 0;font-size:12px}
  .simSection{margin-bottom:18px}
  .simGrid{grid-template-columns:1fr;gap:10px}
  .simItem{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:18px}
  .simItemTop{flex:none;flex-direction:column;align-items:center;gap:0}
  .simItemTop .simChip{display:none}
  .simItemIcon{width:46px;height:46px;border-radius:13px}
  .simItemMain{flex:1;min-width:0}
  .simItemMain h3{font-size:15px}
  .simTime{margin-top:2px;font-size:12px}
  .simItemFoot{display:none}
  .simItem .modulChevron{display:block}
}

/* ---- Soal interaktif: lapisan di atas video (terlihat di layar kecil, diperbesar, dan layar penuh) ---- */
.player.asking{min-height:300px}
.player .interactive{position:absolute;inset:0;z-index:6;padding:16px;border-top:0;background:rgba(8,15,30,.86);overflow:auto;-webkit-overflow-scrolling:touch}
.interactiveCard{min-height:100%;max-width:640px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;color:#fff}
.interactiveTag{align-self:flex-start;margin-bottom:10px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff}
.player .interactive h4{font-size:clamp(15px,2.2vw,21px);line-height:1.4;margin:0 0 14px;color:#fff}
.player .interactive .answers{grid-template-columns:1fr 1fr;gap:10px}
.player .interactive .answer{font-size:clamp(12px,1.5vw,15px);min-height:46px;padding:11px 14px;color:var(--text);border-color:transparent}
.player .interactive .answer:hover{background:#fff;border-color:#9DB8F5}
.player .interactive .answer.correct{background:#E3F5EC;border-color:#7CE3AE}
.player .interactive .answer.wrong{background:#FDECEB;border-color:#F3A9A4}
.player .interactive .feedback{margin-top:12px;font-size:13px;min-height:18px}
.player .interactive .feedback.ok{color:#8AF0BC}
.player .interactive .feedback.bad{color:#FFD98A}
@media(max-width:560px){.player.asking{min-height:380px}.player .interactive .answers{grid-template-columns:1fr}}

/* ---- Login: verifikasi email, lupa kata sandi, Google ---- */
.codeInput{letter-spacing:.35em;text-align:center;font-size:16px;font-weight:800}
.codeInput::placeholder{letter-spacing:normal;font-size:12px;font-weight:600}
.forgotLink{align-self:flex-end;padding:0 2px;margin-top:-4px}
.authDivider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:4px 0}
.authDivider::before,.authDivider::after{content:"";flex:1;height:1px;background:var(--line)}
.googleBox{display:flex;flex-direction:column;gap:6px}
.googleBtn{display:flex;justify-content:center;min-height:44px}
.verifyBar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:var(--amber-soft);color:var(--amber-text);font-size:13px;line-height:1.5}
.verifyBar[hidden]{display:none}
.verifyBtn{min-height:44px;padding:0 18px;border:0;border-radius:12px;background:var(--amber-text);color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.accVerify{margin:-4px 0 8px;font-size:12px;font-weight:700}
.accVerify.ok{color:var(--green)}
.accVerify.no{color:var(--amber-text)}
.accVerify button{border:0;background:transparent;color:var(--blue-dark);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0 0 0 6px}

/* ---- Pembayaran (transfer bank + bukti) ---- */
.payDur{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;font-size:12px;color:var(--muted);font-weight:700}
.durBtn{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:800;color:var(--text);cursor:pointer}
.durBtn.on{background:var(--ink,#0B2D5C);border-color:var(--ink,#0B2D5C);color:#fff}
.planSave{align-self:flex-start;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.plansAsk{margin-top:6px;text-align:center}
.payModal{width:min(520px,100%)}
.payBody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 140px);overflow:auto}
.payPlan{font-size:13px;color:var(--muted);font-weight:700}
.payTotal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:var(--blue-soft)}
.payTotal b{font-size:26px;letter-spacing:-.5px;color:var(--ink,#0B2D5C)}
.payTotal small{display:block;margin-top:2px;font-size:11px;color:var(--muted);font-weight:700}
.payCopy{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:12px;font-weight:800;cursor:pointer}
.payBank{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:16px}
.payRow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.payRow span{color:var(--muted)}
.payRow b{font-size:14px;word-break:break-all;text-align:right}
.payTimer{font-size:12px;font-weight:800;color:var(--amber-text)}
.payHint{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.payUpload{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px dashed #9DB8F5;border-radius:16px;background:#F7FAFF}
.payUpload label{font-size:13px;font-weight:800}
.payFileIn{width:100%;font-size:12px;box-sizing:border-box}
.payError{min-height:16px;font-size:12px;color:var(--red)}
.payStatus{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px}
.payStatus.wait{background:var(--amber-soft);color:var(--amber-text)}
.payStatus.ok{background:var(--green-soft);color:var(--green)}
.payStatus.bad{background:#FDECEB;color:#B3261E}
.payStatus b{font-size:15px}
.payStatus span{font-size:12px;line-height:1.6}
.payActions{display:flex;flex-direction:column;gap:8px}
.accOrder{margin:-2px 0 8px;font-size:12px;font-weight:700;color:var(--amber-text)}
.accOrder button{border:0;background:transparent;color:var(--blue-dark);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer;padding:0 0 0 6px}
@media(max-width:560px){.payTotal b{font-size:22px}.payBody{padding:16px}}

.payBody .modalBtn,.payActions .linkBtn{min-height:46px}
.payActions .linkBtn{font-size:12px}
.payUpload .modalBtn{width:100%}