/* =========================================================
   LEARNQUIZ — Stylesheet
   Tema biru akademik, responsif, dan aksesibel.
   ========================================================= */
:root{--navy:#173b70;--blue:#2864c8;--blue-dark:#1d4f9e;--blue-soft:#edf4ff;--ink:#1d2b40;--muted:#6b7a90;--line:#e5ebf3;--surface:#fff;--bg:#f4f7fb;--green:#198754;--shadow:0 12px 35px rgba(27,57,99,.07)}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
.app-navbar{background:var(--navy);box-shadow:0 3px 14px rgba(12,35,68,.15)}
.navbar-brand{letter-spacing:-.3px}.brand-mark{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:7px;border-radius:10px;background:#fff;color:var(--navy);font-weight:900}
.hero-panel{background:linear-gradient(120deg,#17345d,#2864a5);color:#fff;padding:clamp(24px,4vw,42px);border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow);overflow:hidden}
.hero-panel h1{font-weight:800;font-size:clamp(28px,4vw,43px);letter-spacing:-1.3px;line-height:1.12;margin:10px 0}
.hero-panel p{color:#d6e3f4;max-width:570px}.eyebrow,.content-label{font-size:11px;font-weight:800;letter-spacing:1.4px;color:#7ea7e4}
.hero-symbol{font-size:92px;color:#a9c8f1;opacity:.8;padding:0 22px}
.stepper{display:flex;align-items:center;justify-content:center;gap:12px;max-width:650px;margin-left:auto;margin-right:auto}
.step{display:flex;align-items:center;gap:8px;color:#9aa7b8;font-size:12px;font-weight:700;white-space:nowrap}
.step span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e5eaf1;color:#7c899b;font-size:12px}
.step.active{color:var(--blue)}.step.active span,.step.done span{background:var(--blue);color:#fff}.step.done{color:var(--green)}.step.done span{background:var(--green)}
.step-line{height:1px;width:clamp(20px,7vw,75px);background:#dce3ed}
.page-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:clamp(20px,4vw,34px);box-shadow:var(--shadow);animation:rise .28s ease}
@keyframes rise{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.section-heading{display:flex;align-items:center;gap:14px;margin-bottom:28px}.section-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-weight:800}
.section-heading h2{font-size:21px;font-weight:800;margin:0}.section-heading p{font-size:13px;color:var(--muted);margin:4px 0 0}
.form-label{font-size:13px;font-weight:700;color:#34445c}.form-control,.form-select{border-color:#dce4ef;border-radius:11px}.form-control:focus,.form-select:focus{border-color:#76a0e5;box-shadow:0 0 0 .2rem rgba(40,100,200,.12)}
.notice-box{background:#f1f6ff;border:1px solid #dce9ff;border-radius:12px;padding:14px 16px;color:#4c6282;font-size:13px}
.btn{border-radius:10px;font-weight:700}.btn-primary{background:var(--blue);border-color:var(--blue)}.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.video-title-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.video-frame-wrap{position:relative;overflow:hidden;border-radius:15px;background:#101c2d;aspect-ratio:16/9;max-height:580px}.video-frame-wrap iframe{width:100%;height:100%;border:0}
.watch-progress,.quiz-progress{height:9px;border-radius:30px;background:#e9eef6}.watch-progress .progress-bar,.quiz-progress .progress-bar{background:linear-gradient(90deg,#2864c8,#5d91e8);border-radius:30px;transition:width .3s}
.timer-box{display:flex;align-items:center;gap:9px;background:#fff4e9;color:#a75c12;padding:10px 15px;border-radius:12px;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}.timer-dot{width:8px;height:8px;background:#e38a2f;border-radius:50%;box-shadow:0 0 0 4px #fbe5cf}
.question-card{background:#fbfcfe;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,3vw,28px)}
.question-number{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:13px}
.question-text{font-size:clamp(18px,2.5vw,23px);font-weight:750;line-height:1.45;letter-spacing:-.35px}
.answer-options{display:grid;gap:11px}.answer-option{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;background:#fff;border:1px solid #dfe6f0;border-radius:12px;padding:13px 15px;color:var(--ink);transition:.16s}
.answer-option:hover{border-color:#91afe3;background:#f8faff}.answer-option.selected{border:2px solid var(--blue);background:#f1f6ff;padding:12px 14px}
.option-key{width:27px;height:27px;display:grid;place-items:center;flex-shrink:0;border-radius:8px;background:#edf1f6;color:#586a82;font-weight:800;font-size:12px}.selected .option-key{background:var(--blue);color:#fff}
.answer-option input{margin-top:6px;accent-color:var(--blue)}
.result-icon{width:58px;height:58px;display:grid;place-items:center;margin:auto;border-radius:50%;background:#e7f7ef;color:var(--green);font-size:30px;font-weight:900}
.result-score{display:flex;align-items:baseline;justify-content:center;gap:5px;color:var(--muted)}.result-score strong{font-size:58px;line-height:1;color:var(--blue);letter-spacing:-2px}.result-score span{font-weight:700}.result-score small{font-weight:700}
.result-item{height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:5px}.result-item span{font-size:12px;color:var(--muted)}.result-item strong{font-size:15px;overflow-wrap:anywhere}
footer{color:#8895a7!important}
@media(max-width:575px){.hero-symbol{display:none}.stepper{gap:6px}.step{gap:5px;font-size:10px}.step span{width:27px;height:27px}.step-line{width:14px}.video-title-row{align-items:flex-start;flex-direction:column}.quiz-topline{align-items:flex-start}.timer-box{font-size:17px}.page-card{border-radius:15px}}
@media print{.app-navbar,.stepper,footer,#printResult{display:none!important}body{background:#fff}.page-card{box-shadow:none;border:0}.notice-box{display:none}}