/* Halaman bab (sesi bootcamp) — memakai design system QIIORA */
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 28px}
.step{flex:1 1 150px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 14px;min-height:56px;cursor:pointer;color:var(--muted);display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;font-size:16px;transition:border-color .18s,background .18s}
.step .s-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);font-weight:800}
.step .s-t{font-weight:700;line-height:1.25}
.step[data-status="selesai"]{border-color:var(--ok);background:var(--green-soft)}
.step[data-status="selesai"] .s-n{background:var(--ok);color:#fff}
.step[data-status="sedang"]{border-color:var(--primary);background:var(--primary-soft);color:var(--text)}
.step[data-status="sedang"] .s-n{background:var(--primary);color:#fff}
.step:hover{border-color:var(--primary)}
.langkah{scroll-margin-top:140px}
.langkah > .lb{font-weight:800;font-size:15px;color:var(--green);text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.langkah h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:14px}
.pretest-q{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.pretest-q .q{font-family:var(--font-judul);font-weight:700;font-size:21px;line-height:1.35;margin-bottom:12px}
.pretest-q .opt{margin-bottom:10px}
.stepper-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}

.sim-controls-panel{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 18px;margin:0 0 12px}
.sim-controls-panel label{font-weight:800;color:var(--primary-dark)}
.sim-controls-panel input[type=range]{width:min(220px,100%);height:32px;accent-color:var(--primary)}
.sim-controls-panel .val{font-weight:800;min-width:48px}
.toggle{min-height:48px;font-size:16px;font-weight:700;padding:8px 18px;border:2px solid var(--primary);border-radius:12px;background:var(--card);color:var(--primary-dark);cursor:pointer}
.toggle[aria-pressed="true"]{background:var(--primary);color:#fff}

.panel-step{display:none}
.panel-step.is-active{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.materi-bagian{border-top:2px dashed var(--line);margin-top:22px;padding-top:16px}
.materi-bagian:first-child{margin-top:0;border-top:0;padding-top:0}
.materi-bagian h3{font-size:24px;margin:2px 0 8px}
.awas{background:var(--bad-soft);border-left:6px solid var(--bad);border-radius:14px;padding:12px 16px;margin:14px 0}
.awas strong{display:block;font-weight:800;color:#B3362F;margin-bottom:2px}
.coba{background:var(--sun-soft);border-left:6px solid var(--sun);border-radius:14px;padding:12px 16px;margin:14px 0}
.coba strong{display:block;font-weight:800;color:#8A5A00;margin-bottom:2px}

.journal textarea,.journal input[type=text]{width:100%;min-height:48px;border:2px solid var(--line);border-radius:12px;background:var(--card);padding:10px 14px;font-size:16px}
.journal textarea:focus,.journal input:focus{outline:3px solid rgba(47,128,237,.25);border-color:var(--primary)}
.journal .j-field{margin-bottom:16px}
.journal label{display:block;font-weight:800;color:var(--primary-dark);margin-bottom:6px}
.quick-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.chip{min-height:44px;font-size:16px;font-weight:700;padding:6px 16px;border:2px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
.keyakinan{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.ky{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px}
.ky .ky-label{font-weight:800;margin-bottom:2px}
.ky .ky-desc{font-size:15px;color:var(--muted);margin-bottom:8px}
.ky .lvl{display:flex;gap:8px}
.ky .lvl button{flex:1;min-height:48px;font-weight:800;border:2px solid var(--line);border-radius:12px;background:var(--bg);cursor:pointer}
.ky .lvl button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
@media(max-width:620px){.keyakinan{grid-template-columns:1fr}}
