/* ==========================================================================
   1. TEMEL DEĞİŞKENLER VE FONT TANIMLAMALARI
   ========================================================================== */
@font-face {
    font-family: 'Arakom';
    src: url('fonts/Arakom.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}
:root {
    --primary: #3498db; --primary-dark: #2980b9;
    --secondary: #10b981; --secondary-dark: #059669;
    --dark: #1a202c; --dark-surface: #2d3748;
    --light: #f7fafc; --gray: #718096;
    --border: rgba(255, 255, 255, 0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   2. ANA SAYFA DÜZENİ VE GENEL YAPI
   ========================================================================== */
body {
    font-family: 'Inter', sans-serif; background: #121212; color: #ffffff;
    width: 100%; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
}
.top-bar {
    background: #1e1e1e; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 100;
}
.main-content { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.bottom-nav {
    background: rgba(30, 30, 30, 0.98); display: flex; justify-content: space-around; 
    padding: 8px 0; border-top: 1px solid var(--border); flex-shrink: 0; z-index: 100;
}
.app-footer { background: #151515; padding: 6px 15px; text-align: center; font-size: 0.7rem; color: #a0aec0; flex-shrink: 0; z-index: 100; }
.view-section { display: none; padding: 15px; flex: 1; flex-direction: column; animation: fadeIn 0.3s ease; }
.view-section.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   3. MENÜLER, BUTONLAR VE İSTATİSTİKLER (DASHBOARD)
   ========================================================================== */
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.logo i { color: var(--secondary); font-size: 1.3rem; }
.welcome-text { display: none; margin-left: 15px; padding-left: 15px; border-left: 1px solid rgba(255,255,255,0.2); font-size: 0.8rem; color: #94a3b8; font-weight:400; }
.user-menu { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; background: rgba(255,255,255,0.05); padding: 6px 12px; border-radius: 20px; cursor: pointer; }
.nav-btn { background: transparent; color: white; border: none; cursor: pointer; }
.dashboard-header { margin-bottom: 20px; flex-shrink: 0;}
.dashboard-header h2 { font-size: 1.5rem; margin-bottom: 5px; color: #fff; }
.dashboard-header p { color: #a0aec0; font-size: 0.9rem; }

.compact-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; margin-top: 5px; }
.stat-card { background: var(--dark-surface); padding: 12px 10px; border-radius: 16px; border: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.stat-icon-wrapper { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.learned-icon { background: rgba(16, 185, 129, 0.2); color: var(--secondary); }
.fav-icon { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.stat-content { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.stat-title { color: #a0aec0; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.stat-main-val { font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 4px; }
.stat-details { font-size: 0.6rem; color: #718096; display: flex; flex-direction: column; gap: 1px; }
.stat-details strong { color: #e2e8f0; }

.section-title { font-size: 1.1rem; margin-bottom: 15px; font-weight: 600; color: #e2e8f0; flex-shrink: 0;}
.module-cards { display: flex; flex-direction: column; gap: 15px; flex-shrink: 0;}
.module-card { background: var(--dark-surface); border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 15px; cursor: pointer; border: 1px solid var(--border); transition: transform 0.2s; }
.module-card:hover { transform: translateY(-2px); }
.module-icon { width: 45px; height: 45px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; }
.primary-module .module-icon { background: rgba(52, 152, 219, 0.2); color: var(--primary); }
.secondary-module .module-icon { background: rgba(16, 185, 129, 0.2); color: var(--secondary); }
.module-text h4 { font-size: 1rem; margin-bottom: 4px; color: #fff; }
.module-text p { font-size: 0.8rem; color: #a0aec0; line-height: 1.4; }

.advanced-filters { background: var(--dark-surface); border-radius: 15px; padding: 15px; margin-top: -5px; border: 1px solid var(--border); border-top: none; }
.custom-select { flex: 1; padding: 10px; background: rgba(0,0,0,0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; font-size: 0.9rem; outline: none; }
.custom-select option { background: #2d3748; color: #fff; }
.checkbox-group label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.85rem;}
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
.pedagogical-note { background: rgba(52, 152, 219, 0.1); border-left: 3px solid var(--primary); padding: 12px 15px 12px 12px; margin-bottom: 15px; font-size: 0.8rem; color: #cbd5e1; line-height: 1.5; border-radius: 0 10px 10px 0; position: relative; padding-right: 35px; }
.secondary-note { background: rgba(16, 185, 129, 0.1); border-left-color: var(--secondary); }
.close-note { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: inherit; font-size: 1.3rem; cursor: pointer; opacity: 0.6; }

.nav-item { background: none; border: none; color: #718096; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-size: 0.75rem; font-weight: 500; flex: 1; }
.nav-item i { font-size: 1.2rem; margin-bottom: 2px; }
.nav-item.active { color: var(--secondary); }

/* ==========================================================================
   4. KELİME KARTLARI (KUSURSUZ MERKEZLEME VE Z-INDEX ÇÖZÜMÜ)
   ========================================================================== */
.learning-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
.back-btn, .settings-btn { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 15px; border-radius: 12px; cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.learning-stats { font-weight: 700; font-size:0.9rem; color: #fff; background: rgba(0,0,0,0.3); padding: 5px 12px; border-radius: 20px;}
.active-filter-display { font-size: 0.75rem; color: #e2e8f0; background: rgba(0, 0, 0, 0.3); padding: 6px 12px; border-radius: 20px; text-align: center; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }

.card-wrapper { flex: 1; min-height: 0; width: 100%; display: flex; align-items: stretch; justify-content: center; }
.card-container { width: 96%; max-width: 1000px; height: 100%; cursor: pointer; position: relative; perspective: 2000px; z-index: 10; }
.flashcard { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.flashcard.flipped { transform: rotateY(180deg); }

.card-front, .card-back {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 24px; padding: 60px 20px 20px 20px !important; 
    display: flex; flex-direction: column; justify-content: flex-start !important; align-items: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.4);
    border: 1px solid rgba(255, 255, 255, 0.2); overflow-y: auto !important; 
}
.card-front { background: linear-gradient(135deg, #fdf6e3 0%, #e4d5b7 100%); transform: rotateY(0deg); }
.card-back { background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%); transform: rotateY(180deg); color: #fff; }

.card-header { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; z-index: 5;}
.card-number, .card-category { padding: 5px 12px; border-radius: 20px; font-weight: 700; font-size: 0.7rem; }
.card-front .card-number { background: #4a5568; color: white; }
.card-front .card-category { background: #a0aec0; color: #1a202c; }
.card-back .card-number, .card-back .card-category { background: rgba(255,255,255,0.2); color: white; }

.card-content-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 100%; margin: auto 0; z-index: 2; }
.card-word { font-family: 'Arakom', 'Amiri', sans-serif; font-size: 3.5rem; text-align: center; color: #1a202c; direction: rtl; line-height: 1.3; margin: 0 0 10px 0 !important; }
.card-meaning { font-size: 1.8rem; font-weight: 700; text-align: center; color: white; margin: 0 !important;}
.card-example { font-size:1.1rem; border:none; padding:0; margin-top:5px; color:#4a5568; text-align:center;}

#showAyetBtn { 
    margin: 20px auto 10px auto !important; padding: 10px 20px !important;
    align-items: center; justify-content: center; gap: 8px;
    background: rgba(52, 152, 219, 0.15) !important; border: 1px solid var(--primary) !important;
    color: var(--primary) !important; border-radius: 12px !important; font-size: 0.95rem !important;
    font-weight: 600; flex-shrink: 0; cursor: pointer;
}

.card-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 15px; flex-shrink: 0; position: relative; z-index: 100 !important; pointer-events: auto !important; }
.card-controls .nav-btn, .card-controls .icon-btn { background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.1); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.card-controls .nav-btn:hover, .card-controls .icon-btn:hover { background: var(--primary); }
.icon-btn.active-fav { color: #ff4757; border-color: #ff4757; background: rgba(255, 71, 87, 0.15); }
.icon-btn.active-learned { color: #10b981; border-color: #10b981; background: rgba(16, 185, 129, 0.15); }

/* ==========================================================================
   5. SÖZLÜK, MODALLAR VE AYARLAR
   ========================================================================== */
.dictionary-header { margin-bottom: 20px; position: sticky; top: 0; background: #121212; z-index: 10; padding-bottom: 10px; }
.search-box { display: flex; align-items: center; background: var(--dark-surface); border-radius: 12px; padding: 10px 15px; border: 1px solid var(--border); }
.search-box input { flex: 1; background: none; border: none; color: #fff; font-size: 1rem; outline: none; margin-left: 10px;}

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 2000; backdrop-filter: blur(5px); display: none; }
.auth-modal-content, .settings-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1a202c; 
    width: 90%; max-width: 420px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1); 
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.7); z-index: 2001; overflow: hidden; display: flex; flex-direction: column; color: #f7fafc;
}
.settings-header { padding: 18px 24px; background: rgba(0,0,0,0.25); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.settings-header h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; display: flex; align-items: center; gap: 10px; }
.close-settings { background: rgba(255,255,255,0.1); border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; color: #a0aec0; cursor: pointer; transition: all 0.2s; }
.settings-body { padding: 24px; max-height: 70vh; overflow-y: auto; }
.setting-box { background: rgba(0,0,0,0.15); padding: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.03); }
.setting-item { margin-bottom: 18px; }
.setting-item label { display: block; font-size: 0.85rem; font-weight: 600; color: #cbd5e1; margin-bottom: 8px; }
.setting-item input[type="range"] { width: 100%; accent-color: var(--primary); height: 5px; background: rgba(255,255,255,0.1); outline: none; }
.setting-value { font-size: 0.85rem; color: var(--primary); text-align: right; font-weight: 700; margin-top: 5px; }
.ayet-body { text-align: center; padding: 30px 24px; }
.modal-arabic-text { font-family: 'Arakom', 'Amiri', sans-serif; color: #fff; direction: rtl; line-height: 1.6; }
.modal-turkish-text { color: #94a3b8; line-height: 1.6; font-size: 1rem; }

.dictionary-results { display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px; }
.dict-result-item { background: var(--dark-surface); padding: 15px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); cursor: pointer; position: relative; }
.dict-item-ar { font-family: 'Arakom', 'Amiri', sans-serif; font-size: 2.2rem; color: #fff; text-align: right; margin-bottom: 8px; direction: rtl; }
.dict-item-tr { font-size: 0.95rem; color: #cbd5e1; line-height: 1.4; padding-right: 10px; }
.dict-item-tag { position: absolute; top: 12px; left: 12px; background: rgba(52, 152, 219, 0.15); color: var(--primary); font-size: 0.65rem; padding: 4px 10px; border-radius: 12px; font-weight: 700; }
.advanced-tag { background: rgba(16, 185, 129, 0.15); color: var(--secondary); }

.segment-control { display: flex; flex-direction: column; gap: 10px; }
.segment-label { position: relative; display: block; cursor: pointer; }
.segment-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.segment-content { padding: 14px 18px; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 14px; color: #94a3b8; font-size: 0.9rem; }
.segment-label input:checked ~ .segment-content { background: rgba(52, 152, 219, 0.15); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ==========================================================================
   6. SINAV (QUIZ) MODÜLÜ TASARIMLARI
   ========================================================================== */
.quiz-setup-scroll-area { flex: 1; overflow-y: auto; padding-right: 5px; margin-bottom: 10px; }
.quiz-setup-scroll-area::-webkit-scrollbar { width: 5px; }
.quiz-setup-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 5px; }
.quiz-setup-bottom { position: sticky; bottom: -15px; background: #121212; padding: 15px 0; z-index: 100; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 10px; }
.quiz-section-title { font-size: 0.75rem; font-weight: 700; color: #94a3b8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }

.quiz-option-group { display: grid; gap: 8px; margin-bottom: 18px; width: 100%; }
.quiz-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.quiz-option { cursor: pointer; display: block; position: relative; }
.quiz-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz-option .option-box { background: var(--dark-surface); border: 2px solid rgba(255,255,255,0.05); padding: 10px 5px; border-radius: 12px; text-align: center; transition: all 0.2s; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.quiz-option input:checked + .option-box { border-color: var(--primary); background: rgba(52, 152, 219, 0.15); }
.quiz-option .opt-title { font-weight: 700; color: #fff; font-size: 0.8rem; margin-bottom: 2px; }
.quiz-option .opt-desc { font-size: 0.65rem; color: #94a3b8; }
.quiz-input-number { width: 100%; padding: 10px; background: var(--dark-surface); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; font-size: 1.1rem; font-weight: 700; text-align: center; outline: none; }

/* Yenilenen ve Renklendirilen Navigatör Çemberleri */
.quiz-navigator { display: flex; gap: 8px; overflow-x: auto; padding: 5px 0 10px 0; margin-bottom: 10px; scrollbar-width: none; z-index: 10;}
.quiz-navigator::-webkit-scrollbar { display: none; }
.nav-circle { 
    min-width: 35px; height: 35px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); 
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; 
    color: #718096; cursor: pointer; flex-shrink: 0; background: rgba(0,0,0,0.2); transition: all 0.2s; 
}
.nav-circle.active { border-color: var(--primary); color: #fff; background: var(--primary); transform: scale(1.15); box-shadow: 0 0 10px rgba(52, 152, 219, 0.4); z-index: 2; }
.nav-circle.answered { border-color: #64748b; background: #475569; color: #fff; } /* Boş değil, cevaplanmış */
.nav-circle.correct { border-color: #10b981; background: #10b981; color: #fff; } /* Doğru */
.nav-circle.wrong { border-color: #ef4444; background: #ef4444; color: #fff; } /* Yanlış */

/* Sınav İçerik Alanı */
.quiz-question-container { background: var(--dark-surface); border-radius: 20px; padding: 25px 15px; border: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; overflow-y: auto; }
.quiz-question-word { font-family: 'Arakom', 'Amiri', sans-serif; font-size: 3.5rem; color: #fff; margin-bottom: 25px; direction: rtl; line-height: 1.3; text-align: center; }
.quiz-choices { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 10px; margin: 0 auto; }

/* Şıklaştırılmış Şık Butonları */
.quiz-choice-btn { 
    width: 100%; background: var(--dark-surface); border: 2px solid rgba(255,255,255,0.08); 
    color: #e2e8f0; font-size: 1rem; font-weight: 600; padding: 16px; border-radius: 14px; 
    text-align: left; cursor: pointer; transition: all 0.2s; outline: none; line-height: 1.4;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}
.quiz-choice-btn:hover:not(:disabled) { background: rgba(255,255,255,0.05); border-color: var(--primary); transform: translateY(-2px); }
.quiz-choice-btn:disabled { cursor: default; transform: none; box-shadow: none; }

.quiz-choice-btn.correct { background: rgba(16, 185, 129, 0.15) !important; border-color: #10b981 !important; color: #10b981 !important; }
.quiz-choice-btn.wrong { background: rgba(239, 68, 68, 0.15) !important; border-color: #ef4444 !important; color: #ef4444 !important; opacity: 0.7; }
.quiz-choice-btn.selected { border-color: var(--primary) !important; background: rgba(52, 152, 219, 0.1) !important; color: #fff !important; }

.quiz-result-container { background: var(--dark-surface); border-radius: 20px; padding: 40px 20px; text-align: center; border: 1px solid rgba(255,255,255,0.05); flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ==========================================================================
   7. MASAÜSTÜ VE MOBİL EKRAN OPTİMİZASYONLARI
   ========================================================================== */
@media (min-width: 768px) {
    .module-cards { flex-direction: row !important; align-items: flex-start !important; }
    .module-wrapper { flex: 1 !important; display: flex; flex-direction: column; width: 100%; }
    .welcome-text { display: block; }
    .compact-stats { gap: 20px; margin-bottom: 25px; }
    .compact-card { padding: 20px 25px !important; gap: 20px; }
    .stat-icon-wrapper { width: 55px; height: 55px; border-radius: 15px; font-size: 1.8rem; }
    .stat-main-val { font-size: 1.8rem; margin-bottom: 8px; }
    .stat-details { font-size: 0.75rem; flex-direction: row; gap: 12px; }
    .card-controls { gap: 20px; margin-top: 20px; }
    .card-controls .nav-btn, .card-controls .icon-btn { width: 55px; height: 55px; font-size: 1.3rem; }
}

@media (max-width: 767px) {
    .quiz-split-row { grid-template-columns: 1fr; gap: 0; }
    .module-card { padding: 12px 15px !important; gap: 12px !important; }
    .module-icon { width: 40px !important; height: 40px !important; font-size: 1.2rem !important; }
    
    .quiz-question-word { font-size: 2.8rem !important; margin-bottom: 15px !important; }
    .card-word { margin-bottom: 15px !important; } 
    
    .quiz-choice-btn { padding: 14px !important; font-size: 0.95rem !important; border-radius: 12px !important; }
    .quiz-question-container { padding: 15px 12px !important; }
    .card-controls { gap: 8px !important; margin-top: 10px !important; }
    .card-controls .nav-btn, .card-controls .icon-btn { width: 42px !important; height: 42px !important; font-size: 1rem !important; }
}

/* --- YENİDEN TASARLANAN KUSURSUZ BUTONLAR VE TIKLANABİLİR KARTLAR --- */
.auth-submit-btn { 
    background: var(--primary); color: #fff; border: none; 
    padding: 14px 20px !important; border-radius: 14px; font-size: 1rem !important; font-weight: 600; 
    cursor: pointer; transition: all 0.2s ease; 
    display: flex !important; justify-content: center; align-items: center; gap: 8px;
    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.2); width: 100%;
}
.auth-submit-btn:hover { 
    background: var(--primary-dark); transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3); 
}
.auth-submit-btn:active { transform: translateY(0); }
.auth-submit-btn[style*="background:#10b981"], .auth-submit-btn[style*="background: #10b981"] { box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2); }
.auth-submit-btn[style*="background:#ef4444"], .auth-submit-btn[style*="background: #ef4444"] { box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2); }

.stat-clickable { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; }
.stat-clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255,255,255,0.15); }
.stat-clickable::after { content: '\f0da'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #4a5568; font-size: 1rem; opacity: 0; transition: opacity 0.2s, right 0.2s; }
.stat-clickable:hover::after { opacity: 1; right: 10px; }

/* ==========================================================================
   10. GELİŞMİŞ GİRİŞ VE KAYIT EKRANI (PREMIUM AUTH)
   ========================================================================== */
.premium-auth-modal { background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important; border: 1px solid rgba(255,255,255,0.08) !important; padding: 0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8) !important; max-width: 500px !important; width: 95% !important; }
.auth-header { padding: 35px 20px 15px 20px; text-align: center; }
.auth-logo { width: 65px; height: 65px; background: rgba(52, 152, 219, 0.15); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 15px auto; box-shadow: 0 0 20px rgba(52, 152, 219, 0.3); }
.auth-header h2 { font-size: 1.4rem; color: #f8fafc; margin-bottom: 5px; font-weight: 700; }
.auth-header p { font-size: 0.85rem; color: #94a3b8; }
.auth-tabs { padding: 0 20px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; display: flex; }
.auth-tab { padding: 15px 10px !important; font-weight: 700 !important; color: #64748b !important; flex: 1; text-align: center; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.auth-tab.active { color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; }
.auth-form { display: none !important; padding: 25px 30px 35px 30px !important; }
.auth-form.active { display: flex !important; flex-direction: column !important; gap: 15px !important; width: 100% !important; }
.input-group { position: relative; width: 100%; display: block; margin-bottom: 5px;}
.input-group i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1.1rem; z-index: 2; transition: color 0.3s; }
.input-group:focus-within i { color: var(--primary); }
.input-group input { width: 100% !important; background-color: #334155 !important; border: 2px solid #475569 !important; padding: 16px 15px 16px 50px !important; border-radius: 14px !important; color: #ffffff !important; font-size: 1rem !important; transition: all 0.3s ease; position: relative; z-index: 1; }
.input-group input:-webkit-autofill, .input-group input:-webkit-autofill:hover, .input-group input:-webkit-autofill:focus, .input-group input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px #334155 inset !important; -webkit-text-fill-color: #ffffff !important; transition: background-color 5000s ease-in-out 0s; }
.input-group input::placeholder { color: #94a3b8 !important; opacity: 1; }
.input-group input:focus { border-color: var(--primary) !important; background-color: #1e293b !important; outline: none; }
.auth-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.85rem; width: 100%; }
.remember-me { color: #cbd5e1; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.forgot-pw-link { color: var(--primary); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.forgot-pw-link:hover { color: #fff; text-decoration: underline; }
.auth-note { margin-top: 15px; font-size: 0.75rem; color: #94a3b8; text-align: center; line-height: 1.5; }
.auth-note i { margin-right: 5px; }

/* --- PROFİL DÜZENLEME FORMU CSS EKLENTİLERİ --- */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 5px; }
@media (max-width: 767px) { .profile-grid { grid-template-columns: 1fr; gap: 5px; } }
.auth-select { width: 100% !important; background-color: #334155 !important; border: 2px solid #475569 !important; padding: 16px 40px 16px 50px !important; border-radius: 14px !important; color: #ffffff !important; font-size: 1rem !important; transition: all 0.3s ease; position: relative; z-index: 1; appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; }
.auth-select:focus { border-color: var(--primary) !important; background-color: #1e293b !important; }
.auth-select option { background-color: #1e293b; color: #fff; }

/* --- PROFİL AKORDİYON LİSTELERİ --- */
.profile-lists-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.profile-list-section { background: var(--dark-surface); border: 1px solid var(--border); border-radius: 15px; overflow: hidden; }
.list-header { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: rgba(0,0,0,0.1); transition: background 0.2s; }
.list-header:hover { background: rgba(255,255,255,0.05); }
.list-header h3 { font-size: 1rem; color: #fff; margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.profile-list-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.2s; }
.profile-list-item:hover { background: rgba(255,255,255,0.02); }
.profile-list-item:last-child { border-bottom: none; }
.pli-ar { font-family: 'Arakom', 'Amiri', sans-serif; font-size: 1.5rem; color: #fff; direction: rtl; margin-bottom: 3px; }
.pli-tr { font-size: 0.85rem; color: #94a3b8; }
.pli-del-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); width: 35px; height: 35px; border-radius: 10px; cursor: pointer; transition: all 0.2s; display: flex; justify-content: center; align-items: center; }
.pli-del-btn:hover { background: #ef4444; color: #fff; }
.profile-exam-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.profile-exam-item:last-child { border-bottom: none; }
/* ==========================================================================
   11. LİDERLİK TABLOSU (KÜRSÜ VE SIRALAMA) TASARIMLARI
   ========================================================================== */
.leaderboard-tabs { display:flex; background:var(--dark-surface); border-radius:12px; padding:6px; margin-bottom:25px; border:1px solid rgba(255,255,255,0.05); }
.lb-tab { flex:1; padding:12px 10px; text-align:center; color:#94a3b8; font-weight:600; font-size:0.85rem; cursor:pointer; border-radius:8px; transition:all 0.2s; }
.lb-tab.active { background:var(--primary); color:#fff; box-shadow:0 4px 6px rgba(52, 152, 219, 0.3); }

.podium-container { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-bottom:30px; margin-top:20px; height: 190px;}
.podium-item { display:flex; flex-direction:column; align-items:center; width:30%; position:relative; }
.podium-avatar { width:55px; height:55px; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:1.6rem; color:#fff; margin-bottom:10px; z-index:2; box-shadow:0 4px 10px rgba(0,0,0,0.3);}
.podium-step { width:100%; border-radius:12px 12px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:10px; color:#121212; font-weight:800; font-size:1.8rem; position:relative;}
.podium-name { font-size:0.75rem; color:#e2e8f0; font-weight:700; text-align:center; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; }
.podium-score { font-size:0.7rem; color:#fff; font-weight:700; background:rgba(0,0,0,0.5); padding:3px 10px; border-radius:12px; margin-bottom:10px; z-index:2; border:1px solid rgba(255,255,255,0.1); }

.rank-1 .podium-step { height:110px; background:linear-gradient(135deg, #fbbf24 0%, #d97706 100%); box-shadow: 0 -5px 15px rgba(251, 191, 36, 0.3); }
.rank-1 .podium-avatar { background:#fbbf24; border:3px solid #fff; width:65px; height:65px; font-size:2rem;}
.rank-2 .podium-step { height:80px; background:linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
.rank-2 .podium-avatar { background:#94a3b8; border:2px solid #fff; }
.rank-3 .podium-step { height:60px; background:linear-gradient(135deg, #b45309 0%, #78350f 100%); }
.rank-3 .podium-avatar { background:#b45309; border:2px solid #fff; }

.lb-list { display:flex; flex-direction:column; gap:10px; }
.lb-list-item { display:flex; align-items:center; background:var(--dark-surface); padding:15px; border-radius:14px; border:1px solid rgba(255,255,255,0.05); gap:15px; }
.lb-rank { width:30px; font-weight:800; color:#64748b; font-size:1.2rem; text-align:center; }
.lb-info { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.lb-name { font-weight:600; color:#f8fafc; font-size:0.95rem; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-stat { font-size:0.8rem; color:var(--primary); font-weight:700; }

/* ==========================================================================
   12. YÖNETİM (ADMİN) PANELİ TASARIMI
   ========================================================================== */
.admin-user-card { background: var(--dark-surface); border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap:10px; }
.admin-user-info { flex: 1; display:flex; flex-direction:column; overflow:hidden;}
.admin-user-name { font-weight: 700; color: #fff; font-size: 0.95rem; margin-bottom: 3px; display:flex; align-items:center; gap:5px;}
.admin-user-email { font-size: 0.75rem; color: #94a3b8; }
.admin-user-stats { text-align:right; font-size:0.75rem; color:#cbd5e1; display:flex; flex-direction:column; gap:2px;}
.admin-role-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 6px; background: rgba(52, 152, 219, 0.2); color: var(--primary); font-weight:800; text-transform:uppercase;}
.admin-role-admin { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
/* --- ÜST BAR LOGO GÖRSELİ AYARLARI --- */
.top-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px; /* İkonun kare hatlarını hafifçe yumuşatır */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Masaüstü ekranlarda logoyu orantılı şekilde büyüt */
@media (min-width: 768px) {
    .top-logo-img {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }
}
/* ==========================================================================
   13. NATIVE APP SPLASH EKRANI (AÇILIŞ) TASARIMI
   ========================================================================== */
.splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #121212; /* manifest.json background_color ile uyumlu */
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.splash-content {
    text-align: center; display: flex; flex-direction: column; align-items: center;
    animation: splashPulse 2s infinite ease-in-out;
}
.splash-logo {
    width: 110px; height: 110px; object-fit: contain;
    border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 25px;
}
.splash-title {
    font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 5px;
    letter-spacing: 0.5px;
}
.splash-subtitle {
    font-size: 0.9rem; color: #94a3b8; margin-bottom: 35px;
}
.splash-spinner {
    width: 35px; height: 35px; border: 3px solid rgba(52, 152, 219, 0.2);
    border-top-color: var(--primary); border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes splashPulse {
    0% { transform: scale(0.98); opacity: 0.9; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.98); opacity: 0.9; }
}
/* JS ile tetiklenecek olan kaybolma efekti */
.splash-hidden { opacity: 0; visibility: hidden; }
/* ==========================================================================
   14. AYDINLIK TEMA (GÜNDÜZ MODU)
   ========================================================================== */
body.light-theme {
    background: #f1f5f9;
    color: #1e293b;
    --dark: #f8fafc;
    --dark-surface: #ffffff;
    --border: rgba(0, 0, 0, 0.08);
}

body.light-theme .top-bar {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

body.light-theme .bottom-nav {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid #e2e8f0;
}

body.light-theme .app-footer {
    background: #e2e8f0;
    color: #64748b;
}

/* Metin Renkleri */
body.light-theme .dashboard-header h2,
body.light-theme .stat-main-val,
body.light-theme .module-text h4,
body.light-theme .section-title,
body.light-theme .dict-item-ar,
body.light-theme .quiz-question-word,
body.light-theme .lb-name,
body.light-theme .admin-user-name,
body.light-theme .list-header h3,
body.light-theme .pli-ar,
body.light-theme .splash-title,
body.light-theme .auth-header h2,
body.light-theme .settings-header h3,
body.light-theme .modal-arabic-text {
    color: #0f172a;
}

body.light-theme .splash-subtitle,
body.light-theme .auth-header p,
body.light-theme .modal-turkish-text {
    color: #64748b;
}

/* Arka Planlar ve Kartlar */
body.light-theme .splash-screen,
body.light-theme .dictionary-header,
body.light-theme .quiz-setup-bottom {
    background: #f1f5f9;
}

body.light-theme .stat-card,
body.light-theme .module-card,
body.light-theme .advanced-filters,
body.light-theme .quiz-option .option-box,
body.light-theme .quiz-question-container,
body.light-theme .quiz-result-container,
body.light-theme .admin-user-card,
body.light-theme .profile-info-card,
body.light-theme #profileEditSection,
body.light-theme .profile-list-section,
body.light-theme .dict-result-item {
    background: #ffffff;
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

/* Form Elemanları (Input, Select) */
body.light-theme .custom-select,
body.light-theme .search-box,
body.light-theme .quiz-input-number,
body.light-theme .input-group input,
body.light-theme .auth-select {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.light-theme .custom-select option,
body.light-theme .auth-select option {
    background: #ffffff;
    color: #0f172a;
}

body.light-theme .input-group input:focus,
body.light-theme .auth-select:focus {
    border-color: var(--primary) !important;
    background: #ffffff !important;
}

body.light-theme .input-group input:-webkit-autofill,
body.light-theme .input-group input:-webkit-autofill:hover, 
body.light-theme .input-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #f8fafc inset !important;
    -webkit-text-fill-color: #0f172a !important;
}

/* Modallar (Giriş, Ayarlar vb.) */
body.light-theme .auth-modal-content, 
body.light-theme .settings-modal {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}

body.light-theme .premium-auth-modal {
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%) !important;
}

body.light-theme .settings-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

body.light-theme .setting-box,
body.light-theme .segment-content {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

body.light-theme .setting-item label { color: #475569; }

/* Butonlar ve İkonlar */
body.light-theme .close-settings {
    background: #e2e8f0;
    color: #64748b;
}

body.light-theme .user-menu {
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}

body.light-theme .nav-btn,
body.light-theme .logo {
    color: #0f172a;
}

body.light-theme .learning-header .back-btn,
body.light-theme .learning-header .settings-btn,
body.light-theme .card-controls .nav-btn,
body.light-theme .card-controls .icon-btn {
    background: #ffffff;
    color: #475569;
    border-color: #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body.light-theme .card-controls .nav-btn:hover,
body.light-theme .card-controls .icon-btn:hover {
    background: var(--primary);
    color: white;
}

body.light-theme .active-filter-display {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
}

body.light-theme .learning-header { background: #ffffff; }
body.light-theme #quizActiveView .learning-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* Sınav ve Liderlik Tablosu Gündüz Ayarları */
body.light-theme .nav-circle {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

body.light-theme .nav-circle.answered {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #475569;
}

body.light-theme .quiz-choice-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

body.light-theme .quiz-choice-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: var(--primary);
}

body.light-theme .podium-name, 
body.light-theme .podium-score {
    color: #1e293b;
}

body.light-theme .podium-score {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

body.light-theme .auth-tab { color: #94a3b8 !important; }
body.light-theme .auth-tab.active { color: var(--primary) !important; }
/* --- AYDINLIK TEMA: CHECKBOX VE BİLGİ NOTU METİN DÜZELTMELERİ --- */
body.light-theme .checkbox-group,
body.light-theme .checkbox-group label {
    color: #1e293b !important;
}

body.light-theme .pedagogical-note {
    color: #334155 !important;
}

body.light-theme .pedagogical-note strong {
    color: #0f172a !important;
}

/* --- AYDINLIK TEMA: SINAV OLUŞTUR EKRANI METİN DÜZELTMELERİ --- */
body.light-theme .quiz-option .opt-title {
    color: #1e293b !important; /* Koyu lacivert/siyah başlık */
}

body.light-theme .quiz-option .opt-desc {
    color: #64748b !important; /* Koyu gri açıklama metni */
}

body.light-theme .quiz-section-title {
    color: #475569 !important; /* "1. VERİTABANI" gibi üst başlıkları belirginleştirir */
}

/* YENİ: Aydınlık Tema Sınav Seçenekleri (Kutucuklar) Belirginleştirme */
body.light-theme .quiz-option input:checked + .option-box {
    background: rgba(52, 152, 219, 0.15) !important;
    border-color: var(--primary) !important;
}

body.light-theme .quiz-option input:checked + .option-box .opt-title {
    color: var(--primary) !important;
}

/* YENİ: Aydınlık Tema Aktif Sınav Şıkları ve Sonraki Butonu */
body.light-theme .quiz-active-container .quiz-choice-btn.selected {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark) !important;
}

body.light-theme .quiz-action-nav-btn.btn-next {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark) !important;
}
/* ==========================================================================
   15. KULLANICI REHBERİ (ONBOARDING) TASARIMI
   ========================================================================== */
.introjs-tooltip {
    background-color: var(--dark-surface) !important;
    color: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7) !important;
    min-width: 280px;
}
.introjs-tooltiptext { font-size: 0.9rem !important; color: #cbd5e1 !important; line-height: 1.5 !important; }
.introjs-tooltipbuttons { border-top: 1px solid rgba(255,255,255,0.05) !important; padding: 15px !important; }
.introjs-button {
    background-color: var(--primary) !important; color: #fff !important;
    border: none !important; border-radius: 8px !important;
    text-shadow: none !important; font-weight: 600 !important; padding: 8px 15px !important; transition: 0.2s;
}
.introjs-skipbutton { background-color: transparent !important; color: #94a3b8 !important; }
.introjs-bullets ul li a { background: #475569 !important; border-radius: 50% !important; }
.introjs-bullets ul li a.active { background: var(--primary) !important; }
.introjs-arrow.top { border-bottom-color: var(--dark-surface) !important; }
.introjs-arrow.bottom { border-top-color: var(--dark-surface) !important; }
.introjs-helperLayer { border-radius: 16px !important; background: rgba(52, 152, 219, 0.1) !important; }

/* Aydınlık Tema (Gündüz Modu) Uyumu */
body.light-theme .introjs-tooltip { background-color: #fff !important; color: #0f172a !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }
body.light-theme .introjs-tooltiptext { color: #475569 !important; }
body.light-theme .introjs-arrow.top { border-bottom-color: #fff !important; }
body.light-theme .introjs-arrow.bottom { border-top-color: #fff !important; }
body.light-theme .introjs-tooltipbuttons { border-top-color: rgba(0,0,0,0.05) !important; }
body.light-theme .introjs-bullets ul li a { background: #cbd5e1 !important; }
/* ==========================================================================
   SINAV & İNCELEME MODU ERGONOMİK YERLEŞİM
   ========================================================================== */
.quiz-active-container {
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 140px);
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 15px !important;
    box-sizing: border-box;
    overflow: hidden;
}

.quiz-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dark-surface);
    border: 1px solid var(--border);
    padding: 8px 14px;
    border-radius: 12px;
    flex-shrink: 0;
}

.quiz-quit-btn {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.quiz-quit-btn:hover { background: #ef4444; color: #fff; }

.quiz-timer-badge {
    font-weight: 700;
    color: var(--secondary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quiz-progress-badge {
    font-weight: 700;
    color: #cbd5e1;
    font-size: 0.95rem;
}

/* Navigatör Çubuğu */
.quiz-nav-wrapper {
    overflow-x: auto;
    padding: 6px 0;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.quiz-nav-wrapper::-webkit-scrollbar { display: none; }

.quiz-active-container .quiz-navigator {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    padding: 2px;
}

.quiz-active-container .nav-circle {
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.quiz-active-container .nav-circle.active {
    border-color: var(--primary);
    background: rgba(52, 152, 219, 0.25);
    color: #fff;
    transform: scale(1.08);
}
.quiz-active-container .nav-circle.answered { background: rgba(52, 152, 219, 0.6); color: #fff; border-color: var(--primary); }
.quiz-active-container .nav-circle.correct { background: #10b981 !important; color: #fff !important; border-color: #10b981 !important; }
.quiz-active-container .nav-circle.wrong { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; }

/* Ana Çalışma Alanı */
.quiz-main-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 0; /* Flexbox taşmasını önler */
    padding: 5px 0;
}

.quiz-active-container .quiz-question-word {
    font-size: 2.8rem;
    font-family: 'Amiri', 'Traditional Arabic', serif;
    color: var(--primary);
    text-align: center;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Şıklar Tablosu (2x2 Grid) */
.quiz-active-container .quiz-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 650px;
}

.quiz-active-container .quiz-choice-btn {
    background: var(--dark-surface);
    border: 1px solid var(--border);
    color: #e2e8f0;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    line-height: 1.3;
    display: flex;
    align-items: center;
    min-height: 52px;
}

.quiz-active-container .quiz-choice-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(52, 152, 219, 0.1);
    transform: translateY(-1px);
}

.quiz-active-container .quiz-choice-btn.selected {
    background: rgba(52, 152, 219, 0.3) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.quiz-active-container .quiz-choice-btn.correct {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    font-weight: 700;
}

.quiz-active-container .quiz-choice-btn.wrong {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* Hafıza Kartı Ergonomisi */
.quiz-flashcard-box {
    width: 100%;
    max-width: 520px;
    height: 180px !important;
    margin: 0 auto;
    perspective: 1000px;
    cursor: pointer;
}

.quiz-flashcard-box .flashcard {
    height: 100%;
    border-radius: 16px;
}

.quiz-flashcard-box .card-front,
.quiz-flashcard-box .card-back {
    padding: 15px;
    border-radius: 16px;
}

.quiz-fc-word {
    font-size: 2.6rem;
    font-family: 'Amiri', serif;
    color: #fff;
    margin: auto 0;
}

.quiz-fc-hint {
    font-size: 0.75rem;
    color: #94a3b8;
}

.quiz-fc-meaning {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: auto 0;
    text-align: center;
}

.quiz-fc-action-row {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 520px;
}

.quiz-fc-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    transition: 0.2s;
}
.quiz-fc-btn.btn-wrong { background: #ef4444; }
.quiz-fc-btn.btn-correct { background: #10b981; }

/* Alt Butonlar */
.quiz-bottom-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    flex-shrink: 0;
}

.quiz-action-nav-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--dark-surface);
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.quiz-action-nav-btn.btn-next {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.quiz-action-nav-btn.btn-complete {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}

/* Mobil İnce Ayar (Tek Sütun Şıklar) */
@media (max-width: 600px) {
    .quiz-active-container {
        height: calc(100vh - 125px);
        padding: 6px 10px !important;
    }
    .quiz-active-container .quiz-question-word { font-size: 2.2rem; }
    .quiz-active-container .quiz-choices {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .quiz-active-container .quiz-choice-btn {
        padding: 10px 14px;
        min-height: 44px;
        font-size: 0.88rem;
    }
    .quiz-flashcard-box { height: 160px !important; }
}

/* Aydınlık Tema */
body.light-theme .quiz-active-container .quiz-top-bar,
body.light-theme .quiz-active-container .quiz-choice-btn,
body.light-theme .quiz-active-container .quiz-action-nav-btn {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
    color: #0f172a;
}
body.light-theme .quiz-active-container .nav-circle {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}
body.light-theme .quiz-active-container .quiz-action-nav-btn.btn-next { color: #fff; }
body.light-theme .quiz-active-container .quiz-action-nav-btn.btn-complete { color: #fff; }
/* ==========================================================================
   YENİ: İLERLEME ÇUBUĞU (PROGRESS BAR)
   ========================================================================== */
.progress-bar-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.progress-bar-fill {
    height: 100%;
    background: var(--secondary);
    width: 0%;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   YENİ: KLAVYE KISAYOLLARI GÖRÜNÜMÜ
   ========================================================================== */
.shortcut-box { 
    background: rgba(0,0,0,0.2); 
    padding: 8px 12px; 
    border-radius: 8px; 
    color: #cbd5e1; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.shortcut-box kbd { 
    background: #475569; 
    padding: 3px 6px; 
    border-radius: 5px; 
    color: #fff; 
    font-family: inherit; 
    font-weight: 700; 
    font-size: 0.75rem; 
    box-shadow: 0 2px 0 rgba(0,0,0,0.2); 
}

/* --- AYDINLIK TEMA (GÜNDÜZ MODU) UYUMLARI --- */
body.light-theme .progress-bar-container { background: rgba(0, 0, 0, 0.08); }
body.light-theme .shortcut-box { background: rgba(0,0,0,0.05); color: #475569; }
body.light-theme .shortcut-box kbd { background: #cbd5e1; color: #0f172a; box-shadow: 0 2px 0 rgba(0,0,0,0.1); }

/* ==========================================================================
   YENİ: SİSTEM MANTIĞI VE FİLTRE BUTONU STİLLERİ
   ========================================================================== */
.system-info-btn {
    background: rgba(52, 152, 219, 0.15); color: var(--primary);
    border: 1px solid rgba(52, 152, 219, 0.3); padding: 8px 14px;
    border-radius: 12px; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s;
}
.system-info-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* Aydınlık Tema Uyumu */
body.light-theme .system-info-btn { background: #f1f5f9; color: var(--primary); border-color: #cbd5e1; }
body.light-theme .system-info-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

body.light-theme .module-card .btn-filter { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; }
body.light-theme .module-card .btn-filter:hover { background: #e2e8f0 !important; color: #0f172a !important; }

/* --- AYDINLIK TEMA: SİSTEM MANTIĞI PENCERESİ RENKLERİ --- */
body.light-theme #systemLogicModal .settings-body p {
    color: #475569 !important; /* Ana paragraflar (koyu gri) */
}

body.light-theme #systemLogicModal .settings-body > div > div {
    background: #f8fafc !important; /* Bilgi kutusu arka planı (açık gri/beyaz) */
    color: #334155 !important; /* Bilgi kutusu içi genel metin (koyu gri) */
    border-color: #e2e8f0 !important; /* Bilgi kutusu kenarlığı */
}

body.light-theme #systemLogicModal .settings-body > div > div strong {
    color: #0f172a !important; /* Kaynak Eser vb. kalın metinler (siyaha yakın lacivert) */
}
body.light-theme #contactMessage { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
body.light-theme #contactMessage:focus { border-color: var(--primary) !important; background: #ffffff !important; }
}
/* --- GECE MODU (VARSAYILAN) PROFİL RENKLERİ --- */
.profile-dynamic-text { color: #ffffff; }
.profile-dynamic-subtext { color: #94a3b8; }

/* --- AYDINLIK TEMA: PROFİL VE ÜST BAR (TOP BAR) KESİN RENK DÜZELTMESİ --- */
body.light-theme .profile-dynamic-text { color: #0f172a !important; }
body.light-theme .profile-dynamic-subtext { color: #475569 !important; }

body.light-theme .user-menu, 
body.light-theme .user-menu span, 
body.light-theme .user-menu i {
    color: #0f172a !important; 
}
/* --- GECE MODU (VARSAYILAN): HAKKINDA PENCERESİ RENKLERİ --- */
#aboutTitleText { color: #ffffff; }
#aboutDescText { color: #cbd5e1; }
#aboutSourceText { color: #94a3b8; }
.about-author { color: #e2e8f0; }
.about-book { color: #94a3b8; }
#aboutFooterText { color: #64748b; }

/* --- AYDINLIK TEMA: HAKKINDA PENCERESİ KESİN RENK DÜZELTMELERİ --- */
body.light-theme #aboutTitleText,
body.light-theme .about-author {
    color: #0f172a !important; /* Koyu Lacivert/Siyah */
}

body.light-theme #aboutDescText,
body.light-theme #aboutSourceText,
body.light-theme .about-book {
    color: #475569 !important; /* Koyu Gri */
}

body.light-theme #aboutFooterText {
    color: #64748b !important;
}
/* ==========================================================================
   SINAV MODU: KESİN MOBİL EKRAN VE AYDINLIK TEMA (GÜNDÜZ) DÜZELTMELERİ
   ========================================================================== */

/* 1. Şıkların Kesilmesi ve Taşması (Mobil) */
@media (max-width: 600px) {
    /* Grid yapısını mobilde tek sütuna (alt alta) çevirir */
    .quiz-active-container .quiz-choices {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    /* Butonların içindeki uzun metinlerin alt satıra geçmesini sağlar */
    .quiz-active-container .quiz-choice-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        white-space: normal !important; /* Uzun metinler alta geçer, kesilmez */
        word-wrap: break-word !important;
        line-height: 1.4 !important;
    }
}

/* 2. Alt Butonların (Önceki/Sonraki) Hizalaması */
.quiz-action-nav-btn {
    justify-content: center !important;
    align-items: center !important;
}

/* 3. Hafıza Kartı (Sınav Modu) Aydınlık Tema Renk ve Okunabilirlik Düzeltmesi */
/* Not: Kartın arka planı sarı/krem olduğu için yazılar siyah olmalıdır */
body.light-theme .quiz-flashcard-box .card-front .quiz-fc-word,
body.light-theme .quiz-flashcard-box .card-front .quiz-fc-hint {
    color: #1a202c !important; /* Koyu Lacivert/Siyah */
    text-shadow: none !important;
}

body.light-theme .quiz-flashcard-box .card-front .quiz-fc-hint i {
    color: var(--primary) !important;
}

/* Hafıza kartının arka yüzü (gradan) için yazılar beyaz kalmalı */
body.light-theme .quiz-flashcard-box .card-back .quiz-fc-meaning {
    color: #ffffff !important; 
}

/* Bildim/Bilemedim Butonları her zaman beyaz yazılı kalsın */
body.light-theme .quiz-fc-btn {
    color: #ffffff !important; 
}
/* ==========================================================================
   SINAV MODU: RESPONSIVE (MOBİL VE MASAÜSTÜ) KUSURSUZ YERLEŞİM
   ========================================================================== */

/* GENEL (TÜM CİHAZLAR İÇİN) - Kapsayıcıyı sınırlar */
.quiz-active-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; 
    box-sizing: border-box !important;
}

/* Hafıza Kartı Genel Boyut Sınırlandırması */
.quiz-flashcard-box {
    width: 100% !important;
    max-width: 500px !important; /* Masaüstünde çok uzamasını engeller */
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.quiz-fc-action-row {
    width: 100% !important;
    max-width: 500px !important;
    box-sizing: border-box !important;
    margin: 15px auto 0 auto !important;
}

/* Alt Butonların (Önceki/Sonraki) Hizalaması */
.quiz-bottom-actions {
    width: 100% !important;
    max-width: 600px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 auto !important;
}

.quiz-action-nav-btn {
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 5px !important;
    margin: 0 !important;
}

/* Üst navigatör (sayıların olduğu çubuk) */
.quiz-nav-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important; 
    box-sizing: border-box !important;
}

/* ==========================================================================
   SADECE MASAÜSTÜ VE TABLET EKRANLAR (Genişlik 601px ve üzeri)
   ========================================================================== */
@media (min-width: 601px) {
    .quiz-choices {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Yan yana iki sütun */
        gap: 15px !important;
        width: 100% !important;
        max-width: 650px !important; /* Masaüstünde ortalanmış şık duruş */
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   SADECE MOBİL EKRANLAR (Genişlik 600px ve altı)
   ========================================================================== */
@media (max-width: 600px) {
    /* Mobilde şıklar alt alta olsun */
    .quiz-choices {
        display: flex !important;
        flex-direction: column !important; 
        gap: 8px !important;
        width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    /* Butonların içindeki uzun metinlerin alt satıra geçmesi */
    .quiz-choice-btn {
        width: 100% !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
        white-space: normal !important; /* Uzun metinler alta geçer */
        word-wrap: break-word !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
}
/* ==========================================================================
   SINAV MODU: NAVİGATÖR (SORU NUMARALARI) VE TAMAMLA BUTONU DÜZELTMELERİ
   ========================================================================== */

/* 1. Soru Numaralarını Ortala ve Taştığında Alt Satıra Kaydır (Wrap) */
.quiz-nav-wrapper {
    overflow: visible !important; /* Yatay kaydırmayı iptal et, serbest bırak */
    margin-bottom: 10px !important;
}

.quiz-active-container .quiz-navigator {
    display: flex !important;
    flex-wrap: wrap !important; /* Ekrana sığmadığında otomatik alt satıra geçir */
    justify-content: center !important; /* Tam ortaya simetrik hizala */
    align-items: center !important;
    gap: 10px !important;
    padding: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Sayı yuvarlaklarının boyutlarını biraz daha zarif hale getirelim */
.quiz-active-container .nav-circle {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* 2. Aydınlık Temada "Tamamla" Butonunun Görünmezlik (Beyaz Üstüne Beyaz) Sorunu */
body.light-theme .quiz-active-container .quiz-action-nav-btn.btn-complete {
    background: #10b981 !important; /* Canlı Yeşil Arka Plan */
    color: #ffffff !important;      /* Bembeyaz Yazı */
    border-color: #059669 !important; /* Koyu Yeşil Çerçeve (Derinlik katar) */
}

/* Aydınlık Temada "Sonraki" Butonunun da Mavi Olarak Kalmasını Garantileyelim */
body.light-theme .quiz-active-container .quiz-action-nav-btn.btn-next {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark) !important;
}
/* ==========================================================================
   SINAV MODU KUSURSUZLAŞTIRMA (Kart Ortalama ve Navigatör Sığdırma)
   ========================================================================== */

/* 1. HAFIZA KARTI İÇERİĞİNİ MERKEZLEME VE KAYDIRMA ÇUBUĞUNU İPTAL ETME */
.quiz-flashcard-box .card-front,
.quiz-flashcard-box .card-back {
    padding: 15px !important; /* Kartı aşağı iten dev boşluğu kaldırır */
    justify-content: center !important; /* Dikeyde tam merkeze alır */
    align-items: center !important; /* Yatayda tam merkeze alır */
    overflow: hidden !important; /* Kaydırma çubuğunu kesin olarak iptal eder */
}

.quiz-flashcard-box .quiz-fc-word,
.quiz-flashcard-box .quiz-fc-meaning {
    margin: 0 !important; /* Metni aşağı iten dış boşlukları sıfırlar */
}

/* 2. SORU NUMARALARI (10 Soru Tek Satıra Sığacak Şekilde Zarifleştirildi) */
.quiz-active-container .quiz-navigator {
    gap: 6px !important; 
}

.quiz-active-container .nav-circle {
    min-width: 28px !important; /* Sığması için genişlik biraz küçültüldü */
    height: 28px !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
}

/* 3. ŞIKLARIN HAFIZA KARTI MODUNDA GİZLENMESİNİ ENGELLEYEN KESİN ÇÖZÜM */
/* JS içinde "none" kelimesi geçtiği an, diğer tüm CSS kurallarını ezer ve gizler */
.quiz-active-container .quiz-choices[style*="none"] {
    display: none !important;
}

@media (min-width: 601px) {
    .quiz-active-container .quiz-choices:not([style*="none"]) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 600px) {
    .quiz-active-container .quiz-choices:not([style*="none"]) {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
}
/* ==========================================================================
   SINAV MODU: ÇOKTAN SEÇMELİ SORU KARTI (YENİ TASARIM - DÜZELTİLMİŞ)
   ========================================================================== */

/* 1. Havada asılı duran metni ŞIK BİR KARTA dönüştürme */
.quiz-active-container .quiz-question-word {
    background: var(--dark-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    padding: 30px 20px !important; /* Üst yazı kalktığı için boşluklar tam simetrik yapıldı */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* Derinlik veren gölge */
    margin: 0 auto 20px auto !important;
    width: 100% !important;
    max-width: 600px !important; /* Şıklarla birebir aynı genişlikte hizalar */
    align-items: center !important;
    justify-content: center !important;
    min-height: 150px !important; /* Kart hissiyatı için yükseklik */
    position: relative !important; 
}

/* JavaScript "display: none" yaptığında (Hafıza Kartı modunda) CSS'in bunu ezmesini engeller */
.quiz-active-container .quiz-question-word:not([style*="display: none"]) {
    display: flex !important;
}

/* "SORU KELİMESİ" Etiketini Tamamen Gizliyoruz */
.quiz-active-container .quiz-question-word::before {
    display: none !important;
    content: none !important;
}

/* 2. Aydınlık Tema (Gündüz Modu) Renk ve Gölge Ayarları */
body.light-theme .quiz-active-container .quiz-question-word {
    background: #ffffff !important; /* Bembeyaz şık kart arka planı */
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; /* Hafif pastel gölge */
    color: var(--primary) !important; /* Arapça yazıyı canlandırmak için mavi ton */
    text-shadow: none !important; /* Gündüz modunda gölgeyi sil */
}
/* ==========================================================================
   PROFİL LİSTELERİ: SİLME BUTONU HİZALAMASI VE TAŞMA KONTROLÜ
   ========================================================================== */
.profile-list-item {
    gap: 15px !important; /* Silme butonu ile araya kesin mesafe koyar */
    align-items: center !important;
}

.profile-list-item > div:first-child {
    min-width: 0 !important; /* Metin çok uzunsa butonu itmek yerine kesilmesini sağlar */
}

.pli-tr {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Taşan uzun anlamların sonuna ... koyar */
    padding-right: 0 !important;
}
/* ==========================================================================
   ADMİN PANELİ: SAYFALAMA VE AKSİYON BUTONLARI
   ========================================================================== */
.page-btn {
    background: var(--dark-surface); border: 1px solid var(--border); color: #e2e8f0;
    min-width: 38px; height: 38px; border-radius: 10px; display: flex; justify-content: center; align-items: center;
    font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: all 0.2s;
}
.page-btn:hover { background: rgba(52, 152, 219, 0.15); border-color: var(--primary); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); }

/* Aydınlık Tema Uyumu */
body.light-theme .page-btn { background: #fff; color: #475569; border-color: #cbd5e1; }
body.light-theme .page-btn:hover { background: rgba(52, 152, 219, 0.1); border-color: var(--primary); color: var(--primary); }
body.light-theme .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ==========================================================================
   ADMİN PANELİ: SIKIŞTIRILMIŞ VERİ TABLOSU (MAX 15MM YÜKSEKLİK)
   ========================================================================== */
.admin-table-wrapper::-webkit-scrollbar { height: 8px; }
.admin-table-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

.admin-table-row {
    display: grid;
    /* Sütun genişliklerinin oranları (Toplam 8 sütun) */
    grid-template-columns: 40px 1.5fr 1.5fr 80px 120px 120px 120px 80px;
    gap: 10px;
    align-items: center;
    padding: 0 15px;
    height: 50px; /* Yaklaşık 13-14mm (15mm'yi geçmez) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
    transition: background 0.2s;
    color: #e2e8f0;
}
.admin-table-row:last-child { border-bottom: none; }
.admin-table-row:hover:not(.admin-table-header) { background: rgba(255, 255, 255, 0.02); }

.admin-table-header {
    font-weight: 800;
    color: #94a3b8;
    background: rgba(0,0,0,0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

/* Hücre Taşma Kontrolleri (Metin uzunsa alt satıra geçmek yerine ... koyar, yüksekliği korur) */
.admin-table-row > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-no { font-weight: 700; color: #64748b; }
.col-name { font-weight: 700; color: #fff; }
.col-email { color: #cbd5e1; }

/* Minik Aksiyon İkonları */
.admin-action-icons { display: flex; gap: 8px; justify-content: flex-end; }
.btn-icon-admin {
    width: 32px; height: 32px;
    border-radius: 8px; border: none; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    font-size: 0.9rem; transition: 0.2s; outline: none;
}
.btn-icon-role { background: rgba(52, 152, 219, 0.15); color: var(--primary); }
.btn-icon-role:hover { background: var(--primary); color: #fff; }
.btn-icon-del { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.btn-icon-del:hover { background: #ef4444; color: #fff; }

/* Aydınlık Tema (Gündüz Modu) Tablo Renkleri */
body.light-theme .admin-table-wrapper { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
body.light-theme .admin-table-row { border-bottom-color: rgba(0,0,0,0.05); color: #334155; }
body.light-theme .admin-table-row:hover:not(.admin-table-header) { background: #f8fafc; }
body.light-theme .admin-table-header { background: #f1f5f9; color: #475569; border-bottom-color: #cbd5e1; }
body.light-theme .col-name { color: #0f172a; }

/* ==========================================================================
   ANA SAYFA (DASHBOARD) VE GENEL TASARIM İYİLEŞTİRMELERİ (UI/UX)
   ========================================================================== */

/* 1. Maksimum Genişlik ve Ortalama (Masaüstü Ekran Esnemesini Önleme) */
/* Mobilde %100 genişlik kullanır (bozulmaz), bilgisayarda ise 1000px'te durup ortalanır. */
.view-section {
    max-width: 1000px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Aydınlık Temada İstatistik Alt Metinlerinin (Sıklık/Cüz) Okunabilirliği */
body.light-theme .stat-details {
    color: #64748b !important; /* Görünmez olan açık gri yerine Koyu Gri */
}
body.light-theme .stat-details strong {
    color: #1e293b !important; /* Rakamları Siyah/Koyu Antrasit yaparak vurguyu artırdık */
}

/* 3. Alt Navigasyon (Bottom Nav) Aktif Renk Bütünlüğü */
/* Aktif menü rengini Yeşilden, markanın ana rengi olan Maviye çevirdik */
.nav-item.active {
    color: var(--primary) !important;
}

/* 4. Buton Oranları (Proportions) ve Filtre Belirginliği */
/* Hızlı Başla butonlarını dikeyde biraz incelttik (Daha atletik görünüm) */
.module-card .auth-submit-btn {
    padding: 10px 15px !important; 
    font-size: 0.9rem !important;
}

/* "Sözlüklerin Çalışma Mantığı" butonunu da aynı oranda incelttik */
.system-info-btn {
    padding: 10px 14px !important;
}

/* Aydınlık temada filtre butonunun çerçevesini kalınlaştırıp daha belirgin yaptık */
body.light-theme .module-card .btn-filter {
    border: 1.5px solid #94a3b8 !important; 
    background: #f8fafc !important;
    color: #334155 !important;
    font-weight: 700 !important;
}
body.light-theme .module-card .btn-filter:hover {
    background: #e2e8f0 !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
/* ==========================================================================
   SÖZLÜK, ARAMA VE MODAL KESİN RENK ÇÖZÜMLERİ (Aydınlık/Karanlık Temalar)
   ========================================================================== */

/* Arama kutusu metin renkleri - Gündüz ve Gece Modu Garantisi */
.search-box { background: var(--dark-surface) !important; border: 1px solid var(--border) !important; }
.search-box input { color: #ffffff !important; background-color: transparent !important;}
.search-box input::placeholder { color: #94a3b8 !important; }

body.light-theme .search-box { background: #ffffff !important; border-color: #cbd5e1 !important; }
body.light-theme .search-box input { color: #0f172a !important; }
body.light-theme .search-box input::placeholder { color: #64748b !important; }

/* Filtre İkonunu Daha Şık ve Modern Yapalım */
.filter-btn {
    background: rgba(52, 152, 219, 0.15) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(52, 152, 219, 0.3) !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    padding: 8px 12px !important;
}
body.light-theme .filter-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: var(--primary) !important;
}
body.light-theme .filter-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary-dark) !important;
}

/* Modal Segment Control (Tüm Veritabanı Seçenekleri) Renk Düzeltmesi */
body.light-theme .segment-content {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}
body.light-theme .segment-label input:checked ~ .segment-content {
    background: var(--primary) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}