@import "https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--gold:#f5c518;--gold-dark:#d4a017;--gold-light:#ffe066;--gold-glow:#f5c51866;--dark-bg:#1a0e2e;--dark-overlay:#0a051473;--text-light:#fff;--text-gold:#f5c518;--btn-shadow:0 6px 20px #0006;--btn-glow:0 0 30px #f5c5184d;--icon-size:60px;--transition-fast:.2s ease;--transition-medium:.35s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--dark-bg);width:100%;height:100%;font-family:Outfit,sans-serif;overflow:hidden}#app{width:100%;height:100vh;position:relative;overflow:hidden}.main-menu{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.menu-bg{object-fit:cover;z-index:0;width:100%;height:100%;position:absolute;inset:0}.menu-bg-overlay{z-index:1;pointer-events:none;background:linear-gradient(#0a051e4d 0%,#0a051e1a 40%,#0a051e33 70%,#0a051e80 100%);position:absolute;inset:0}.particles{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:hidden}.particle{background:var(--gold-light);opacity:0;will-change:transform, opacity;border-radius:50%;width:3px;height:3px;animation:8s ease-in-out infinite floatParticle;position:absolute}.particle:first-child{animation-duration:7s;animation-delay:0s;left:10%}.particle:nth-child(2){animation-duration:9s;animation-delay:1.2s;left:20%}.particle:nth-child(3){animation-duration:6s;animation-delay:2.5s;left:35%}.particle:nth-child(4){animation-duration:10s;animation-delay:.8s;left:50%}.particle:nth-child(5){animation-duration:7.5s;animation-delay:3.1s;left:65%}.particle:nth-child(6){animation-duration:8.5s;animation-delay:1.8s;left:75%}.particle:nth-child(7){animation-duration:6.5s;animation-delay:4s;left:85%}.particle:nth-child(8){animation-duration:9.5s;animation-delay:2s;left:92%}@keyframes floatParticle{0%{opacity:0;transform:translateY(100vh)scale(0)}10%{opacity:.8}50%{opacity:.4}90%{opacity:.6}to{opacity:0;transform:translateY(-20vh)scale(1.2)}}.top-nav{z-index:10;pointer-events:none;justify-content:space-between;padding:20px 28px;display:flex;position:absolute;top:0;left:0;right:0}.nav-group{pointer-events:auto;gap:14px;display:flex}.icon-btn{cursor:pointer;transition:transform var(--transition-fast);flex-direction:column;align-items:center;gap:4px;text-decoration:none;display:flex}.icon-btn:hover{transform:scale(1.1)}.icon-btn:active{transform:scale(.95)}.icon-circle{width:var(--icon-size);height:var(--icon-size);background:var(--gold);transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000004d,inset 0 2px 4px #ffffff4d}.icon-circle:before{content:"";background:linear-gradient(#ffffff59 0%,#0000 100%);border-radius:50%;height:40%;position:absolute;top:2px;left:6px;right:6px}.icon-circle svg{fill:#1a0e2e;z-index:1;width:30px;height:30px;position:relative}.icon-btn:hover .icon-circle{background:var(--gold-light);box-shadow:0 4px 20px var(--gold-glow), inset 0 2px 4px #fff6}.icon-label{color:var(--text-light);text-transform:uppercase;letter-spacing:1px;text-shadow:0 2px 8px #000c;font-size:13px;font-weight:700}.icon-btn.active .icon-circle{background:var(--gold)}.icon-btn.muted .icon-circle{background:#888}.icon-btn.muted .icon-circle svg{opacity:.5}.sound-setting-row{background:#ffffff0d;border:1px solid #f5c51833;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:14px 18px;display:flex}.sound-setting-info{color:#fff;align-items:center;gap:10px;font-family:Outfit,sans-serif;font-size:16px;font-weight:600;display:flex}.sound-toggle{color:#888;letter-spacing:1px;cursor:pointer;background:#8883;border:2px solid #888;border-radius:30px;min-width:70px;padding:8px 22px;font-family:Outfit,sans-serif;font-size:14px;font-weight:800;transition:all .25s}.sound-toggle.active{color:#f5c518;background:#f5c51833;border-color:#f5c518;box-shadow:0 0 10px #f5c5184d}.menu-center{z-index:5;flex-direction:column;align-items:center;gap:18px;animation:1s .3s both fadeInUp;display:flex;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.screen-view{opacity:0;visibility:hidden;pointer-events:none;z-index:10;transition:opacity var(--transition-medium), visibility var(--transition-medium), transform var(--transition-medium);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.screen-view.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.screen-view.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-20px)}#screen-home.hidden{transform:translateY(20px)}.game-logo-container{text-align:center;filter:drop-shadow(0 10px 20px #00000080)drop-shadow(0 0 30px #f5c51833);will-change:transform;margin-bottom:20px;animation:4s ease-in-out infinite floatLogo}.game-logo{border-radius:20px;max-width:410px;height:auto}@keyframes floatLogo{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.menu-buttons{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:450px;display:flex}.btn-menu{letter-spacing:3px;text-transform:uppercase;cursor:pointer;width:100%;transition:transform var(--transition-medium), opacity var(--transition-medium);will-change:transform;border:none;border-radius:50px;padding:19px 58px;font-family:Outfit,sans-serif;font-size:24px;font-weight:700;position:relative;overflow:hidden}.btn-menu:before{content:"";pointer-events:none;background:linear-gradient(#ffffff4d 0%,#0000 100%);border-radius:50px;height:45%;position:absolute;top:2px;left:10%;right:10%}.btn-masuk{background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dark) 100%);color:#2a1a0a;box-shadow:var(--btn-shadow), var(--btn-glow), inset 0 1px 2px #ffffff4d}.btn-masuk:hover{background:linear-gradient(180deg, #fff3a0 0%, var(--gold-light) 40%, var(--gold) 100%);transform:translateY(-3px)scale(1.02);box-shadow:0 8px 30px #00000080,0 0 50px #f5c51866,inset 0 1px 2px #fff6}.btn-masuk:active{transform:translateY(1px)scale(.98);box-shadow:0 2px 10px #0006,0 0 15px #f5c51833}.btn-keluar{background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 60%, #b8860b 100%);color:#2a1a0a;box-shadow:var(--btn-shadow), inset 0 1px 2px #fff3;padding:13px 40px;font-size:16px}.btn-keluar:hover{background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);transform:translateY(-2px);box-shadow:0 8px 25px #00000080,0 0 30px #f5c51840,inset 0 1px 2px #ffffff4d}.btn-keluar:active{transform:translateY(1px)scale(.98)}.btn-masuk:after{content:"";opacity:.25;pointer-events:none;z-index:-1;will-change:opacity;border-radius:56px;animation:3s ease-in-out infinite pulseGlowOpacity;position:absolute;inset:-6px;box-shadow:0 0 35px #f5c5188c,0 0 70px #f5c51833}@keyframes pulseGlowOpacity{0%,to{opacity:.25}50%{opacity:.85}}.mode-center{z-index:5;justify-content:center;align-items:center;width:100%;padding:0 40px;display:flex;position:relative}.mode-buttons-container{flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;max-width:1100px;display:flex}.tajwid-container{flex-wrap:nowrap;gap:25px}.tajwid-container .mode-img{object-fit:contain;width:auto;max-width:100%;height:330px}#screen-tajwid .tajwid-container .mode-img{height:365px}.mode-btn{cursor:pointer;transition:transform var(--transition-medium), filter var(--transition-medium);background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:0;display:flex;position:relative}.tajwid-btn-label{color:#f5c518;text-align:center;text-shadow:0 2px 8px #000c;letter-spacing:1px;pointer-events:none;font-family:Outfit,sans-serif;font-size:14px;font-weight:700}#btn-hadist-nisbah{left:25px}.mode-img{filter:drop-shadow(0 15px 25px #0009)drop-shadow(0 0 15px #f5c5181a);width:100%;max-width:380px;height:auto;transition:all var(--transition-medium);will-change:transform;animation:5s ease-in-out infinite floatMode}.mode-btn:nth-child(2) .mode-img{animation-delay:1s}@keyframes floatMode{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.mode-btn:hover{transform:translateY(-10px)scale(1.03)}.mode-btn:hover .mode-img{opacity:.95}.mode-btn:active{transform:translateY(2px)scale(.98)}.top-nav-back{z-index:10;pointer-events:auto;padding:20px 28px;position:absolute;top:0;left:0}.icon-btn-back{background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);color:#fff;pointer-events:auto;border-radius:50px;flex-direction:row;align-items:center;gap:12px;padding:6px 20px 6px 6px;text-decoration:none;box-shadow:0 4px 15px #00000080}.icon-btn-back .icon-circle{box-shadow:none;background:#fff3}.icon-btn-back .icon-circle svg{stroke:#fff;fill:none}.icon-btn-back .icon-label{color:#fff;letter-spacing:2px;text-shadow:none;font-size:15px;font-weight:800}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;transition:opacity var(--transition-medium);background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.active{opacity:1;pointer-events:auto}.modal{border:2px solid var(--gold);text-align:center;width:90%;max-width:480px;transition:transform var(--transition-medium);background:linear-gradient(145deg,#2a1f3d 0%,#1a1028 100%);border-radius:20px;padding:40px;transform:scale(.85)translateY(20px);box-shadow:0 20px 60px #0009,0 0 40px #f5c5181a,inset 0 1px #ffffff0d}.modal-overlay.active .modal{transform:scale(1)translateY(0)}.modal h2{color:var(--gold);text-shadow:0 0 15px #f5c5184d;margin-bottom:12px;font-family:Amiri,serif;font-size:28px}.modal p{color:#fffc;margin-bottom:24px;font-size:15px;line-height:1.6}.modal-close{background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);color:#1a0e2e;cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all var(--transition-fast);border:none;border-radius:50px;padding:10px 36px;font-family:Outfit,sans-serif;font-size:15px;font-weight:700}.modal-close:hover{background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);transform:scale(1.05)}.rank-list{text-align:left;margin-bottom:24px}.rank-item{border-bottom:1px solid #f5c51826;align-items:center;gap:14px;padding:10px 16px;display:flex}.rank-item:last-child{border-bottom:none}.rank-number{color:var(--gold);text-align:center;width:32px;font-size:22px;font-weight:800}.rank-name{color:#ffffffe6;flex:1;font-size:15px;font-weight:500}.rank-score{color:var(--gold-light);font-size:14px;font-weight:700}.confirm-buttons{justify-content:center;gap:12px;display:flex}.btn-confirm{cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all var(--transition-fast);border:none;border-radius:50px;padding:10px 28px;font-family:Outfit,sans-serif;font-size:14px;font-weight:700}.btn-confirm-yes{color:#fff;background:linear-gradient(#ff6b6b 0%,#c0392b 100%)}.btn-confirm-yes:hover{background:linear-gradient(#ff8787 0%,#e74c3c 100%);transform:scale(1.05)}.btn-confirm-no{background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);color:#1a0e2e}.btn-confirm-no:hover{background:linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);transform:scale(1.05)}.menu-footer{text-align:center;z-index:5;position:absolute;bottom:16px;left:0;right:0}.menu-footer span{color:#ffffff59;letter-spacing:1px;font-size:12px}@media (width<=768px){:root{--icon-size:50px}.top-nav,.top-nav-back{padding:14px 16px}.nav-group{gap:10px}.icon-circle svg{width:25px;height:25px}.icon-label{letter-spacing:.5px;font-size:10px}.icon-btn-back{padding:5px 16px 5px 5px}.icon-btn-back .icon-label{font-size:13px}.game-title h1{font-size:32px}.game-title .subtitle{letter-spacing:3px;font-size:12px}.menu-buttons{max-width:360px}.btn-masuk{padding:17px 43px;font-size:20px}.btn-keluar{padding:13px 38px;font-size:17px}.modal{padding:28px 24px}.modal h2{font-size:24px}.mode-buttons-container{gap:20px}.mode-img{max-width:280px}.tajwid-container{flex-wrap:nowrap;gap:15px}.tajwid-container .mode-img{width:auto;height:240px}#screen-tajwid .tajwid-container .mode-img{height:265px}}@media (width<=480px){:root{--icon-size:44px}.top-nav,.top-nav-back{padding:10px 12px}.nav-group{gap:8px}.icon-circle svg{width:21px;height:21px}.icon-label{font-size:9px}.icon-btn-back{padding:4px 14px 4px 4px}.icon-btn-back .icon-label{font-size:11px}.game-logo{max-width:300px}.game-title h1{letter-spacing:2px;font-size:26px}.game-title .subtitle{font-size:10px}.btn-masuk{letter-spacing:2px;padding:14px 36px;font-size:18px}.btn-keluar{padding:12px 33px;font-size:15px}.mode-buttons-container{flex-direction:column;gap:20px}.tajwid-container{flex-direction:row;gap:10px}.mode-img{max-width:220px}.tajwid-container .mode-img{width:auto;height:140px}#screen-tajwid .tajwid-container .mode-img{height:155px}.tajwid-btn-label{letter-spacing:.5px;font-size:11px}}#screen-hukum-bacaan{overflow:hidden}.hukum-bg{object-fit:cover;z-index:0;filter:brightness(.55)saturate(1.3);width:100%;height:100%;position:absolute;inset:0}.hukum-bg-overlay{z-index:1;pointer-events:none;background:linear-gradient(#05081e8c 0%,#0a0f3240 45%,#1e0f0580 100%);position:absolute;inset:0}.materi-slider-container{z-index:10;flex-direction:column;padding-top:20px;display:flex;position:absolute;inset:10% 0 5%}.materi-slider{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;flex:1;display:flex;overflow-x:auto}.materi-slider::-webkit-scrollbar{display:none}.materi-slide{scroll-snap-align:center;flex:0 0 100%;justify-content:center;align-items:center;width:100%;padding:0 20px;display:flex}.materi-card-detail{color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);will-change:transform;background:linear-gradient(145deg,#1e0f37f2 0%,#0f0a28fa 100%);border:2px solid #f5c518;border-radius:20px;flex-direction:column;gap:10px;width:100%;max-width:650px;max-height:95%;padding:20px 30px;animation:.6s cubic-bezier(.175,.885,.32,1.275) both cardEntrance;display:flex;position:relative;overflow-y:auto;box-shadow:0 15px 35px #0009,0 0 30px #f5c51826,inset 0 2px 10px #ffffff1a}.materi-card-detail::-webkit-scrollbar{width:6px}.materi-card-detail::-webkit-scrollbar-track{background:#0003;border-radius:4px}.materi-card-detail::-webkit-scrollbar-thumb{background:#f5c51880;border-radius:4px}@keyframes cardEntrance{0%{opacity:0;transform:scale(.8)translateY(40px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes cardHoverFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.materi-header{border-bottom:1px solid #f5c5184d;flex-shrink:0;justify-content:center;align-items:center;gap:15px;padding-bottom:10px;display:flex;position:relative}.materi-header h3{color:#f5c518;text-shadow:0 0 15px #f5c51899;letter-spacing:1px;margin:0;font-family:Amiri,serif;font-size:28px;font-weight:700}.materi-ornament{color:#f5c518;font-size:20px;animation:2s ease-in-out infinite ornamentPulse}@keyframes ornamentPulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;text-shadow:0 0 10px #f5c518;transform:scale(1.2)}}.section-label{color:#a996c5;text-transform:uppercase;letter-spacing:1px;margin:0 0 8px;font-family:Outfit,sans-serif;font-size:14px}.materi-huruf{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.huruf-badge{color:#f5c518;background:linear-gradient(135deg,#f5c51840 0%,#d4a0171a 100%);border:1.5px solid #f5c518;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-family:Amiri,serif;font-size:22px;font-weight:700;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s;display:flex;box-shadow:0 4px 10px #0006,inset 0 0 10px #f5c5184d}.huruf-badge:hover{background:linear-gradient(135deg,#f5c51866 0%,#d4a01733 100%);transform:scale(1.15)translateY(-2px);box-shadow:0 8px 15px #00000080,0 0 20px #f5c51880,inset 0 0 15px #f5c51899}.materi-pengertian{text-align:center;margin:0;font-family:Outfit,sans-serif;font-size:15px;line-height:1.4}.materi-contoh-box{text-align:center;background:linear-gradient(#0a051499,#000c);border:1.5px dashed #f5c51866;border-radius:16px;flex-shrink:0;padding:15px;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #000c}.materi-contoh-box:before{content:"";background:linear-gradient(90deg,#0000,#ffffff0d,#0000);width:50%;height:100%;animation:4s infinite shineSweep;position:absolute;top:0;left:-100%;transform:skew(-20deg)}@keyframes shineSweep{0%{left:-100%}20%,to{left:200%}}.contoh-arabic{color:#fff;text-shadow:0 0 20px #f5c51880,0 4px 6px #000c;margin:5px 0 10px;font-family:Amiri,serif;font-size:38px;font-weight:700}.contoh-cara{color:#ddd;margin:0;font-family:Outfit,sans-serif;font-size:15px}.highlight-text{color:#f5c518;font-weight:700}.btn-audio{display:none}.btn-audio:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 10px 20px #00000080,0 0 25px #f5c51899,inset 0 2px 4px #ffffff80}.btn-audio:active{transform:translateY(1px)scale(.95);box-shadow:0 4px 10px #0006}.btn-audio.playing{animation:1s infinite pulseAudio}@keyframes pulseAudio{0%{transform:scale(1);box-shadow:0 0 #f5c518b3}70%{transform:scale(1.05);box-shadow:0 0 0 10px #f5c51800}to{transform:scale(1);box-shadow:0 0 #f5c51800}}.audio-icon{width:20px;height:20px}.slider-hint{color:#fff9;justify-content:center;align-items:center;gap:10px;padding:15px 0;font-family:Outfit,sans-serif;font-size:14px;animation:2s ease-in-out infinite floatHint;display:flex}@keyframes floatHint{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@media (width<=768px){.materi-slider-container{padding-top:5px;bottom:0}.materi-slide{scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start;padding:10px 15px 30px;overflow-y:auto}.materi-slide::-webkit-scrollbar{display:none}.materi-card-detail{flex-shrink:0;width:100%;max-height:none;margin:0 auto;animation:.6s cubic-bezier(.175,.885,.32,1.275) both cardEntrance;overflow-y:visible}.slider-hint{padding:8px 0;font-size:12px}}@media (width<=580px){.materi-card-detail{gap:10px;padding:18px 16px}.materi-header h3{font-size:22px}.contoh-arabic{margin-bottom:8px;font-size:36px}.materi-pengertian{font-size:14px}.huruf-badge{width:38px;height:38px;font-size:20px}.btn-audio{padding:10px 20px;font-size:14px}}@media (width<=480px){.bab-title-container{top:72px!important}.bab-title{letter-spacing:1px!important;padding:8px 20px!important;font-size:16px!important}.materi-card-detail{gap:10px;padding:15px 14px}.materi-header h3{font-size:20px}.section-label{font-size:11px}.materi-pengertian{font-size:13px;line-height:1.5}.contoh-arabic{margin-bottom:6px;font-size:32px}.contoh-cara{font-size:13px}.card-actions{gap:10px;margin-top:12px}}.slider-nav-btn{color:#1a1025;cursor:pointer;z-index:15;background:#f5c518cc;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:all .3s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 4px 15px #00000080}.slider-nav-btn:hover{background:#f5c518;transform:translateY(-50%)scale(1.1)}.slider-nav-btn:active{transform:translateY(-50%)scale(.95)}.slider-nav-btn.prev-btn{left:20px}.slider-nav-btn.next-btn{right:20px}.slider-nav-btn svg{width:28px;height:28px}@media (width<=580px){.slider-nav-btn{width:40px;height:40px}.slider-nav-btn.prev-btn{left:10px}.slider-nav-btn.next-btn{right:10px}.slider-nav-btn svg{width:22px;height:22px}}.bab-title-container{text-align:center;z-index:15;padding:0 20px;position:absolute;top:10%;left:0;right:0}.bab-title{color:#fff;text-transform:uppercase;letter-spacing:3px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 2px 5px #000c;will-change:transform;background:linear-gradient(135deg,#28143ce6,#140a28f2);border:2px solid #f5c51899;border-radius:50px;margin:0;padding:10px 40px;font-family:Outfit,sans-serif;font-size:26px;font-weight:800;animation:4s ease-in-out infinite floatBabTitle;display:inline-block;box-shadow:0 8px 25px #0009,0 0 20px #f5c51833}@keyframes floatBabTitle{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.card-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:20px;display:flex}.card-actions .btn-audio{margin-top:0}.btn-lanjut-slide,.btn-selesai-slide{color:#f5c518;cursor:pointer;background:#f5c51826;border:1.5px solid #f5c518;border-radius:30px;align-items:center;gap:10px;padding:12px 28px;font-family:Outfit,sans-serif;font-size:16px;font-weight:700;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;box-shadow:0 4px 15px #0000004d}.btn-lanjut-slide:hover,.btn-selesai-slide:hover{color:#1a0e2e;background:linear-gradient(135deg,#f5c518,#d4a017);transform:translateY(-3px)scale(1.05);box-shadow:0 8px 20px #f5c51866}.btn-selesai-slide{color:#2ecc71;background:#2ecc7126;border-color:#2ecc71}.btn-selesai-slide:hover{color:#fff;background:linear-gradient(135deg,#2ecc71,#27ae60);box-shadow:0 8px 20px #2ecc7166}@media (width<=580px){.bab-title{padding:6px 20px;font-size:16px}.card-actions{flex-direction:column;gap:10px}.btn-lanjut-slide,.btn-selesai-slide,.card-actions .btn-audio{justify-content:center;width:100%}}.stars-layer{z-index:2;pointer-events:none;position:absolute;inset:0}.star{opacity:0;will-change:transform, opacity;background:#fff;border-radius:50%;width:3px;height:3px;animation:4s ease-in-out infinite starTwinkle;position:absolute}.star:first-child{width:4px;height:4px;animation-duration:3.5s;animation-delay:0s;top:8%;left:5%}.star:nth-child(2){animation-duration:4.2s;animation-delay:.7s;top:15%;left:18%}.star:nth-child(3){width:2px;height:2px;animation-duration:3.8s;animation-delay:1.3s;top:5%;left:35%}.star:nth-child(4){animation-duration:5s;animation-delay:.3s;top:20%;left:55%}.star:nth-child(5){width:4px;height:4px;animation-duration:3.3s;animation-delay:2s;top:10%;left:70%}.star:nth-child(6){animation-duration:4.5s;animation-delay:1.5s;top:25%;left:88%}.star:nth-child(7){width:2px;height:2px;animation-duration:3.9s;animation-delay:2.8s;top:30%;left:8%}.star:nth-child(8){animation-duration:4s;animation-delay:.9s;top:12%;left:45%}.star:nth-child(9){animation-duration:3.6s;animation-delay:3.2s;top:18%;left:25%}.star:nth-child(10){animation-duration:4.7s;animation-delay:1.1s;top:7%;left:80%}.star:nth-child(11){width:2px;height:2px;animation-duration:3.2s;animation-delay:2.4s;top:32%;left:60%}.star:nth-child(12){width:4px;height:4px;animation-duration:5.5s;animation-delay:.5s;top:22%;left:40%}@keyframes starTwinkle{0%,to{opacity:0;transform:scale(.8)}50%{opacity:.9;transform:scale(1.2)}}.hukum-center{z-index:5;flex-direction:column;align-items:center;gap:20px;width:100%;height:100%;padding:80px 30px 20px;display:flex;position:relative;overflow-y:auto}.hukum-center::-webkit-scrollbar{width:4px}.hukum-center::-webkit-scrollbar-track{background:0 0}.hukum-center::-webkit-scrollbar-thumb{background:#f5c51866;border-radius:2px}.hukum-title{align-items:center;gap:14px;margin-bottom:8px;animation:.8s both fadeInUp;display:flex}.hukum-title h2{color:#f5c518;text-shadow:0 0 20px #f5c518b3,0 2px 8px #0009;letter-spacing:2px;font-family:Amiri,serif;font-size:32px;font-weight:700}.hukum-title-ornament{color:#f5c518;opacity:.8;font-size:20px;animation:8s linear infinite ornamentSpin}@keyframes ornamentSpin{0%{opacity:.6;transform:rotate(0)}50%{opacity:1}to{opacity:.6;transform:rotate(360deg)}}.hukum-grid{grid-template-columns:repeat(3,1fr);gap:18px;width:100%;max-width:700px;animation:.9s .2s both fadeInUp;display:grid}.hukum-card{cursor:pointer;will-change:transform;background:linear-gradient(160deg,#190f37eb 0%,#0f0a28f2 100%);border:1.5px solid #f5c51880;border-radius:14px;flex-direction:column;grid-column:auto;align-items:center;padding:0 0 14px;transition:transform .22s,border-color .22s;display:flex;position:relative;overflow:hidden;box-shadow:0 6px 20px #0000008c,inset 0 1px #ffffff0d}.hukum-card:before{content:"";opacity:0;pointer-events:none;z-index:0;border-radius:13px;transition:opacity .22s;position:absolute;inset:0;box-shadow:0 18px 40px #000000a6,0 0 25px #f5c51866}.hukum-card:hover{border-color:#f5c518e6;transform:translateY(-10px)scale(1.05)}.hukum-card:hover:before{opacity:1}.hukum-card:active{transform:translateY(2px)scale(.97)}.card-dome{width:100%;line-height:0}.card-dome svg{width:100%;height:auto;display:block}.card-body{flex-direction:column;align-items:center;gap:4px;width:100%;padding:6px 10px 0;display:flex}.card-arabic{color:#f5c518;text-shadow:0 0 15px #f5c51899;direction:rtl;font-family:Amiri,serif;font-size:30px;font-weight:700;line-height:1.2}.card-latin{color:#fff;letter-spacing:.5px;text-transform:uppercase;font-family:Outfit,sans-serif;font-size:13px;font-weight:700}.card-subtitle{color:#ffffff8c;text-align:center;font-family:Outfit,sans-serif;font-size:10px;font-weight:400;line-height:1.3}.hukum-card:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#f5c51880,#0000);height:1px;position:absolute;bottom:0;left:10%;right:10%}@media (width<=860px){.hukum-grid{grid-template-columns:repeat(3,1fr);max-width:620px}.hukum-card{grid-column:auto}.hukum-title h2{font-size:26px}}@media (width<=580px){.hukum-grid{grid-template-columns:repeat(2,1fr);gap:12px;max-width:380px}.hukum-card{grid-column:auto}.hukum-center{padding:70px 16px 16px}.card-arabic{font-size:24px}.card-latin{font-size:11px}.card-subtitle{font-size:9px}.hukum-title h2{font-size:22px}.hadist-card-grid{gap:8px}.hadist-card-desc{font-size:11px}}.hadist-center{max-width:1400px;padding:80px 20px 30px}.hadist-cols-wrapper{grid-template-columns:repeat(3,1fr);align-items:start;gap:30px;width:100%;max-width:1350px;display:grid}.hadist-col-title{border-bottom:1px solid #f5c51826;justify-content:center;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:12px;animation:.8s both fadeInUp;display:flex}.hadist-col-title h3{color:#f5c518;letter-spacing:1px;text-shadow:0 2px 10px #f5c51866;margin:0;font-family:Amiri,serif;font-size:20px;font-weight:700}@keyframes pulseGlowGame{0%{filter:drop-shadow(0 0 4px #f5c5184d);transform:scale(1)}50%{filter:drop-shadow(0 0 12px #f5c518cc);transform:scale(1.1)}to{filter:drop-shadow(0 0 4px #f5c5184d);transform:scale(1)}}.hadist-col-ornament{color:#f5c518;opacity:.8;font-size:16px;animation:2s ease-in-out infinite pulseGlowGame}@keyframes gamePopIn{0%{opacity:0;transform:translateY(30px)scale(.9)}60%{opacity:1;transform:translateY(-3px)scale(1.02)}to{opacity:1;transform:translateY(0)scale(1)}}.hadist-card-grid{flex-direction:column;gap:10px;width:100%;display:flex}.hadist-menu-card{cursor:pointer;text-align:left;will-change:transform;background:linear-gradient(135deg,#181030 0%,#0b0616 100%);border:2px solid #f5c51866;border-radius:16px;align-items:center;gap:16px;width:100%;padding:16px 18px;transition:transform .15s cubic-bezier(.25,.8,.25,1),border-color .15s;animation:.6s cubic-bezier(.175,.885,.32,1.275) both gamePopIn;display:flex;position:relative;overflow:hidden;box-shadow:0 5px #f5c51866,0 10px 20px #0009}.hadist-menu-card:first-child{animation-delay:50ms}.hadist-menu-card:nth-child(2){animation-delay:.1s}.hadist-menu-card:nth-child(3){animation-delay:.15s}.hadist-menu-card:nth-child(4){animation-delay:.2s}.hadist-menu-card:nth-child(5){animation-delay:.25s}.hadist-menu-card:hover{border-color:#f5c518cc;transform:translateY(2px)}.hadist-menu-card:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(135deg,#20154099 0%,#120a2299 100%);border-radius:14px;transition:opacity .15s;position:absolute;inset:0;box-shadow:inset 0 0 15px #f5c5181f}.hadist-menu-card:hover:after{opacity:1}.hadist-menu-card:active{border-color:#f5c518;transform:translateY(5px)}.hadist-card-glow{pointer-events:none;opacity:.5;transition:opacity .3s;position:absolute;inset:0}.hadist-menu-card:hover .hadist-card-glow{opacity:1}.hadist-card-icon{flex:none;justify-content:center;align-items:center;display:flex}.hadist-card-icon svg{width:48px;height:48px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),filter .3s}.hadist-menu-card:hover .hadist-card-icon svg{filter:drop-shadow(0 0 8px #fff6);transform:scale(1.15)rotate(5deg)}.hadist-card-content{flex:1;min-width:0}.hadist-card-label{letter-spacing:2px;color:#f5c518;text-transform:uppercase;text-shadow:0 0 5px #f5c5184d;margin-bottom:4px;font-family:Outfit,sans-serif;font-size:10px;font-weight:800}.hadist-card-title{color:#fff;text-shadow:0 2px 4px #000c;margin-bottom:2px;font-family:Amiri,serif;font-size:22px;font-weight:700}.hadist-card-desc{color:#ffffff8c;white-space:nowrap;text-overflow:ellipsis;font-family:Outfit,sans-serif;font-size:11px;line-height:1.3;overflow:hidden}@keyframes arrowPulseGame{0%{transform:translate(0)}50%{transform:translate(6px)}to{transform:translate(0)}}.hadist-card-arrow{opacity:.7;flex:none;transition:opacity .2s,transform .2s}.hadist-menu-card:hover .hadist-card-arrow{opacity:1;animation:.8s ease-in-out infinite arrowPulseGame}@media (width<=768px){#screen-hadist .hukum-center{flex-direction:column;align-items:stretch;height:100%;padding:75px 14px 30px;display:flex;overflow-y:auto}.hadist-cols-wrapper{grid-template-columns:1fr;gap:0;max-width:100%}.hadist-col{width:100%;padding-bottom:8px}.hadist-col-title{z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(90deg,#0a0519f7 0%,#1e0f37f7 50%,#0a0519f7 100%);border:1px solid #f5c51859;border-radius:12px;gap:8px;margin:12px 0 10px;padding:10px 16px;position:sticky;top:0}.hadist-col-title h3{letter-spacing:.5px;font-size:15px}.hadist-col-ornament{font-size:12px}.hadist-card-grid{gap:8px}.hadist-menu-card{gap:12px;padding:12px 14px}.hadist-card-icon svg{width:36px;height:36px}.hadist-card-title{font-size:18px}.hadist-card-arrow svg{width:14px;height:14px}}@media (width<=480px){#screen-hadist .hukum-center{padding:70px 12px 30px}.hadist-menu-card{gap:10px;padding:11px 12px}.hadist-card-icon svg{width:30px;height:30px}.hadist-card-title{font-size:16px}.hadist-card-label{letter-spacing:1px;font-size:9px}.hadist-col-title h3{font-size:13px}}.hadist-tag{letter-spacing:1px;text-transform:uppercase;border-radius:50px;margin-top:8px;padding:4px 14px;font-family:Outfit,sans-serif;font-size:11px;font-weight:600;display:inline-block}.ciri-ciri-list{flex-direction:column;gap:6px;margin-top:6px;display:flex}.ciri-item{color:#ffffffd9;background:#ffffff0a;border-left:3px solid;border-radius:0 6px 6px 0;align-items:center;gap:10px;padding:6px 12px;font-family:Outfit,sans-serif;font-size:13px;display:flex}.ciri-dot{border-radius:50%;flex:none;width:7px;height:7px}.hadist-contoh-box{background:#00000059;border:1px solid;border-radius:10px;margin-top:8px;padding:12px 16px}.hadist-contoh-text{color:#ffffffd9;margin:0 0 6px;font-family:Amiri,serif;font-size:15px;font-style:italic;line-height:1.5}.hadist-kesimpulan{letter-spacing:.3px;margin:0;font-family:Outfit,sans-serif;font-size:12px;font-weight:600}.hadist-detail-card{gap:6px!important;max-height:90vh!important;padding:14px 22px!important;overflow-y:hidden!important}.hadist-detail-card .materi-header{padding-bottom:8px}.hadist-detail-card .materi-header h3{font-size:22px}.hadist-detail-card .hadist-tag{margin-top:4px;padding:3px 10px;font-size:10px}.hadist-detail-card .section-label{margin-bottom:4px;font-size:11px}.hadist-detail-card .materi-pengertian{text-align:left;font-size:13px;line-height:1.35}.hadist-detail-card .materi-pengertian-container{margin-top:4px!important}.hadist-detail-card .materi-huruf-container{margin-top:6px!important}.hadist-detail-card .ciri-ciri-list{gap:4px;margin-top:4px}.hadist-detail-card .ciri-item{padding:5px 10px;font-size:12px}.hadist-detail-card .materi-contoh-box{margin-top:6px!important}.hadist-detail-card .hadist-contoh-box{margin-top:4px;padding:8px 12px}.hadist-detail-card .hadist-contoh-text{margin-bottom:3px;font-size:13px}.hadist-detail-card .hadist-kesimpulan{font-size:11px}.hadist-detail-card .card-actions{justify-content:center;display:flex;margin-top:8px!important}.quiz-top-nav{z-index:20;background:linear-gradient(#0009 0%,#0000 100%);justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:absolute;top:0;left:0;right:0}.quiz-xp-container{background:#0009;border-radius:30px;flex:1;align-items:center;gap:10px;min-width:0;max-width:260px;margin-left:12px;padding:8px 16px;animation:.5s both gamePopIn;display:flex}.quiz-xp-gold{border:2px solid #f5c518}.quiz-xp-green{border:2px solid #2e8b57}.quiz-xp-label{color:#f5c518;flex-shrink:0;font-family:Outfit,sans-serif;font-size:16px;font-weight:800}.quiz-xp-label-green{color:#2e8b57}.quiz-xp-track{background:#333;border-radius:5px;flex:1;min-width:60px;height:10px;overflow:hidden}.quiz-xp-fill{width:0%;height:100%;transition:width .3s}.quiz-xp-fill-gold{background:linear-gradient(90deg,#f5c518,#ff6b6b)}.quiz-xp-fill-green{background:linear-gradient(90deg,#2e8b57,#3cb371)}.quiz-xp-value{color:#fff;flex-shrink:0;font-family:Outfit,sans-serif;font-size:15px;font-weight:700}.quiz-game-area{flex-direction:column;align-items:center;gap:20px;width:100%;max-width:800px;margin:0 auto;padding:16px 20px 20px;display:flex;position:absolute;inset:70px 0 0 50%;overflow-y:auto;transform:translate(-50%)}.quiz-game-area::-webkit-scrollbar{display:none}.quiz-question-card{text-align:center;background:#140f2de6;border:2px solid #f5c518;border-radius:20px;flex-shrink:0;width:100%;padding:20px 24px;animation:.5s cubic-bezier(.175,.885,.32,1.275) both cardEntrance;box-shadow:0 8px 25px #0009,0 0 20px #f5c5181a}.quiz-question-green{border-color:#2e8b57;box-shadow:0 8px 25px #0009,0 0 20px #2e8b571a}.quiz-question-label{letter-spacing:2px;color:#f5c518;text-transform:uppercase;margin-bottom:10px;font-family:Outfit,sans-serif;font-size:13px;font-weight:800}.quiz-question-label-green{color:#3cb371}.quiz-question-text{color:#fff;text-shadow:0 2px 8px #0009;font-family:Amiri,serif;font-size:26px;font-weight:700;line-height:1.4}.quiz-drop-zone{background:#140f2dd9;border:2px dashed #f5c51880;border-radius:16px;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:12px;width:100%;min-height:90px;padding:16px;transition:all .3s;display:flex;box-shadow:0 4px 15px #0006}.quiz-drop-green{border-color:#2e8b5780}.quiz-drop-text{color:#ffffff80;text-align:center;font-family:Outfit,sans-serif;font-size:15px}.quiz-options-grid{flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:12px;width:100%;display:flex}.quiz-option-btn{cursor:pointer;background:linear-gradient(135deg,#181030 0%,#0b0616 100%);border:2px solid #f5c51880;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:120px;max-width:calc(50% - 6px);padding:16px 20px;transition:all .15s cubic-bezier(.25,.8,.25,1);animation:.5s cubic-bezier(.175,.885,.32,1.275) both gamePopIn;display:flex;box-shadow:0 4px #f5c51859,0 8px 20px #00000080}.quiz-option-btn-green{border-color:#2e8b5780;box-shadow:0 4px #2e8b5759,0 8px 20px #00000080}.quiz-option-btn:hover{background:linear-gradient(135deg,#201540 0%,#120a22 100%);border-color:#f5c518;transform:translateY(-3px);box-shadow:0 7px #f5c51880,0 12px 25px #0009}.quiz-option-btn-green:hover{border-color:#2e8b57;box-shadow:0 7px #2e8b5780,0 12px 25px #0009}.quiz-option-btn:active{box-shadow:none;transform:translateY(3px)}.quiz-option-text{color:#fff;text-shadow:0 2px 8px #0009;font-family:Amiri,serif;font-size:36px;font-weight:700;line-height:1}.quiz-option-text-sm{font-family:Outfit,sans-serif;font-size:18px}@media (width<=768px){.quiz-top-nav{padding:12px 16px}.quiz-xp-container{gap:8px;max-width:200px;padding:6px 12px}.quiz-xp-label,.quiz-xp-value{font-size:13px}.quiz-xp-track{min-width:50px}.quiz-game-area{gap:14px;padding:12px 14px 16px;top:62px}.quiz-question-card{padding:16px 18px}.quiz-question-label{font-size:11px}.quiz-question-text{font-size:20px}.quiz-drop-zone{min-height:70px;padding:12px}.quiz-drop-text{font-size:13px}.quiz-options-grid{gap:10px}.quiz-option-btn{min-width:100px;padding:14px 12px}.quiz-option-text{font-size:28px}.quiz-option-text-sm{font-size:15px}}@media (width<=480px){.quiz-top-nav{padding:10px 12px}.quiz-xp-container{gap:6px;max-width:160px;margin-left:8px;padding:5px 10px}.quiz-xp-label,.quiz-xp-value{font-size:12px}.quiz-xp-track{min-width:40px;height:8px}.quiz-game-area{gap:10px;padding:10px 12px 12px;top:56px}.quiz-question-card{padding:14px 16px}.quiz-question-label{margin-bottom:6px;font-size:10px}.quiz-question-text{font-size:18px}.quiz-drop-zone{min-height:60px;padding:10px}.quiz-drop-text{font-size:12px}.quiz-options-grid{gap:8px}.quiz-option-btn{border-radius:14px;min-width:0;padding:12px 10px}.quiz-option-text{font-size:24px}.quiz-option-text-sm{font-size:14px}}