hehe

/*============================== KUIS INTERAKTIF ENGINE v2.0 by: pasang sekali, pakai selamanya ================================*/ .kuis-wrap*{box-sizing:border-box;margin:0;padding:0} .kuis-wrap{ font-family:'Segoe UI',system-ui,-apple-system,sans-serif; max-width:660px; margin:2rem auto; padding:0 1rem; scroll-margin-top:80px; /* Tema Terang (default) */ --k-bg:#ffffff; --k-bg2:#f5f5f5; --k-bg3:#eeeeee; --k-border:rgba(0,0,0,.12); --k-border2:rgba(0,0,0,.25); --k-text:#111111; --k-text2:#555555; --k-text3:#999999; --k-accent:#534AB7; --k-accent-d:#3C3489; --k-accent-bg:#EEEDFE; --k-green:#3B6D11; --k-green-bg:#EAF3DE; --k-green-bd:#97C459; --k-red:#791F1F; --k-red-bg:#FCEBEB; --k-red-bd:#F09595; } /* Mode Gelap — prefers-color-scheme */ @media(prefers-color-scheme:dark){ .kuis-wrap{ --k-bg:#1e1e1e; --k-bg2:#2a2a2a; --k-bg3:#333333; --k-border:rgba(255,255,255,.10); --k-border2:rgba(255,255,255,.22); --k-text:#f0f0f0; --k-text2:#aaaaaa; --k-text3:#666666; --k-accent:#7F77DD; --k-accent-d:#AFA9EC; --k-accent-bg:#26215C; --k-green:#97C459; --k-green-bg:#173404; --k-green-bd:#3B6D11; --k-red:#F09595; --k-red-bg:#501313; --k-red-bd:#A32D2D; } } /* Mode Gelap — class di body (tema Blogger tertentu) */ body.dark .kuis-wrap, body[data-theme=dark] .kuis-wrap, .dark-mode .kuis-wrap, [data-color-scheme=dark] .kuis-wrap{ --k-bg:#1e1e1e; --k-bg2:#2a2a2a; --k-bg3:#333333; --k-border:rgba(255,255,255,.10); --k-border2:rgba(255,255,255,.22); --k-text:#f0f0f0; --k-text2:#aaaaaa; --k-text3:#666666; --k-accent:#7F77DD; --k-accent-d:#AFA9EC; --k-accent-bg:#26215C; --k-green:#97C459; --k-green-bg:#173404; --k-green-bd:#3B6D11; --k-red:#F09595; --k-red-bg:#501313; --k-red-bd:#A32D2D; } /* Card */ .k-card{ background:var(--k-bg); border:.5px solid var(--k-border); border-radius:12px; padding:1.5rem; margin-bottom:1rem; transition:background .3s; } /* Header */ .k-header{margin-bottom:1.25rem} .k-title{font-size:19px;font-weight:600;color:var(--k-text);margin-bottom:.3rem;line-height:1.3} .k-desc{font-size:13px;color:var(--k-text2)} /* Progress */ .k-prog-track{height:5px;background:var(--k-bg3);border-radius:99px;margin-bottom:1.25rem;overflow:hidden} .k-prog-fill{height:100%;background:var(--k-accent);border-radius:99px;transition:width .4s ease} /* Label soal */ .k-q-label{ display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--k-accent);background:var(--k-accent-bg); padding:3px 10px;border-radius:99px;margin-bottom:.75rem; } /* Teks soal */ .k-q-text{font-size:16px;font-weight:500;color:var(--k-text);line-height:1.55;margin-bottom:1.1rem} /* Pilihan */ .k-opts{display:flex;flex-direction:column;gap:7px} .k-opt{ display:flex;align-items:center;gap:10px; padding:11px 13px; background:var(--k-bg); border:.5px solid var(--k-border2); border-radius:8px; cursor:pointer;font-size:14px;color:var(--k-text); text-align:left;width:100%; transition:background .15s,border-color .15s,transform .1s; } .k-opt:hover:not(:disabled){background:var(--k-bg2);border-color:var(--k-text3);transform:translateX(2px)} .k-opt .k-key{ width:26px;height:26px;border-radius:6px; background:var(--k-bg2);flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;color:var(--k-text3); transition:background .15s,color .15s; } .k-opt.k-correct{background:var(--k-green-bg);border-color:var(--k-green-bd)} .k-opt.k-correct .k-key{background:var(--k-green);color:#fff} .k-opt.k-correct span:last-child{color:var(--k-green);font-weight:500} .k-opt.k-wrong{background:var(--k-red-bg);border-color:var(--k-red-bd)} .k-opt.k-wrong .k-key{background:var(--k-red);color:#fff} .k-opt.k-wrong span:last-child{color:var(--k-red)} .k-opt:disabled{cursor:default;transform:none} /* Feedback */ .k-feedback{ display:none;padding:10px 13px;border-radius:8px; font-size:13px;line-height:1.55;margin-top:10px; gap:8px;align-items:flex-start;border:.5px solid; } .k-feedback.k-show{display:flex} .k-feedback.k-ok{background:var(--k-green-bg);border-color:var(--k-green-bd);color:var(--k-green)} .k-feedback.k-bad{background:var(--k-red-bg);border-color:var(--k-red-bd);color:var(--k-red)} .k-fb-ico{flex-shrink:0;font-weight:700;font-size:15px;margin-top:1px} /* Navigasi bawah */ .k-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.1rem;gap:8px} .k-skor-disp{font-size:13px;color:var(--k-text2)} .k-btn-next{ padding:9px 22px;background:var(--k-accent);border:none; border-radius:8px;color:#fff;font-size:14px;font-weight:600; cursor:pointer;transition:background .15s,transform .1s; } .k-btn-next:hover{background:var(--k-accent-d)} .k-btn-next:active{transform:scale(.97)} .k-btn-next:disabled{opacity:.35;cursor:default;transform:none} /* Hasil */ .k-result{text-align:center;padding:2rem 1rem} .k-res-icon{font-size:50px;margin-bottom:.6rem;line-height:1} .k-res-score{font-size:44px;font-weight:700;color:var(--k-text);line-height:1} .k-res-pct{font-size:14px;color:var(--k-text2);margin:.4rem 0 1.25rem} .k-res-msg{ font-size:14px;color:var(--k-text);line-height:1.6; background:var(--k-bg2);border-radius:8px; padding:12px 15px;margin-bottom:1.1rem;text-align:left; } .k-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1.1rem} .k-stat{background:var(--k-bg2);border-radius:8px;padding:11px 8px;text-align:center} .k-stat-val{font-size:22px;font-weight:700;color:var(--k-text)} .k-stat-lbl{font-size:11px;color:var(--k-text2);margin-top:2px} /* Review */ .k-review{display:flex;flex-direction:column;gap:7px;margin-bottom:1.4rem;text-align:left} .k-rev-item{ padding:9px 12px;border-radius:8px;font-size:13px; line-height:1.5;display:flex;gap:8px; align-items:flex-start;border:.5px solid; } .k-rev-item.k-ok{background:var(--k-green-bg);border-color:var(--k-green-bd);color:var(--k-green)} .k-rev-item.k-bad{background:var(--k-red-bg);border-color:var(--k-red-bd);color:var(--k-red)} .k-rev-ico{flex-shrink:0;font-weight:700;margin-top:2px} /* Tombol ulangi */ .k-btn-restart{ padding:10px 30px;background:var(--k-accent);border:none; border-radius:8px;color:#fff;font-size:15px;font-weight:600; cursor:pointer;transition:background .15s,transform .1s; } .k-btn-restart:hover{background:var(--k-accent-d)} .k-btn-restart:active{transform:scale(.97)} /* Animasi masuk */ @keyframes kFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .k-anim{animation:kFadeUp .25s ease forwards} /* Responsive */ @media(max-width:480px){ .k-card{padding:1.1rem} .k-title{font-size:17px} .k-q-text{font-size:15px} .k-opt{font-size:13px;padding:10px 11px} .k-res-score{font-size:36px} }