:root{--primary:#6366f1;--primary-hover:#4f46e5;--primary-glow:rgba(99, 102, 241, 0.25);--secondary:#0ea5e9;--accent:#f59e0b;--success:#10b981;--danger:#ef4444;--bg-main:#0f172a;--bg-card:rgba(30, 41, 59, 0.85);--bg-card-hover:rgba(51, 65, 85, 0.95);--bg-glass:rgba(15, 23, 42, 0.75);--border-color:rgba(148, 163, 184, 0.15);--border-focus:#6366f1;--text-main:#f8fafc;--text-muted:#94a3b8;--text-dim:#64748b;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--shadow-sm:0 2px 8px rgba(0, 0, 0, 0.15);--shadow-md:0 8px 24px rgba(0, 0, 0, 0.25);--shadow-lg:0 16px 40px rgba(0, 0, 0, 0.35);--transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}[data-theme=light]{--primary:#4f46e5;--primary-hover:#4338ca;--primary-glow:rgba(79, 70, 229, 0.15);--secondary:#0284c7;--bg-main:#f8fafc;--bg-card:rgba(255, 255, 255, 0.9);--bg-card-hover:#ffffff;--bg-glass:rgba(255, 255, 255, 0.8);--border-color:rgba(203, 213, 225, 0.8);--text-main:#0f172a;--text-muted:#475569;--text-dim:#94a3b8;--shadow-sm:0 2px 8px rgba(15, 23, 42, 0.06);--shadow-md:0 8px 24px rgba(15, 23, 42, 0.08);--shadow-lg:0 16px 40px rgba(15, 23, 42, 0.12)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family);background-color:var(--bg-main);color:var(--text-main);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;position:relative;transition:background-color .3s,color .3s}.bg-glow-container{position:fixed;top:0;left:0;width:100%;max-width:100%;height:100vh;pointer-events:none;z-index:0;overflow:hidden}.glow-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.25;animation:18s ease-in-out infinite alternate floatOrb}.glow-orb-1{width:450px;height:450px;background:radial-gradient(circle,#6366f1 0,transparent 70%);top:-100px;left:-50px}.glow-orb-2{width:500px;height:500px;background:radial-gradient(circle,#0ea5e9 0,transparent 70%);top:40%;right:-100px;animation-duration:22s;animation-delay:-5s}.glow-orb-3{width:400px;height:400px;background:radial-gradient(circle,#ec4899 0,transparent 70%);bottom:-100px;left:25%;animation-duration:25s;animation-delay:-10s}@keyframes floatOrb{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,60px) scale(1.1)}100%{transform:translate(-30px,30px) scale(.95)}}.navbar{position:sticky;top:0;z-index:100;background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-color);transition:var(--transition)}.nav-container{max-width:1300px;margin:0 auto;padding:.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text-main);user-select:none}.brand-icon{width:42px;height:42px;background:linear-gradient(135deg,#6366f1,#a855f7);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 4px 14px var(--primary-glow);transition:var(--transition)}.brand:hover .brand-icon{transform:rotate(-6deg) scale(1.08)}.brand-logo-img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#fff;padding:3px;box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.1);transition:transform .25s,box-shadow .25s;flex-shrink:0}.brand:hover .brand-logo-img{transform:rotate(-3deg) scale(1.08);box-shadow:0 6px 18px rgba(99,102,241,.35)}.brand-name{font-size:1.35rem;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#6366f1,#38bdf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-sub{display:block;font-size:.72rem;color:var(--text-muted);font-weight:500;letter-spacing:.5px;text-transform:uppercase}.nav-search{flex:1;max-width:450px;position:relative;display:flex;align-items:center}.nav-search input{width:100%;padding:.65rem 1rem .65rem 2.6rem;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-main);font-size:.9rem;outline:0;transition:var(--transition)}.nav-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.nav-search .search-icon{position:absolute;left:.9rem;color:var(--text-dim);font-size:.95rem;pointer-events:none}.nav-actions{display:flex;align-items:center;gap:.75rem}.btn-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;transition:var(--transition)}.btn-icon:hover{background:var(--bg-card-hover);border-color:var(--primary);transform:translateY(-2px)}.btn-pwa{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:var(--radius-full);background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;font-size:.85rem;font-weight:600;border:none;cursor:pointer;box-shadow:0 4px 12px var(--primary-glow);transition:var(--transition)}.btn-pwa:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--primary-glow)}.hero{position:relative;z-index:1;padding:3.5rem 1.5rem 2.5rem;text-align:center;max-width:1100px;margin:0 auto}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1.1rem;border-radius:var(--radius-full);background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);color:#818cf8;font-size:.85rem;font-weight:600;margin-bottom:1.4rem;box-shadow:var(--shadow-sm);animation:3s infinite pulseBadge}@keyframes pulseBadge{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.3)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0)}}.hero-title{font-size:2.8rem;font-weight:900;line-height:1.2;letter-spacing:-1px;margin-bottom:1.2rem}.hero-title .gradient-text{background:linear-gradient(135deg,#6366f1 0,#38bdf8 50%,#ec4899 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-desc{font-size:1.15rem;color:var(--text-muted);max-width:760px;margin:0 auto 2.2rem;line-height:1.7}.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}.stat-item{background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border-color);padding:1.2rem 1rem;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:var(--transition)}.stat-item:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-md)}.stat-number{font-size:1.8rem;font-weight:800;color:var(--text-main);display:block}.stat-label{font-size:.8rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.section-container{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:3rem 1.5rem;width:100%}.section-header{text-align:center;margin-bottom:2.5rem}.section-tag{display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--primary);font-weight:700;margin-bottom:.4rem}.section-title{font-size:2rem;font-weight:800;letter-spacing:-.5px}.section-desc{font-size:1rem;color:var(--text-muted);max-width:600px;margin:.5rem auto 0}.academies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem}.academy-card{background:var(--bg-card);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2.2rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow-md);position:relative;overflow:hidden;transition:var(--transition)}.academy-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;transition:var(--transition)}.academy-card.yks::before{background:linear-gradient(90deg,#6366f1,#8b5cf6)}.academy-card.lgs::before{background:linear-gradient(90deg,#10b981,#06b6d4)}.academy-card.kpss::before{background:linear-gradient(90deg,#f59e0b,#ef4444)}.academy-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:rgba(99,102,241,.4)}.card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.2rem}.card-icon-wrap{width:58px;height:58px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:2rem;box-shadow:var(--shadow-sm)}.card-icon-wrap.yks{background:rgba(99,102,241,.15);color:#818cf8}.card-icon-wrap.lgs{background:rgba(16,185,129,.15);color:#34d399}.card-icon-wrap.kpss{background:rgba(245,158,11,.15);color:#fbbf24}.badge-tag{font-size:.75rem;font-weight:700;padding:.3rem .8rem;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}.badge-tag.yks{background:rgba(99,102,241,.18);color:#818cf8;border:1px solid rgba(99,102,241,.3)}.badge-tag.lgs{background:rgba(16,185,129,.18);color:#34d399;border:1px solid rgba(16,185,129,.3)}.badge-tag.kpss{background:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}.card-title{font-size:1.45rem;font-weight:800;margin-bottom:.6rem;color:var(--text-main)}.card-desc{font-size:.92rem;color:var(--text-muted);line-height:1.6;margin-bottom:1.4rem}.card-features{list-style:none;margin-bottom:1.8rem;display:flex;flex-direction:column;gap:.6rem}.card-features li{font-size:.88rem;color:var(--text-muted);display:flex;align-items:center;gap:.6rem}.card-features li span.icon{font-size:1rem}.card-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.4rem;border-radius:var(--radius-md);font-size:.95rem;font-weight:700;text-decoration:none;color:#fff;transition:var(--transition);cursor:pointer;border:none}.card-btn.yks{background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 4px 14px rgba(99,102,241,.3)}.card-btn.lgs{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px rgba(16,185,129,.3)}.card-btn.kpss{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 14px rgba(245,158,11,.3)}.card-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}.question-pool-summary-card{background:var(--bg-card);backdrop-filter:blur(14px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:2.2rem 2.4rem;margin-top:2.5rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.question-pool-summary-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6366f1 0,#10b981 50%,#f59e0b 100%)}.pool-summary-header{text-align:center;max-width:720px;margin:0 auto 2rem}.pool-badge{display:inline-block;padding:.35rem 1rem;border-radius:var(--radius-full);font-size:.8rem;font-weight:700;background:rgba(99,102,241,.12);color:var(--primary);border:1px solid rgba(99,102,241,.25);margin-bottom:.8rem}.pool-title{font-size:1.55rem;font-weight:800;color:var(--text-main);margin-bottom:.6rem;line-height:1.3}.pool-subtitle{font-size:.93rem;color:var(--text-muted);line-height:1.5}.pool-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.pool-stat-col{background:rgba(255,255,255,.03);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.3rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:var(--transition)}.pool-stat-col:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-sm)}.pool-stat-icon{font-size:1.9rem;margin-bottom:.4rem}.pool-stat-val{font-size:1.9rem;font-weight:900;letter-spacing:-.5px;line-height:1.2}.pool-stat-col.yks .pool-stat-val{color:#818cf8}.pool-stat-col.kpss .pool-stat-val{color:#fbbf24}.pool-stat-col.lgs .pool-stat-val{color:#34d399}.pool-stat-col.total .pool-stat-val{background:linear-gradient(135deg,#6366f1,#10b981);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.pool-stat-name{font-size:.96rem;font-weight:700;margin:.4rem 0 .25rem;color:var(--text-main)}.pool-stat-detail{font-size:.78rem;color:var(--text-muted);line-height:1.4}@media (max-width:900px){.pool-stats-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:550px){.question-pool-summary-card{padding:1.6rem 1.1rem}.pool-title{font-size:1.3rem}.pool-stats-grid{grid-template-columns:1fr;gap:.85rem}}.games-filter-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}.filter-chip{padding:.5rem 1.1rem;border-radius:var(--radius-full);background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-muted);font-size:.86rem;font-weight:600;cursor:pointer;transition:var(--transition)}.filter-chip.active,.filter-chip:hover{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px var(--primary-glow)}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem}.game-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;transition:var(--transition);position:relative}.game-card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-md)}.game-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.game-icon{font-size:2.2rem}.game-tag{font-size:.7rem;padding:.2rem .6rem;border-radius:var(--radius-full);background:rgba(99,102,241,.12);color:var(--primary);font-weight:700}.game-title{font-size:1.1rem;font-weight:700;margin-bottom:.4rem;color:var(--text-main)}.game-desc{font-size:.84rem;color:var(--text-muted);margin-bottom:1.2rem;line-height:1.5}.game-footer{display:flex;flex-direction:column;gap:.6rem;border-top:1px solid var(--border-color);padding-top:.85rem;margin-top:auto}.game-footer-top{display:flex;align-items:center;justify-content:space-between}.game-footer-label{font-size:.72rem;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.btn-game-modal-trigger{background:0 0;border:none;color:var(--primary);font-size:.75rem;font-weight:700;cursor:pointer;padding:0;transition:var(--transition)}.btn-game-modal-trigger:hover{text-decoration:underline;color:var(--primary-hover)}.game-btn-group{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}.btn-play-tag{display:inline-flex;align-items:center;justify-content:center;padding:.42rem .25rem;border-radius:var(--radius-sm);font-size:.74rem;font-weight:800;text-decoration:none;transition:var(--transition);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-play-tag.yks{background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.35)}.btn-play-tag.yks:hover{background:#6366f1;color:#fff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(99,102,241,.35)}.btn-play-tag.lgs{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.35)}.btn-play-tag.lgs:hover{background:#10b981;color:#fff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(16,185,129,.35)}.btn-play-tag.kpss{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.35)}.btn-play-tag.kpss:hover{background:#f59e0b;color:#fff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(245,158,11,.35)}.game-portal-choices{display:flex;flex-direction:column;gap:.75rem;margin-top:1.2rem}.game-modal-portal-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-card);text-decoration:none;color:var(--text-main);transition:var(--transition)}.game-modal-portal-item:hover{transform:translateX(4px);background:var(--bg-card-hover)}.game-modal-portal-item.yks:hover{border-color:#6366f1}.game-modal-portal-item.lgs:hover{border-color:#10b981}.game-modal-portal-item.kpss:hover{border-color:#f59e0b}.modal-item-left{display:flex;align-items:center;gap:.8rem}.modal-item-icon{font-size:1.6rem}.modal-item-title{font-weight:800;font-size:.98rem;display:block}.modal-item-sub{font-size:.8rem;color:var(--text-muted)}.modal-item-arrow{font-weight:800;font-size:1.1rem;color:var(--text-dim)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}.feature-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.8rem;text-align:center;transition:var(--transition)}.feature-box:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-md)}.feature-icon{font-size:2.4rem;margin-bottom:1rem;display:inline-block}.feature-title{font-size:1.15rem;font-weight:700;margin-bottom:.6rem}.feature-desc{font-size:.88rem;color:var(--text-muted);line-height:1.6}.guide-banner{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(14,165,233,.12));border:1px solid rgba(99,102,241,.25);border-radius:var(--radius-lg);padding:2.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-top:2rem}.guide-text h3{font-size:1.35rem;font-weight:800;margin-bottom:.4rem}.guide-text p{font-size:.92rem;color:var(--text-muted);max-width:650px}.guide-actions{display:flex;gap:.8rem;flex-wrap:wrap}.btn-secondary{padding:.75rem 1.4rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:700;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-main);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:var(--transition)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--primary);transform:translateY(-2px)}.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.75);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:1000;padding:1.5rem}.modal-overlay.active{display:flex}.modal-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);max-width:600px;width:100%;padding:2rem;box-shadow:var(--shadow-lg);position:relative;max-height:85vh;overflow-y:auto}.modal-close{position:absolute;top:1.2rem;right:1.2rem;background:0 0;border:none;color:var(--text-dim);font-size:1.5rem;cursor:pointer;line-height:1}.modal-close:hover{color:var(--text-main)}.modal-title{font-size:1.4rem;font-weight:800;margin-bottom:1rem}.modal-step{display:flex;gap:1rem;margin-bottom:1.2rem}.step-num{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}.step-content h4{font-size:1rem;font-weight:700;margin-bottom:.2rem}.step-content p{font-size:.86rem;color:var(--text-muted)}.footer{position:relative;z-index:1;background:var(--bg-glass);border-top:1px solid var(--border-color);margin-top:auto;padding:2.5rem 1.5rem;text-align:center}.footer-content{max-width:1300px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.footer-links a{color:var(--text-muted);text-decoration:none;font-size:.88rem;transition:var(--transition)}.footer-links a:hover{color:var(--primary)}.footer-copy{font-size:.82rem;color:var(--text-dim)}@media (max-width:992px){.hero-title{font-size:2.3rem}.hero-stats{grid-template-columns:repeat(2,1fr);gap:1rem}.academies-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.nav-search{max-width:280px}}@media (max-width:768px){.nav-search{display:none}.section-container{padding:2.2rem 1.2rem}.hero{padding:2.5rem 1.2rem 1.8rem}.hero-title{font-size:2rem}.games-filter-bar{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.6rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:1.5rem}.games-filter-bar::-webkit-scrollbar{display:none}.filter-chip{white-space:nowrap;flex-shrink:0;padding:.45rem .95rem;font-size:.82rem}.academies-grid{grid-template-columns:1fr;gap:1.4rem}.games-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}}@media (max-width:520px){.nav-container{padding:.75rem 1rem;gap:.5rem}.brand-name{font-size:1.15rem}.brand-sub{display:none}.brand-icon{width:36px;height:36px;font-size:1.2rem}.btn-icon{width:36px;height:36px;font-size:1rem}.btn-pwa{padding:.45rem .75rem;font-size:.78rem}.btn-pwa span{display:none}.hero{padding:1.8rem 1rem 1.2rem}.hero-badge{font-size:.74rem;padding:.35rem .75rem;margin-bottom:1rem}.hero-title{font-size:1.55rem;letter-spacing:-.5px;line-height:1.25}.hero-desc{font-size:.88rem;line-height:1.6;margin-bottom:1.4rem}.hero-stats{grid-template-columns:repeat(2,1fr);gap:.65rem}.stat-item{padding:.85rem .5rem}.stat-number{font-size:1.35rem}.stat-label{font-size:.7rem}.section-container{padding:1.8rem 1rem}.section-title{font-size:1.5rem}.section-desc{font-size:.86rem}.academy-card{padding:1.4rem 1.1rem}.card-icon-wrap{width:46px;height:46px;font-size:1.5rem}.card-title{font-size:1.2rem}.card-desc{font-size:.85rem;margin-bottom:.9rem}.card-features{gap:.4rem;margin-bottom:1.2rem}.card-features li{font-size:.8rem}.card-btn{padding:.75rem 1rem;font-size:.88rem}.games-grid{grid-template-columns:1fr;gap:1rem}.game-card{padding:1.15rem}.game-title{font-size:1.05rem}.game-desc{font-size:.82rem;margin-bottom:.9rem}.game-btn-group{grid-template-columns:repeat(2,1fr);gap:.35rem}.btn-play-tag{padding:.5rem .15rem;font-size:.72rem}.features-grid{grid-template-columns:1fr;gap:1rem}.feature-box{padding:1.3rem 1rem}.guide-banner{padding:1.4rem 1rem;flex-direction:column;text-align:center}.guide-actions{width:100%;justify-content:center}.modal-box{padding:1.3rem 1rem;margin:.8rem;max-height:90vh}.modal-title{font-size:1.2rem}.game-modal-portal-item{padding:.8rem .85rem}.modal-item-icon{font-size:1.35rem}.modal-item-title{font-size:.88rem}.modal-item-sub{font-size:.72rem}.footer{padding:2rem 1rem}.footer-links{gap:.85rem}}
/* ==========================================================================
   SSS (FAQ) & DESTEK FORMU STİLLERİ
   ========================================================================== */
.faq-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  align-items: flex-start;
  margin-top: 1rem;
}

.faq-col-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-main);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:hover, .faq-item.active {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  padding: 1.1rem 1.3rem;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 0.8rem;
}

.faq-arrow {
  font-size: 1.1rem;
  color: var(--text-dim);
  transition: transform 0.25s ease;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.faq-item.active .faq-answer {
  max-height: 320px;
  padding: 0 1.3rem 1.2rem 1.3rem;
}

/* DESTEK KARTI */
.support-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.support-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #0ea5e9, #10b981);
}

.support-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.support-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
}

.support-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.2rem;
}

.support-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.support-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.support-input, .support-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.92rem;
  outline: none;
  font-family: inherit;
  transition: var(--transition);
}

[data-theme="light"] .support-input, 
[data-theme="light"] .support-textarea {
  background: #ffffff;
}

.support-input:focus, .support-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.support-security-badge {
  font-size: 0.76rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0;
}

.btn-support-submit {
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--primary-glow);
  transition: var(--transition);
}

.btn-support-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--primary-glow);
}

.btn-support-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.support-alert {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
}

.support-alert.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.support-alert.danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

@media (max-width: 900px) {
  .faq-support-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}





/* ==========================================================================

   EXTENDED MEGA FOOTER (GENİŞLETİLMİŞ VE UZATILMIŞ ALT MENÜ) STİLLERİ

   ========================================================================== */

.footer {

  position: relative;

  z-index: 10;

  width: 100% !important;

  max-width: 100% !important;

  background: var(--bg-card);

  border-top: 1px solid var(--border-color);

  margin-top: 5rem;

  padding: 4.5rem 2rem 2.2rem;

  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.04);

}



[data-theme="dark"] .footer {

  background: #0b0f19;

  border-top: 1px solid rgba(255, 255, 255, 0.07);

  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);

}



.footer-container {

  max-width: 1320px;

  margin: 0 auto;

  width: 100%;

}



.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1.2fr 1.2fr 1.3fr;

  gap: 3.5rem;

  margin-bottom: 3.5rem;

  text-align: left;

}



.footer-col-brand {

  padding-right: 1.2rem;

}



.footer-brand {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  margin-bottom: 1.2rem;

}



.footer-brand-logo {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  object-fit: contain;

  box-shadow: var(--shadow-sm);

}



.footer-brand-name {

  font-size: 1.45rem;

  font-weight: 800;

  color: var(--text-main);

  letter-spacing: -0.5px;

}



.footer-brand-desc {

  font-size: 0.92rem;

  line-height: 1.65;

  color: var(--text-muted);

  margin-bottom: 1.5rem;

}



.footer-trust-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 0.6rem;

}



.f-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  padding: 0.38rem 0.8rem;

  border-radius: 20px;

  font-size: 0.78rem;

  font-weight: 700;

  background: rgba(99, 102, 241, 0.08);

  border: 1px solid rgba(99, 102, 241, 0.18);

  color: var(--primary);

}



.footer-col-title {

  font-size: 1.08rem;

  font-weight: 800;

  color: var(--text-main);

  margin-bottom: 1.3rem;

  letter-spacing: -0.2px;

  position: relative;

  padding-bottom: 0.5rem;

}



.footer-col-title::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 32px;

  height: 3px;

  border-radius: 2px;

  background: var(--primary);

}



.footer-menu-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.footer-menu-list li a {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  color: var(--text-muted);

  text-decoration: none;

  font-size: 0.9rem;

  font-weight: 500;

  transition: all 0.2s ease;

}



.footer-menu-list li a:hover {

  color: var(--primary);

  transform: translateX(4px);

}



.footer-menu-list li a .f-icon {

  font-size: 1rem;

  transition: transform 0.2s ease;

}



.footer-menu-list li a:hover .f-icon {

  transform: scale(1.15);

}



/* HIZLI BRANŞ & DERS ERİŞİM ŞERİDİ */

.footer-quick-bar {

  display: flex;

  align-items: center;

  gap: 1.2rem;

  padding: 1.4rem 1.6rem;

  background: rgba(99, 102, 241, 0.04);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  margin-bottom: 2.5rem;

  flex-wrap: wrap;

}



.quick-bar-label {

  font-size: 0.88rem;

  font-weight: 800;

  color: var(--text-main);

  white-space: nowrap;

}



.quick-bar-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.55rem;

  align-items: center;

}



.q-tag {

  padding: 0.35rem 0.75rem;

  border-radius: 8px;

  background: var(--bg-card);

  border: 1px solid var(--border-color);

  color: var(--text-muted);

  text-decoration: none;

  font-size: 0.82rem;

  font-weight: 600;

  transition: all 0.2s ease;

}



.q-tag:hover {

  background: var(--primary);

  color: #fff;

  border-color: var(--primary);

  transform: translateY(-2px);

}



.q-tag-highlight {

  background: rgba(14, 165, 233, 0.1);

  border-color: rgba(14, 165, 233, 0.3);

  color: #0ea5e9;

  font-weight: 700;

}



.q-tag-highlight:hover {

  background: #0ea5e9;

  color: #fff;

  border-color: #0ea5e9;

}



/* EN ALT BİLGİ & DURUM */

.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 1.2rem;

  padding-top: 1.8rem;

  border-top: 1px solid var(--border-color);

}



.footer-copy-text {

  font-size: 0.86rem;

  color: var(--text-dim);

  line-height: 1.5;

}



.footer-copy-text strong {

  color: var(--text-main);

}



.footer-live-status {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem 0.9rem;

  border-radius: 20px;

  background: rgba(16, 185, 129, 0.08);

  border: 1px solid rgba(16, 185, 129, 0.2);

  font-size: 0.78rem;

  font-weight: 700;

  color: #10b981;

}



.status-indicator {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #10b981;

  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);

  animation: pulseStatus 2s infinite ease-in-out;

}



@keyframes pulseStatus {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.4; transform: scale(0.85); }

}



/* RESPONSIVE */

@media (max-width: 1024px) {

  .footer-grid {

    grid-template-columns: 1fr 1fr;

    gap: 2.5rem;

  }

  .footer-col-brand {

    grid-column: 1 / -1;

    padding-right: 0;

  }

}



@media (max-width: 640px) {

  .footer {

    padding: 3.5rem 1.2rem 1.8rem !important;

    margin-top: 3.5rem;

  }

  .footer-grid {

    grid-template-columns: 1fr;

    gap: 2rem;

  }

  .footer-quick-bar {

    flex-direction: column;

    align-items: flex-start;

    padding: 1.2rem;

  }

  .footer-bottom {

    flex-direction: column;

    align-items: flex-start;

    gap: 1rem;

  }

}


/* ==========================================================================
   KPSS ORTAOGRETIM (SON 30 GUN KAMP) TEMA VE KART STILLERI
   ========================================================================== */
.academy-card.kpss-orta::before {
  background: linear-gradient(90deg, #e11d48, #f43f5e);
}
.academy-card.kpss-orta:hover {
  border-color: rgba(225, 29, 72, 0.45);
  box-shadow: 0 12px 30px rgba(225, 29, 72, 0.2);
}
.card-icon-wrap.kpss-orta {
  background: rgba(225, 29, 72, 0.15);
  color: #fb7185;
}
.badge-tag.kpss-orta {
  background: rgba(225, 29, 72, 0.18);
  color: #fb7185;
  border: 1px solid rgba(225, 29, 72, 0.35);
  font-weight: 800;
  letter-spacing: 0.5px;
}
.card-btn.kpss-orta {
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}
.card-btn.kpss-orta:hover {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.5);
}
.btn-play-tag.kpss-orta {
  background: rgba(225, 29, 72, 0.12);
  color: #fb7185;
  border: 1px solid rgba(225, 29, 72, 0.35);
}
.btn-play-tag.kpss-orta:hover {
  background: #e11d48;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.35);
}
.game-modal-portal-item.kpss-orta:hover {
  border-color: #e11d48;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.2);
}
.game-modal-portal-item.kpss-orta .modal-item-icon {
  color: #fb7185;
}

  ========================================================================== */
.pwa-floating-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, calc(100% - 32px));
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  padding: 12px 16px;
  z-index: 999999;
  animation: pwaBannerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  color: #fff;
  font-family: inherit;
  box-sizing: border-box;
}

@keyframes pwaBannerSlideUp {
  from { transform: translate(-50%, 120%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.pwa-floating-banner.banner-closing {
  animation: pwaBannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none !important;
}

@keyframes pwaBannerSlideDown {
  from { transform: translate(-50%, 0); opacity: 1; }
  to { transform: translate(-50%, 120%); opacity: 0; }
}

.pwa-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-banner-icon-box {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwa-banner-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pwa-banner-info {
  flex: 1;
  min-width: 0;
}

.pwa-banner-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.pwa-banner-sub {
  margin: 3px 0 0 0;
  font-size: 0.78rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.pwa-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-pwa-primary {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn-pwa-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.55);
}

.btn-pwa-dismiss {
  background: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-pwa-dismiss:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

@media (max-width: 768px) {
  .pwa-floating-banner {
    bottom: 74px; /* Mobil alt menü (mobile-bottom-nav) yüksekliğini koru */
    width: calc(100% - 24px);
    padding: 10px 12px;
  }
  .pwa-banner-icon-box {
    width: 38px;
    height: 38px;
  }
  .pwa-banner-title {
    font-size: 0.85rem;
  }
  .pwa-banner-sub {
    font-size: 0.72rem;
  }
  .btn-pwa-primary {
    padding: 7px 11px;
    font-size: 0.78rem;
  }
  .btn-pwa-dismiss {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   6 BÜYÜK EKOSİSTEM PORTALI & QUICK STRIP STİLLERİ
   ========================================================================== */

/* Hızlı Portal Gezinim Şeridi */
.portal-quick-strip {
  width: 100%;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 16px;
  position: sticky;
  top: 68px;
  z-index: 45;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .portal-quick-strip {
  background: rgba(255, 255, 255, 0.88);
}

.quick-strip-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.quick-strip-inner::-webkit-scrollbar {
  display: none;
}

.quick-strip-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-dim);
  white-space: nowrap;
}

.quick-portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  white-space: nowrap;
  transition: var(--transition);
}

.quick-portal-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quick-portal-chip.yks:hover { border-color: #6366f1; color: #818cf8; background: rgba(99, 102, 241, 0.1); }
.quick-portal-chip.lgs:hover { border-color: #10b981; color: #34d399; background: rgba(16, 185, 129, 0.1); }
.quick-portal-chip.kpss:hover { border-color: #f59e0b; color: #fbbf24; background: rgba(245, 158, 11, 0.1); }
.quick-portal-chip.siniflar:hover { border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.1); }
.quick-portal-chip.oyunlar:hover { border-color: #ec4899; color: #f472b6; background: rgba(236, 72, 153, 0.1); }
.quick-portal-chip.cocuk:hover { border-color: #ff416c; color: #ff6b8b; background: rgba(255, 65, 108, 0.1); }

/* Yeni Portal Kartları: Sınıflar, Oyunlar, Çocuk */
.academy-card.siniflar::before {
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
}
.academy-card.siniflar:hover {
  border-color: rgba(139, 92, 246, 0.45);
}
.card-icon-wrap.siniflar {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}
.badge-tag.siniflar {
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.card-btn.siniflar {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}
.card-btn.siniflar:hover {
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.35);
}

.academy-card.oyunlar::before {
  background: linear-gradient(90deg, #ec4899, #f59e0b);
}
.academy-card.oyunlar:hover {
  border-color: rgba(236, 72, 153, 0.45);
}
.card-icon-wrap.oyunlar {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}
.badge-tag.oyunlar {
  background: rgba(236, 72, 153, 0.18);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.3);
}
.card-btn.oyunlar {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.card-btn.oyunlar:hover {
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
}

.academy-card.cocuk::before {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
}
.academy-card.cocuk:hover {
  border-color: rgba(255, 65, 108, 0.45);
}
.card-icon-wrap.cocuk {
  background: rgba(255, 65, 108, 0.15);
  color: #ff6b8b;
}
.badge-tag.cocuk {
  background: rgba(255, 65, 108, 0.18);
  color: #ff6b8b;
  border: 1px solid rgba(255, 65, 108, 0.3);
}
.card-btn.cocuk {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
}
.card-btn.cocuk:hover {
  box-shadow: 0 6px 20px rgba(255, 65, 108, 0.35);
}

/* KPSS Alt Düğmeler */
.card-sub-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.card-sub-btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  text-decoration: none;
  transition: var(--transition);
}
.card-sub-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Modal Portal Seçenekleri için Ek Renkler */
.game-modal-portal-item.siniflar:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.2);
}
.game-modal-portal-item.oyunlar:hover {
  border-color: #8b5cf6;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
}
.game-modal-portal-item.cocuk:hover {
  border-color: #ff416c;
  box-shadow: 0 4px 14px rgba(255, 65, 108, 0.2);
}





/* ==========================================================================
   TATARGAMES MODERN KATALOG & VITRIN — TATARGAMES ÖZEL TASARIM MİMARİSİ
   ========================================================================== */
:root, [data-theme="dark"], [data-theme="light"] {
  --primary: #2b7101;
  --primary-hover: #1c4801;
  --primary-glow: rgba(245, 163, 0, 0.35);
  --secondary: #004db2;
  --accent: #f5a300;
  --bg-main: #69b5ea;
  --bg-card: #fffaf0;
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 251, 234, 0.96);
  --border-color: #e4bd78;
  --text-main: #16223a;
  --text-muted: #4b3f26;
  --text-dim: #786642;
  --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

body {
  background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.24) 0 6rem, transparent 6.2rem), linear-gradient(145deg, #7cc2f2 0%, #58a4e1 55%, #3f8fd2 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-main) !important;
  font-family: var(--font-family) !important;
}

.bg-glow-container {
  display: none !important;
}

.ua-promo-pill {
  background: #fffbea !important;
  border: 2px solid #f5a300 !important;
  color: #b45309 !important;
  box-shadow: 0 4px 12px rgba(245, 163, 0, 0.2) !important;
}

/* 1. TATARGAMES ORMAN YEŞİLİ / KRALİYET ÜST HEADER */
.kral-top-header {
  position: relative !important;
  background: linear-gradient(180deg, #1b8a24 0%, #0d5e12 62%, #073d0b 100%) !important;
  border-bottom: 4px solid #f3932b !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
  padding: 0.6rem 0 !important;
  overflow: hidden;
}

.kral-header-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(255, 229, 163, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 14px, transparent 14px, transparent 28px);
  pointer-events: none;
}

.kral-header-inner {
  position: relative;
  z-index: 2;
  max-width: 1360px !important;
  padding: 0.4rem 1.25rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kral-mascots-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 229, 163, 0.65);
  border-radius: 18px;
  padding: 6px 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25), inset 0 2px 0 rgba(255,255,255,0.35);
  transition: transform 0.2s ease;
}

.kral-mascots-box:hover {
  transform: scale(1.06) rotate(-2deg);
}

.kral-mascot-avatars {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 2rem;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35));
}

.kral-mascot-tag {
  font-size: 0.68rem;
  font-weight: 900;
  color: #fffbea;
  background: #d92336;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.kral-logo-center {
  text-align: center;
  flex: 1;
}

.kral-logo-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  text-decoration: none;
}

.kral-main-logo-img {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  border: 3px solid #ffd271 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35) !important;
}

.kral-logo-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kral-3d-title {
  font-size: clamp(1.7rem, 3.2vw, 2.65rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 0%, #ffe5a3 35%, #fcba46 75%, #f3932b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #3d2200) drop-shadow(0 5px 8px rgba(0,0,0,0.45));
}

.kral-3d-sub {
  font-size: 0.82rem;
  font-weight: 900;
  color: #ffe5a3;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
}

.kral-tagline {
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #e2efb3;
  text-shadow: 0 2px 3px rgba(0,0,0,0.45);
}

.kral-auth-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.kral-flag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 6px 11px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.82rem;
}

.kral-3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.86rem;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.4);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.kral-btn-blue {
  background: linear-gradient(180deg, #38bdf8 0%, #3b83f7 50%, #004db2 100%);
  box-shadow: 0 4px 0 #002e6b, 0 6px 12px rgba(0,0,0,0.28);
}

.kral-btn-green {
  background: linear-gradient(180deg, #85c247 0%, #2b8c12 100%);
  box-shadow: 0 4px 0 #1c4801, 0 6px 12px rgba(0,0,0,0.28);
}

.kral-btn-yellow {
  background: linear-gradient(180deg, #ffe5a3 0%, #fcba46 55%, #f3932b 100%);
  color: #3d2200;
  text-shadow: none;
  box-shadow: 0 4px 0 #9c5600, 0 6px 12px rgba(0,0,0,0.28);
}

.kral-btn-purple {
  background: linear-gradient(180deg, #c084fc 0%, #9333ea 100%);
  box-shadow: 0 4px 0 #581c87, 0 6px 12px rgba(0,0,0,0.28);
}

.kral-3d-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* 2. TATARGAMES ALTIN SARISI İKONLU KATEGORİ VE ARAMA BARI */
.kral-category-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 95 !important;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd271 42%, #fcba46 100%) !important;
  border-top: 2px solid #ffffff !important;
  border-bottom: 4px solid #d9820f !important;
  box-shadow: 0 8px 20px rgba(54, 33, 0, 0.24) !important;
  padding: 6px 14px !important;
}

.kral-cat-bar-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kral-cat-items {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

.kral-cat-items::-webkit-scrollbar {
  display: none;
}

.kral-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 6px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: #3d3400;
  font-weight: 900;
  font-size: 0.78rem;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.kral-cat-btn .kral-cat-icon {
  font-size: 1.65rem;
  line-height: 1.1;
  margin-bottom: 3px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
  transition: transform 0.18s ease;
}

.kral-cat-btn:hover {
  background: rgba(255, 255, 255, 0.55);
  color: #1c4801;
}

.kral-cat-btn:hover .kral-cat-icon {
  transform: scale(1.18) translateY(-2px);
}

.kral-cat-btn.active {
  background: linear-gradient(180deg, #85c247 0%, #2b8c12 100%);
  color: #ffffff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), 0 3px 6px rgba(0,0,0,0.2);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

.kral-cat-divider {
  width: 2px;
  height: 38px;
  background: linear-gradient(180deg, transparent, rgba(140, 107, 31, 0.45), transparent);
  flex-shrink: 0;
}

.kral-cat-search-cluster {
  flex: 0 0 310px;
  max-width: 340px;
}

.kral-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border: 2px solid #d9820f;
  border-radius: 999px;
  padding: 3px 4px 3px 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}

.kral-search-box input {
  border: none !important;
  background: transparent !important;
  color: #16223a !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 5px 6px !important;
  width: 100%;
  outline: none !important;
  box-shadow: none !important;
}

.kral-search-submit {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #38bdf8, #004db2);
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 3. TATARGAMES "SON OYNANANLAR / HIZLI BAŞLAT" ŞERİDİ */
.kral-recent-slot {
  max-width: 1340px;
  margin: 14px auto 0;
  padding: 0 1.25rem;
}

.kral-recent-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eaf3c8;
  border: 3px solid #ffedbd;
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 8px 20px rgba(8, 50, 85, 0.22);
}

.kral-recent-label {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #ef4455, #d92336);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 11px;
  white-space: nowrap;
  box-shadow: 0 3px 0 #8f1d2a;
}

.kral-recent-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  flex: 1;
}

.kral-recent-rail::-webkit-scrollbar {
  display: none;
}

.kral-mini-tile {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: #ffedbd;
  border: 2px solid #e4bd78;
  border-radius: 12px;
  color: #16223a;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 3px 6px rgba(54,33,0,0.14);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.kral-mini-tile:hover {
  transform: translateY(-2px) scale(1.03);
  border-color: #2b8c12;
  background: #fffaf0;
}

.k-tile-ico {
  font-size: 1.25rem;
}

.k-tile-hot {
  font-size: 0.65rem;
  font-weight: 900;
  background: #2b8c12;
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
}

/* 4. TATARGAMES ÇERÇEVELİ RENKLİ KUTU PANELLERİ (YEŞİL, MAVİ, KIRMIZI, ALTIN) */
.kral-hero-box,
.kral-section-panel {
  max-width: 1320px !important;
  margin: 1.4rem auto !important;
  padding: 0 !important;
  background: #eaf3c8 !important;
  border: 3px solid #ffedbd !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 32px rgba(8, 50, 85, 0.28), 0 4px 10px rgba(103, 65, 12, 0.18) !important;
  overflow: hidden;
}

.kral-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.78rem 1.4rem;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  border-bottom: 3px solid rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}

.kral-header-green {
  background: linear-gradient(180deg, #78b13f 0%, #2b7101 100%);
}

.kral-header-blue {
  background: linear-gradient(180deg, #3b83f7 0%, #004db2 100%);
}

.kral-header-red {
  background: linear-gradient(180deg, #ff5c5c 0%, #d92336 100%);
}

.kral-header-gold {
  background: linear-gradient(180deg, #fcba46 0%, #e07b00 100%);
}

.kral-ph-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.kral-ph-icon {
  font-size: 1.45rem;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.25));
}

.kral-ph-title {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.kral-ph-badge {
  font-size: 0.76rem;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 4px 12px;
  border-radius: 999px;
  color: #fffbea;
}

.kral-hero-body {
  padding: 1.8rem 1.5rem 2rem;
}

.kral-section-panel > .section-header {
  padding: 1.4rem 1.5rem 0.4rem;
  margin-bottom: 1.2rem !important;
}

.kral-section-panel > .academies-grid,
.kral-section-panel > .games-filter-bar,
.kral-section-panel > .games-grid,
.kral-section-panel > .features-grid,
.kral-section-panel > .faq-support-grid {
  padding: 0 1.4rem 1.6rem;
}

.kral-section-panel > .question-pool-summary-card,
.kral-section-panel > .guide-banner {
  margin: 0.5rem 1.4rem 1.6rem !important;
}

/* 5. TATARGAMES ÇİFT KATMANLI KREM/ALTIN KARTLAR  */
.academy-card,
.game-card,
.feature-box,
.stat-item,
.faq-item,
.support-card {
  background: #fffaf0 !important;
  border: 3px solid #e4bd78 !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 0 0 3px #ffedbd,
    0 6px 14px rgba(54, 33, 0, 0.14) !important;
  color: var(--text-main) !important;
}

.academy-card:hover,
.game-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  border-color: #2b8c12 !important;
  box-shadow:
    inset 0 0 0 3px #ffd271,
    0 12px 24px rgba(43, 113, 1, 0.25) !important;
}

/* TATARGAMES Varyant #2 (Modern Katalog): İki Kolonlu Geniş Yatay Katalog Kartları */

@media (min-width: 900px) {
  .academies-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  .games-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.1rem !important;
  }
  .card-icon-wrap {
    width: 68px !important;
    height: 68px !important;
    font-size: 2.35rem !important;
    border: 2px solid #e4bd78 !important;
    background: #ffedbd !important;
  }
}


/* TATARGAMES Varyant #4 (Mega Kompakt): Yoğun 4-5 Kolonlu Arcade Kutu Duvarı */


/* 6. TATARGAMES NOSTALJİ KÖŞESİ STİLİ SORU HAVUZU KUTUSU (#082f5e + #ffedbd) */
.question-pool-summary-card {
  background: radial-gradient(circle at 50% 18%, rgba(25, 78, 132, 0.78), transparent 48%), linear-gradient(180deg, #082f5e, #031f42 68%) !important;
  border: 4px solid #ffedbd !important;
  border-radius: 22px !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(3, 31, 66, 0.45) !important;
}

.question-pool-summary-card .pool-title {
  color: #ffd271 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}

.question-pool-summary-card .pool-subtitle {
  color: #dbeafe !important;
}

.question-pool-summary-card .pool-badge {
  background: #f5a300 !important;
  color: #221a00 !important;
  font-weight: 900 !important;
  border: 2px solid #fffbea !important;
}

.question-pool-summary-card .pool-stat-col {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 2px solid rgba(255, 237, 189, 0.45) !important;
}

.question-pool-summary-card .pool-stat-name {
  color: #fffbea !important;
}

.question-pool-summary-card .pool-stat-detail {
  color: #cbd5e1 !important;
}

/* 7. TATARGAMES PARLAK 3B OYNA VE GİRİŞ BUTONLARI */
.card-btn {
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 2px solid rgba(255,255,255,0.55) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3) !important;
}

.card-btn.yks {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%) !important;
  box-shadow: 0 5px 0 #1e3a8a, 0 8px 16px rgba(37,99,235,0.35) !important;
}

.card-btn.lgs {
  background: linear-gradient(180deg, #85c247 0%, #2b8c12 55%, #2a7201 100%) !important;
  box-shadow: 0 5px 0 #1c4801, 0 8px 16px rgba(43,140,18,0.35) !important;
}

.card-btn.kpss {
  background: linear-gradient(180deg, #fec359 0%, #f5a300 55%, #d97706 100%) !important;
  box-shadow: 0 5px 0 #92400e, 0 8px 16px rgba(245,158,11,0.35) !important;
}

.card-btn.siniflar {
  background: linear-gradient(180deg, #c084fc 0%, #9333ea 55%, #7e22ce 100%) !important;
  box-shadow: 0 5px 0 #4c1d95, 0 8px 16px rgba(147,51,234,0.35) !important;
}

.card-btn.oyunlar {
  background: linear-gradient(180deg, #ff7373 0%, #e43f4c 55%, #d92336 100%) !important;
  box-shadow: 0 5px 0 #8f1d2a, 0 8px 16px rgba(217,35,54,0.35) !important;
}

.card-btn.cocuk {
  background: linear-gradient(180deg, #38bdf8 0%, #0871e8 55%, #004db2 100%) !important;
  box-shadow: 0 5px 0 #082844, 0 8px 16px rgba(8,113,232,0.35) !important;
}

.filter-chip {
  background: #ffedbd !important;
  border: 2px solid #e4bd78 !important;
  color: #16223a !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 0 rgba(140, 107, 31, 0.35);
}

.filter-chip.active,
.filter-chip:hover {
  background: linear-gradient(180deg, #85c247 0%, #2b8c12 100%) !important;
  color: #ffffff !important;
  border-color: #1c4801 !important;
  box-shadow: 0 3px 0 #1c4801 !important;
}

.btn-play-tag {
  font-weight: 900 !important;
  border-width: 2px !important;
  border-radius: 10px !important;
}

.hero-title .gradient-text {
  background: linear-gradient(180deg, #d92336, #f3932b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.footer {
  background: #0d5e12 !important;
  border-top: 5px solid #ffd271 !important;
  color: #fffbea !important;
}

.footer .footer-col-title,
.footer .footer-brand-name,
.footer .quick-bar-label,
.footer .footer-copy-text strong {
  color: #ffd271 !important;
}

.footer .footer-brand-desc,
.footer .footer-menu-list li a,
.footer .footer-copy-text {
  color: #e2efb3 !important;
}

@media (max-width: 960px) {
  .kral-header-inner {
    flex-direction: column;
    text-align: center;
  }
  .kral-mascots-box {
    display: none;
  }
  .kral-cat-bar-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .kral-cat-search-cluster {
    flex: 1 1 auto;
    max-width: 100%;
    display: block !important;
  }
  .kral-recent-panel {
    flex-direction: column;
    align-items: flex-start;
  }
  .kral-recent-rail {
    width: 100%;
  }
}


/* ==========================================================================
   TATARGAMES — OYUN ARENASI, KART ROZETLERİ VE ETKİLEŞİMLİ OYUN MOTORU STİLLERİ
   ========================================================================== */

/* Gece Modu (Kullanıcı Güneş/Ay butonuna bastığında Kraliyet Gece Görünümü) */
html[data-theme="dark"] body {
  background: radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.14) 0 8rem, transparent 8.2rem), linear-gradient(145deg, #09192f 0%, #0f294a 55%, #071324 100%) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .kral-hero-box,
html[data-theme="dark"] .kral-section-panel,
html[data-theme="dark"] .kral-recent-panel {
  background: #132a4a !important;
  border-color: #d9820f !important;
}

html[data-theme="dark"] .academy-card,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .feature-box,
html[data-theme="dark"] .stat-item,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .support-card {
  background: #1b365d !important;
  border-color: #d9820f !important;
  box-shadow: inset 0 0 0 2px rgba(255, 210, 113, 0.25), 0 8px 20px rgba(0, 0, 0, 0.45) !important;
  color: #fffbea !important;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .game-title,
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .stat-number,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .faq-question,
html[data-theme="dark"] .faq-col-title {
  color: #fffbea !important;
}

html[data-theme="dark"] .card-desc,
html[data-theme="dark"] .game-desc,
html[data-theme="dark"] .feature-desc,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .section-desc,
html[data-theme="dark"] .hero-desc,
html[data-theme="dark"] .card-features li,
html[data-theme="dark"] .faq-answer {
  color: #cbd5e1 !important;
}

/* Oyun Kartı Gelişmiş Üst/Alt Alanları */
.tg-game-thumb {
  position: relative;
  height: 128px;
  border-radius: 14px;
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #e4bd78;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.18);
  transition: transform 0.25s ease;
}

.game-card:hover .tg-game-thumb {
  transform: scale(1.02);
}

.tg-thumb-emoji {
  font-size: 4.1rem;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.game-card:hover .tg-thumb-emoji {
  transform: scale(1.18) rotate(-5deg);
}

.tg-thumb-badge-left {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(15, 23, 42, 0.82);
  color: #ffd271;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 113, 0.5);
  backdrop-filter: blur(4px);
}

.tg-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.65);
  background: rgba(15, 23, 42, 0.65);
  color: #fff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
  z-index: 3;
}

.tg-fav-btn:hover {
  transform: scale(1.15);
  background: rgba(217, 35, 54, 0.9);
}

.tg-fav-btn.is-fav {
  background: #d92336;
  border-color: #ffd271;
}

.tg-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 0.65rem;
  font-size: 0.76rem;
  font-weight: 800;
}

.tg-rating-pill {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 2px 8px;
  border-radius: 8px;
}

.tg-highscore-pill {
  color: #1c4801;
  background: #dcfce7;
  border: 1px solid #4ade80;
  padding: 2px 8px;
  border-radius: 8px;
}

.tg-play-btn-3d {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.72rem 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #85c247 0%, #2b8c12 55%, #1c4801 100%);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 0 #143601, 0 6px 14px rgba(43, 140, 18, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tg-play-btn-3d:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.tg-play-btn-3d:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #143601;
}

/* ==========================================================================
   TATARGAMES CANLI OYUN SAHNESİ (ARCADE ARENA MODAL)
   ========================================================================== */
.tg-arena-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 19, 36, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.tg-arena-overlay.active {
  display: flex;
}

.tg-arena-cabinet {
  width: 100%;
  max-width: 980px;
  max-height: 95vh;
  background: #eaf3c8;
  border: 4px solid #ffd271;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 4px #2b7101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tgCabinetPop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tgCabinetPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.tg-arena-header {
  background: linear-gradient(180deg, #1b8a24 0%, #0d5e12 65%, #073d0b 100%);
  border-bottom: 4px solid #f3932b;
  padding: 0.65rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  color: #ffffff;
}

.tg-arena-title-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tg-arena-icon {
  font-size: 1.9rem;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

.tg-arena-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fffbea;
  text-shadow: 0 2px 0 rgba(0,0,0,0.45);
  margin: 0;
  line-height: 1.15;
}

.tg-arena-cat {
  font-size: 0.74rem;
  color: #ffe5a3;
  font-weight: 800;
}

.tg-arena-hud {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.tg-hud-pill {
  background: rgba(0, 0, 0, 0.38);
  border: 2px solid #ffd271;
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 0.86rem;
  font-weight: 900;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tg-hud-pill b {
  color: #ffd271;
  font-size: 1rem;
}

.tg-arena-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tg-arena-btn {
  padding: 7px 12px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.45);
  font-family: inherit;
  font-weight: 900;
  font-size: 0.82rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tg-arena-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.tg-arena-btn.btn-restart {
  background: linear-gradient(180deg, #38bdf8, #004db2);
  box-shadow: 0 3px 0 #002e6b;
}

.tg-arena-btn.btn-sound {
  background: linear-gradient(180deg, #ffe5a3, #f3932b);
  color: #3d2200;
  box-shadow: 0 3px 0 #9c5600;
}

.tg-arena-btn.btn-fs {
  background: linear-gradient(180deg, #c084fc, #7e22ce);
  box-shadow: 0 3px 0 #4c1d95;
}

.tg-arena-btn.btn-close {
  background: linear-gradient(180deg, #ff5c5c, #d92336);
  box-shadow: 0 3px 0 #7f1d1d;
}

.tg-arena-stage-wrap {
  position: relative;
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0f172a 75%, #020617 100%);
  margin: 0.75rem 0.9rem 0.4rem;
  border: 3px solid #e4bd78;
  border-radius: 16px;
  min-height: 450px;
  max-height: calc(95vh - 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.65);
  color: #f8fafc;
  user-select: none;
}

.tg-arena-footer {
  padding: 0.45rem 1.1rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  font-weight: 800;
  color: #16223a;
}

html[data-theme="dark"] .tg-arena-footer {
  color: #fffbea;
}

.tg-touch-dpad {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tg-dpad-btn {
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 2px solid #d9820f;
  background: linear-gradient(180deg, #fff3c4, #fcba46);
  color: #3d2200;
  font-weight: 900;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #9c5600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: manipulation;
}

.tg-dpad-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #9c5600;
}

/* Oyun İçi Bitiş / Skor Katmanı */
.tg-gameover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  z-index: 20;
  animation: tgCabinetPop 0.25s ease;
}

.tg-go-trophy {
  font-size: 4rem;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 4px 12px rgba(245, 163, 0, 0.5));
}

.tg-go-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ffd271;
  margin-bottom: 0.3rem;
}

.tg-go-sub {
  font-size: 0.95rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
}

.tg-go-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tg-go-stat-box {
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid #ffd271;
  border-radius: 14px;
  padding: 0.65rem 1.25rem;
  min-width: 120px;
}

.tg-go-stat-lbl {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #94a3b8;
  font-weight: 800;
  display: block;
}

.tg-go-stat-val {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
}

.tg-go-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 680px) {
  .tg-arena-overlay {
    padding: 0.35rem;
  }
  .tg-arena-stage-wrap {
    min-height: 360px;
    margin: 0.4rem;
    padding: 8px;
  }
  .tg-arena-title {
    font-size: 1rem;
  }
}



/* ==========================================================================
   MOBİL & TABLET TAM UYUMLULUK, ERGONOMİK KONTROLLER VE KVKK BANNER STİLLERİ
   ========================================================================== */

/* Tüm oyun sahnesi ve tuvallerde dokunmatik kaydırma/yakınlaştırma kilidi */
.tg-arena-stage-wrap,
.tg-arena-stage-wrap canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

.tg-arena-stage-wrap canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Ergonomik Akıllı Kontrol Paneli (Oyun Türüne Göre Dinamik Büyüyen Butonlar) */
.tg-arena-footer {
  padding: 0.55rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 248, 220, 0.75);
  border-top: 2px solid #e4bd78;
}

html[data-theme="dark"] .tg-arena-footer {
  background: rgba(15, 23, 42, 0.85);
  border-top-color: #d9820f;
}

.tg-ctrl-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 800;
  color: #3d3400;
  gap: 8px;
  flex-wrap: wrap;
}

html[data-theme="dark"] .tg-ctrl-hint-row {
  color: #fde68a;
}

.tg-touch-dpad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 620px;
}

.tg-dpad-btn {
  flex: 1;
  min-width: 56px;
  height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  border: 2px solid #d9820f;
  background: linear-gradient(180deg, #fffbeb 0%, #ffd271 45%, #f59e0b 100%);
  color: #3d2200;
  font-family: inherit;
  font-weight: 900;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 0 #9c5600, 0 6px 12px rgba(0, 0, 0, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.tg-dpad-btn.btn-action-primary {
  background: linear-gradient(180deg, #85c247 0%, #2b8c12 55%, #1c4801 100%);
  color: #ffffff;
  border-color: #dcfce7;
  box-shadow: 0 4px 0 #143601, 0 6px 12px rgba(43, 140, 18, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  flex: 1.5;
}

.tg-dpad-btn:active {
  transform: translateY(3px) scale(0.98);
  box-shadow: 0 1px 0 #9c5600;
}

/* Mobil ve Tablet Tam Ekran Oyun Arenası Optimizasyonu */
@media (max-width: 960px) {
  body {
    padding-bottom: 68px; /* Mobil alt bar için boşluk */
  }

  .tg-arena-overlay {
    padding: 0 !important;
  }

  .tg-arena-cabinet {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-shadow: none !important;
  }

  .tg-arena-header {
    padding: 0.45rem 0.65rem !important;
    gap: 0.4rem !important;
  }

  .tg-arena-icon {
    font-size: 1.45rem !important;
  }

  .tg-arena-title {
    font-size: 0.98rem !important;
  }

  .tg-arena-cat {
    display: none;
  }

  .tg-hud-pill {
    padding: 3px 8px !important;
    font-size: 0.78rem !important;
  }

  .tg-arena-btn {
    padding: 5px 8px !important;
    font-size: 0.75rem !important;
  }

  .tg-arena-stage-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0.35rem 0.4rem !important;
    padding: 6px !important;
  }

  .tg-dpad-btn {
    height: 52px !important;
    font-size: 1.1rem !important;
  }
}

/* Mobil Alt Hızlı Gezinme Çubuğu */
.tg-mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd271 50%, #fcba46 100%);
  border-top: 3px solid #d9820f;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
  z-index: 900;
  justify-content: space-around;
  align-items: center;
  padding: 0 6px;
}

.tg-mnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #3d2200;
  font-weight: 900;
  font-size: 0.7rem;
  gap: 2px;
  padding: 5px 2px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.tg-mnav-item .m-ico {
  font-size: 1.3rem;
  line-height: 1;
}

.tg-mnav-item.active,
.tg-mnav-item:active {
  background: rgba(43, 140, 18, 0.18);
  color: #1c4801;
}

@media (max-width: 960px) {
  .tg-mobile-bottom-nav {
    display: flex;
  }
}

/* KVKK & Çerez Bilgilendirme Barı */
.tg-cookie-banner {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 24px));
  background: rgba(15, 23, 42, 0.96);
  border: 2px solid #ffd271;
  border-radius: 16px;
  padding: 12px 16px;
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 950;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  font-size: 0.82rem;
}

@media (min-width: 961px) {
  .tg-cookie-banner {
    bottom: 20px;
  }
}

@media (max-width: 580px) {
  .tg-cookie-banner {
    flex-direction: column;
    text-align: center;
  }
}