/* Gaya halaman selain beranda: kursus, detail kursus, verifikasi, akun peserta, ruang belajar. */

/* ---------- Banner halaman (lavender + gelombang) ---------- */
.pg-hero{position:relative;overflow:hidden;background:var(--lav);border-radius:32px;padding:2.4rem 2.6rem;margin-bottom:1.6rem;display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pg-hero:before{content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;border-radius:50%;border:1px solid rgba(107,78,230,.35);box-shadow:0 0 0 30px rgba(107,78,230,.07),0 0 0 62px rgba(107,78,230,.05)}
.pg-hero>*{position:relative}
.pg-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;margin:0 0 .5rem}
.pg-hero p{margin:0;color:#3c3752;max-width:32rem}
.pg-hero.tosca{background:var(--tosca-l)}.pg-hero.tosca:before{border-color:rgba(18,137,123,.35);box-shadow:0 0 0 30px rgba(18,137,123,.07),0 0 0 62px rgba(18,137,123,.05)}
.pg-search{display:flex;background:#fff;border-radius:999px;padding:.35rem;min-width:min(100%,380px);box-shadow:0 10px 26px rgba(31,27,46,.08)}
.pg-search input{border:0;outline:0;flex:1;padding:.5rem 1rem;background:transparent;min-width:0;font-size:.92rem}
.pg-search .btn{padding:.5rem 1.4rem}
.pg-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem;align-items:center}
.pg-filters .sep{width:1px;height:22px;background:var(--line);margin:0 .4rem}
.pg-empty{background:var(--pri-xl);border-radius:28px;padding:3rem 1rem;text-align:center;color:var(--muted)}

/* ---------- Detail kursus ---------- */
.d-hero{background:linear-gradient(120deg,var(--lav) 0%,#C9D6F7 55%,var(--tosca-l) 100%);border-radius:32px;padding:2.2rem 2.4rem 2.6rem;margin-bottom:1.6rem}
.d-hero .container{padding:0}
.d-hero h1{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;color:var(--ink)}
.d-hero .text-muted,.d-hero .crumb,.d-hero .crumb a{color:#3c3752!important}
.d-hero .tag{background:#fff;color:var(--pri-d)}
.buy-card{border-radius:30px;border:1px solid var(--line);box-shadow:0 26px 60px rgba(107,78,230,.16)}
.buy-card .c-thumb{border-radius:0}
.buy-price{font-weight:800;letter-spacing:-.03em}
.inc i{color:var(--tosca-d)}
.d-tabs{border:0;gap:.4rem;margin:.4rem 0 1.6rem;padding:.35rem;background:var(--pri-xl);border-radius:999px;width:max-content;max-width:100%;top:84px}
.d-tabs a{padding:.5rem 1.1rem;border:0;border-radius:999px;font-weight:600;font-size:.86rem}
.d-tabs a:hover{background:#fff;color:var(--pri)}.d-tabs a.on{background:#fff;color:var(--pri);box-shadow:0 2px 8px rgba(107,78,230,.14)}
.learn-list i{color:var(--tosca)}
.acc-sec{border-radius:22px;border-color:var(--line);overflow:hidden}
.acc-sec>button{background:var(--pri-xl);font-weight:700}
.acc-sec .l i{color:var(--pri)}
.team-card{border-radius:26px;border-color:var(--line);background:linear-gradient(160deg,#fff,var(--pri-xl))}
.team-card .t{color:var(--pri-d)}
.collab-box{border-radius:26px;border:0;background:var(--tosca-xl)}
.panel h5,.panel b{letter-spacing:-.01em}
@media(max-width:991px){.d-tabs{top:70px}.d-hero{padding:1.6rem 1.4rem 1.8rem}}

/* ---------- Verifikasi sertifikat ---------- */
.vf{max-width:760px;margin:0 auto}
.vf-box{background:var(--pri-xl);border-radius:30px;padding:1.6rem}
.vf-res{border-radius:30px;padding:1.8rem;margin-top:1.2rem}
.vf-res.ok{background:var(--tosca-l)}.vf-res.bad{background:#FDE5E8}
.vf-res h3{font-size:1.5rem;margin:.2rem 0 1rem}
.vf-seal{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--tosca-d)}
.vf-res.bad .vf-seal{color:#B2263A}
.vf-grid{display:grid;grid-template-columns:140px 1fr;gap:.55rem 1rem;font-size:.92rem}.vf-grid dt{color:#27443f;font-weight:500}.vf-grid dd{margin:0;font-weight:700}

/* ---------- Akun peserta ---------- */
.my-head{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:14px;margin-bottom:1.8rem}
.my-hello{background:var(--lav);border-radius:30px;padding:1.6rem;display:flex;flex-direction:column;justify-content:center}
.my-hello h1{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:0 0 .3rem}.my-hello p{margin:0;color:#3c3752;font-size:.9rem}
.my-stat{border-radius:30px;padding:1.3rem 1.4rem;display:flex;flex-direction:column;justify-content:center}
.my-stat b{font-size:2.3rem;line-height:1;letter-spacing:-.04em}.my-stat span{font-size:.82rem;color:#3c3752}
.my-stat.t1{background:var(--tosca-l)}.my-stat.t2{background:var(--pri-l)}.my-stat.t3{background:#FFF1D6}
@media(max-width:991px){.my-head{grid-template-columns:repeat(3,minmax(0,1fr))}.my-hello{grid-column:1/-1}}
@media(max-width:575px){.my-head{grid-template-columns:1fr 1fr}}
.cc-state{display:inline-block;font-size:.7rem;font-weight:700;border-radius:999px;padding:.15rem .65rem;background:var(--pri-l);color:var(--pri-d)}
.cc-state.warn{background:#FFF1D6;color:#8A5A00}.cc-state.done{background:var(--tosca-l);color:var(--tosca-d)}.cc-state.bad{background:#FDE5E8;color:#B2263A}
.cc-act{display:flex;gap:.4rem;margin:.2rem 4px 0;flex-wrap:wrap}
.cert-card{border-radius:28px;padding:1.5rem;background:linear-gradient(150deg,var(--lav),var(--tosca-l));height:100%;display:flex;flex-direction:column}
.cert-card i.big{font-size:2.4rem;color:var(--pri-d)}
.cert-card h5{margin:.7rem 0 .3rem;font-size:1.1rem}.cert-card small{color:#3c3752}
.cert-card .acts{margin-top:auto;padding-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.acct{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start}
.acct-side{background:var(--lav);border-radius:30px;padding:1.6rem;text-align:center}
.acct-side .avatar{margin:0 auto .8rem}.acct-side b{display:block;font-size:1.05rem}.acct-side small{color:#3c3752;word-break:break-all}
.acct-side nav{margin-top:1.2rem;display:grid;gap:.4rem;text-align:left}
.acct-side nav a{display:flex;gap:.6rem;align-items:center;padding:.6rem .9rem;border-radius:16px;color:var(--ink);font-weight:600;font-size:.88rem;text-decoration:none}
.acct-side nav a:hover{background:rgba(255,255,255,.55)}.acct-side nav a.on{background:#fff;color:var(--pri-d)}
.acct-main{background:#fff;border:1px solid var(--line);border-radius:30px;padding:1.8rem}
.acct-main h3{margin-bottom:1.2rem}
@media(max-width:860px){.acct{grid-template-columns:1fr}}

/* ---------- Auth ---------- */
.auth-card{border-radius:32px;border:0;box-shadow:0 30px 70px rgba(31,27,46,.10)}

/* ---------- Ruang belajar ---------- */
.learn-body{background:var(--page)}
.learn-top{position:sticky;top:10px;z-index:30;margin:10px auto 0;max-width:1500px;width:calc(100% - 20px);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:0;border-radius:999px;box-shadow:0 10px 30px rgba(31,27,46,.10);padding:.5rem .7rem .5rem .6rem;display:flex;gap:1rem;align-items:center}
.learn-top .btn{padding:.45rem 1.1rem}
.learn-title{font-weight:700;font-size:1rem;letter-spacing:-.01em}
.learn-prog{width:240px;gap:.7rem}.learn-prog small{font-weight:700;color:var(--pri-d)}
.player{padding:14px 10px 30px;gap:14px}
.stage,.panel{border-radius:28px}
.stage{border:0;box-shadow:0 12px 36px rgba(31,27,46,.07)}
.stage .media{border-radius:28px 28px 0 0;overflow:hidden}
.stage .head{border-top:1px solid var(--line);padding:1.2rem 1.5rem}
.stage .head h4{font-size:1.25rem;margin:0}
.rich{font-size:.98rem}
.p-side{border:0;border-radius:28px;box-shadow:0 12px 36px rgba(31,27,46,.07);top:84px;max-height:calc(100vh - 100px);padding-bottom:.4rem}
.p-side .sh{background:#fff;font-size:.82rem;padding:.9rem 1.1rem .5rem;color:var(--ink)}
.p-prog{padding:1rem 1.1rem .4rem;position:sticky;top:0;background:#fff;z-index:2}
.p-prog b{font-size:1.05rem}.p-prog .progress{margin-top:.5rem}.p-prog small{color:var(--muted)}
.p-mod{padding:.85rem 1.1rem .3rem;font-weight:700;font-size:.86rem;border-top:1px solid var(--line);margin-top:.3rem}
.p-mod span{display:block;font-size:.7rem;color:var(--acc);font-weight:700;letter-spacing:.02em}
.p-item{margin:.1rem .5rem;border:0;border-radius:16px;padding:.6rem .7rem}
.p-item:hover{background:var(--pri-xl)}.p-item.on{background:var(--lav)}
.p-item.done .ck{color:var(--tosca)}
.p-quiz{border:0;border-radius:20px;background:var(--pri-xl);margin:.6rem .6rem}
.btn[disabled]{opacity:.5}
.file-chip{border-radius:18px}
.quiz-wrap .q-card,.q-card{border-radius:26px}
.q-opt{border-radius:16px}
.timer{border-radius:999px}
.cm .tag{background:var(--tosca-l);color:var(--tosca-d)}
@media(max-width:991px){.player{grid-template-columns:1fr}.p-side{position:static;max-height:none}.learn-top{border-radius:28px}}

/* Tombol bagikan */
.share{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}
.share-l{font-size:.78rem;font-weight:700;color:var(--muted);margin-right:.3rem}
.share a,.share button{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--pri-xl);color:var(--ink);border:0;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.share a:hover,.share button:hover{background:var(--pri);color:#fff}
.share button[hidden]{display:none}
.share .copied{background:var(--tosca);color:#fff}
.cert-card .share{border-top-color:rgba(31,27,46,.12);margin-top:.9rem;padding-top:.8rem}
.cert-card .share a,.cert-card .share button{background:rgba(255,255,255,.6)}