/* ==========================================
   BOZOK BİLİŞİM PORTALI - 5. SINIF EĞİTİM & OYUN PLATFORMU
   Öğretmen Bozok Tasarımı
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
    --primary: #4F46E5;
    --primary-light: #818CF8;
    --accent: #F59E0B;
    --success: #10B981;
    --danger: #EF4444;
    --bg-dark: #0F172A;
    --card-dark: #1E293B;
}

* {
    box-sizing: border-box;
    font-family: 'Poppins', 'Fredoka', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #0B0F19;
    color: #F8FAFC;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Özel Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0F172A;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Animasyonlar */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

@keyframes popIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animate-pop {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Sekmeler */
.tab-btn.active {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #FFFFFF;
    box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.5);
    border-color: #A78BFA;
}

/* ========================================================
   AKILLI TAHTA & 4K UHD (3840x2160) OTOMATİK ÖLÇEKLEME SİSTEMİ
   1920x1080 (Full HD), 2560x1440 (2K QHD) ve 3840x2160 (4K UHD)
   tüm ekranlarda 16:9 oranını ve tasarım bütünlüğünü %100 korur.
   ======================================================== */
html {
    font-size: 16px;
}

/* 1920px üzeri (2K QHD, 3K ve 3840x2160 4K Akıllı Tahtalar) için
   120rem yatay ızgara sabitlemesi:
   - 1920px -> 1rem = 16px (%100)
   - 2560px -> 1rem = 21.33px (%133.3)
   - 3072px -> 1rem = 25.6px (%160)
   - 3840px -> 1rem = 32px (%200 - Tam 4K UHD Doğal Ölçek) */
@media (min-width: 1921px) {
    html:not([data-scale]),
    html[data-scale="auto"] {
        font-size: calc(100vw / 120);
    }
}

/* Geniş Ekran & 4K Akıllı Tahta Konteyner Genişletmesi */
@media (min-width: 1600px) {
    .max-w-7xl {
        max-width: min(90rem, 94vw) !important;
    }
    .max-w-6xl {
        max-width: min(82rem, 92vw) !important;
    }
}

/* Manuel Akıllı Tahta Ölçek Modları (Üst Menüden Seçilebilir) */
html[data-scale="100"] {
    font-size: 16px !important;
}
html[data-scale="115"] {
    font-size: max(18.4px, calc(100vw / 104)) !important;
}
html[data-scale="130"] {
    font-size: max(20.8px, calc(100vw / 92)) !important;
}
html[data-scale="150"] {
    font-size: max(24px, calc(100vw / 80)) !important;
}
html[data-scale="200"] {
    font-size: 32px !important;
}

/* Sunu Kartı ve Sabit Slayt Boyut Stilleri (rem & vh tabanlı - 4K Uyumlu) */
#slide-display-area {
    width: 100%;
    height: auto;
    min-height: 40rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

@media (min-width: 640px) {
    #slide-display-area {
        min-height: 42.5rem;
    }
}

@media (min-width: 1024px) {
    #slide-display-area {
        min-height: clamp(44rem, 72vh, 52rem);
    }
}

.slide-card {
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    position: relative;
}

.slide-content-scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.15rem;
}

.slide-content-scroll::-webkit-scrollbar {
    width: 0.375rem;
}
.slide-content-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
}

/* Akıllı Tahta Slayt Görselleri ve Tipografi İyileştirmesi (4K 3840x2160 Uyumlu) */
.slide-card img {
    max-height: min(26.25rem, 44vh) !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 1.5rem;
}

@media (min-width: 768px) {
    .slide-card img {
        max-height: min(28.75rem, 46vh) !important;
    }
}

/* Akıllı Tahta Tam Ekran (Fullscreen) Sunum Modu Stilleri */
#view-lecture:fullscreen,
#view-lecture:-webkit-full-screen {
    background: #0b0f19 !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

#view-lecture:fullscreen #slide-display-area,
#view-lecture:-webkit-full-screen #slide-display-area {
    flex: 1 !important;
    width: 100% !important;
    height: calc(100vh - 9.375rem) !important;
    min-height: calc(100vh - 9.375rem) !important;
    max-height: calc(100vh - 9.375rem) !important;
}

#view-lecture:fullscreen .slide-card,
#view-lecture:-webkit-full-screen .slide-card {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-width: 0.1875rem !important;
    padding: 1.25rem 2rem !important;
}

#view-lecture:fullscreen .slide-card img,
#view-lecture:-webkit-full-screen .slide-card img {
    max-height: min(34rem, 50vh) !important;
}

#view-lecture:fullscreen .slide-content-scroll,
#view-lecture:-webkit-full-screen .slide-content-scroll {
    font-size: 1.3rem !important;
}

/* Akıllı Tahta Tam Ekran (Fullscreen) Oyun Arenası Stilleri */
#view-games:fullscreen,
#view-games:-webkit-full-screen {
    background: #0b0f19 !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999999 !important;
}

#view-games:fullscreen #game-container,
#view-games:-webkit-full-screen #game-container {
    flex: 1 !important;
    width: 100% !important;
    max-width: min(92rem, 94vw) !important;
    margin: 0 auto !important;
}

/* Bağımsız Oyun Modalı Tam Ekran Stilleri */
#standalone-game-modal:fullscreen,
#standalone-game-modal:-webkit-full-screen {
    background: #020617 !important;
    padding: 0.75rem !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
}

/* Yazdırılabilir Çalışma Kağıdı Stilleri */
@media print {
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
    
    header, nav, #game-container, .no-print, .tab-navigation, #week-selector-bar, button, #header-container, .bg-slate-900\/90 {
        display: none !important;
    }

    #view-worksheet, #worksheet-render-area, #active-printable-document {
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .printable-doc {
        background: #FFFFFF !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
        padding: 25px !important;
        page-break-after: avoid;
    }

    .printable-doc * {
        color: #000000 !important;
        background: transparent !important;
        border-color: #AAAAAA !important;
        text-shadow: none !important;
    }
}

/* Akıllı Tahta Dokunmatik Hedef Büyüklükleri */
button, select, input, .match-card {
    touch-action: manipulation;
    user-select: none;
}

/* Oyun Kartları */
.game-mode-card {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-mode-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* ========================================================
   TEMA SİSTEMİ (NORMAL / AÇIK / KOYU)
   ======================================================== */

/* --------------------------------------------------------
   1. AÇIK TEMA (LIGHT MODE - GÜNDÜZ / SINIF MODU)
   Yüksek kontrast, kristal netliğinde tipografi ve okunabilirlik
   -------------------------------------------------------- */
[data-theme="light"],
html.light {
    color-scheme: light;
}

[data-theme="light"] body,
html.light body {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* --- Genel Arka Planlar & Kartlar --- */
[data-theme="light"] .bg-slate-950,
html.light .bg-slate-950 {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

[data-theme="light"] .bg-slate-900,
[data-theme="light"] .bg-slate-900\/90,
[data-theme="light"] .bg-slate-900\/85,
[data-theme="light"] .bg-slate-900\/80,
[data-theme="light"] .bg-slate-900\/70,
html.light .bg-slate-900,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/85,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/70 {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .bg-slate-800,
[data-theme="light"] .bg-slate-800\/90,
[data-theme="light"] .bg-slate-800\/80,
[data-theme="light"] .bg-slate-800\/60,
html.light .bg-slate-800,
html.light .bg-slate-800\/90,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60 {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] .bg-slate-800:hover,
html.light .bg-slate-800:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

[data-theme="light"] .bg-slate-750,
html.light .bg-slate-750 {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] .bg-slate-750:hover,
html.light .bg-slate-750:hover {
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

[data-theme="light"] .bg-slate-700,
[data-theme="light"] .bg-slate-700\/80,
html.light .bg-slate-700,
html.light .bg-slate-700\/80 {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] .glass-panel,
html.light .glass-panel {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .border-slate-800,
[data-theme="light"] .border-slate-700,
html.light .border-slate-800,
html.light .border-slate-700 {
    border-color: #E2E8F0 !important;
}

/* --- Butonlar (bg-slate-800 olan butonlar açık modda netleşir) --- */
[data-theme="light"] button.bg-slate-800,
html.light button.bg-slate-800 {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] button.bg-slate-800:hover,
html.light button.bg-slate-800:hover {
    background-color: #E2E8F0 !important;
    color: #0F172A !important;
}

/* --- Tipografi & Beyaz Yazı Kontrast Çözümü --- */
/* Slayt içi presentation alanı (#slide-display-area) DIŞINDAKİ tüm başlıklar koyu olmalı */
[data-theme="light"] h1:not(#slide-display-area *):not(.keep-white),
[data-theme="light"] h2:not(#slide-display-area *):not(.keep-white),
[data-theme="light"] h3:not(#slide-display-area *):not(.keep-white):not(button *),
[data-theme="light"] h4:not(#slide-display-area *):not(.keep-white):not(button *),
html.light h1:not(#slide-display-area *):not(.keep-white),
html.light h2:not(#slide-display-area *):not(.keep-white),
html.light h3:not(#slide-display-area *):not(.keep-white):not(button *),
html.light h4:not(#slide-display-area *):not(.keep-white):not(button *) {
    color: #0F172A !important;
}

/* Slayt ve renkli butonlar DIŞINDAKİ tüm .text-white sınıfları açık temada koyu renge çevrilir */
[data-theme="light"] .text-white:not(#slide-display-area *):not(.keep-white):not(button[class*="from-"]):not(button[class*="from-"] *):not(button[class*="bg-indigo-"]):not(button[class*="bg-indigo-"] *):not(button[class*="bg-blue-"]):not(button[class*="bg-blue-"] *):not(button[class*="bg-emerald-"]):not(button[class*="bg-emerald-"] *):not(button[class*="bg-rose-"]):not(button[class*="bg-rose-"] *):not(button[class*="bg-red-"]):not(button[class*="bg-red-"] *):not(button[class*="bg-purple-"]):not(button[class*="bg-purple-"] *):not(button[class*="bg-amber-"]):not(button[class*="bg-amber-"] *):not(a[class*="from-"]):not(a[class*="from-"] *):not(a[class*="bg-indigo-"]):not(a[class*="bg-indigo-"] *):not(a[class*="bg-rose-"]):not(a[class*="bg-rose-"] *):not(.tab-btn.active):not(.tab-btn.active *):not(.tf-btn-true):not(.tf-btn-true *):not(.tf-btn-false):not(.tf-btn-false *):not(#lightbox-modal *):not(#theme-nav-bar button.scale-\[1\.02\] *):not(#theme-nav-bar button.scale-\[1\.02\]),
html.light .text-white:not(#slide-display-area *):not(.keep-white):not(button[class*="from-"]):not(button[class*="from-"] *):not(button[class*="bg-indigo-"]):not(button[class*="bg-indigo-"] *):not(button[class*="bg-blue-"]):not(button[class*="bg-blue-"] *):not(button[class*="bg-emerald-"]):not(button[class*="bg-emerald-"] *):not(button[class*="bg-rose-"]):not(button[class*="bg-rose-"] *):not(button[class*="bg-red-"]):not(button[class*="bg-red-"] *):not(button[class*="bg-purple-"]):not(button[class*="bg-purple-"] *):not(button[class*="bg-amber-"]):not(button[class*="bg-amber-"] *):not(a[class*="from-"]):not(a[class*="from-"] *):not(a[class*="bg-indigo-"]):not(a[class*="bg-indigo-"] *):not(a[class*="bg-rose-"]):not(a[class*="bg-rose-"] *):not(.tab-btn.active):not(.tab-btn.active *):not(.tf-btn-true):not(.tf-btn-true *):not(.tf-btn-false):not(.tf-btn-false *):not(#lightbox-modal *):not(#theme-nav-bar button.scale-\[1\.02\] *):not(#theme-nav-bar button.scale-\[1\.02\]) {
    color: #0F172A !important;
}

[data-theme="light"] .text-slate-100:not(#slide-display-area *),
[data-theme="light"] .text-slate-200:not(#slide-display-area *),
html.light .text-slate-100:not(#slide-display-area *),
html.light .text-slate-200:not(#slide-display-area *) {
    color: #1E293B !important;
}

[data-theme="light"] .text-slate-300:not(#slide-display-area *),
html.light .text-slate-300:not(#slide-display-area *) {
    color: #334155 !important;
}

[data-theme="light"] .text-slate-400:not(#slide-display-area *),
html.light .text-slate-400:not(#slide-display-area *) {
    color: #64748B !important;
}

/* Sarı yazıları beyaz zeminde net okunsun diye amber tonuna çek */
[data-theme="light"] .text-yellow-300:not(#slide-display-area *):not(button *):not(.theme-check):not(.scale-check),
[data-theme="light"] .text-yellow-400:not(#slide-display-area *):not(button *):not(.theme-check):not(.scale-check),
html.light .text-yellow-300:not(#slide-display-area *):not(button *):not(.theme-check):not(.scale-check),
html.light .text-yellow-400:not(#slide-display-area *):not(button *):not(.theme-check):not(.scale-check) {
    color: #B45309 !important;
}

/* --- Header & Navigasyon --- */
[data-theme="light"] header,
html.light header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #E2E8F0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] header h1,
html.light header h1 {
    color: #0F172A !important;
}

[data-theme="light"] header p,
html.light header p {
    color: #4F46E5 !important;
}

[data-theme="light"] select#week-select-dropdown,
html.light select#week-select-dropdown {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

/* Hafta Bilgi Kartı */
[data-theme="light"] #week-selector-bar,
html.light #week-selector-bar {
    background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 50%, #FAF5FF 100%) !important;
    border-color: #C7D2FE !important;
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.1) !important;
}

[data-theme="light"] #week-selector-bar h2,
[data-theme="light"] #active-week-title,
html.light #week-selector-bar h2,
html.light #active-week-title {
    color: #1E1B4B !important;
}

[data-theme="light"] #active-week-badge,
html.light #active-week-badge {
    background-color: #EEF2FF !important;
    color: #4338CA !important;
    border-color: #A5B4FC !important;
}

/* 4 Ana Sekme Butonları */
[data-theme="light"] .tab-btn:not(.active),
html.light .tab-btn:not(.active) {
    background-color: #FFFFFF !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

[data-theme="light"] .tab-btn:not(.active):hover,
html.light .tab-btn:not(.active):hover {
    background-color: #F1F5F9 !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

/* --- 1. DERS SUNUSU (#view-lecture) --- */
[data-theme="light"] #slide-display-area,
html.light #slide-display-area {
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.15) !important;
}

/* Slayt içindeki sunum metinleri zengin renkli gradyan üzerinde daima parlak ve net kalır */
[data-theme="light"] #slide-display-area .text-white,
html.light #slide-display-area .text-white {
    color: #FFFFFF !important;
}

[data-theme="light"] #slide-counter-badge,
html.light #slide-counter-badge {
    background-color: #F8FAFC !important;
    color: #B45309 !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] #slide-prev-btn,
html.light #slide-prev-btn {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] #slide-prev-btn:hover,
html.light #slide-prev-btn:hover {
    background-color: #F1F5F9 !important;
}

[data-theme="light"] #view-lecture button.absolute,
html.light #view-lecture button.absolute {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #view-lecture button.absolute:hover,
html.light #view-lecture button.absolute:hover {
    background-color: #4F46E5 !important;
    color: #FFFFFF !important;
    border-color: #818CF8 !important;
}

/* --- 2. ÇALIŞMA KAĞIDI ALANI (#view-worksheet) --- */
[data-theme="light"] #worksheet-render-area .bg-slate-900,
html.light #worksheet-render-area .bg-slate-900 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] #worksheet-render-area h2,
html.light #worksheet-render-area h2 {
    color: #0F172A !important;
}

[data-theme="light"] #worksheet-render-area p.text-indigo-300,
html.light #worksheet-render-area p.text-indigo-300 {
    color: #4F46E5 !important;
}

[data-theme="light"] #photo-zoom-val,
html.light #photo-zoom-val {
    color: #B45309 !important;
    font-weight: 800 !important;
}

[data-theme="light"] #photo-container,
html.light #photo-container {
    background-color: #F8FAFC !important;
}

[data-theme="light"] .printable-doc,
html.light .printable-doc {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] .printable-doc h1,
[data-theme="light"] .printable-doc h2,
[data-theme="light"] .printable-doc h3,
[data-theme="light"] .printable-doc h4,
html.light .printable-doc h1,
html.light .printable-doc h2,
html.light .printable-doc h3,
html.light .printable-doc h4 {
    color: #0F172A !important;
}

[data-theme="light"] .printable-doc p,
[data-theme="light"] .printable-doc span,
html.light .printable-doc p,
html.light .printable-doc span {
    color: #334155 !important;
}

[data-theme="light"] .printable-doc .bg-slate-800,
[data-theme="light"] .printable-doc .bg-slate-800\/80,
html.light .printable-doc .bg-slate-800,
html.light .printable-doc .bg-slate-800\/80 {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #1E293B !important;
}

/* --- 3. PEKİŞTİRME TESTİ ALANI (#view-quiz) --- */
[data-theme="light"] #quiz-render-area .bg-slate-900,
html.light #quiz-render-area .bg-slate-900 {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] #quiz-render-area h3,
[data-theme="light"] #quiz-render-area h4,
html.light #quiz-render-area h3,
html.light #quiz-render-area h4 {
    color: #0F172A !important;
}

/* Doğru / Yanlış İfadeleri */
[data-theme="light"] #quiz-render-area [id^="tf-item-"]:not(.tf-answered-correct):not(.tf-answered-wrong),
html.light #quiz-render-area [id^="tf-item-"]:not(.tf-answered-correct):not(.tf-answered-wrong) {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
}

[data-theme="light"] #quiz-render-area [id^="tf-item-"] div,
[data-theme="light"] #quiz-render-area [id^="tf-item-"] .text-white,
html.light #quiz-render-area [id^="tf-item-"] div,
html.light #quiz-render-area [id^="tf-item-"] .text-white {
    color: #0F172A !important;
}

/* Cevaplanmış Doğru / Yanlış Kartları (Light Theme) */
[data-theme="light"] #quiz-render-area [id^="tf-item-"].tf-answered-correct,
html.light #quiz-render-area [id^="tf-item-"].tf-answered-correct {
    background-color: #ECFDF5 !important;
    border-color: #10B981 !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15) !important;
}

[data-theme="light"] #quiz-render-area [id^="tf-item-"].tf-answered-wrong,
html.light #quiz-render-area [id^="tf-item-"].tf-answered-wrong {
    background-color: #FFF1F2 !important;
    border-color: #F43F5E !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.15) !important;
}

/* Doğru / Yanlış Butonları (Light & Dark) */
[data-theme="light"] #quiz-render-area .tf-btn-true:not(.active-correct):not(.active-wrong):not(.correct-hint),
[data-theme="light"] #quiz-render-area .tf-btn-false:not(.active-correct):not(.active-wrong):not(.correct-hint),
html.light #quiz-render-area .tf-btn-true:not(.active-correct):not(.active-wrong):not(.correct-hint),
html.light #quiz-render-area .tf-btn-false:not(.active-correct):not(.active-wrong):not(.correct-hint) {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] #quiz-render-area .tf-btn-true:not(.active-correct):not(.active-wrong):hover,
html.light #quiz-render-area .tf-btn-true:not(.active-correct):not(.active-wrong):hover {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #059669 !important;
}

[data-theme="light"] #quiz-render-area .tf-btn-false:not(.active-correct):not(.active-wrong):hover,
html.light #quiz-render-area .tf-btn-false:not(.active-correct):not(.active-wrong):hover {
    background-color: #EF4444 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
}

/* Seçilen Doğru Butonu */
#quiz-render-area .active-correct,
[data-theme="light"] #quiz-render-area .active-correct,
html.light #quiz-render-area .active-correct {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
    border-color: #059669 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}

/* Seçilen Yanlış Butonu */
#quiz-render-area .active-wrong,
[data-theme="light"] #quiz-render-area .active-wrong,
html.light #quiz-render-area .active-wrong {
    background-color: #EF4444 !important;
    color: #FFFFFF !important;
    border-color: #DC2626 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

/* Doğru Cevap Göstergesi (Kullanıcı yanlış bastığında) */
#quiz-render-area .correct-hint,
[data-theme="light"] #quiz-render-area .correct-hint,
html.light #quiz-render-area .correct-hint {
    background-color: #047857 !important;
    color: #FFFFFF !important;
    border-color: #34D399 !important;
}

/* Doğru / Yanlış Açıklama Kutuları Light Theme */
[data-theme="light"] #quiz-render-area .tf-exp-correct,
html.light #quiz-render-area .tf-exp-correct {
    background-color: #D1FAE5 !important;
    border-color: #6EE7B7 !important;
    color: #065F46 !important;
}

[data-theme="light"] #quiz-render-area .tf-exp-wrong,
html.light #quiz-render-area .tf-exp-wrong {
    background-color: #FFE4E6 !important;
    border-color: #FDA4AF !important;
    color: #9F1239 !important;
}

[data-theme="light"] #quiz-render-area .tf-exp-correct p,
[data-theme="light"] #quiz-render-area .tf-exp-correct div,
html.light #quiz-render-area .tf-exp-correct p,
html.light #quiz-render-area .tf-exp-correct div {
    color: #065F46 !important;
}

[data-theme="light"] #quiz-render-area .tf-exp-wrong p,
[data-theme="light"] #quiz-render-area .tf-exp-wrong div,
html.light #quiz-render-area .tf-exp-wrong p,
html.light #quiz-render-area .tf-exp-wrong div {
    color: #9F1239 !important;
}

/* Çoktan Seçmeli Test Şıkları */
[data-theme="light"] #quiz-render-area [id^="mc-btn-"],
html.light #quiz-render-area [id^="mc-btn-"] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #quiz-render-area [id^="mc-btn-"]:hover,
html.light #quiz-render-area [id^="mc-btn-"]:hover {
    background-color: #EEF2FF !important;
    border-color: #818CF8 !important;
    color: #1E1B4B !important;
}

[data-theme="light"] #quiz-render-area [id^="mc-btn-"] span,
html.light #quiz-render-area [id^="mc-btn-"] span {
    color: #0F172A !important;
}

[data-theme="light"] #quiz-render-area [id^="mc-btn-"] span:first-child,
html.light #quiz-render-area [id^="mc-btn-"] span:first-child {
    background-color: #EEF2FF !important;
    color: #4F46E5 !important;
}

[data-theme="light"] #quiz-render-area [id^="mc-exp-"],
html.light #quiz-render-area [id^="mc-exp-"] {
    background-color: #EEF2FF !important;
    border-color: #C7D2FE !important;
    color: #1E1B4B !important;
}

[data-theme="light"] .quiz-option-btn:not(.selected),
html.light .quiz-option-btn:not(.selected) {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] .quiz-option-btn:not(.selected):hover,
html.light .quiz-option-btn:not(.selected):hover {
    background-color: #F8FAFC !important;
    border-color: #6366F1 !important;
}

/* --- 4. TEKRAR OYUNLARI ARENASI (#view-games) --- */
[data-theme="light"] #view-games h2,
[data-theme="light"] #view-games h3,
html.light #view-games h2,
html.light #view-games h3 {
    color: #0F172A !important;
}

[data-theme="light"] #view-games p.text-slate-400,
html.light #view-games p.text-slate-400 {
    color: #475569 !important;
}

[data-theme="light"] #games-hub-back-btn,
html.light #games-hub-back-btn {
    background-color: #FFFFFF !important;
    color: #B45309 !important;
    border-color: #CBD5E1 !important;
}

/* Eşleştirme Oyunu (Match Game) */
[data-theme="light"] .match-card,
html.light .match-card {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .match-card:hover,
html.light .match-card:hover {
    background-color: #F8FAFC !important;
    border-color: #3B82F6 !important;
}

[data-theme="light"] .match-card span,
html.light .match-card span {
    color: #0F172A !important;
}

[data-theme="light"] #match-left-column h4,
[data-theme="light"] #match-right-column h4,
html.light #match-left-column h4,
html.light #match-right-column h4 {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

/* Refleks Oyunu (Reflex Game) */
[data-theme="light"] #reflex-card-area,
html.light #reflex-card-area {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #reflex-statement-text,
html.light #reflex-statement-text {
    color: #0F172A !important;
}

/* Çarkıfelek & Bilgi Yarışması (Wheel Quiz) */
[data-theme="light"] #wheel-question-box,
html.light #wheel-question-box {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] #wheel-question-box h3,
[data-theme="light"] #wheel-question-box h4,
html.light #wheel-question-box h3,
html.light #wheel-question-box h4 {
    color: #0F172A !important;
}

[data-theme="light"] #wheel-options-container button,
html.light #wheel-options-container button {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] #wheel-options-container button:hover,
html.light #wheel-options-container button:hover {
    background-color: #EEF2FF !important;
    border-color: #6366F1 !important;
    color: #1E1B4B !important;
}

[data-theme="light"] #wheel-options-container button span:last-child,
html.light #wheel-options-container button span:last-child {
    color: #0F172A !important;
}

[data-theme="light"] #wheel-options-container button span:first-child,
html.light #wheel-options-container button span:first-child {
    background-color: #F1F5F9 !important;
    color: #4F46E5 !important;
}

/* Düello Oyunu (Duel Game) */
[data-theme="light"] #duel-question-text,
html.light #duel-question-text {
    color: #0F172A !important;
}

[data-theme="light"] [id^="duel-btn-"],
html.light [id^="duel-btn-"] {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] [id^="duel-btn-"] span:last-child,
html.light [id^="duel-btn-"] span:last-child {
    color: #0F172A !important;
}

/* Bilgi Arenası (Arena Game) */
[data-theme="light"] #arena-options-grid button,
html.light #arena-options-grid button {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

[data-theme="light"] #arena-options-grid button:hover,
html.light #arena-options-grid button:hover {
    background-color: #EEF2FF !important;
    border-color: #6366F1 !important;
}

[data-theme="light"] #arena-options-grid button span,
html.light #arena-options-grid button span {
    color: #0F172A !important;
}

[data-theme="light"] #arena-options-grid button div:first-child,
html.light #arena-options-grid button div:first-child {
    background-color: #F1F5F9 !important;
    color: #4F46E5 !important;
}

/* --- 5. KONU VİDEOLARI ALANI (#view-videos) --- */
[data-theme="light"] #active-video-title,
html.light #active-video-title {
    color: #0F172A !important;
}

[data-theme="light"] #quick-video-input,
html.light #quick-video-input {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

/* --- MODALLAR VE MENÜLER --- */
[data-theme="light"] #curriculum-modal .bg-slate-900,
[data-theme="light"] #slide-menu-modal .bg-slate-900,
[data-theme="light"] #standalone-game-modal .bg-slate-900,
[data-theme="light"] #theme-dropdown-menu,
[data-theme="light"] #scale-dropdown-menu,
html.light #curriculum-modal .bg-slate-900,
html.light #slide-menu-modal .bg-slate-900,
html.light #standalone-game-modal .bg-slate-900,
html.light #theme-dropdown-menu,
html.light #scale-dropdown-menu {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #0F172A !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] #standalone-game-title,
html.light #standalone-game-title {
    color: #0F172A !important;
}

[data-theme="light"] #curriculum-modal-grid button,
html.light #curriculum-modal-grid button {
    background-color: #FFFFFF !important;
    border-color: #CBD5E1 !important;
}

[data-theme="light"] #curriculum-modal-grid button .text-white,
html.light #curriculum-modal-grid button .text-white {
    color: #0F172A !important;
}

[data-theme="light"] #slide-menu-list button:not(.bg-indigo-600),
html.light #slide-menu-list button:not(.bg-indigo-600) {
    background-color: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #1E293B !important;
}

[data-theme="light"] #slide-menu-list button:not(.bg-indigo-600) .text-white,
html.light #slide-menu-list button:not(.bg-indigo-600) .text-white {
    color: #0F172A !important;
}

[data-theme="light"] #slide-menu-list button:not(.bg-indigo-600) .text-slate-400,
html.light #slide-menu-list button:not(.bg-indigo-600) .text-slate-400 {
    color: #64748B !important;
}

[data-theme="light"] .theme-opt-btn,
[data-theme="light"] .scale-opt-btn,
html.light .theme-opt-btn,
html.light .scale-opt-btn {
    color: #1E293B !important;
}

[data-theme="light"] .theme-opt-btn:hover,
[data-theme="light"] .scale-opt-btn:hover,
html.light .theme-opt-btn:hover,
html.light .scale-opt-btn:hover {
    background-color: #F1F5F9 !important;
    color: #4F46E5 !important;
}

/* Scrollbar Açık Mod */
[data-theme="light"] ::-webkit-scrollbar-track,
html.light ::-webkit-scrollbar-track {
    background: #F1F5F9;
}
[data-theme="light"] ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb {
    background: #CBD5E1;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* --------------------------------------------------------
   2. KOYU TEMA (DEEP OLED BLACK - DERİN GECE MODU)
   -------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: #000000 !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] header {
    background-color: rgba(5, 8, 17, 0.95) !important;
    border-color: #1E293B !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .bg-slate-950 {
    background-color: #000000 !important;
}

[data-theme="dark"] .bg-slate-900,
[data-theme="dark"] .bg-slate-900\/90,
[data-theme="dark"] .bg-slate-900\/85,
[data-theme="dark"] .bg-slate-900\/80 {
    background-color: #050811 !important;
    border-color: #1E293B !important;
}

[data-theme="dark"] .bg-slate-800,
[data-theme="dark"] .bg-slate-800\/90,
[data-theme="dark"] .bg-slate-800\/80 {
    background-color: #0A101D !important;
    border-color: #1E293B !important;
}

[data-theme="dark"] .bg-slate-800:hover {
    background-color: #111A30 !important;
}

[data-theme="dark"] #week-selector-bar {
    background: linear-gradient(135deg, #0A0E1A 0%, #050811 100%) !important;
    border-color: #312E81 !important;
}

[data-theme="dark"] #theme-dropdown-menu,
[data-theme="dark"] #scale-dropdown-menu {
    background-color: #050811 !important;
    border-color: #1E293B !important;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #000000;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #1E293B;
}

/* --------------------------------------------------------
   3. NORMAL TEMA (VARSAYILAN SLATE / BİLİŞİM MAVİSİ)
   -------------------------------------------------------- */
[data-theme="normal"] {
    color-scheme: dark;
}

/* ========================================================
   MOBİL & DOKUNMATİK EKRAN OPTİMİZASYONU (360px - 768px)
   Akıllı telefonlarda taşmayı önler, dokunma hedeflerini rahatlatır
   ======================================================== */
@media (max-width: 640px) {
    /* Buton ve kartların dokunma hissi ve taşma koruması */
    .match-card {
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    
    /* Oyun alanlarının yatay taşmasını engelleme */
    #game-container {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }

    /* Modal ekranında iframe alanı */
    #standalone-game-modal {
        padding: 0.35rem !important;
    }

    /* Çark ve oyun çemberi taşma koruması */
    #wheel-canvas {
        max-width: 100%;
        height: auto;
    }
}