:root{--bg:#f8f9fa;--card:#fff;--text:#1a1a2e;--sub:#666;--nav-bg:#1a1a2e;--nav-text:#fff;--accent:#111827;--card-border:#e5e7eb;--shadow:rgba(0,0,0,0.06);--page-bg:#f0f2f5;--muted:#64748b;--teal:#0f766e;--btn-bg:#1f3a5f;--btn-text:#fff}
[data-theme=dark]{--bg:#0f0f1a;--card:#1e1e32;--text:#e0e0e0;--sub:#999;--nav-bg:#0a0a14;--nav-text:#e0e0e0;--card-border:#2f2f4a;--shadow:rgba(0,0,0,0.25);--page-bg:#0f0f1a;--muted:#8f8fa8;--teal:#5eead4;--btn-bg:#3a3a5c}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text);background:var(--bg)}
.container{max-width:1000px;margin:0 auto;padding:0 20px}
.nav{background:var(--nav-bg);color:var(--nav-text);padding:14px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-weight:bold;font-size:18px;color:var(--nav-text);text-decoration:none}
.nav-links a{color:var(--nav-text);text-decoration:none;margin-left:18px;font-size:14px}
.nav-links a:hover{opacity:.8}
.dark-toggle{background:transparent;border:1px solid var(--nav-text);color:var(--nav-text);border-radius:6px;padding:3px 9px;cursor:pointer;margin-left:14px}
main{min-height:70vh;background:var(--page-bg);padding-bottom:40px}
.hero{text-align:center;padding:60px 20px 40px}
.hero h1{font-size:34px;color:var(--text);margin-bottom:10px}
.hero p{color:var(--sub);font-size:17px;margin-bottom:25px}
.btn{display:inline-block;background:var(--btn-bg);color:var(--btn-text);padding:11px 26px;border-radius:8px;text-decoration:none;font-weight:bold}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;padding:0 20px 30px}
.card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:24px;text-decoration:none;color:var(--text);box-shadow:0 1px 3px var(--shadow)}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 18px var(--shadow)}
.card h3{font-size:18px;margin-bottom:8px}
.card p{color:var(--sub);font-size:14px}
footer{background:var(--nav-bg);color:var(--nav-text);text-align:center;padding:18px;font-size:13px}
/* Halaman konten */
.page-head{background:var(--card);border-bottom:1px solid var(--card-border);padding:26px 0}
.page-head h1{color:var(--text)}
.crumb{color:var(--muted);font-size:13px;margin-bottom:6px}
.content-wrap{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:28px;margin-top:24px}
.content-wrap h2{color:var(--teal);margin:18px 0 10px;font-size:22px}
.content-wrap p{margin:10px 0;color:var(--text)}
.lesson-list{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:22px;margin-top:20px}
.lesson-list a{display:block;padding:10px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--card-border)}
.lesson-list a:hover{background:var(--page-bg)}
/* CBT */
.quiz-start{text-align:center;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:40px;margin-top:24px}
.timer{font-size:20px;font-weight:bold;color:var(--teal);margin-bottom:16px}
.question{margin-bottom:22px}
.question p{color:var(--text);margin-bottom:8px}
.question label{display:block;padding:9px 12px;margin:5px 0;background:var(--page-bg);border-radius:8px;cursor:pointer;color:var(--text)}
.result{text-align:center;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:36px;margin-top:24px}
.btn-primary{background:var(--btn-bg);color:var(--btn-text);border:none;padding:12px 28px;border-radius:8px;font-size:16px;cursor:pointer;font-weight:bold}
.btn-secondary{background:var(--muted);color:#fff;border:none;padding:9px 18px;border-radius:6px;cursor:pointer;margin:4px}