/* =================================================================== */
/* ===           MUKO - RENDER-OPTIMIZED STIL DOSYASI              === */
/* =================================================================== */
/* AÇIKLAMA: Yeni render sistemi ile tam uyumlu, çakışmasız ve        */
/* optimize edilmiş stil dosyası                                     */
/* =================================================================== */

/* =================================================================== */
/* === YENİ BUTON STİLLERİ - İndigo Teması                      === */
/* =================================================================== */

/* Buton Gölge Efekti */
.button-shadow {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.button-shadow:hover {
    box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.15), 0 10px 15px -6px rgba(0, 0, 0, 0.1);
}

/* Kart Gölge Efekti */
.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* MUKO Logo - Kaliteli Siyah Gradient */
.header-logo {
    font-size: 1.75rem;
    font-weight: 900;
    background: linear-gradient(135deg, #1a1a1a 0%, #4a4a4a 50%, #1a1a1a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ana Navigasyon Butonları - Duolingo Teması */
#social-btn {
    background: linear-gradient(135deg, #58CC02 0%, #43A200 100%) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(88, 204, 2, 0.3), 0 2px 4px -1px rgba(88, 204, 2, 0.2);
}

#social-btn:hover {
    background: linear-gradient(135deg, #6BE007 0%, #58CC02 100%) !important;
    box-shadow: 0 6px 12px -1px rgba(88, 204, 2, 0.4), 0 4px 6px -1px rgba(88, 204, 2, 0.3);
}

#profile-btn {
    background: linear-gradient(135deg, #FF9600 0%, #E88500 100%) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(255, 150, 0, 0.3), 0 2px 4px -1px rgba(255, 150, 0, 0.2);
}

#profile-btn:hover {
    background: linear-gradient(135deg, #FFB01F 0%, #FF9600 100%) !important;
    box-shadow: 0 6px 12px -1px rgba(255, 150, 0, 0.4), 0 4px 6px -1px rgba(255, 150, 0, 0.3);
}

#premium-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

#premium-btn:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
    box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.5), 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* Mod Seçim Butonları */
#photo-mode-btn,
#handwriting-mode-btn {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #1e40af !important;
    width: 100%;
    padding: 0.85rem 1.3rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    transform: scale(1);
    transition: all 0.2s ease-in-out;
    border: 2px solid rgba(59, 130, 246, 0.3);
    cursor: pointer;
    font-weight: 600;
}

#photo-mode-btn:hover,
#handwriting-mode-btn:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6;
    transform: scale(1.02);
}

/* Fotoğraf İşlemleri */
/* Soru paneli butonları artık HTML'de inline tanımlı */

/* Canvas Araçları */
.hw-pen-btn,
.hw-eraser-btn,
.hw-undo-btn,
.hw-clear-btn {
    background: #4338CA !important;
    color: white !important;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: scale(1);
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.hw-pen-btn:hover,
.hw-eraser-btn:hover,
.hw-undo-btn:hover,
.hw-clear-btn:hover {
    background: #3730A3 !important;
    transform: scale(1.05);
}

/* Ana Aksiyon Butonları - Artık HTML'de inline tanımlı */
.back-to-main-menu-btn {
    background: #4338CA !important;
    color: white !important;
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: scale(1);
    transition: all 0.2s ease-in-out;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.back-to-main-menu-btn:hover {
    background: #3730A3 !important;
    transform: scale(1.05);
}

/* =================================================================== */
/* === BLUR EFFECTS - Butonlar için cam efekti                   === */
/* =================================================================== */

/* Ana blur-button sınıfı */
.blur-button {
    position: relative;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    overflow: hidden;
    z-index: 1;
}

/* Gradient overlay for blur buttons */
.blur-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    opacity: 1;
    border-radius: inherit;
    z-index: -1;
}

/* =================================================================== */
/* === 0. TAM EKRAN ve STATUS BAR AYARLARI                        === */
/* =================================================================== */

/* Tam ekran için temel ayarlar */
html, body {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: 100vw;
    width: 100dvw; /* Dynamic viewport width for mobile */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Sadece yatay scroll'u engelle */
    overflow-y: auto; /* Dikey scroll'a izin ver */
    position: relative; /* fixed yerine relative */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Status bar ve navigasyon bar gizleme */
body {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

/* Tam ekran container */
.fullscreen-container {
    position: relative; /* fixed yerine relative */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    width: 100dvw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden; /* Sadece yatay scroll'u engelle */
    overflow-y: auto; /* Dikey scroll'a izin ver */
    z-index: 1;
}

/* Safe area desteği - unified-safe-area.css'te yönetiliyor */
    
    /* Premium sayfası navigation yüksekliği azalt - Fullscreen override'ını ezme */
    .fullscreen-container nav .flex,
    nav .flex {
        min-height: 2.5rem !important; /* 3rem yerine 2.5rem (40px) */
        height: 2.5rem !important; /* Sabit yükseklik */
    }

    /* Mobil navigation daha küçük - Fullscreen override'ını ezme */
    @media (max-width: 640px) {
        .fullscreen-container nav .flex,
        nav .flex {
            min-height: 2rem !important; /* Mobilde 32px */
            height: 2rem !important; /* Sabit yükseklik */
        }
    }

    /* FullscreenManager override'larını etkisiz hale getir */
    .fullscreen-container nav {
        position: fixed !important;
        top: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Premium sayfası main content padding azalt */
    .fullscreen-container #premium-container {
        padding-top: 4rem !important; /* 5rem yerine 4rem */
    }
}

/* Android navigasyon bar tamamen gizleme */
@media screen and (max-width: 768px) {
    html, body {
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
        max-height: none !important; /* max-height kaldırıldı */
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Scroll'a izin ver */
    }
    
    .fullscreen-container {
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
        height: auto !important; /* Sabit height yerine auto */
        max-height: none !important; /* max-height kaldırıldı */
        overflow-x: hidden !important;
        overflow-y: auto !important; /* Scroll'a izin ver */
        /* Safe area padding - unified-safe-area.css'te yönetiliyor */
    }
    
    /* Premium sayfası mobil ayarları */
    .fullscreen-container nav {
        /* Safe area padding - unified-safe-area.css'te yönetiliyor */
    }
    
    .fullscreen-container nav .flex {
        min-height: 3rem !important; /* Mobilde 48px navigation */
    }
    
    .fullscreen-container #premium-container {
        padding-top: 6rem !important; /* Mobilde daha fazla üst padding */
    }
}

/* Immersive mode için ek stiller */
.fullscreen-mode {
    position: relative !important; /* fixed yerine relative */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    height: auto !important; /* Sabit height yerine auto */
    overflow-x: hidden !important; /* Sadece yatay scroll'u engelle */
    overflow-y: auto !important; /* Dikey scroll'a izin ver */
    z-index: 9999 !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Android için özel navigasyon bar gizleme */
@supports (-webkit-touch-callout: none) {
    .fullscreen-container {
        height: 100vh !important;
        height: calc(var(--vh, 1vh) * 100) !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* =================================================================== */
/* === ORIENTATION MODE STILLERI                                    === */
/* =================================================================== */

/* Landscape mode (oyun modu) */
.landscape-mode {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh !important;
    height: 100vw !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -50vw !important;
    margin-left: -50vh !important;
}

/* Portrait mode (normal mod) */
.portrait-mode {
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}


/* Landscape modda oyun container */
.landscape-mode .fullscreen-container {
    width: 100vh !important;
    height: 100vw !important;
    overflow: hidden !important;
}

/* Portrait modda normal container */
.portrait-mode .fullscreen-container {
    width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
}

/* =================================================================== */
/* === 1. PREMIUM RENK PALETI ve GRADYANLAR                        === */
/* =================================================================== */

:root {
    /* Premium Gradyanlar */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --error-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    --muko-gradient: linear-gradient(135deg, #667eea 0%, #f093fb 50%, #764ba2 100%);

    /* Renkler - Birleştirildi */
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --success-color: #4facfe;
    --warning-color: #fa709a;
    --error-color: #ff9a9e;
    --muko-color: #667eea;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --border-color: #e5e7eb;

    /* Premium Gölgeler */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Utility Values */
    --border-radius-full: 9999px;
    --font-size-xs: 0.8rem;
    --padding-sm: 0.5rem;
}

/* Premium Gradyan Sınıfları */
.bg-gradient-primary {
    background: var(--primary-gradient);
}

.bg-gradient-secondary {
    background: var(--secondary-gradient);
}

.bg-gradient-success {
    background: var(--success-gradient);
}

.bg-gradient-warning {
    background: var(--warning-gradient);
}

.bg-gradient-error {
    background: var(--error-gradient);
}

.bg-gradient-muko {
    background: var(--muko-gradient);
}

/* Premium Buton Stilleri */
.btn-premium {
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-premium:active {
    transform: translateY(0);
}

/* Duolingo Tarzı Buton Stilleri */
.duolingo-btn {
    position: relative !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 
        0 4px 14px rgba(102, 126, 234, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    overflow: hidden !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
}

.duolingo-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 16px;
    pointer-events: none;
}

.duolingo-btn:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        0 6px 20px rgba(102, 126, 234, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.duolingo-btn:active {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(0) !important;
    box-shadow: 
        0 2px 8px rgba(102, 126, 234, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.duolingo-btn:focus {
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(102, 126, 234, 0.3),
        0 4px 14px rgba(102, 126, 234, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Eski buton stilleri - geriye uyumluluk için */
.file-select-btn,
.camera-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.file-select-btn::before,
.camera-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.file-select-btn:hover::before,
.camera-btn:hover::before {
    left: 100%;
}

.file-select-btn:hover,
.camera-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.file-select-btn:active,
.camera-btn:active {
    transform: translateY(0) scale(0.98);
}

/* MUKO Avatar Stili */
.muko-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--muko-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    box-shadow: var(--shadow-md);
    border: 2px solid white;
}

/* =================================================================== */
/* === FOTOĞRAF MODU BUTONLARI - MODERN VE RENKLİ                    === */
/* =================================================================== */

/* Dosya Seç ve Kamera Butonları - Birleştirildi */
/* Bu stiller yukarıdaki glassmorphism versiyonu ile çakışıyordu */
/* Glassmorphism stilleri korundu, bu basit stiller kaldırıldı */

/* Buton İçindeki İkon Animasyonları */
.file-select-btn:hover .text-3xl,
.camera-btn:hover .text-3xl {
    animation: icon-bounce 0.6s ease-in-out;
}

/* Buton Basma Efekti */
.file-select-btn:active,
.camera-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease;
}

/* Buton İçindeki Küçük İkonlar */
.file-select-btn .absolute.top-2,
.camera-btn .absolute.top-2 {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* =================================================================== */
/* === ANİMASYON KEYFRAMES                                            === */
/* =================================================================== */

/* Animasyonlar kaldırıldı */

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes pulse-glow {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }
}

/* Bu mobil optimizasyonu aşağıdaki ana media query'ye taşındı */

/* =================================================================== */
/* === 1. GLOBAL STİLLER ve TEMEL YAPILANDIRMA                     === */
/* =================================================================== */

html {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* Duolingo saf beyaz */
    color: #1f2937; /* Varsayılan metin rengi */
    /* Safe area padding - unified-safe-area.css'te yönetiliyor */
}

/* Soru hakkı bitince overlay animasyonu */
@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.95;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
}

/* Matematik hata overlay animasyonları */
@keyframes bounce-in {
    0% {
        transform: scale(0.3) translateY(-50px);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) translateY(0);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-bounce-in {
    animation: bounce-in 0.6s ease-out;
}

@keyframes slide-up {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slide-up 0.4s ease-out;
}





/* Basit loading ve disabled stilleri */
.loader {
    border-top-color: #4f46e5;
}

.disabled-area {
    pointer-events: none !important;
    opacity: 0.7 !important;
    position: relative;
    transition: opacity 0.3s ease; /* Sadece opacity'yi animate et, transform'u değil */
    cursor: not-allowed !important;
    border-radius: 16px !important;
    overflow: visible !important;
}

.disabled-area * {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Butonları disabled-area'dan muaf tut - şekillerini bozmasın */
.disabled-area button {
    overflow: visible !important;
    border-radius: inherit !important;
}

/* Canvas container'ını disabled-area etkilerinden koru */
.disabled-area #handwriting-canvas-container,
.disabled-area #handwritingCanvas {
    position: relative !important;
    z-index: 20 !important;
    transform: none !important;
}

/* Çözüme Başla butonunu her durumda koruma altına al */
/* Buton stilleri artık HTML'de inline tanımlı */

.disabled-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    backdrop-filter: blur(0.5px);
    z-index: 10;
    pointer-events: none;
    border-radius: 16px;
}

.disabled-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    z-index: 11;
    pointer-events: none;
    border-radius: 16px;
}

/* =================================================================== */
/* === ŞİFRE GÜVENLİK GÖSTERGESİ STİLLERİ                          === */
/* =================================================================== */

/* Şifre gücü progress bar animasyonları */
@keyframes strength-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.password-strength-weak {
    animation: strength-pulse 2s ease-in-out infinite;
}

.password-strength-strong {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

/* Şifre gereksinim ikonları */
.requirement-icon {
    transition: all 0.3s ease;
}

.requirement-met {
    color: #10b981;
    transform: scale(1.1);
}

.requirement-not-met {
    color: #ef4444;
}

/* Form input güvenlik stilleri */
.form-input-security {
    border-color: #e5e7eb;
    transition: all 0.3s ease;
}

.form-input-security:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input-security.secure {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-input-security.insecure {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* =================================================================== */
/* === FALLBACK RENDER SİSTEMİ STİLLERİ                            === */
/* =================================================================== */

/* Fallback matematik gösterimi */
.fallback-math {
    font-family: 'Times New Roman', 'Cambria Math', serif;
    font-size: 1.1em;
    color: #374151;
    background: rgba(59, 130, 246, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border-left: 3px solid #3b82f6;
    display: inline-block;
    margin: 0 2px;
    font-style: normal; /* İtalik değil */
    vertical-align: middle;
}

.fallback-math.advanced {
    background: rgba(168, 85, 247, 0.1);
    border-left-color: #a855f7;
    font-style: normal; /* Advanced bile italik olmasın */
    font-weight: 500; /* Hafif kalın yap */
}

/* Fallback notification */
.fallback-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    animation: slideInRight 0.3s ease-out;
    max-width: 300px;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Render error indicator */
.render-error {
    border-left: 2px solid #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.render-fallback-unicode,
.render-fallback-simplified,
.render-fallback-text {
    transition: all 0.2s ease;
}

.render-fallback-unicode:hover,
.render-fallback-simplified:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(1.02);
}

/* =================================================================== */
/* === BASİT HOVER EFEKTLERİ (Optimize Edildi)                      === */
/* =================================================================== */

/* Sadece gerekli hover efektleri */
.btn:hover {
    background-color: #4338ca;
}

.btn:active {
    background-color: #3730a3;
}

/* =================================================================== */
/* === KAMERA ÖNİZLEME STİLLERİ (Optimize Edildi)                  === */
/* =================================================================== */

/* Fotoğraf önizleme stilleri */
#imagePreview {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
    background-color: #f8fafc;
}

/* Utility class eklendi - Tekrar eden border-radius'lar için */
.rounded-full {
    border-radius: var(--border-radius-full) !important;
}

/* Döndürme butonu - artık indigo stil kullanıyor */

/* Değiştir butonu için stil - class ile uygulanacak */
/* #changePhotoBtn artik .rounded-full classı kullanacak */

/* Fotoğraf önizleme konteyneri */
#preview-container {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid #d1d5db;
}

#camera-preview-container {
    display: none;
}

#camera-preview-container:not(.hidden) {
    display: block !important;
}

#camera-preview-container.hidden {
    display: none !important;
}

#camera-preview {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 0.5rem;
}

#question-frame {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 70%;
    border: 3px solid #3b82f6;
    background-color: rgba(59, 130, 246, 0.15);
    border-radius: 0.5rem;
    pointer-events: none;
    z-index: 10;
}

#question-frame > div {
    position: absolute;
    top: -1.5rem;
    left: 0;
    background-color: #3b82f6;
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

#capture-btn {
    background: #10b981;
    color: white;
    border: none;
}

#close-camera-btn {
    background-color: #6b7280;
    color: white;
    border: none;
}





/* =================================================================== */
/* === 3. CHAT BUBBLE STİLLERİ (Telegram/WhatsApp Benzeri)         === */
/* =================================================================== */

.chat-bubble {
    margin-bottom: 0.75rem;
    position: relative;
}

/* Chat bubble metin rengi garantisi */
.chat-bubble .bg-gray-100 *,
.chat-bubble .bg-green-100 *,
.chat-bubble .bg-red-100 *,
.chat-bubble .bg-indigo-100 * {
    color: inherit !important;
}

/* Chat bubble focus state'leri */
.chat-bubble:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* AI Avatar pozisyonu */
.chat-bubble .w-6.h-6.rounded-full {
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Chat bubble içerik alanı */
.chat-bubble .bg-gray-100,
.chat-bubble .bg-green-100,
.chat-bubble .bg-red-100,
.chat-bubble .bg-indigo-100 {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1f2937; /* Varsayılan koyu metin rengi */
    font-weight: 500; /* Metin kalınlığı */
}

/* Kullanıcı mesajları için özel stil */
.chat-bubble .bg-gradient-to-r.from-blue-500.to-blue-600 {
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Symbol button stilleri */
.symbol-btn {
    @apply px-3 py-2 rounded-lg font-mono text-lg;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    min-width: 40px;
    text-align: center;
}

.symbol-btn:hover {
    background-color: #dbeafe;
    border-color: #3b82f6;
}

.symbol-btn:active {
    background-color: #bfdbfe;
}


/* =================================================================== */
/* === 3. BUTON STİLLERİ (Genel, Mod ve Araç Butonları)            === */
/* =================================================================== */

/* Basit focus state'leri */
.btn:focus,
.quantum-btn:focus,
.symbol-btn:focus,
.quick-symbol-btn:focus,
.mode-tab:focus,
.math-symbol-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            font-weight: 600;
            padding: 0.7rem 1.2rem;
            border-radius: 0.75rem;
            border: 1px solid transparent;
            font-size: 0.9rem;
            cursor: pointer;
            text-align: center;
        }

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Belirli butonların disabled durumunda border-radius koruması */
#startFromTextBtn:disabled,
#switchToCanvasBtn:disabled,
#recognizeHandwritingBtn:disabled,
#switchToKeyboardBtn:disabled,
.hw-pen-btn:disabled,
.hw-eraser-btn:disabled,
.hw-undo-btn:disabled,
.hw-clear-btn:disabled {
    border-radius: 0.75rem !important;
}

/* Belirli butonların disabled durumunda şekil değiştirmemesi için özel kurallar */
/* Disabled buton stilleri artık HTML'de inline tanımlı */

.btn-primary {
    background-color: #4f46e5;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: #4338ca;
}

.btn-secondary {
    background-color: #374151;
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #1f2937;
}

.btn-tertiary {
    background-color: #e5e7eb;
    color: #1f2937;
    border-color: #d1d5db;
}

.btn-tertiary:hover:not(:disabled) {
    background-color: #d1d5db;
    border-color: #9ca3af;
}

/* Soru giriş ekranındaki mod butonları (Fotoğraf, El Yazısı) */
.mode-btn-active,
.mode-tab.active,
#photo-mode-btn.mode-btn-active,
#handwriting-mode-btn.mode-btn-active {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
    border-color: transparent !important;
    transform: scale(1.02);
}

/* Seçili olmayan mod butonları için doğru renk - Basit yaklaşım */
.mode-tab {
    background-color: #f3f4f6;
    color: #6b7280;
    border-color: #d1d5db;
    margin: 0 0.5rem;
}

/* Canvas araç butonları (Kalem, Silgi) */
.tool-btn-active {
    background-color: #8b5cf6;
    color: white;
    box-shadow: 0 2px 5px rgba(139, 92, 246, 0.2);
}

/* İşlem sırasında pasif hale getirilen butonlar */
.disabled-btn {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}



/* =================================================================== */
/* === 4. KANVAS ve GİRİŞ ALANLARI STİLLERİ                        === */
/* =================================================================== */

/* Input ve textarea focus state'leri */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Canvas focus state'leri */
#handwritingCanvas:focus,
#guide-handwriting-canvas:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

#handwritingCanvas,
#guide-handwriting-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 15; /* disabled-area pseudo-elementlerinin üzerinde */
}

#guide-pen-btn.canvas-tool-active,
#guide-eraser-btn.canvas-tool-active {
    background-color: #4f46e5 !important;
    color: white !important;
}

textarea[readonly] {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

/* =================================================================== */
/* ===           5. NİHAİ RENDER SİSTEMİ STİLLERİ                  === */
/* =================================================================== */

/* ANA KURAL: .smart-content, tüm metin ve LaTeX akışının ana taşıyıcısıdır.
   Satır yüksekliği gibi temel stiller burada tanımlanır.
*/
.smart-content {
    line-height: 2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* NİHAİ ÇÖZÜM: AKICI METİN MİMARİSİ
   Bu kurallar, birleştirilmiş metin ve formüllerin bir ders kitabı gibi
   doğal bir akış içinde, aynı satırda ve doğru dikey hizada görünmesini sağlar.
*/

/* Render motoru tarafından oluşturulan metin ve LaTeX parçalarını hedefler. */
.smart-content .text-part,
.smart-content .latex-part {
    display: inline-block;      /* Yan yana durmalarını sağlar */
    vertical-align: middle;     /* Metin ve formülü dikeyde ortalar */
    margin-right: 0.25em;       /* Parçalar arasına hafif boşluk ekler */
    line-height: 1;             /* Kendi iç satır yüksekliklerini sıfırlar */
}

/* MathJax tarafından render edilen formülün kendisinin de bu akışa uymasını garanti eder. */
.smart-content .MathJax,
.smart-content .MathJax_Display,
.smart-content mjx-container {
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: -0.7em !important;
}

/* Render type'larına göre ek kozmetik stiller (isteğe bağlı) */
.rendered-text {
    color: #1f2937;
}

.rendered-pure_latex {
    font-family: 'Computer Modern', 'Times New Roman', serif;
    text-align: center;
    margin: 0.5rem auto; /* Otomatik ortalama için */
    display: block; /* Tek başına duran LaTeX'in blok olmasını sağlar */
}

/* Priority render durumu */
.priority-rendered {
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
}

/* Render durumları (bekleme ve hata) */
.render-pending {
    position: relative;
    min-height: 1.5em;
    opacity: 0.5;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 2px 4px;
    display: inline-block;
}

.render-pending::after {
    content: "⏳";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
}



.render-error {
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.5rem;
    border-radius: 0.375rem;
    font-family: monospace;
    font-size: 0.875em;
    display: inline-block;
}

/* =================================================================== */
/* === 6. ÇOKTAN SEÇMELİ SEÇENEK STİLLERİ (İnteraktif Çözüm)        === */
/* =================================================================== */

.option-label {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-width: 2px;
    border-color: #e5e7eb; /* gray-200 */
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.option-label:hover {
    background-color: #f8fafc; /* slate-50 */
    border-color: #6366f1; /* indigo-500 */
}

.option-label:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.option-label:focus-visible {
    outline: none;
    border-color: #2563eb;
    background-color: #dbeafe;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
}

.option-letter {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    margin-right: 0.75rem;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.2s ease;
}

.option-label:hover .option-letter {
    background-color: #6366f1;
    color: white;
}

/* Seçim durumuna göre renkler */
.option-label.border-blue-500 { 
    border-color: #3b82f6 !important; 
    background-color: #eff6ff !important; 
}

.option-label.border-green-500 { 
    border-color: #10b981 !important; 
    background-color: #ecfdf5 !important; 
}

.option-label.border-red-500 { 
    border-color: #ef4444 !important; 
    background-color: #fef2f2 !important; 
}

.option-label.border-blue-500 .option-letter,
.option-label.border-green-500 .option-letter,
.option-label.border-red-500 .option-letter {
    color: white;
}

.option-label.border-blue-500 .option-letter { background-color: #3b82f6; }
.option-label.border-green-500 .option-letter { background-color: #10b981; }
.option-label.border-red-500 .option-letter { background-color: #ef4444; }

/* Seçeneklerin içeriği için özel düzenlemeler */
.option-content {
    min-width: 0; 
}

.option-text.smart-content {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #a5b4fc #e0e7ff;
    min-height: 1.5em;
    display: block;
    position: relative;
}

.option-text.smart-content::-webkit-scrollbar {
    height: 6px;
}

.option-text.smart-content::-webkit-scrollbar-thumb {
    background-color: #a5b4fc;
    border-radius: 3px;
}

.option-text.math-rendered {
    text-align: left;
}

/* =================================================================== */
/* === 7. İNTERAKTİF ÇÖZÜM ve AKILLI REHBER ORTAK STİLLERİ         === */
/* =================================================================== */

/* İlerleme Çubuğu */
.progress-fill {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
}

/* Deneme Hakkı Göstergesi */
.attempt-dots .bg-gray-200 {
    background-color: #e5e7eb !important;
}
.attempt-dots .bg-red-400 {
    background-color: #f87171 !important;
}

/* Geri Bildirim Mesajları (Doğru/Yanlış) */
.feedback-message {
    font-size: 0.875rem;
}

.feedback-close {
    cursor: pointer;
}

.feedback-close:hover {
    background-color: #f3f4f6;
}

/* Çözüm Tamamlandı Ekranı */
.interactive-completion, 
.completion-message {
    background-color: #ecfdf5;
    border: 1px solid #10b981;
}

.stat-card, 
.stat-item {
    background-color: #ffffff;
}

.stat-card:hover, 
.stat-item:hover {
    background-color: #f8fafc;
}



/* =================================================================== */
/* === 9. MATEMATİK SEMBOL PANELİ STİLLERİ                         === */
/* =================================================================== */

.math-symbol-panel {
    background-color: #f0f9ff;
    border: 1px solid #bae6fd;
}

/* Kategori Butonları */
        .category-btn {
            padding: 0.5rem 0.75rem;
            font-size: 0.8rem;
            font-weight: 500;
            background-color: #fff;
            color: #4b5563;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            cursor: pointer;
        }

.category-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.category-btn:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.category-btn:focus-visible {
    outline: none;
    border-color: #2563eb;
    background-color: #dbeafe;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
}

.category-btn.active {
    background-color: #8b5cf6;
    color: white;
    border-color: #7c3aed;
}

/* Sembol Butonları */
.symbol-btn, 
.quick-symbol-btn {
    padding: 0.75rem;
    font-size: 1.125rem;
    background-color: white;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.symbol-btn:hover, 
.quick-symbol-btn:hover {
    border-color: #3B82F6;
    background-color: #eff6ff;
}

.symbol-btn:active, 
.quick-symbol-btn:active {
    background-color: #dbeafe;
}

/* =================================================================== */
/* === 10. OKUNURLUK VE TAŞMA SORUNU ÇÖZÜMLERİ                    === */
/* =================================================================== */

/* Math container genel düzenlemesi */
.math-container {
    max-width: 100%;
    overflow-x: auto; /* YATAY KAYDIRMA ÇUBUĞUNU AKTİF EDER */
    overflow-y: hidden;
    padding: 0.5rem 0.2rem;
    -webkit-overflow-scrolling: touch; /* Mobil cihazlarda akıcı kaydırma */
    scrollbar-width: thin; /* Firefox için ince scrollbar */
    scrollbar-color: #a5b4fc #e0e7ff; /* Scrollbar renkleri */
}

/* Webkit tabanlı tarayıcılar için kaydırma çubuğu */
.math-container::-webkit-scrollbar {
    height: 8px;
}

.math-container::-webkit-scrollbar-track {
    background: #e0e7ff;
    border-radius: 4px;
}

.math-container::-webkit-scrollbar-thumb {
    background-color: #a5b4fc;
    border-radius: 4px;
    border: 2px solid #e0e7ff;
}

.math-container::-webkit-scrollbar-thumb:hover {
    background-color: #818cf8;
}

/* Açıklama metinlerinin daha iyi görünmesi için */
.step-description, 
.step-hint-content {
    color: #374151;
    font-size: 0.95rem;
}

/* Genel scrollbar stilleri */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #9CA3AF #E5E7EB;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #9CA3AF;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #6B7280;
}



/* Math focus durumu */
.math-focus .math-rendered {
    background-color: #fef9c3;
    border-radius: 5px;
    padding: 0 4px;
    border: 1px solid #fde047;
}

/* =================================================================== */
/* === 11. ACCESSIBILITY ve KEYBOARD NAVIGATION                      === */
/* =================================================================== */

/* Skip link - klavye kullanıcıları için */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #3b82f6;
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* High contrast mode desteği */
@media (prefers-contrast: high) {
    .btn:focus,
    .quantum-btn:focus,
    .symbol-btn:focus {
        outline: 3px solid #000000;
        outline-offset: 2px;
    }
    
    input:focus,
    textarea:focus {
        outline: 3px solid #000000;
        outline-offset: 2px;
    }
}


/* =================================================================== */
/* === 13. BASİT RENK PALETİ (Optimize Edildi) - KALDIRILD          === */
/* =================================================================== */

/* Bu :root bloğu yukarıdaki ana :root ile birleştirildi */

/* =================================================================== */
/* === VISUAL HIERARCHY GÜÇLENDİRMESİ                                === */
/* =================================================================== */

/* Basit tipografi - sadece gerekli olanlar */
.text-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
}

.text-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* =================================================================== */
/* === RENK UYGULAMALARI                                             === */
/* =================================================================== */

/* Header basit stil */
.header-glow {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Quantum button basit stil */
.quantum-btn {
    background: rgba(139, 92, 246, 0.15);
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.quantum-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
}

.quantum-btn-primary {
    background: var(--primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.quantum-btn-primary:hover {
    background: var(--primary-dark);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Chat bubble basit renkler */
.chat-bubble .bg-gray-100 {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #1f2937;
}

.chat-bubble .bg-green-100 {
    background: #ecfdf5;
    border: 1px solid #34d399;
    color: #065f46;
}

.chat-bubble .bg-red-100 {
    background: #fef2f2;
    border: 1px solid #f87171;
    color: #991b1b;
}

.chat-bubble .bg-indigo-100 {
    background: #eef2ff;
    border: 1px solid #818cf8;
    color: #3730a3;
}

/* Status message basit stil */
#status-message {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
}



/* =================================================================== */
/* === VISUAL CONTRAST OPTİMİZASYONU                                 === */
/* =================================================================== */

/* High contrast text combinations */
.text-on-dark {
    color: var(--neutral-50);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.text-on-light {
    color: var(--neutral-800);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Basit focus ring */
.focus-ring {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.4);
}

/* =================================================================== */
/* === RESPONSIVE COLOR ADAPTATION                                    === */
/* =================================================================== */

/* Basit responsive ayarlar */
@media (prefers-contrast: high) {
    .quantum-btn {
        border-width: 3px;
    }
    
    .chat-bubble {
        border-width: 2px;
    }
}

/* Basit responsive ayarlar - Birleştirildi */
@media (max-width: 768px) {
    /* Genel küçültmeler - daha kompakt */
    .btn {
        padding: var(--padding-sm) 0.8rem;
        font-size: var(--font-size-xs);
    }

    /* Fotoğraf butonları mobil optimizasyonu - Yukarıdan taşındı */
    .file-select-btn,
    .camera-btn {
        padding: 1rem 1.5rem;
        font-size: 0.875rem;
    }

    .file-select-btn .text-3xl,
    .camera-btn .text-3xl {
        font-size: 2rem;
    }

    .file-select-btn .text-lg,
    .camera-btn .text-lg {
        font-size: 1rem;
    }

    /* İnteraktif ve Rehber alanları - daha az padding */
    .interactive-solution-workspace,
    .smart-guide-workspace,
    .test-control-panel {
        padding: 0.75rem;
    }

    .option-label {
        padding: 0.6rem;
    }

    .option-letter {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    /* Tamamlandı ekranı */
    .stats-grid, 
    .performance-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* Problem özeti containerı ve top action butonları arasındaki mesafe - Mobilde */
    #question-summary-container {
        margin-bottom: 0.25rem !important; /* Daha az alt margin */
        padding-bottom: 0.25rem !important; /* Daha az alt padding */
        transform: translateZ(0); /* Hardware acceleration */
        will-change: opacity, transform; /* Mobile render optimization */
    }

    /* Action butonları daha yukarı taşı - Mobilde */
    #top-action-buttons {
        margin-top: -0.75rem !important; /* Negatif margin ile yukarı taşı */
        padding-top: 0.25rem !important; /* Daha az üst padding */
        transform: translateZ(0); /* Hardware acceleration */
        will-change: opacity, transform; /* Mobile render optimization */
    }
    
    /* Problem container ile action butonları arasındaki boşluğu azalt - Mobilde */
    #question-summary-container + #top-action-buttons {
        margin-top: 0.25rem !important;
    }
    
    /* Genel olarak action butonları yukarı taşı - Mobilde */
    .mt-6 {
        margin-top: 0.25rem !important; /* Tailwind mt-6'yı override et */
    }
    
    /* Sembol paneli - daha kompakt */
    .category-btn {
        padding: 0.3rem 0.4rem;
        font-size: 0.7rem;
    }

    /* Math container mobil optimizasyonu */
    .math-container {
        padding: 0.2rem 0.1rem;
    }

    /* Header daha kompakt */
    .header-content {
        padding: 0.75rem !important;
    }

    .header-content h1 {
        font-size: 1.3rem !important;
        margin-bottom: 0.25rem !important;
    }

    .header-content p {
        font-size: 0.85rem !important;
    }

    /* Form elementleri daha kompakt */
    .form-input {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Chat bubble'lar daha az yer kaplasın */
    .chat-bubble {
        margin-bottom: 0.5rem;
    }

    .chat-bubble .p-3 {
        padding: 0.5rem 0.7rem;
    }

    /* Sembol butonları küçült */
    .math-symbol-btn {
        min-width: 2.25rem;
        min-height: 2.25rem;
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }



 
    
    
    
    /* Akıllı rehber mobil optimizasyonu */
    .smart-guide-workspace .smart-content,
    .roadmap-content .smart-content {
        font-size: 0.85rem !important;
    }
    
    .roadmap-step-item {
        font-size: 0.8rem !important;
    }
    
    .roadmap-step-item .step-title {
        font-size: 0.9rem !important;
    }
    
    .roadmap-step-item .step-description {
        font-size: 0.75rem !important;
    }
}

/* MathJax SVG fix */
.math-rendered svg {
    max-width: 100% !important;
    height: auto !important;
}

/* =================================================================== */
/* === MATEMATİK RENDER STİLLERİ (Eksik olanlar)                    === */
/* =================================================================== */

/* Render edilen matematik için temel stiller */
.math-rendered {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 1em;
}

/* Render edilen metin için temel stiller */
.rendered-text {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 1em;
    line-height: 1.6;
    color: #1f2937;
}

/* Render edilen inline matematik için temel stiller */
.rendered-inline_math {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 1em;
    margin: 0 0.25em;
}

/* Render edilen mixed content için temel stiller */
.rendered-mixed_content {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 1em;
    line-height: 1.6;
}

/* Render edilen pure LaTeX için temel stiller */
.rendered-pure_latex {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: 0.9em;
    margin: 0.5rem auto;
    text-align: center;
}

/* MathJax container stilleri */
.mjx-container {
    display: inline-block !important;
    margin: 0 0.25em !important;
    vertical-align: baseline !important;
    font-size: 1em !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    line-height: 1.4 !important;
    min-height: 1.4em !important;
    padding: 0.1em 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent !important;
}

/* MathJax HTML stilleri */
.mjx-chtml {
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: baseline !important;
    font-size: 1em !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    line-height: 1.4 !important;
    min-height: 1.4em !important;
    padding: 0.1em 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent !important;
}

/* CHTML MathJax container düzeltmeleri - TEMEL ÇÖZÜM */
mjx-container {
    min-height: 2em !important;
    height: auto !important;
    padding: 0.2em 0 !important;
    overflow: visible !important;
    line-height: 1.4 !important;
}

mjx-math {
    min-height: 1.5em !important;
    height: auto !important;
    overflow: visible !important;
}

/* MathJax webkit scrollbar stilleri (Chrome, Safari, Edge) */
.mjx-container::-webkit-scrollbar,
.mjx-chtml::-webkit-scrollbar,
mjx-container::-webkit-scrollbar {
    height: 3px !important;
    width: 3px !important;
    background: transparent !important;
}

.mjx-container::-webkit-scrollbar-track,
.mjx-chtml::-webkit-scrollbar-track,
mjx-container::-webkit-scrollbar-track {
    background: transparent !important;
}

.mjx-container::-webkit-scrollbar-thumb,
.mjx-chtml::-webkit-scrollbar-thumb,
mjx-container::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4) !important;
    border-radius: 2px !important;
    transition: background-color 0.2s ease !important;
}

.mjx-container::-webkit-scrollbar-thumb:hover,
.mjx-chtml::-webkit-scrollbar-thumb:hover,
mjx-container::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7) !important;
}


/* MathJax Display stilleri (blok formüller için) */
.mjx-chtml[style*="display: block"] {
    display: block !important;
    margin: 0.5em auto !important;
    text-align: center !important;
}

/* MathJax SVG stilleri */
.mjx-svg {
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* MathJax konteynerler için kaydırma */
mjx-container[display="true"],
.mjx-container[display="true"],
mjx-container.MathJax,
.mjx-container.MathJax,
mjx-container,
.mjx-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: block !important;
    margin: 0.5rem 0 !important;
    padding: 0.25rem 0 !important;
}

/* Çözüm adımları içindeki MathJax konteynerler */
.solution-step mjx-container,
.solution-step .mjx-container,
.step-content mjx-container,
.step-content .mjx-container,
.math-container mjx-container,
.math-container .mjx-container,
.latex-content mjx-container,
.latex-content .mjx-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: block !important;
    white-space: nowrap !important;
}

/* SVG matematik ifadeleri için */
.solution-step svg,
.step-content svg,
.math-container svg,
.latex-content svg {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

/* =================================================================== */
/* === AKILLI REHBER YAZI BOYUTU DÜZELTMESİ                          === */
/* =================================================================== */

/* Akıllı rehber kısmındaki yazılar için boyut kontrolü */
.smart-guide-workspace .smart-content,
.roadmap-content .smart-content,
.step-description,
.step-hint-content {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
}

/* Roadmap adımları için yazı boyutu kontrolü */
.roadmap-step-item {
    font-size: 1rem !important;
}

.roadmap-step-item .step-title {
    font-size: 1.1rem !important;
    font-weight: 600;
}

.roadmap-step-item .step-description {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

/* İpucu alanları için yazı boyutu kontrolü */
.hint-preview-area {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}



.solution-step .step-content {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

/* SVG render hatası fallback */
.math-rendered svg[viewbox*="NaN"],
.math-rendered svg[viewBox*="NaN"],
.math-rendered svg[width*="NaN"],
.math-rendered svg[height*="NaN"],
.math-rendered svg[viewbox*="undefined"],
.math-rendered svg[viewBox*="undefined"],
.math-rendered svg[viewbox*="Infinity"],
.math-rendered svg[viewBox*="Infinity"] {
    display: none !important;
}

.math-rendered svg[viewbox*="NaN"] + *,
.math-rendered svg[viewBox*="NaN"] + *,
.math-rendered svg[width*="NaN"] + *,
.math-rendered svg[height*="NaN"] + * {
    display: inline !important;
}

/* SVG hata durumunda fallback metin stilleri */
.math-rendered.svg-fallback {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
    color: #92400e !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
    font-family: 'Courier New', monospace !important;
    font-size: 0.875rem !important;
    display: inline-block !important;
}

/* Render error durumunda */
.render-error {
    display: inline-block !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #fecaca !important;
    font-family: monospace !important;
}

/* =================================================================== */
/* === GENEL MATEMATİK RENDER STİLLERİ                               === */
/* =================================================================== */

/* Tüm matematik render elementleri için genel stil */
.math-rendered,
.mjx-container,
.mjx-chtml,
.mjx-svg,
.MathJax,
.MathJax_Display {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    font-size: 0.9em !important;
}

/* Inline matematik için */
.math-rendered.inline,
.mjx-container[data-math-type="inline"] {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin: 0 0.25em !important;
}

/* Blok matematik için */
.math-rendered.block,
.mjx-container[data-math-type="block"],
.MathJax_Display {
    display: block !important;
    margin: 0.5em auto !important;
    text-align: center !important;
}

/* Matematik container'ları için */
.math-container {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.5rem 0;
}

/* Matematik scrollbar stilleri */
.math-container::-webkit-scrollbar {
    height: 6px;
}

.math-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.math-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}

.math-container::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* =================================================================================
   ✅ KARIŞIK İÇERİK (METİN + LATEX) GÖSTERİM DÜZELTMESİ
   =================================================================================
   Bu kurallar, renderMixedContent tarafından oluşturulan metin ve LaTeX 
   parçalarının her zaman yan yana ve aynı hizada durmasını sağlar.
   Türkçe karakter desteği ve SVG hata yakalama sistemi dahil.
*/

.mixed-content-container {
    display: flex; /* Flexbox ile hizalama en garantili yöntemdir */
    flex-wrap: wrap; /* İçerik sığmazsa alt satıra geçmesini sağlar */
    align-items: baseline; /* Metin ve formüllerin taban çizgilerini hizalar, en doğal görünümü verir */
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/*
  Metin parçalarını ve LaTeX parçalarını içeren span'ları hedefler.
  display: inline-block -> Yan yana durmalarını sağlar.
  vertical-align: middle -> Metin ve formülün dikeyde ortalanmasını sağlar.
*/
.mixed-content-container .text-part,
.mixed-content-container .latex-part {
    display: inline-block; /* Flex item'ı olarak davranmaları için */
    margin-right: 0.25em; /* Parçalar arasına boşluk ekler (Örn: 'log' ve 'ifadesini' arası) */
    white-space: normal; /* Metnin alt satıra geçebilmesi için */
}
.mixed-content-container .text-part {
    font-style: normal !important;
}

/* LaTeX parçasının içindeki MathJax elementlerinin flexbox akışını bozmamasını sağlar */
.mixed-content-container .latex-part .mjx-container {
    vertical-align: baseline; /* Hizalamayı garantiler */
}
/* Text parçalarının italik olmaması için */
.mixed-content-container .text-part,
.step-combined-content .text-part,
.smart-content .text-part {
    font-style: normal !important;
    font-weight: normal !important;
    font-family: inherit !important; /* Sistem fontunu kullan */
    letter-spacing: 0.02em; /* Hafif karakter aralığı */
    word-spacing: 0.1em; /* Kelimeler arası boşluk */
    white-space: normal; /* Normal metin akışı */
    line-height: 1.4; /* Satır yüksekliği */
    display: inline !important; /* MathJax ile doğru hizalama */
}

/*
  MathJax tarafından render edilen formülün kendisinin de
  bazen alt satıra geçmesini engellemek için ek bir güvenlik katmanı.
*/
.latex-part .mjx-chtml {
    display: inline-block !important;
    vertical-align: text-top !important;
    max-width: 100% !important;
}







.step-combined-content .text-part,
.step-combined-content .latex-part {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 4px !important;
}

/* MathJax render edilen elementler için */
.step-combined-content .MathJax,
.step-combined-content .MathJax_Display {
    display: inline-block !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

.step-combined-content mjx-container {
    display: inline-block !important;
    margin: 0 4px !important;
    vertical-align: baseline !important;
}

/* =================================================================================
   📐 MATEMATİKSEL SEMBOLLER BUTONLARI
   =================================================================================
   Klavye giriş modunda lise düzeyinde matematiksel semboller için
   buton stilleri
 */

/* Symbol scroll container - Tek satırda kaydırılabilir */
.symbol-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

/* Metin modu butonları - Tutarlı boyut ve hizalama */
/* Buton stilleri artık HTML'de inline tanımlı */

/* Mobil cihazlarda buton boyutları - artık HTML'de inline tanımlı */

.symbol-scroll-wrapper {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.5rem;
    min-width: max-content;
}

.symbol-btn {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.symbol-btn:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.symbol-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

/* Scroll bar styling */
.symbol-scroll-container::-webkit-scrollbar {
    height: 4px;
}

.symbol-scroll-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

.symbol-scroll-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.symbol-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Scroll container */
.math-symbol-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: #a5b4fc #e0e7ff;
}

.math-symbol-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.math-symbol-scroll-container::-webkit-scrollbar-track {
    background: #e0e7ff;
    border-radius: 3px;
}

.math-symbol-scroll-container::-webkit-scrollbar-thumb {
    background-color: #a5b4fc;
    border-radius: 3px;
    border: 1px solid #e0e7ff;
}

.math-symbol-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #818cf8;
}

/* Sembol satırı */
.math-symbol-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    min-width: max-content;
}

.math-symbol-btn {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #374151;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.math-symbol-btn:hover {
    background-color: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

.math-symbol-btn:active {
    background-color: #bfdbfe;
}

.math-symbol-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
}

.math-symbol-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5);
}



/* =================================================================== */
/* === MOBİL VIEWPORT VE KLAVYE OPTİMİZASYONU                      === */
/* =================================================================== */

/* Mobil cihazlarda viewport yönetimi */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari için */
    body {
        height: 100vh;
        height: -webkit-fill-available;
    }
    
    html {
        height: -webkit-fill-available;
    }
}

/* Dinamik viewport yüksekliği desteği */
:root {
    --vh: 1vh;
    --dynamic-vh: 100vh;
}

/* Chat window mobil optimizasyonu */
@media (max-width: 768px) {
    #chat-window {
        height: var(--dynamic-vh) !important;
        max-height: var(--dynamic-vh) !important;
        min-height: 300px !important;
        position: relative !important;
    }
    
    /* Chat feed mobil klavye desteği */
    #chat-feed {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1rem !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Input container klavye uyumluluğu */
    #mentor-input-container {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        background: white !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Textarea klavye desteği */
    #mentor-student-input {
        resize: none !important;
        min-height: 44px !important;
        max-height: 120px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Sembol paneli mobil optimizasyonu */
    #workspace-symbols-panel {
        max-height: 100px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.75rem !important;
    }
    
    /* Klavye açıkken ekstra ayarlamalar */
    body.keyboard-open #chat-window {
        height: calc(var(--dynamic-vh) - env(keyboard-inset-height, 0px)) !important;
    }
    
    /* Viewport değişikliklerinde smooth transition - mobil keyboard için gerekli */
}

@media (max-width: 768px) {
    /* Genel mobil optimizasyonu - daha kompakt */
    .container {
        padding: 0.5rem !important;
    }
    
    /* Header mobil optimizasyonu - daha az yer kaplar */
    .header-content h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    .header-content p {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Form mobil optimizasyonu - kompakt */
    .form-group {
        margin-bottom: 0.75rem !important;
    }
    
    .form-group label {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 0.85rem !important;
        padding: 0.6rem !important;
    }
    
    /* Buton mobil optimizasyonu - daha küçük */
    .btn {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.8rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Sonuç mobil optimizasyonu - kompakt */
    .result-container {
        padding: 0.75rem !important;
        margin: 0.5rem !important;
    }
    
    .result-container h2 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .result-container p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    /* Akıllı rehber mobil optimizasyonu - daha küçük fontlar */
    .smart-guide-workspace .smart-content,
    .roadmap-content .smart-content {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .roadmap-step-item {
        font-size: 0.8rem !important;
        padding: 0.6rem !important;
    }
    
    .roadmap-step-item .step-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .roadmap-step-item .step-description {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    /* Footer ve navigation için ekstra güvenlik */
    .footer, 
    .bottom-navigation,
    .fixed-bottom {
        margin-bottom: env(safe-area-inset-bottom, 40px) !important;
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
    }

    /* İçerik alanlarına alt boşluk ekle */
    .main-content,
    .page-content {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 40px)) !important;
    }

    /* Safe area bottom için özel stil */
    .safe-area-bottom {
        background: #ffffff;
        width: 100%;
        position: relative;
        z-index: 1;
        /* Ekstra güvenlik için minimum yükseklik */
        min-height: 60px;
    }

    /* Butonların safe area içinde kalması için */
    .btn,
    .quantum-btn,
    .duolingo-btn,
    .file-select-btn,
    .camera-btn {
        margin-bottom: env(safe-area-inset-bottom, 20px);
    }

    /* Alt kısımdaki butonlar için ekstra safe area */
    #startFromPhotoBtn,
    #startFromTextBtn,
    #switchToCanvasBtn,
    #start-solving-workspace-btn,
    #solve-all-btn,
    #mukogame-btn,
    #show-full-solution-btn,
    #new-question-btn {
        margin-bottom: calc(env(safe-area-inset-bottom, 10px) + 10px) !important;
    }

    /* Ana içerik alanının safe area ile uyumlu olması */
    #main-content {
        padding-bottom: env(safe-area-inset-bottom, 40px);
    }

    /* Premium badge'ların mobilde taşmasını önle */
    .premium-badge,
    .basic-badge {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
        top: -3px !important;
        right: -3px !important;
    }

    /* Action butonlarının overflow'unu visible yap */
    #start-solving-workspace-btn,
    #solve-all-btn,
    #mukogame-btn {
        overflow: visible !important;
        position: relative !important;
    }
}

/* =================================================================
   Render Sistemi Okunabilirlik Düzeltmeleri
   ================================================================= */

/* 1. Ana çözüm adımı kartının yüksekliğini esnek yap */
.solution-step {
    height: auto; /* Sabit yüksekliği kaldırır, içeriğe göre uzamasını sağlar */
    min-height: 80px; /* Çok kısa içerikler için minimum bir yükseklik belirler */
    display: flex;
    flex-direction: column;
    overflow-x: auto; /* Yatay kaydırma */
    overflow-y: visible; /* Dikey taşmaya izin ver */
}

/* 2. Adım açıklaması metninin alt satıra kaymasını garantile */
.step-description {
    white-space: normal;  /* Metnin alt satıra geçmesini sağlar */
    word-break: break-word; /* Çok uzun kelimelerin kırılmasını sağlar */
    line-height: 1.6;     /* Satır aralığını artırarak okunabilirliği iyileştirir */
}

/* Özel kaydırma çubuğu stilleri - modern ve ince tasarım - sadece yatay */
.solution-step .step-content::-webkit-scrollbar {
    height: 4px;
    width: 0px; /* Dikey kaydırma çubuğunu gizle */
}

.solution-step .step-content::-webkit-scrollbar-track {
    background: transparent;
}

.solution-step .step-content::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.solution-step .step-content::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* Firefox için kaydırma çubuğu stilleri - sadece yatay */
.solution-step .step-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
}

.solution-step::-webkit-scrollbar {
    height: 4px;
    width: 0px;
}

.solution-step::-webkit-scrollbar-track {
    background: transparent;
}

.solution-step::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.solution-step::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* İnteraktif çözüm alanları için aynı stil */
.interactive-solution-workspace .step-content::-webkit-scrollbar,
.interactive-completion .step-content::-webkit-scrollbar,
.completion-message .step-content::-webkit-scrollbar {
    width: 4px;
}

.interactive-solution-workspace .step-content::-webkit-scrollbar-track,
.interactive-completion .step-content::-webkit-scrollbar-track,
.completion-message .step-content::-webkit-scrollbar-track {
    background: transparent;
}

.interactive-solution-workspace .step-content::-webkit-scrollbar-thumb,
.interactive-completion .step-content::-webkit-scrollbar-thumb,
.completion-message .step-content::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.interactive-solution-workspace .step-content::-webkit-scrollbar-thumb:hover,
.interactive-completion .step-content::-webkit-scrollbar-thumb:hover,
.completion-message .step-content::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}


/* =================================================================== */
/* === HORIZONTAL TIMELINE FOR INTERACTIVE SOLUTION                === */
/* =================================================================== */

.timeline-container {
    max-width: 100%;
    margin: 0 auto;
}

.completed-steps-timeline {
    min-height: 40px;
    padding: 8px 0;
}

.timeline-step-item {
    display: inline-flex;
    align-items: center;
}

.timeline-step-box {
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.timeline-step-box:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.timeline-arrow {
    font-size: 18px;
    font-weight: bold;
    animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Current Step Styling */
.current-step-section {
    margin-top: 16px;
}

.current-step-header {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#current-step-title {
    margin-bottom: 8px;
}

#current-step-description {
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 640px) {
    /* Çok küçük ekranlarda daha da kompakt */
    #question-summary-container {
        margin-bottom: 0.125rem !important;
        padding-bottom: 0.125rem !important;
    }
    
    /* Çok küçük ekranlarda MUKO header daha da kompakt */
    .mobile-chat-container .mentor-header-container {
        gap: 0.25rem !important; /* Daha az boşluk */
        padding: 0.5rem !important; /* Daha az padding */
    }
    
    /* Ana menüye dön butonu - çok küçük ekranlarda */
    #mentor-back-btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.7rem !important; /* Daha küçük buton metni */
        margin-bottom: 0.25rem !important;
        order: 1 !important; /* Üstte */
    }
    
    /* Problem Çözümü başlığı - çok küçük ekranlarda */
    #mentor-header-title {
        font-size: 0.8rem !important; /* Daha küçük başlık */
        margin-bottom: 0 !important;
        order: 2 !important; /* Altta */
    }
    
    #top-action-buttons {
        margin-top: -1rem !important; /* Daha da yukarı taşı */
        padding-top: 0.125rem !important;
    }
    
    .mt-6 {
        margin-top: 0.125rem !important;
    }
    
    /* Çok küçük ekranlarda daha fazla safe area padding */
    .fullscreen-container {
        padding-bottom: max(env(safe-area-inset-bottom), 16px) !important; /* Daha fazla padding */
    }
    
    /* Premium sayfası küçük ekran ayarları */
    .fullscreen-container nav {
        padding-top: max(env(safe-area-inset-top), 16px) !important; /* Küçük ekranlarda daha fazla üst padding */
    }
    
    .fullscreen-container nav .flex {
        min-height: 3rem !important; /* Küçük ekranlarda 48px navigation */
    }
    
    .fullscreen-container #premium-container {
        padding-top: 7rem !important; /* Küçük ekranlarda daha fazla üst padding */
    }
    
    .completed-steps-timeline {
        flex-direction: column;
        gap: 8px;
    }
    
    .timeline-step-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }
    
    .timeline-arrow {
        rotate: 90deg;
        margin: 4px 0;
    }
    
    .timeline-step-box {
        width: 100%;
        justify-content: flex-start;
    }
}


/* =================================================================== */
/* === AKILLI MENTÖR MOBİL OPTİMİZASYONU (YENİ EKLENEN BÖLÜM)      === */
/* =================================================================== */

@media (max-width: 768px) {

    /* Ana sohbet penceresini tam ekran yap ve taşmaları önle */
    #chat-window {
        height: var(--dynamic-vh, 100vh); /* JS ile hesaplanan dinamik ekran yüksekliği */
        max-height: var(--dynamic-vh, 100vh);
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    /* Mesaj akış alanının (feed) iç boşluklarını azalt */
    #chat-feed {
        padding: 1rem 0.75rem; /* Üst/alt ve yan boşlukları azalt */
        padding-bottom: 8rem !important; /* Input alanının altında kalmaması için */
    }

    /* Mesaj baloncuğu genel stili */
    .chat-bubble .p-3 {
        padding: 0.6rem 0.8rem; /* İç boşlukları azalt */
    }

    /* Yapay zeka avatar boyutunu küçült */
    .chat-bubble .w-8.h-8 {
        width: 1.75rem; /* 28px */
        height: 1.75rem; /* 28px */
    }

    /* Kullanıcı avatar boyutunu küçült */
    .chat-bubble img.w-8.h-8, .chat-bubble div.w-8.h-8 {
        width: 1.75rem; /* 28px */
        height: 1.75rem; /* 28px */
    }
    
    /* Mesaj metinlerinin font boyutunu küçült */
    .chat-bubble .text-base {
        font-size: 0.9rem; /* 14.4px */
        line-height: 1.5;
    }

    /* Mesaj başlıklarının (Harika!, Tekrar Deneyelim vb.) boyutunu ayarla */
    .chat-bubble .text-sm {
        font-size: 0.8rem; /* 12.8px */
    }

    /* Mentor başlık alanını daha kompakt yap */
    #mentor-header-title {
        font-size: 1rem; /* 16px */
    }
    
    /* Ana menüye dön butonunu küçült */
    #mentor-back-btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important; /* 12px */
    }

/* Masaüstü görünümü için MUKO header düzenlemesi */
@media (min-width: 769px) {
    .mentor-header-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    #mentor-back-btn {
        width: 100% !important;
        justify-content: center !important;
        order: 1 !important;
        margin-bottom: 0.5rem !important;
    }
    
    #mentor-header-title {
        text-align: center !important;
        order: 2 !important;
        margin-bottom: 0 !important;
    }
}

    /* MUKO çöz modunda header düzenlemesi - yeni düzen */
    .mobile-chat-container .mentor-header-container {
        display: flex !important;
        flex-direction: column !important; /* Dikey sıralama */
        gap: 0.5rem !important; /* Elementler arası boşluk */
        align-items: stretch !important; /* Tam genişlik */
    }
    
    /* Ana menüye dön butonu - üstte */
    #mentor-back-btn {
        width: 100% !important; /* Tam genişlik */
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
        order: 1 !important; /* Üstte */
    }
    
    /* Problem Çözümü başlığı - altta */
    #mentor-header-title {
        text-align: center !important;
        font-size: 0.9rem !important; /* Daha küçük başlık */
        line-height: 1.2 !important;
        order: 2 !important; /* Altta */
        margin-bottom: 0 !important;
    }

    /* Metin giriş alanını (textarea) daha kompakt yap */
    #mentor-student-input {
        font-size: 0.95rem; /* 15.2px */
        min-height: 40px !important;
        max-height: 100px !important; /* Daha az yer kaplasın */
        padding: 0.6rem !important;
    }

    /* Gönder butonunu ve ikonunu ayarla */
    #mentor-submit-btn {
        padding: 0.5rem !important;
    }

    #mentor-submit-btn svg {
        width: 1.1rem;
        height: 1.1rem;
    }
}

/* =================================================================== */
/* === FALLBACK MATEMATİK STİLLERİ                               === */
/* =================================================================== */

/* Ham LaTeX gösterilme durumunda fallback stilleri */
.fallback-math {
    font-family: 'Times New Roman', serif;
    font-size: 1.1em;
    color: #374151;
    background-color: #f9fafb;
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 3px solid #3b82f6;
    display: inline-block;
    margin: 2px 0;
}

.fallback-math.advanced {
    font-weight: 500;
    background-color: #eff6ff;
    border-left-color: #2563eb;
}

.render-fallback-unicode {
    border-left: 3px solid #10b981;
}

.render-fallback-simplified {
    border-left: 3px solid #f59e0b;
}

/* Render döngüsü fallback uyarısı */
.render-loop-fallback {
    background-color: #fef2f2;
    border-left: 3px solid #ef4444;
    color: #dc2626;
    font-style: italic;
}

/* =================================================================== */
/* ===     PROGRESSIVE RENDER ENGINE - SKELETON LOADING STYLES    === */
/* =================================================================== */

/* Skeleton loading animation */
.skeleton-loading {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton loading overlay */
.skeleton-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: skeleton-slide 1.5s infinite;
}

@keyframes skeleton-slide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Render success animation */
.render-success {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Render failed state */
.render-failed {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

.render-failed::before {
    content: '⚠️ ';
    font-size: 1.2em;
    margin-right: 0.5em;
}

/* Render fallback state */
.render-fallback {
    border-left: 4px solid #f59e0b !important;
    background: #fffbeb !important;
}

/* Fallback text styling */
.fallback-text {
    font-family: 'Courier New', Consolas, monospace;
    background: #fff3cd;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    border: 1px dashed #fbbf24;
    font-size: 0.95em;
    color: #92400e;
}

/* Progress bar animations */
#progressive-render-header {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Progress bar fill animation */
#progress-bar-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Spinner animation for progress indicator */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Step container spacing */
#progressive-steps-container {
    min-height: 200px;
}

/* Smooth removal animation for progress card */
.fade-out-up {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
}

/* Mobile optimizations for progressive render */
@media (max-width: 640px) {
    .skeleton-loading::after {
        animation-duration: 2s;
    }

    .render-success {
        animation-duration: 0.3s;
    }

    #progressive-render-header {
        padding: 0.75rem;
    }

    #render-progress-card {
        padding: 0.75rem !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .skeleton-loading {
        background: linear-gradient(90deg, #e0e0e0 25%, #c0c0c0 50%, #e0e0e0 75%);
    }

    .fallback-text {
        border-width: 2px;
        border-style: solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton-loading,
    .skeleton-loading::after,
    .render-success,
    #progressive-render-header,
    #progress-bar-fill {
        animation: none !important;
        transition: none !important;
    }
}

/* Cache buster - 25 Eyl 2025 Per 11:00:25 - Progressive Engine v1.0 */