@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap";:root{--primary:#5effff;--primary-light:#9dcdfd;--primary-dark:#003b46;--primary-glow:#5effff40;--sejarah:#00cec9;--sejarah-light:#5effff;--sejarah-dark:#0f3039;--sejarah-glow:#00cec933;--islam:#7e8cfc;--islam-light:#9dcdfd;--islam-dark:#191b3a;--islam-glow:#7e8cfc33;--correct:#0fc;--correct-light:#e7ffff;--correct-dark:#006652;--correct-glow:#00ffcc40;--wrong:#ff5e7e;--wrong-light:#ffe7ec;--wrong-dark:#660018;--wrong-glow:#ff5e7e40;--warning:#f4c430;--warning-dark:#b8860b;--gold:#f4c430;--silver:#e6e8ea;--bronze:#cd7f32;--font-ui:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-heading:"Outfit", "Inter", sans-serif;--font-jawi:"Amiri", "Traditional Arabic", "Scheherazade New", serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--weight-light:300;--weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-full:9999px;--shadow-sm:0 2px 4px #00000080;--shadow-md:0 8px 16px #0009;--shadow-lg:0 16px 32px #000000b3;--shadow-xl:0 24px 48px #000000d9;--shadow-glow-primary:0 0 25px var(--primary-glow);--shadow-glow-correct:0 0 25px var(--correct-glow);--shadow-glow-wrong:0 0 25px var(--wrong-glow);--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal-backdrop:300;--z-modal:400;--z-toast:500;--max-width:100%;--nav-height:72px;--sidebar-width:280px}[data-theme=dark],:root{--bg-primary:#000;--bg-secondary:#09090e;--bg-card:#ffffff08;--bg-card-hover:#ffffff14;--bg-input:#ffffff0d;--bg-overlay:#000000d9;--glass-bg:#ffffff08;--glass-border:#ffffff1f;--glass-blur:20px;--text-primary:#fff;--text-secondary:#ffffffa6;--text-muted:#fff6;--text-inverse:#000;--border-color:#ffffff1f;--border-color-hover:#ffffff40;--divider:#ffffff14;--scrollbar-track:#000;--scrollbar-thumb:#ffffff26;--correct-dark:#c2ffe9;--wrong-dark:#ffd1da}[data-theme=light]{--bg-primary:#f5f5fa;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f0f0f8;--bg-input:#f0f0f5;--bg-overlay:#0006;--glass-bg:#ffffffb3;--glass-border:#00000014;--glass-blur:16px;--text-primary:#112;--text-secondary:#3b3b58;--text-muted:#58587a;--text-inverse:#fff;--border-color:#0000001a;--border-color-hover:#0003;--divider:#00000014;--scrollbar-track:#f0f0f5;--scrollbar-thumb:#b8b8cd;--primary:#4f3cc9;--primary-light:#5a4ad1;--primary-dark:#35269e;--primary-glow:#6c5ce71a;--sejarah:#008f72;--sejarah-light:#00a887;--sejarah-dark:#006954;--sejarah-glow:#00b89414;--islam:#0672c4;--islam-light:#0884e3;--islam-dark:#04528f;--islam-glow:#0984e314;--correct:#009491;--correct-light:#00a8a5;--correct-dark:#006e6b;--correct-glow:#00cec914;--wrong:#c73838;--wrong-light:#e04d4d;--wrong-dark:#912121;--wrong-glow:#ff6b6b14;--warning:#c08d23;--warning-dark:#b54f38;--gold:#c08d23;--silver:#6b7a80;--bronze:#b54f38}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-ui);font-weight:var(--weight-normal);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);min-height:100vh;transition:background-color var(--transition-base), color var(--transition-base);overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{color:var(--text-secondary);line-height:var(--leading-relaxed)}a{color:var(--primary-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--primary)}ul,ol{list-style:none}img{max-width:100%;height:auto;display:block}button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none;font-family:inherit}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none}select{font-family:inherit;font-size:inherit;color:inherit;background:0 0;border:none;outline:none;appearance:none!important;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239898B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")!important;background-position:right 14px center!important;background-repeat:no-repeat!important;background-size:14px!important;padding-right:40px!important}select option{background-color:var(--bg-secondary);color:var(--text-primary)}[data-theme=light] select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")!important}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary)}::selection{background:var(--primary);color:#fff}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--max-width);padding:0 var(--space-8);margin:0 auto}.page-content{padding-top:var(--nav-height);flex:1}.jawi{font-family:var(--font-jawi);text-align:right;direction:rtl;font-size:1.6em;line-height:2}.jawi-inline{font-family:var(--font-jawi);direction:rtl;unicode-bidi:bidi-override;font-size:1.25em}.quran-text{font-family:var(--font-jawi);text-align:center;color:var(--text-primary);direction:rtl;font-size:1.85em;line-height:2.2}.highlight-tajwid{color:#ff9f43;font-weight:var(--weight-extrabold);border-radius:var(--radius-sm);background:#ff9f431f;border-bottom:2px solid #ff9f43;padding:0 4px}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base)}.gradient-primary{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%)}.gradient-sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, var(--sejarah) 100%)}.gradient-islam{background:linear-gradient(135deg, var(--islam-dark) 0%, var(--islam) 100%)}.gradient-bg{background:linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%)}.animated-bg{z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.animated-bg:before,.animated-bg:after{content:"";filter:blur(120px);opacity:.12;border-radius:50%;animation:22s ease-in-out infinite float;position:absolute}.animated-bg:before{background:var(--primary);width:600px;height:600px;top:-15%;right:-10%}.animated-bg:after{background:var(--islam);width:500px;height:500px;animation-delay:-8s;bottom:-15%;left:-10%}@keyframes float{0%,to{transform:translate(0)scale(1)}33%{transform:translate(30px,-30px)scale(1.05)}66%{transform:translate(-20px,20px)scale(.95)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes glow{0%,to{box-shadow:0 0 5px var(--primary-glow)}50%{box-shadow:0 0 25px var(--primary-glow), 0 0 50px var(--primary-glow)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes count-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@media (width<=639px){html{font-size:14px}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}.container{padding:0 var(--space-3)}}@media (width>=640px) and (width<=1023px){html{font-size:15px}}:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.navbar{height:var(--nav-height);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#000000b3;border-bottom:1px solid #ffffff14;position:fixed;top:0;left:0;right:0}.navbar-inner{justify-content:space-between;align-items:center;gap:var(--space-4);height:100%;display:flex}.navbar-logo{align-items:center;gap:var(--space-2);color:var(--text-primary);font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--text-xl);flex-shrink:0;text-decoration:none;display:flex}.logo-icon{font-size:1.5rem}.logo-text{background:linear-gradient(135deg, #fff, var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.navbar-links{align-items:center;gap:var(--space-1);display:flex}.nav-link{padding:var(--space-2) var(--space-4);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-bold);border-radius:var(--radius-full);transition:all var(--transition-base);text-decoration:none;position:relative}.nav-link:hover{color:var(--text-primary);background:#ffffff0d}.nav-link.active{color:var(--primary)}.nav-indicator{background:var(--primary);border-radius:var(--radius-full);width:24px;height:3px;box-shadow:0 0 8px var(--primary-glow);position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.navbar-actions{align-items:center;gap:var(--space-3);flex-shrink:0;display:flex}.toggle-btn{border-radius:var(--radius-full);width:36px;height:36px;color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--weight-semibold);transition:all var(--transition-base);cursor:pointer;background:#ffffff08;border:1px solid #ffffff1a;justify-content:center;align-items:center;display:flex}.toggle-btn:hover{border-color:var(--primary);color:var(--primary);background:#ffffff14}.toggle-icon{font-size:1rem}.toggle-label{letter-spacing:.5px;font-size:.7rem}.user-menu{align-items:center;gap:var(--space-3);display:flex}.user-avatar{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--primary), var(--primary-light));border:2px solid #fff3;justify-content:center;align-items:center;width:34px;height:34px;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-avatar span{color:#000;font-weight:var(--weight-extrabold);font-size:var(--text-sm)}.btn-logout{font-size:var(--text-sm);color:var(--text-secondary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);transition:all var(--transition-base);cursor:pointer;background:#ffffff05;border:1px solid #ffffff1f}.btn-logout:hover{color:var(--wrong);border-color:#ff5e7e4d}.btn-login{padding:var(--space-2) var(--space-5);border:1px solid var(--primary);color:var(--primary);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-sm);transition:all var(--transition-base);box-shadow:0 0 10px var(--primary-glow);background:linear-gradient(135deg,#09090e 0%,#000 100%);text-decoration:none}.btn-login:hover{background:var(--primary);color:#000;box-shadow:0 0 20px var(--primary-glow)}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:none}.hamburger span{background:var(--text-secondary);width:22px;height:2px;transition:all var(--transition-fast);border-radius:2px;display:block}.hamburger.open span:first-child{transform:rotate(45deg)translate(5px,5px)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:rotate(-45deg)translate(5px,-5px)}.mobile-menu{padding:var(--space-4);border-top:1px solid var(--border-color);flex-direction:column;display:none;overflow:hidden}.mobile-link{padding:var(--space-3) var(--space-4);color:var(--text-secondary);font-weight:var(--weight-medium);border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none;display:block}.mobile-link:hover,.mobile-link.active{color:var(--primary-light);background:var(--bg-card-hover)}.mobile-link.logout{color:var(--wrong);text-align:left;cursor:pointer;width:100%;font-size:inherit;background:0 0;border:none;font-family:inherit}@media (width<=768px){.navbar-links{display:none}.hamburger,.mobile-menu{display:flex}.btn-logout,.user-avatar{display:none}}.footer{padding:var(--space-6) 0;background:#0006;border-top:1px solid #ffffff14;margin-top:auto}.footer-container{justify-content:space-between;align-items:center;width:100%;display:flex}.footer-copy{font-size:var(--text-sm);color:var(--text-muted)}.footer-copy strong{color:var(--text-secondary)}.footer-links{align-items:center;gap:var(--space-3);display:flex}.footer-links a{font-size:var(--text-sm);color:var(--text-muted);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--primary-light)}.footer-divider{color:var(--text-muted);opacity:.5;font-size:var(--text-xs);-webkit-user-select:none;user-select:none}@media (width<=639px){.footer{padding:var(--space-5) 0}.footer-container{gap:var(--space-3);text-align:center;flex-direction:column}}.home-page{gap:var(--space-20);padding-bottom:var(--space-16);flex-direction:column;display:flex}.hero-container{width:100%;max-width:100%;padding:var(--space-16) 8% var(--space-8);align-items:center;gap:var(--space-10);min-height:calc(90vh - var(--nav-height));grid-template-columns:1.1fr .9fr;display:grid}.hero-text{text-align:left;flex-direction:column;align-items:flex-start;display:flex}.badge-new{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);margin-bottom:var(--space-6);font-size:var(--text-xs);color:var(--primary);font-weight:var(--weight-bold);letter-spacing:1px;text-transform:uppercase;background:#5effff14;border:1px solid #5effff40;box-shadow:0 0 15px #5effff1a}.hero-text h1{font-size:3.6rem;font-weight:var(--weight-extrabold);margin-bottom:var(--space-6);background:linear-gradient(135deg, #fff 40%, #a2b6df 70%, var(--primary) 100%);-webkit-text-fill-color:transparent;letter-spacing:-1.5px;-webkit-background-clip:text;line-height:1.15}[data-theme=light] .hero-text h1{background:linear-gradient(135deg, #112 30%, #3b3b58 70%, var(--primary-dark) 100%)}.hero-desc{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-10);max-width:560px}.hero-actions{gap:var(--space-4);width:100%;display:flex}.btn-hero-primary{border:1px solid var(--primary);padding:var(--space-3) var(--space-8);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-base);box-shadow:0 0 20px var(--primary-glow);transition:all var(--transition-base);align-items:center;gap:var(--space-2);background:linear-gradient(135deg,#09090e 0%,#000 100%);display:inline-flex;color:var(--primary)!important}.btn-hero-primary:hover{background:var(--primary);box-shadow:0 0 30px var(--primary-glow);transform:translateY(-2px)scale(1.02);color:#000!important}.btn-hero-secondary{padding:var(--space-3) var(--space-8);border-radius:var(--radius-full);font-weight:var(--weight-semibold);font-size:var(--text-base);transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff26;color:#fff!important}[data-theme=light] .btn-hero-secondary{background:#00000005;border:1px solid #00000026;color:var(--text-primary)!important}.btn-hero-secondary:hover{background:#ffffff1a;border-color:#ffffff59;transform:translateY(-2px)}.hero-visual{justify-content:center;align-items:center;display:flex}.visual-card{border-radius:var(--radius-2xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:100%;max-width:480px;transition:all var(--transition-slow);background:#09090eb3;border:1px solid #ffffff26;overflow:hidden;box-shadow:0 30px 60px #000c,0 0 40px #5effff0d}.visual-card:hover{border-color:#5effff4d;transform:translateY(-4px)scale(1.01);box-shadow:0 35px 70px #000000e6,0 0 50px #5effff1a}.card-mock-header{padding:var(--space-4);align-items:center;gap:var(--space-2);background:#0000004d;border-bottom:1px solid #ffffff14;display:flex}.dot{border-radius:50%;width:12px;height:12px}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.mock-title{font-size:var(--text-xs);color:var(--text-secondary);font-weight:var(--weight-medium);letter-spacing:.5px;margin-left:var(--space-2);opacity:.7}.card-mock-body{padding:var(--space-8);gap:var(--space-6);flex-direction:column;display:flex}.mock-stats{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.stat-box{padding:var(--space-4);border-radius:var(--radius-md);transition:all var(--transition-base);background:#ffffff05;border:1px solid #ffffff0f;flex-direction:column;align-items:center;display:flex}.stat-box:hover{background:#ffffff0a;border-color:#5effff26}.stat-num{font-size:var(--text-3xl);font-weight:var(--weight-extrabold);color:var(--primary);letter-spacing:-.5px}.stat-label{font-size:var(--text-xs);color:var(--text-secondary);opacity:.8;margin-top:2px}.mock-question{text-align:left;gap:var(--space-4);flex-direction:column;display:flex}.question-tag{color:var(--sejarah-light);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;background:#00cec914;border:1px solid #00cec94d;align-self:flex-start}.mock-question p{font-size:var(--text-base);color:var(--text-primary);font-weight:var(--weight-semibold);line-height:var(--leading-normal)}.mock-options{gap:var(--space-3);flex-direction:column;display:flex}.mock-option{padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff14}.mock-option.correct{border-color:var(--correct);color:var(--correct);font-weight:var(--weight-bold);background:#00ffcc0f;box-shadow:0 0 15px #00ffcc0d}.features-section{width:100%;max-width:100%;padding:var(--space-16) 8% var(--space-20);gap:var(--space-12);text-align:center;flex-direction:column;display:flex}.section-title{font-size:2.2rem;font-weight:var(--weight-extrabold);margin-bottom:var(--space-2);background:linear-gradient(135deg, #fff 40%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-self:center;display:inline-block;position:relative}[data-theme=light] .section-title{background:linear-gradient(135deg, #112 30%, var(--primary-dark) 100%)}.section-title:after{content:"";background:linear-gradient(to right, var(--primary), var(--primary-light));border-radius:var(--radius-full);width:40%;height:4px;position:absolute;bottom:-10px;left:30%}.features-grid{gap:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid}.feature-card{padding:var(--space-10) var(--space-8);text-align:center;align-items:center;gap:var(--space-5);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff05;border:1px solid #ffffff1a;flex-direction:column;display:flex;box-shadow:0 10px 30px #00000080}.feature-card:hover{border-color:#5effff59;transform:translateY(-8px);box-shadow:0 15px 40px #0009,0 0 25px #5effff14}.feature-icon{border-radius:var(--radius-full);width:76px;height:76px;transition:all var(--transition-base);background:#5effff0d;border:1px solid #5effff33;justify-content:center;align-items:center;font-size:2.2rem;display:flex}.feature-card:hover .feature-icon{border-color:var(--primary);background:#5effff1f;transform:scale(1.05)}.feature-card h3{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary)}.feature-card p{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}@media (width<=1023px){.hero-container{text-align:center;gap:var(--space-12);padding-top:var(--space-8);grid-template-columns:1fr}.hero-text{text-align:center;align-items:center}.hero-desc{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.features-grid{gap:var(--space-6);grid-template-columns:1fr}}.auth-card{width:100%;max-width:440px;margin:var(--space-12) auto;padding:var(--space-8);box-shadow:var(--shadow-xl)}.auth-header{text-align:center;margin-bottom:var(--space-6)}.auth-header h2{font-size:var(--text-3xl);margin-bottom:var(--space-2);background:linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.auth-header p{font-size:var(--text-sm);color:var(--text-secondary)}.auth-error{background:var(--wrong-glow);border:1px solid var(--wrong);color:var(--wrong-light);padding:var(--space-3);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:var(--text-sm);text-align:center}.auth-form{gap:var(--space-4);flex-direction:column;display:flex}.form-group{gap:var(--space-2);text-align:left;flex-direction:column;display:flex}.form-group label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}.form-group input{padding:var(--space-3) var(--space-4);background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.form-group input:focus{border-color:var(--primary);box-shadow:var(--shadow-glow-primary)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-weight:var(--weight-semibold);border-radius:var(--radius-md);transition:all var(--transition-fast);width:100%;display:flex}.btn-submit{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:#fff;box-shadow:0 4px 14px #6c5ce766}.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c5ce799}.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-google{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.btn-google:hover{background:var(--bg-card-hover);border-color:var(--border-color-hover)}.google-icon{width:18px;height:18px}.auth-divider{text-align:center;margin:var(--space-5) 0;color:var(--text-muted);font-size:var(--text-xs);align-items:center;display:flex}.auth-divider:before,.auth-divider:after{content:"";border-bottom:1px solid var(--divider);flex:1}.auth-divider:not(:empty):before{margin-right:.5em}.auth-divider:not(:empty):after{margin-left:.5em}.auth-footer{text-align:center;margin-top:var(--space-6);font-size:var(--text-sm)}.btn-toggle-auth{color:var(--primary-light);font-weight:var(--weight-semibold);cursor:pointer;margin-left:var(--space-1);background:0 0;border:none;padding:0}.btn-toggle-auth:hover{color:var(--primary);text-decoration:underline}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=639px){.auth-card{padding:var(--space-6);margin:var(--space-6) auto}}.dashboard-page{padding-bottom:var(--space-16);position:relative}.dashboard-container{gap:var(--space-10);padding-top:var(--space-8);padding-bottom:var(--space-8);flex-direction:column;display:flex}.welcome-header{text-align:left;justify-content:space-between;align-items:center;gap:var(--space-6);padding-bottom:var(--space-6);border-bottom:1px solid var(--divider);display:flex}.welcome-header h1{font-size:2.4rem;font-weight:var(--weight-extrabold);letter-spacing:-1px;margin-bottom:var(--space-1);background:linear-gradient(135deg, #fff 40%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.welcome-header p{font-size:var(--text-base);color:var(--text-secondary)}.highlight-name{color:var(--primary);background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;font-weight:var(--weight-extrabold);-webkit-background-clip:text}.btn-start-exam{border:1px solid var(--primary);padding:var(--space-3) var(--space-8);font-weight:var(--weight-bold);font-size:var(--text-base);border-radius:var(--radius-full);box-shadow:0 0 15px var(--primary-glow);transition:all var(--transition-base);white-space:nowrap;align-items:center;gap:var(--space-2);background:linear-gradient(135deg,#09090e 0%,#000 100%);display:inline-flex;color:var(--primary)!important}.btn-start-exam:hover{background:var(--primary);box-shadow:0 0 25px var(--primary-glow);transform:translateY(-2px)scale(1.02);color:#000!important}.stats-grid{gap:var(--space-6);grid-template-columns:repeat(3,1fr);display:grid}.stat-card{padding:var(--space-6);align-items:center;gap:var(--space-5);text-align:left;border-radius:var(--radius-xl);transition:transform var(--transition-spring), box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);background:#ffffff05;border:1px solid #ffffff14;display:flex}.stat-card:hover{box-shadow:0 0 25px #5effff14, var(--shadow-md);background:#ffffff0d;border-color:#5effff59;transform:translateY(-4px)}.stat-icon{border-radius:var(--radius-full);width:60px;height:60px;transition:all var(--transition-base);background:#ffffff08;border:1px solid #ffffff1a;justify-content:center;align-items:center;font-size:2rem;display:flex}.stat-card:hover .stat-icon{border-color:var(--primary);background:#5effff1f;transform:scale(1.08)}.stat-info h3{font-size:2.2rem;font-weight:var(--weight-extrabold);color:var(--text-primary);line-height:var(--leading-tight);letter-spacing:-.5px}.stat-info p{font-size:var(--text-sm);color:var(--text-secondary);opacity:.8;margin-top:2px}.dashboard-content{gap:var(--space-8);grid-template-columns:2fr 1fr;align-items:start;display:grid}.recent-attempts{padding:var(--space-8);text-align:left;gap:var(--space-6);border-radius:var(--radius-2xl);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;min-height:360px;display:flex}.recent-attempts h2{font-size:var(--text-2xl);font-weight:var(--weight-bold);border-left:4px solid var(--primary);padding-left:var(--space-3);color:var(--text-primary)}.attempts-list{gap:var(--space-4);flex-direction:column;display:flex}.attempt-row{padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff0f;justify-content:space-between;align-items:center;display:flex}.attempt-row.subject-sejarah{border-left:4px solid var(--sejarah)}.attempt-row.subject-islam{border-left:4px solid var(--islam)}.attempt-row:hover{background:#ffffff0a;border-color:#ffffff26;transform:translate(4px)}.attempt-subject{align-items:center;gap:var(--space-4);display:flex}.subject-badge{font-size:var(--text-xs);font-weight:var(--weight-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px;color:#fff!important}.subject-badge.sejarah{background:var(--sejarah-dark);border:1px solid #00cec966}.subject-badge.islam{background:var(--islam-dark);border:1px solid #7e8cfc66}.attempt-date{font-size:var(--text-sm);color:var(--text-secondary);opacity:.8}.attempt-details{align-items:center;gap:var(--space-5);display:flex}.attempt-mode{font-size:var(--text-sm);color:var(--text-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:#ffffff0a}.attempt-score{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--primary)}.empty-attempts{text-align:center;justify-content:center;align-items:center;gap:var(--space-4);flex-direction:column;flex-grow:1;min-height:250px;display:flex}.btn-empty-cta{border:1px solid var(--primary);color:var(--primary);padding:var(--space-2) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);transition:all var(--transition-base);box-shadow:0 0 10px var(--primary-glow);background:#5effff0d}.btn-empty-cta:hover{background:var(--primary);color:#000;box-shadow:0 0 20px var(--primary-glow);transform:translateY(-1px)}.dashboard-sidebar{gap:var(--space-6);flex-direction:column;display:flex}.sidebar-box{padding:var(--space-6);text-align:left;border-radius:var(--radius-xl);background:#ffffff05;border:1px solid #ffffff14}.sidebar-box h3{font-size:var(--text-lg);margin-bottom:var(--space-4);padding-left:var(--space-2)}.tip-box h3{border-left:4px solid var(--warning)}.info-box h3{border-left:4px solid var(--primary)}.tip-box p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-secondary)}.subject-links{gap:var(--space-4);flex-direction:column;display:flex}.subject-link-card{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);transition:all var(--transition-base);border:1px solid #ffffff1a;flex-direction:column;display:flex;color:#fff!important}.subject-link-card.sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, #00cec933 100%);box-shadow:0 4px 12px var(--sejarah-glow)}.subject-link-card.sejarah:hover{box-shadow:0 8px 20px var(--sejarah-glow);border-color:#00cec980;transform:translateY(-3px)scale(1.01)}.subject-link-card.islam{background:linear-gradient(135deg, var(--islam-dark) 0%, #7e8cfc33 100%);box-shadow:0 4px 12px var(--islam-glow)}.subject-link-card.islam:hover{box-shadow:0 8px 20px var(--islam-glow);border-color:#7e8cfc80;transform:translateY(-3px)scale(1.01)}.subject-link-card strong{font-size:var(--text-base);margin-bottom:2px}.subject-link-card span{font-size:var(--text-xs);opacity:.8}.achievements-section{padding:var(--space-8);text-align:left;gap:var(--space-6);border-radius:var(--radius-2xl);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;display:flex}.achievements-header{justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--divider);padding-bottom:var(--space-5);display:flex}.achievements-header h2{font-size:var(--text-2xl);color:var(--text-primary);margin-bottom:var(--space-1)}.achievements-header p{font-size:var(--text-sm);color:var(--text-secondary)}.achievements-progress-badge{padding:var(--space-2) var(--space-5);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--primary);white-space:nowrap;box-shadow:0 0 15px var(--primary-glow);background:#5effff0d;border:1px solid #5effff4d}.badges-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.badge-card{text-align:center;padding:var(--space-6) var(--space-4);border-radius:var(--radius-xl);align-items:center;gap:var(--space-4);transition:all var(--transition-spring);background:#ffffff03;border:1px solid #ffffff0f;flex-direction:column;display:flex;position:relative}.badge-card.unlocked{box-shadow:0 4px 15px var(--badge-glow);border-color:#ffffff26}.badge-card.unlocked:hover{border-color:var(--primary);box-shadow:0 10px 25px var(--badge-glow), 0 0 20px var(--primary-glow);transform:translateY(-5px)}.badge-card.locked{opacity:.5;filter:grayscale();background:#0003;border-color:#ffffff08}.badge-icon-wrapper{border-radius:var(--radius-full);width:80px;height:80px;margin-bottom:var(--space-1);transition:transform var(--transition-base);background:#ffffff05;border:1px solid #ffffff14;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 0 0 15px #ffffff0d}.badge-card.unlocked .badge-icon-wrapper{background:var(--badge-color);box-shadow:0 4px 20px var(--badge-glow), inset 0 0 10px #fff3;border-color:#ffffff4d}.badge-card.locked .badge-icon-wrapper{background:var(--text-muted)}.badge-icon{font-size:2.2rem}.badge-lock{border-radius:var(--radius-full);background:#000;border:1px solid #ffffff26;justify-content:center;align-items:center;width:26px;height:26px;font-size:.8rem;display:flex;position:absolute;bottom:-2px;right:-2px}.badge-info h4{font-size:var(--text-base);font-weight:var(--weight-bold);margin-bottom:var(--space-1);color:var(--text-primary)}.badge-info p{font-size:var(--text-xs);color:var(--text-secondary);line-height:var(--leading-normal);opacity:.8}.badge-status-tag{font-size:.65rem;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;padding:4px var(--space-3);border-radius:var(--radius-full);color:var(--text-secondary);background:#ffffff0a;border:1px solid #ffffff14;margin-top:auto}.badge-card.unlocked .badge-status-tag{color:var(--correct);background:#00ffcc14;border-color:#0fc3}@media (width<=1023px){.stats-grid{gap:var(--space-4);grid-template-columns:repeat(3,1fr)}.dashboard-content{gap:var(--space-6);grid-template-columns:1fr}.achievements-section{padding:var(--space-6)}}@media (width<=767px){.stats-grid{gap:var(--space-4);grid-template-columns:1fr}.welcome-header{align-items:flex-start;gap:var(--space-4);flex-direction:column}.btn-start-exam{justify-content:center;width:100%}.badges-grid{gap:var(--space-4);grid-template-columns:repeat(2,1fr)}.badge-icon-wrapper{width:70px;height:70px}.badge-icon{font-size:2rem}}@media (width<=480px){.badges-grid{grid-template-columns:1fr}.attempt-row{align-items:flex-start;gap:var(--space-3);flex-direction:column}.attempt-details{justify-content:space-between;width:100%}}.clickable-attempt-row{cursor:pointer;text-decoration:none!important}.attempt-arrow{color:var(--text-secondary);font-size:var(--text-base);font-weight:var(--weight-bold);transition:transform var(--transition-fast), color var(--transition-fast);margin-left:var(--space-1)}.clickable-attempt-row:hover .attempt-arrow{color:var(--primary);transform:translate(4px)}.subjects-page{padding-bottom:var(--space-12)}.subjects-container{gap:var(--space-8);padding-top:var(--space-8);flex-direction:column;display:flex}.subjects-header{text-align:center}.subjects-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2)}.subjects-header p{color:var(--text-secondary);font-size:var(--text-lg);max-width:600px;margin:0 auto}.subjects-filter-bar{justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--glass-border);width:100%;box-shadow:var(--shadow-md);flex-direction:row;margin:0 auto;display:flex}.search-wrap{flex:1;align-items:center;display:flex;position:relative}.search-icon{left:var(--space-4);color:var(--text-secondary);pointer-events:none;font-size:1.1rem;position:absolute}.search-input{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-10);border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--bg-input);color:var(--text-primary);font-size:var(--text-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.search-input:focus{border-color:var(--primary-light);box-shadow:0 0 0 2px var(--primary-glow);outline:none}.filter-groups{gap:var(--space-6);align-items:center;display:flex}.filter-group{align-items:center;gap:var(--space-2);display:flex}.filter-group label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.filter-select{padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--bg-input);color:var(--text-primary);font-size:var(--text-sm);cursor:pointer;min-width:140px;transition:border-color var(--transition-fast), box-shadow var(--transition-fast)}.filter-select:focus{border-color:var(--primary-light);outline:none}.subjects-grid{gap:var(--space-8);grid-template-columns:1fr 1fr;width:100%;margin:0 auto;display:grid}.subject-card{padding:var(--space-8) var(--space-6);text-align:center;box-shadow:var(--shadow-xl);border:1px solid var(--glass-border);transition:transform var(--transition-base), box-shadow var(--transition-base);flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.card-ribbon{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);color:#fff;text-align:center;width:120px;font-size:.7rem;font-weight:var(--weight-bold);padding:var(--space-1) 0;z-index:2;letter-spacing:.05em;text-transform:uppercase;position:absolute;top:14px;left:-32px;transform:rotate(-45deg);box-shadow:0 2px 6px #0000004d}.card-ribbon.level-1{background:linear-gradient(135deg,#ff4d4d 0%,#b30000 100%)}.card-ribbon.level-2{background:linear-gradient(135deg,#ff8533 0%,#b34700 100%)}.card-ribbon.level-3{background:linear-gradient(135deg,#ffc233 0%,#b38000 100%)}.card-ribbon.level-4{background:linear-gradient(135deg,#3c3 0%,green 100%)}.card-ribbon.level-5{background:linear-gradient(135deg,#3cc 0%,teal 100%)}.card-ribbon.level-6{background:linear-gradient(135deg,#39f 0%,#0052cc 100%)}.card-ribbon.level-T1{background:linear-gradient(135deg,#66f 0%,#00c 100%)}.card-ribbon.level-T2{background:linear-gradient(135deg,#b366ff 0%,#60c 100%)}.card-ribbon.level-T3{background:linear-gradient(135deg,#f6f 0%,#c0c 100%)}.card-ribbon.level-T4{background:linear-gradient(135deg,#ff4d94 0%,#cc0052 100%)}.card-ribbon.level-T5{background:linear-gradient(135deg,#e6005c 0%,#800033 100%)}.subject-icon-wrap{border-radius:var(--radius-full);width:80px;height:80px;margin-bottom:var(--space-4);justify-content:center;align-items:center;font-size:2.8rem;display:flex}.subject-icon-wrap.sejarah{background:var(--sejarah-glow);border:2px solid var(--sejarah)}.subject-icon-wrap.islam{background:var(--islam-glow);border:2px solid var(--islam)}.subject-card h2{font-size:var(--text-2xl);margin-bottom:var(--space-3)}.subject-description{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);margin-bottom:var(--space-6);flex:1}.subject-meta{justify-content:center;gap:var(--space-2);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.meta-badge{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);font-weight:var(--weight-medium)}.btn-select{padding:var(--space-3) var(--space-8);border-radius:var(--radius-md);font-weight:var(--weight-bold);color:#fff;width:80%;transition:all var(--transition-base);text-decoration:none}.btn-select.sejarah{background:linear-gradient(135deg, var(--sejarah-dark) 0%, var(--sejarah) 100%);box-shadow:0 4px 12px var(--sejarah-glow)}.btn-select.sejarah:hover{box-shadow:0 6px 18px var(--sejarah-glow);color:#fff;transform:translateY(-2px)}.btn-select.islam{background:linear-gradient(135deg, var(--islam-dark) 0%, var(--islam) 100%);box-shadow:0 4px 12px var(--islam-glow)}.btn-select.islam:hover{box-shadow:0 6px 18px var(--islam-glow);color:#fff;transform:translateY(-2px)}.subjects-empty{text-align:center;padding:var(--space-12) var(--space-6);color:var(--text-secondary);font-size:var(--text-base);border-radius:var(--radius-lg);border:1px solid var(--glass-border);grid-column:span 2}@media (width<=767px){.subjects-filter-bar{align-items:stretch;gap:var(--space-4);padding:var(--space-4);flex-direction:column}.filter-groups{align-items:stretch;gap:var(--space-3);flex-direction:column}.filter-group{justify-content:space-between}.filter-select{width:60%;min-width:unset}.subjects-grid{gap:var(--space-6);grid-template-columns:1fr}.subject-card{padding:var(--space-6) var(--space-4)}.subjects-empty{grid-column:span 1}}.setup-page{padding-bottom:var(--space-12)}.setup-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;display:flex}.setup-header{text-align:left}.back-link{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-2);transition:color var(--transition-fast);display:inline-block}.back-link:hover{color:var(--primary-light)}.subject-title-theme{font-size:var(--text-3xl);margin-bottom:var(--space-1)}.subject-title-theme.sejarah{background:linear-gradient(135deg, var(--sejarah-light) 0%, var(--sejarah) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.subject-title-theme.islam{background:linear-gradient(135deg, var(--islam-light) 0%, var(--islam) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.setup-content{gap:var(--space-8);grid-template-columns:2fr 1fr;align-items:start;display:grid}.modes-section{text-align:left;gap:var(--space-5);flex-direction:column;display:flex}.mode-cards{gap:var(--space-4);flex-direction:column;display:flex}.mode-card{align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-6);cursor:pointer;border-radius:var(--radius-xl);transition:all var(--transition-base);text-align:left;background:#ffffff05;border:1px solid #ffffff14;display:flex}.mode-card:hover{background:#ffffff0d;border-color:#ffffff2e}.mode-card.active{border-color:var(--primary);box-shadow:0 0 20px var(--primary-glow);background:#5effff0f}.mode-icon{font-size:2.2rem}.mode-info{flex:1}.mode-info h3{font-size:var(--text-lg);margin-bottom:var(--space-1);color:var(--text-primary)}.mode-info p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-secondary)}.radio-outer{width:22px;height:22px;transition:border-color var(--transition-fast);border:2px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;display:flex}.mode-card.active .radio-outer{border-color:var(--primary)}.radio-inner{background:var(--primary);border-radius:50%;width:12px;height:12px}.btn-start-session{margin-top:var(--space-4);padding:var(--space-4) var(--space-8);font-size:var(--text-base);font-weight:var(--weight-bold);border:1px solid var(--primary);border-radius:var(--radius-full);box-shadow:0 0 15px var(--primary-glow);transition:all var(--transition-base);text-align:center;background:linear-gradient(135deg,#09090e 0%,#000 100%);width:100%;display:block;color:var(--primary)!important}.btn-start-session:hover{background:var(--primary);box-shadow:0 0 25px var(--primary-glow);transform:translateY(-2px);color:#000!important}.details-sidebar{padding:var(--space-6);text-align:left;border-radius:var(--radius-xl);background:#ffffff05;border:1px solid #ffffff14}.details-sidebar h3{font-size:var(--text-xl);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid #ffffff14}.details-list{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.detail-item{font-size:var(--text-sm);justify-content:space-between;display:flex}.detail-label{color:var(--text-muted)}.detail-val{font-weight:var(--weight-semibold);color:var(--text-primary)}.exam-guidelines h4{font-size:var(--text-base);margin-bottom:var(--space-2);color:var(--warning-dark)}.exam-guidelines ul{padding-left:var(--space-4);gap:var(--space-2);flex-direction:column;list-style-type:disc;display:flex}.exam-guidelines li{font-size:var(--text-xs);color:var(--text-secondary);line-height:var(--leading-normal)}@media (width<=1023px){.setup-content{grid-template-columns:1fr}}.q-renderer{gap:var(--space-6);padding:var(--space-6);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;display:flex}.q-renderer h3{font-size:var(--text-xl);font-weight:var(--weight-medium);line-height:var(--leading-relaxed);color:var(--text-primary)}.q-renderer .jawi{font-size:var(--text-2xl);text-align:right;margin-bottom:var(--space-2)}.sub-question{background:var(--bg-input);padding:var(--space-4);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);white-space:pre-wrap;color:var(--text-secondary)}.options-list{gap:var(--space-3);flex-direction:column;display:flex}.option-label{align-items:center;gap:var(--space-4);padding:var(--space-4);border:2px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);background:var(--bg-primary);display:flex}.option-label:hover:not(.disabled){border-color:var(--primary-light);background:var(--bg-card-hover)}.option-label.selected{border-color:var(--primary);background:var(--primary-glow)}.option-label.correct{border-color:var(--correct);background:var(--correct-glow)}.option-label.wrong{border-color:var(--wrong);background:var(--wrong-glow)}.option-label input[type=radio]{width:18px;height:18px;accent-color:var(--primary)}.tf-list{gap:var(--space-4);flex-direction:column;display:flex}.tf-item{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.tf-text{font-size:var(--text-base);flex:1}.tf-actions{gap:var(--space-2);display:flex}.btn-tf{padding:var(--space-2) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary);font-weight:var(--weight-medium);transition:all var(--transition-fast)}.btn-tf.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.tf-result{font-size:var(--text-xl);margin-left:var(--space-2)}.tf-semakan-container{align-items:center;gap:var(--space-3);margin-left:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff14;display:flex}.tf-semakan-text{align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);display:flex}.divider-dot{color:#fff3;font-weight:700}.text-correct{color:var(--correct)!important}.text-wrong{color:var(--wrong)!important}.word-bank{gap:var(--space-3);padding:var(--space-4);background:var(--bg-input);border-radius:var(--radius-md);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.word-chip{background:var(--bg-card);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--border-color);font-size:var(--text-sm);font-weight:var(--weight-medium);box-shadow:var(--shadow-sm);cursor:grab;-webkit-user-select:none;user-select:none;transition:all var(--transition-fast) ease-in-out}.word-chip:hover:not(.used){box-shadow:var(--shadow-md);border-color:var(--primary-light);background:var(--bg-card-hover);transform:translateY(-2px)}.word-chip:active{cursor:grabbing}.word-chip.used{opacity:.4;cursor:pointer;background:var(--bg-secondary);box-shadow:none;border-style:dashed;transform:scale(.95)}.fill-text{font-size:var(--text-lg);line-height:2.5}.blank-input{border:none;border-bottom:2px dashed var(--primary-light);background:var(--bg-input);text-align:center;width:140px;margin:0 var(--space-2);font-size:inherit;color:var(--text-primary);font-family:inherit;font-weight:var(--weight-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all var(--transition-fast) ease-in-out}.blank-input:focus,.blank-input.selected-blank{border-bottom:2px solid var(--primary);background:var(--primary-glow);box-shadow:0 4px 6px -1px var(--primary-glow);outline:none}.blank-input.drag-over{border-bottom:2px solid var(--secondary);transform:scale(1.05);background:var(--secondary-glow)!important}.blank-input.correct{border-bottom:2px solid var(--correct);color:var(--correct-dark);background:var(--correct-glow)}.blank-input.wrong{border-bottom:2px solid var(--wrong);color:var(--wrong-dark);background:var(--wrong-glow)}.sw-list{gap:var(--space-4);flex-direction:column;display:flex}.sw-item{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);justify-content:space-between;align-items:center;display:flex}.sw-rumi{font-size:var(--text-lg);font-weight:var(--weight-semibold)}.sw-options{gap:var(--space-3);display:flex}.btn-sw{padding:var(--space-2) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--text-lg)}.btn-sw.selected{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-sw.correct{background:var(--correct);color:#fff;border-color:var(--correct)}.btn-sw.wrong{background:var(--wrong);color:#fff;border-color:var(--wrong)}.transcribe-list{gap:var(--space-4);flex-direction:column;display:flex}.transcribe-item{gap:var(--space-2);padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);flex-direction:column;display:flex}.transcribe-input{padding:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--text-base)}.transcribe-input.correct{border-color:var(--correct);background:var(--correct-glow)}.transcribe-input.wrong{border-color:var(--wrong);background:var(--wrong-glow)}.match-list{gap:var(--space-4);flex-direction:column;display:flex}.match-row{padding:var(--space-4);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.match-left{font-size:var(--text-base);font-weight:var(--weight-medium);flex:1}.match-select{padding:var(--space-2) var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);font-size:var(--text-sm);min-width:200px}.match-select.correct{border-color:var(--correct);color:var(--correct-dark);background:var(--correct-glow)}.match-select.wrong{border-color:var(--wrong);color:var(--wrong-dark);background:var(--wrong-glow)}.essay-input{padding:var(--space-4);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);font-size:var(--text-base);resize:vertical;min-height:150px}.essay-input:focus{border-color:var(--primary);box-shadow:var(--shadow-glow-primary);outline:none}.feedback-box{margin-top:var(--space-6);padding:var(--space-4);background:var(--correct-glow);border-left:4px solid var(--correct);border-radius:0 var(--radius-md) var(--radius-md) 0}.feedback-box h4{font-size:var(--text-sm);color:var(--correct-dark);margin-bottom:var(--space-2)}.feedback-box p{font-size:var(--text-sm);color:var(--text-primary);line-height:var(--leading-relaxed)}.feedback-box.info{background:var(--primary-glow);border-left-color:var(--primary)}.feedback-box.info h4{color:var(--primary)}@media (width<=767px){.tf-item,.match-row{align-items:stretch;gap:var(--space-3);flex-direction:column}.tf-actions{justify-content:stretch}.btn-tf{flex:1}.tf-semakan-container{margin-left:0;margin-top:var(--space-2);justify-content:center}}.exam-session-page{flex-direction:column;display:flex}.exam-header{top:var(--nav-height);z-index:var(--z-sticky);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:var(--space-3) 0;background:#000000d9;border-bottom:1px solid #ffffff14;position:sticky}.header-inner{justify-content:space-between;align-items:center;display:flex}.exam-title-area{align-items:center;gap:var(--space-3);display:flex}.exam-subject-badge{background:var(--primary-dark);border:1px solid var(--primary);color:var(--primary);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:.5px}.exam-section-name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}.exam-controls{align-items:center;gap:var(--space-4);display:flex}.timer-box{padding:var(--space-1) var(--space-4);border-radius:var(--radius-full);font-family:var(--font-mono);font-weight:var(--weight-extrabold);font-size:var(--text-base);color:var(--text-primary);background:#ffffff08;border:1px solid #ffffff1f}.timer-box.warning{color:var(--wrong);border-color:var(--wrong);background:var(--wrong-glow);animation:1.5s infinite pulse}.mode-indicator{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--correct)}.btn-exit{font-size:var(--text-sm);color:var(--text-secondary);transition:color var(--transition-fast)}.btn-exit:hover{color:var(--wrong);text-decoration:underline}.exam-container{padding-top:var(--space-6);padding-bottom:var(--space-12);gap:var(--space-6);flex-direction:column;flex:1;display:flex}.progress-bar-container{gap:var(--space-2);flex-direction:column;display:flex}.progress-text{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--weight-medium)}.progress-track{border-radius:var(--radius-full);background:#ffffff14;width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);border-radius:var(--radius-full);height:100%}.exam-layout{gap:var(--space-8);grid-template-columns:240px 1fr;align-items:start;display:grid}.question-nav{padding:var(--space-5);border-radius:var(--radius-xl);background:#ffffff05;border:1px solid #ffffff14}.question-nav h3{font-size:var(--text-lg);margin-bottom:var(--space-4);text-align:center}.nav-grid{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}.nav-btn{aspect-ratio:1;width:100%;font-size:var(--text-sm);font-weight:var(--weight-bold);border-radius:var(--radius-md);color:var(--text-primary);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff14;justify-content:center;align-items:center;display:flex}.nav-btn:hover{background:#ffffff0d;border-color:#5effff4d}.nav-btn.answered{color:var(--sejarah-light);background:#00cec90f;border-color:#00cec980}.nav-btn.current{background:var(--primary);color:#000;border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow);transform:scale(1.08)}.question-main{gap:var(--space-6);flex-direction:column;display:flex}.question-actions{margin-top:var(--space-4);padding-top:var(--space-6);border-top:1px solid var(--divider);justify-content:space-between;align-items:center;display:flex}.btn-action{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);font-size:var(--text-base);transition:all var(--transition-base)}.btn-prev{color:#fff;background:#ffffff05;border:1px solid #ffffff1f}.btn-prev:hover:not(:disabled){background:#ffffff14;border-color:#ffffff40}.btn-prev:disabled{opacity:.3;cursor:not-allowed}.btn-next{border:1px solid var(--primary);color:var(--primary);background:linear-gradient(135deg,#09090e 0%,#000 100%)}.btn-next:hover{background:var(--primary);color:#000;box-shadow:0 0 15px var(--primary-glow)}.btn-show-answer{background:var(--warning);color:#000;font-weight:var(--weight-bold);border:none}.btn-show-answer:hover{color:#000;background:#e5b22d}.btn-submit-exam{background:var(--correct);color:#000;box-shadow:0 0 15px var(--correct-glow);border:none}.btn-submit-exam:hover{box-shadow:0 0 25px var(--correct-glow);background:#00e6b8;transform:translateY(-2px)}.btn-submit-exam:disabled{opacity:.6;cursor:wait;color:var(--text-secondary)!important;box-shadow:none!important;background:#ffffff0d!important;border:1px solid #ffffff14!important}@media (width<=1023px){.exam-layout{grid-template-columns:1fr}.question-nav,.exam-section-name{display:none}}.results-page{padding-bottom:var(--space-12)}.results-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;display:flex}.results-header{text-align:center;padding:var(--space-8);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);background:#ffffff05;border:1px solid #ffffff14}.results-header h1{font-size:2.6rem;font-weight:var(--weight-extrabold);margin-bottom:var(--space-2);background:linear-gradient(135deg, #fff 40%, var(--primary-light) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text}.results-header p{font-size:var(--text-lg);color:var(--text-secondary)}.results-grid{gap:var(--space-8);grid-template-columns:1fr 2fr;align-items:start;display:grid}.score-card{padding:var(--space-8) var(--space-6);text-align:center;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;align-items:center;display:flex}.score-circle{width:180px;height:180px;margin-bottom:var(--space-6);background:conic-gradient(var(--correct) 0%, var(--correct) 80%, #ffffff0f 80%, #ffffff0f 100%);border-radius:50%;padding:10px;position:relative;box-shadow:0 0 25px #00ffcc26}.score-circle.pass{background:conic-gradient(var(--correct) 0%, var(--correct) 100%);box-shadow:0 0 30px var(--correct-glow)}.score-circle.fail{background:conic-gradient(var(--wrong) 0%, var(--wrong) 100%);box-shadow:0 0 30px var(--wrong-glow)}.score-inner{background:#000;border:1px solid #ffffff14;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.score-val{font-size:var(--text-5xl);font-weight:var(--weight-extrabold);letter-spacing:-1px;line-height:1}.score-circle.pass .score-val{color:var(--correct)}.score-circle.fail .score-val{color:var(--wrong)}.score-label{font-size:var(--text-xs);color:var(--text-secondary);opacity:.8;margin-top:var(--space-1)}.score-card h2{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-6)}.score-stats{gap:var(--space-3);width:100%;margin-bottom:var(--space-8);flex-direction:column;display:flex}.score-stat-item{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff0f;justify-content:space-between;display:flex}.stat-l{color:var(--text-secondary);font-size:var(--text-sm)}.stat-v{font-weight:var(--weight-bold);color:var(--text-primary)}.score-actions{gap:var(--space-3);flex-direction:column;width:100%;display:flex}.btn-score{padding:var(--space-3);border-radius:var(--radius-full);font-weight:var(--weight-bold);transition:all var(--transition-base);font-size:var(--text-sm)}.btn-primary{border:1px solid var(--primary);color:var(--primary);box-shadow:0 0 15px var(--primary-glow);background:linear-gradient(135deg,#09090e 0%,#000 100%)}.btn-primary:hover{background:var(--primary);color:#000;box-shadow:0 0 25px var(--primary-glow);transform:translateY(-2px)}.btn-secondary{color:#fff;background:0 0;border:1px solid #ffffff26}.btn-secondary:hover{background:#ffffff0f;border-color:#ffffff4d}.review-section{padding:var(--space-8);border-radius:var(--radius-2xl);background:#ffffff05;border:1px solid #ffffff14}.review-section h3{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid #ffffff14}.review-list{gap:var(--space-4);max-height:600px;padding-right:var(--space-2);flex-direction:column;display:flex;overflow-y:auto}.review-item{padding:var(--space-6);border-radius:var(--radius-lg);margin-bottom:var(--space-4);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff0f}.review-item:hover{background:#ffffff08;border-color:#ffffff1f}.review-item.correct-item{border-left:5px solid var(--correct);box-shadow:inset 5px 0 15px #00ffcc05}.review-item.wrong-item{border-left:5px solid var(--wrong);box-shadow:inset 5px 0 15px #ff5e7e05}.review-item.essay-item{border-left:5px solid var(--primary-light);box-shadow:inset 5px 0 15px #9dcdfd05}.review-q-header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.review-q-num{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--primary)}.review-status-badge{font-size:var(--text-xs);font-weight:var(--weight-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full)}.review-status-badge.correct{background:var(--correct-glow);color:var(--correct-dark)}.review-status-badge.wrong{background:var(--wrong-glow);color:var(--wrong-dark)}.review-status-badge.essay{background:var(--primary-glow);color:var(--primary)}.review-q-type{font-size:var(--text-xs);color:var(--text-muted);background:var(--bg-secondary);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-weight:var(--weight-medium)}.review-q-text-jawi{font-size:var(--text-2xl);text-align:right;margin-bottom:var(--space-2);color:var(--text-primary)}.wrong-fact{color:var(--wrong);font-weight:var(--weight-extrabold);background:var(--wrong-glow);border-radius:var(--radius-sm);border:1px solid #ff6b6b4d;padding:0 4px}.review-q-text{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-3);line-height:var(--leading-normal)}.review-sub-question{background:var(--bg-input);padding:var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);white-space:pre-wrap;color:var(--text-secondary);margin-bottom:var(--space-3);border-left:2px solid var(--border-color)}.review-answer-area{margin:var(--space-4) 0;padding:var(--space-4);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.review-details-mcq{gap:var(--space-2);flex-direction:column;display:flex}.review-opt{align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);font-size:var(--text-sm);display:flex}.review-opt.correct{border-color:var(--correct);background:var(--correct-glow);font-weight:var(--weight-semibold);color:var(--correct-dark)}.review-opt.wrong{border-color:var(--wrong);background:var(--wrong-glow);color:var(--wrong-dark)}.opt-indicator{font-family:var(--font-mono);font-weight:var(--weight-bold);width:20px}.review-sub-row{padding:var(--space-3);border-bottom:1px solid var(--divider);font-size:var(--text-sm);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.review-sub-row:last-child{border-bottom:none}.review-sub-row.correct{border-left:3px solid var(--correct);padding-left:var(--space-2)}.review-sub-row.wrong{border-left:3px solid var(--wrong);padding-left:var(--space-2)}.sub-text{color:var(--text-primary);flex:1}.sub-answers{gap:var(--space-2);flex-shrink:0;align-items:center;display:flex}.text-correct{color:var(--correct-dark);font-weight:var(--weight-bold)}.text-wrong{color:var(--wrong-dark);font-weight:var(--weight-bold)}.review-details-fill{gap:var(--space-4);flex-direction:column;display:flex}.review-text-paragraph{font-size:var(--text-sm);color:var(--text-primary);background:var(--bg-primary);padding:var(--space-3);border-radius:var(--radius-sm);line-height:2}.review-blanks-list{gap:var(--space-1);flex-direction:column;display:flex}.essay-ans-block{background:var(--bg-primary);padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-color);font-size:var(--text-sm)}.essay-ans-block.suggested{border-color:var(--primary-light);background:var(--primary-glow)}.review-feedback{margin-top:var(--space-4);background:var(--bg-secondary);padding:var(--space-3);border-radius:var(--radius-sm);border-left:3px solid var(--primary-light)}.review-exp{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed)}.review-header-row{margin-bottom:var(--space-5);border-bottom:1px solid var(--divider);padding-bottom:var(--space-3);justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.review-header-row h3{border-bottom:none!important;margin-bottom:0!important;padding-bottom:0!important}.review-filters{gap:var(--space-2);display:flex}.filter-btn{font-size:var(--text-xs);font-weight:var(--weight-bold);border-radius:var(--radius-full);border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);transition:all var(--transition-fast);padding:6px 12px}.filter-btn:hover{background:var(--bg-card-hover);border-color:var(--primary-light);color:var(--text-primary)}.filter-btn.active{background:var(--primary);color:var(--text-inverse);border-color:var(--primary);box-shadow:var(--shadow-glow-primary)}.filter-btn.active-correct.active{background:var(--correct);border-color:var(--correct);box-shadow:0 0 12px var(--correct-glow);color:var(--text-inverse)}.filter-btn.active-wrong.active{background:var(--wrong);border-color:var(--wrong);box-shadow:0 0 12px var(--wrong-glow);color:var(--text-inverse)}.review-empty-state{text-align:center;padding:var(--space-8) var(--space-4);color:var(--text-muted);font-size:var(--text-base);border:2px dashed var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary)}@media (width<=1023px){.results-grid{grid-template-columns:1fr}}.leaderboard-page{padding-bottom:var(--space-12)}.leaderboard-container{gap:var(--space-8);padding-top:var(--space-6);flex-direction:column;width:100%;display:flex}.leaderboard-header{text-align:center}.leaderboard-header h1{font-size:var(--text-4xl);margin-bottom:var(--space-2)}.leaderboard-filters{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.subject-filter-group{gap:var(--space-2);display:flex}.year-filter-group{align-items:center;display:flex}.leaderboard-select{padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);color:var(--text-primary);font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;min-width:195px;transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff1f}.leaderboard-select:focus{border-color:var(--primary);box-shadow:var(--shadow-glow-primary);outline:none}.btn-filter{padding:var(--space-2) var(--space-6);border-radius:var(--radius-full);font-weight:var(--weight-bold);color:var(--text-primary);transition:all var(--transition-base);background:#ffffff05;border:1px solid #ffffff1f}.btn-filter:hover{background:#ffffff14;border-color:#ffffff40}.btn-filter.active{background:var(--primary);color:#000;border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow)}.btn-filter.sejarah.active{background:var(--sejarah);border-color:var(--sejarah);color:#000;box-shadow:0 0 15px var(--sejarah-glow)}.btn-filter.islam.active{background:var(--islam);border-color:var(--islam);color:#000;box-shadow:0 0 15px var(--islam-glow)}.leaderboard-list{padding:var(--space-6);border-radius:var(--radius-xl);gap:var(--space-3);background:#ffffff05;border:1px solid #ffffff14;flex-direction:column;display:flex}.list-header{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--text-secondary);opacity:.8;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase;margin-bottom:var(--space-2);border-bottom:1px solid #ffffff14;display:flex}.list-row{padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);transition:all var(--transition-base);background:#ffffff03;border:1px solid #ffffff0f;align-items:center;display:flex}.list-row:hover{background:#ffffff0d;border-color:#5effff40;transform:translate(4px);box-shadow:0 0 15px #5effff0d}.list-row.top-3{border-left-width:4px}.list-row.top-3:nth-child(2){border-color:#f4c43066;border-left-color:var(--gold);background:linear-gradient(90deg,#f4c4300f 0%,#ffffff03 100%);box-shadow:0 0 15px #f4c43014}.list-row.top-3:nth-child(3){border-color:#e6e8ea66;border-left-color:var(--silver);background:linear-gradient(90deg,#e6e8ea0f 0%,#ffffff03 100%);box-shadow:0 0 15px #e6e8ea14}.list-row.top-3:nth-child(4){border-color:#cd7f3266;border-left-color:var(--bronze);background:linear-gradient(90deg,#cd7f320f 0%,#ffffff03 100%);box-shadow:0 0 15px #cd7f3214}.col-rank{width:80px;font-size:var(--text-xl);font-weight:var(--weight-extrabold)}.col-name{font-weight:var(--weight-bold);font-size:var(--text-base);color:var(--text-primary);flex:1}.col-subject{width:120px}.col-score{text-align:right;flex-direction:column;width:100px;display:flex}.badge-subj{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);color:#fff;font-weight:var(--weight-bold);letter-spacing:.5px;text-transform:uppercase}.badge-subj.sejarah{background:var(--sejarah-dark);border:1px solid #00cec94d}.badge-subj.islam{background:var(--islam-dark);border:1px solid #7e8cfc4d}.time-sub{font-size:var(--text-xs);color:var(--text-secondary);opacity:.8}@media (width<=639px){.leaderboard-filters{align-items:stretch;gap:var(--space-3);flex-direction:column}.subject-filter-group{justify-content:center}.leaderboard-select{width:100%}.col-subject{display:none}.list-row{padding:var(--space-3)}}.rank-badge{width:28px;height:28px;font-size:var(--text-sm);font-weight:var(--weight-extrabold);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.rank-badge.rank-0{background:var(--gold);color:#000;box-shadow:0 0 10px #f4c43099}.rank-badge.rank-1{background:var(--silver);color:#000;box-shadow:0 0 10px #e6e8ea99}.rank-badge.rank-2{background:var(--bronze);color:#000;box-shadow:0 0 10px #cd7f3299}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}