/* 🔥 REİS: PARLAYAN ÜST PANELİ KARARTAN ÖZEL FİX */
body.dark-mode header, 
body.dark-mode .navbar, 
body.dark-mode .top-bar, 
body.dark-mode [class*="header"], 
body.dark-mode [class*="navbar"] {
    background-color: #161b22 !important; /* Koyu, mat arka plan */
    border-bottom: 1px solid #30363d !important; /* Kibar, koyu bir çizgi */
    box-shadow: none !important; /* Parlamayı artıran gölgeleri kaldır */
}

/* Üst paneldeki yazıları yumuşat */
body.dark-mode header *, 
body.dark-mode .navbar *, 
body.dark-mode .top-bar * {
    color: #e6edf3 !important; /* Bembeyaz değil, hafif gri yazı */
}

/* Üst paneldeki linkleri ve aktif öğeleri ayarla */
body.dark-mode header a, 
body.dark-mode .navbar a, 
body.dark-mode .top-bar a {
    color: #58a6ff !important; /* Linkler için yumuşak mavi */
}

body.dark-mode header a:hover, 
body.dark-mode .navbar a:hover, 
body.dark-mode .top-bar a:hover {
    color: #ffffff !important; /* Üzerine gelince beyaz */
}
	/* 📱 REIS MOBILE ZOOM & CROP FIX */
#canvasContainer.crop-active {
    touch-action: none !important; /* Kırpma modunda sayfa kaymasını tamamen kilitler */
    overscroll-behavior: none;
}

#pdfRenderCanvas {
    touch-action: pinch-zoom; /* Sadece iki parmakla büyütmeye izin ver */
    user-select: none;
    -webkit-user-drag: none;
}
	/* --- SEÇİM MODU STİLLERİ --- */
.mode-selecting .question-card {
    cursor: pointer !important;
    transition: all 0.2s;
}
.mode-selecting .question-card:hover {
    transform: scale(0.98);
}
/* Seçilmemiş kart soluklaşsın */
.mode-selecting .question-card:not(.selected-card) {
    opacity: 0.7;
    border: 2px dashed #ccc !important;
}
/* Seçilen kart parlasın */
.question-card.selected-card {
    opacity: 1 !important;
    border: 3px solid #0d6efd !important; /* Mavi Çerçeve */
    background-color: #f0f9ff !important;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.3) !important;
}
/* Seçim tiki (Checkbox) */
.card-select-cb {
    width: 25px; height: 25px;
    z-index: 100; cursor: pointer;
}
	.soru-blogu {
    display: flex;           /* Yan yana dizmek için sihirli değnek */
    align-items: flex-start; /* Yukarıdan hizala */
    margin-bottom: 20px;     /* Sorular arası biraz boşluk */
    border-bottom: 1px dashed #ccc; /* İstersen sorular arasına kesikli çizgi (isteğe bağlı) */
    padding-bottom: 15px;
}

.soru-baslik {
    width: 120px;            /* Sol tarafa sabit bir genişlik verelim ki hizalı dursun */
    min-width: 120px;        /* Küçülmesini engelleyelim */
    font-size: 1.1em;
    padding-right: 15px;     /* Soru ile yazı arasına mesafe */
    border-right: 2px solid #333; /* Şık durması için araya dikey bir çizgi */
    margin-right: 15px;      /* Çizgiden sonra biraz daha boşluk */
    text-align: center;      /* Yazıyı ortala */
}

.soru-icerik {
    flex-grow: 1;            /* Kalan tüm alanı resme ver */
}
	/* ======================================================= */
/* 🔥 TEK SÜTUN İÇİN AKILLI SIKIŞTIRMA (REIS MODE)       */
/* ======================================================= */

/* Sadece Tek Sütun Modu Aktifken Çalışır */
.mode-single-col .question-card {
    border-bottom: 1px dashed #ccc; /* Soruları çizgiyle ayır */
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

/* ŞIKLARI YAN YANA DİZ (En Büyük Tasarruf Buradan Gelir) */
/* Normalde A,B,C,D alt alta 4 satırdır. Burada 2x2 olur */
.mode-single-col .choice-dots {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Şıkları ikiye böl (A-B sol, C-D sağ) */
    gap: 5px 20px; /* Dikey boşluk az, yatay boşluk çok */
}

/* Eğer EKO modundaysa ve Tek Sütunsa daha da agresif ol */
/* Şıkları 4'lü yan yana dizer (Tek satıra indirir) */
.density-eco .mode-single-col .choice-dots {
    grid-template-columns: repeat(4, 1fr) !important; /* A B C D tek satır */
}

/* Resimler Tek Sütunda Devleşmesin */
.mode-single-col img {
    max-height: 200px !important; /* Resim boyunu dizginle */
    width: auto !important;
    object-fit: contain;
}

/* Başlık ve Metin Arasını Kıs */
.mode-single-col .card-body {
    padding: 0.5rem !important;
}
        /* =========================================
           1. TEMEL SAYFA & SIDEBAR AYARLARI
           ========================================= */
        body { 
            height: 100vh; 
            background-color: #f8f9fa; /* Varsayılan LIGHT */
            color: #334155;
            font-family: 'Inter', sans-serif; 
            transition: all 0.3s ease; 
            overflow-x: hidden; 
        }

        /* Sidebar Gradient Tasarımı */
        #sidebar { 
            width: 320px; 
            height: 100vh; 
            background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%); 
            color: #fff; 
            position: fixed; 
            left: 0; 
            top: 0; 
            overflow-y: auto; 
            z-index: 1045; 
            box-shadow: 4px 0 15px rgba(0,0,0,0.2); 
        }

        /* Sidebar Form Elemanları */
        #sidebar .form-control, #sidebar .form-select { 
            background-color: rgba(255, 255, 255, 0.1); 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            color: white; 
        }
        #sidebar .form-control:focus, #sidebar .form-select:focus { 
            background-color: rgba(255, 255, 255, 0.2); 
            border-color: #fff; 
            color: white; 
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); 
        }
        #sidebar option { color: #000; background-color: #fff; }
        #sidebar .form-label { color: #e0e0e0; font-size: 0.85rem; font-weight: 600; margin-bottom: 3px; }
        #sidebar hr { border-color: rgba(255,255,255,0.2); }
        
        .accordion-button:not(.collapsed) { color: #fff !important; background: transparent !important; box-shadow: none !important; }
        
        .settings-card { 
            background-color: rgba(255, 255, 255, 0.1); 
            border: 1px solid rgba(255, 255, 255, 0.2); 
            border-radius: 12px; 
            padding: 15px; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
        }
        .settings-card .form-check-label { color: #fff; cursor: pointer; }
        .settings-card .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }

        /* Ana İçerik Alanı */
        #main-content { 
            margin-left: 320px; 
            height: 100vh; 
            overflow-y: auto; 
            padding: 30px; 
            background-color: #f4f4f9; 
            background-image: radial-gradient(#cbd5e0 1px, transparent 1px); 
            background-size: 20px 20px; 
            transition: margin-left 0.3s; 
        }

        /* Mobil Uyum */
        @media (max-width: 991.98px) { 
            #sidebar { width: 300px; transform: translateX(-100%); transition: transform 0.3s; z-index: 1055; } 
            #sidebar.show { transform: translateX(0); } 
            #main-content { margin-left: 0; padding-top: 80px; } 
        }

        /* Soru Kartları Izgarası */
        #questionList { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
            gap: 20px; 
            grid-auto-rows: min-content; 
            padding-bottom: 150px !important; 
            align-content: start; 
        }

        /* =========================================
           2. SORU KARTI STİLLERİ (Temel)
           ========================================= */
        .question-card { 
            background: white; 
            border-radius: 12px; 
            border: 1px solid #eef2f7; 
            box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
            transition: all 0.2s ease; 
            display: flex; 
            flex-direction: column; 
            height: 100%; 
            position: relative; 
            z-index: 1; 
            /* Mobilde sürükleme JS ile kontrol edilecek */
        }
        .question-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0,0,0,0.1); z-index: 10; }
        
        .card-header-custom { 
            background-color: #f8f9fa; 
            border-bottom: 1px solid #eee; 
            padding: 10px 15px; 
            cursor: move; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
        }
        .card-body-custom { padding: 15px; flex-grow: 1; }
        
        .zoom-close-btn { 
            position: absolute; top: -15px; right: -15px; z-index: 1060; 
            background-color: #dc3545; color: white; border-radius: 50%; 
            width: 40px; height: 40px; display: flex; align-items: center; 
            justify-content: center; border: 2px solid white; cursor: pointer; 
        }

        /* =========================================
           3. NOT KUTULARI (Reis Özel İstek)
           ========================================= */
        .note-box {
            border-radius: 6px; padding: 8px 12px; margin: 10px 0;
            font-size: 0.95rem; display: flex; align-items: center; gap: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.06); border-left: 4px solid transparent;
            background-color: #fff; transition: all 0.2s ease-in-out;
        }
        .note-label {
            font-weight: 800; font-size: 0.7rem; padding: 3px 8px; border-radius: 4px;
            text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center; min-width: 60px;
        }
        .note-content { flex-grow: 1; font-weight: 500; line-height: 1.4; font-size: 0.9rem; }

        /* Not Renkleri */
        .note-box.type-INFO { background-color: #f0f9ff; border-left-color: #0284c7; }
        .note-box.type-INFO .note-label { background-color: #e0f2fe; color: #0284c7; }
        .note-box.type-INFO .note-content { color: #0c4a6e; }

        .note-box.type-WARNING { background-color: #fffbeb; border-left-color: #d97706; }
        .note-box.type-WARNING .note-label { background-color: #fef3c7; color: #d97706; }
        .note-box.type-WARNING .note-content { color: #92400e; }

        .note-box.type-NOTE { background-color: #f8fafc; border-left-color: #64748b; }
        .note-box.type-NOTE .note-label { background-color: #e2e8f0; color: #475569; }
        .note-box.type-NOTE .note-content { color: #334155; }

        /* Canlı Önizleme Animasyonu */
        #notePreviewBubble { display: none; margin-top: 15px; animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* =========================================
           4. DARK MODE AYARLARI (Geliştirilmiş)
           ========================================= */
        body.dark-mode { background-color: #0F1116 !important; color: #E2E8F0 !important; }
        body.dark-mode #sidebar { background: #161b22 !important; border-right: 1px solid #2A2F3A; }
        body.dark-mode #main-content { background-color: #0F1116 !important; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) !important; }
        
        body.dark-mode .question-card { background-color: #1A1D24 !important; border: 1px solid #2A2F3A !important; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
        body.dark-mode .card-header-custom { background-color: rgba(255,255,255,0.02) !important; border-bottom: 1px solid #2A2F3A !important; color: #fff !important; }
        
        body.dark-mode .text-dark { color: #E2E8F0 !important; }
        body.dark-mode .text-muted { color: #94A3B8 !important; }
        body.dark-mode .text-secondary { color: #cbd5e1 !important; }

        /* Not Kutuları Dark Mode */
        @media (prefers-color-scheme: dark) {
            body.dark-mode .note-box.type-INFO { background-color: #0c4a6e; border-left-color: #38bdf8; box-shadow: none; }
            body.dark-mode .note-box.type-INFO .note-label { background-color: #075985; color: #bae6fd; }
            body.dark-mode .note-box.type-INFO .note-content { color: #e0f2fe; }
            body.dark-mode .note-box.type-WARNING { background-color: #451a03; border-left-color: #fbbf24; box-shadow: none; }
            body.dark-mode .note-box.type-WARNING .note-label { background-color: #78350f; color: #fde68a; }
            body.dark-mode .note-box.type-WARNING .note-content { color: #fef3c7; }
            body.dark-mode .note-box.type-NOTE { background-color: #1e293b; border-left-color: #94a3b8; box-shadow: none; }
            body.dark-mode .note-box.type-NOTE .note-label { background-color: #334155; color: #cbd5e1; }
            body.dark-mode .note-box.type-NOTE .note-content { color: #f1f5f9; }
        }

        /* 🌙 PREMIUM DARK MODE MODAL FIXES */
        html body.dark-mode .modal-content {
            background-color: #1e1e1e !important;    
            border: 1px solid #333 !important;     
            box-shadow: 0 0 30px rgba(0,0,0,0.6) !important; 
            color: #e0e0e0 !important;                
        }
        html body.dark-mode .modal-header, 
        html body.dark-mode .modal-footer {
            border-color: #2a2a2a !important;        
            background-color: #1e1e1e !important; 
        }
        html body.dark-mode .modal-title { color: #ffffff !important; }
        html body.dark-mode .btn-close { filter: invert(1); opacity: 0.8; }

        /* Input Okunabilirliği (Kritik Düzeltme) */
        html body.dark-mode .modal-body input,
        html body.dark-mode .modal-body select,
        html body.dark-mode .modal-body textarea,
        html body.dark-mode .form-control,
        html body.dark-mode .form-select {
            background-color: #2a2a2a !important;
            border: 1px solid #444 !important;
            color: #ffffff !important;
            border-radius: 6px !important;
        }
        html body.dark-mode .modal-body input:focus,
        html body.dark-mode .modal-body select:focus,
        html body.dark-mode .modal-body textarea:focus {
            background-color: #2a2a2a !important;
            border-color: #3b82f6 !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
        }
        html body.dark-mode input::placeholder,
        html body.dark-mode textarea::placeholder {
            color: #888 !important; opacity: 1 !important;
        }
        html body.dark-mode .input-group-text {
            background-color: #333 !important;
            border-color: #444 !important;
            color: #e0e0e0 !important;
        }
        html body.dark-mode label, 
        html body.dark-mode .form-label,
        html body.dark-mode .modal-body h6 {
            color: #ccc !important;
            font-weight: 500 !important;
        }
        
        /* =========================================
           5. RESİM KARTLARI & MOBİL FIX
           ========================================= */
        /* Yeni Resim Kart Sistemi */
        .image-preview-container {
            display: flex; flex-wrap: wrap; gap: 15px; margin-top: 15px;
        }
        .image-card {
            position: relative; width: 140px; height: 140px;
            border-radius: 8px; overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            border: 1px solid #e0e0e0; background: #fff;
            transition: transform 0.2s;
        }
        .image-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
        .image-card img.uploaded-image {
            width: 100%; height: 100%; object-fit: cover; display: block;
        }
        .image-tools {
            position: absolute; bottom: 0; left: 0; right: 0;
            background: rgba(0, 0, 0, 0.75); padding: 5px 0;
            display: flex; justify-content: center; gap: 8px;
            opacity: 1; transition: opacity 0.2s;
        }
        .image-tools .btn-sm { padding: 2px 6px; font-size: 12px; }
        
        @media (max-width: 768px) { 
            .image-card { width: 120px; height: 120px; } 
        }

        /* Mobil Sürükleme Düzeltmeleri */
        .question-card { touch-action: pan-y; }
        .drag-handle { cursor: grab; touch-action: none; position: absolute; left: 10px; top: 50px; font-size: 24px; color: #cbd5e1; z-index: 10; padding: 5px 10px; }
        .drag-handle:active { cursor: grabbing; color: #64748b; }

        /* Sonuç Modalı Split View */
        .modal-split-container { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
        .split-left { flex: 2; min-width: 300px; background: #fff; padding: 20px; border-right: 1px solid #e2e8f0; }
        .split-right { flex: 1; min-width: 180px; background: #f8fafc; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
		/* Yardım İkonu Efekti */
.help-trigger {
    transition: transform 0.2s ease, opacity 0.2s;
    cursor: pointer;
}
.help-trigger:hover {
    transform: scale(1.1); /* Üzerine gelince hafif büyür */
    opacity: 1 !important;
}
/* --- REIS UI SIDEBAR AYARLARI --- */
.segment-btn { transition: all 0.2s ease; border-radius: 6px !important; }
.segment-btn:hover { background-color: rgba(255,255,255,0.1); color: #fff !important; }

/* Aktif Butonlar için Renkler */
.segment-btn.active[data-type="normal"] { background-color: #10b981 !important; color: #fff !important; box-shadow: 0 2px 5px rgba(16, 185, 129, 0.4); }
.segment-btn.active[data-type="tight"] { background-color: #f59e0b !important; color: #fff !important; box-shadow: 0 2px 5px rgba(245, 158, 11, 0.4); }
.segment-btn.active[data-type="eco"] { background-color: #ef4444 !important; color: #fff !important; box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4); }

/* Warning Box Animasyonu */
.warning-box.show { display: flex !important; animation: slideInBox 0.3s ease; }
@keyframes slideInBox { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
/* --- 🔥 REIS FIX: MOBİL İÇİN KİBARLAŞTIRMA --- */
        @media (max-width: 576px) {
            /* Başlığı biraz küçültelim */
            #headerTitle { 
                font-size: 1rem !important; 
            }
            
            /* Seçim butonlarını (İptal & Birleştir) küçültelim */
            #selectionTools .btn, #btnStartSelect {
                font-size: 0.65rem !important; /* Yazı boyutu küçülsün */
                padding: 5px 8px !important;    /* Kutu daralsın */
                line-height: 1.2;               /* Satır aralığı sıkılaşsın */
            }
            
            /* İkonları da orantılı küçültelim */
            #selectionTools i, #btnStartSelect i {
                font-size: 0.8rem !important;
            }
            
            /* Eğer hala sığmıyorsa İPTAL butonunun yazısını mobilde gizle, sadece X kalsın */
            /* İsteğe bağlı: Aşağıdaki satırın başındaki yorum işaretlerini kaldırabilirsin */
            /* #selectionTools .btn-danger span { display: none; } */
        }
		/* ==========================================================================
   🌙 SAAS KARTLARI İÇİN DARK MODE FİX (REIS EDITION)
   ========================================================================== */

/* 1. Kart Arka Planı ve Çerçeveler */
body.dark-mode .saas-card {
    background-color: #161B22 !important;
    border-color: #30363D !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
}

/* 2. Soru / Not Başlığı ve İkonlar */
body.dark-mode .saas-card .fw-bold { color: #E6EDF3 !important; }
body.dark-mode .saas-card .text-muted { color: #8B949E !important; }

/* 3. Not Modu (Sarımtırak Kartın Karanlık Hali) */
body.dark-mode .note-mode-card {
    background-color: #2D2314 !important; 
    border-color: #7A531A !important;
}
body.dark-mode .note-mode-card .fw-bold { color: #E2B93B !important; }

/* 4. Yeni Bölüm Başlık Şeridi (Beyaz Parlamayı Keser) */
body.dark-mode div[style*="background: #fff; border-radius: 8px;"] {
    background-color: #161B22 !important;
    border-color: #30363D !important;
}
body.dark-mode input[placeholder*="Bölüm Adı"] {
    background-color: transparent !important;
    color: #E6EDF3 !important;
}
body.dark-mode input[placeholder*="Bölüm Adı"]::placeholder {
    color: #6e7681 !important;
}
body.dark-mode div[style*="background-color: #E5E7EB;"] {
    background-color: #30363D !important; 
}
body.dark-mode .btn-light.text-danger {
    background-color: #21262D !important;
    border-color: #30363D !important;
    color: #FF7B72 !important;
}

/* 5. Kart İçindeki Metinler */
body.dark-mode .q-preview-text,
body.dark-mode .q-pre-text {
    color: #8B949E !important;
}

/* 6. Şıklar (A, B, C, D, E) */
body.dark-mode .choice-dot {
    background-color: #21262D !important;
    border-color: #30363D !important;
    color: #C9D1D9 !important;
}
body.dark-mode .choice-dot:hover { background-color: #30363D !important; }
body.dark-mode .choice-dot.correct {
    background-color: #1A4B2C !important;
    border-color: #2EA043 !important;
    color: #46DD6A !important;
}

/* 7. İkon Butonları (Makas, Çöp) */
body.dark-mode .action-icon-btn { color: #8B949E !important; }
body.dark-mode .action-icon-btn:hover {
    background-color: #30363D !important;
    color: #E6EDF3 !important;
}
body.dark-mode .action-icon-btn.delete-hover:hover {
    background-color: #490202 !important;
    color: #FF7B72 !important;
}

/* 8. Dropdown (3 Nokta Menüsü) */
body.dark-mode .saas-dropdown .dropdown-menu {
    background-color: #161B22 !important;
    border: 1px solid #30363D !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8) !important;
}
body.dark-mode .saas-dropdown .dropdown-item { color: #C9D1D9 !important; }
body.dark-mode .saas-dropdown .dropdown-item:hover {
    background-color: #21262D !important;
    color: #FFFFFF !important;
}
body.dark-mode .saas-dropdown .dropdown-item span { color: inherit !important; }

/* 9. Manuel Cevap ve Sembol (Omega) Butonu */
body.dark-mode input[id^="manualInput_"] {
    background-color: #0D1117 !important;
    color: #E6EDF3 !important;
    border: 1px solid #30363D !important;
    box-shadow: none !important;
}
body.dark-mode button[title="Sembolleri Aç"] {
    background-color: #21262D !important;
    border-color: #30363D !important;
    color: #8B949E !important;
}

/* 10. Seçim Modu (Seçili Kart Parlaması) */
body.dark-mode .selected-card {
    border-color: #1F6FEB !important;
    background-color: rgba(31, 111, 235, 0.1) !important;
}
/* ==========================================================================
   🚀 PREMIUM DARK MODE UX EKLENTİLERİ (SAAS)
   ========================================================================== */

/* 1. AKILLI GÖRSEL KARARTMA (Göz Dostu) */
body.dark-mode .saas-card img {
    filter: brightness(0.85) contrast(1.15); /* Işığı %15 kıs, kontrastı hafif artır */
    transition: filter 0.3s ease;
}
body.dark-mode .saas-card img:hover {
    filter: brightness(1) contrast(1); /* Fareyle üstüne gelince orijinal parlaklığa döner */
}

/* 2. NEON GLOW & UZAY GRİSİ NOKTA DESENİ */
body.dark-mode #main-content {
    background-color: #0D1117 !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}
body.dark-mode .saas-card.selected-card {
    border-color: #1F6FEB !important;
    background-color: rgba(31, 111, 235, 0.06) !important;
    box-shadow: 0 0 25px rgba(31, 111, 235, 0.2), inset 0 0 0 1px rgba(31, 111, 235, 0.5) !important;
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. PREMIUM ÖZEL SCROLLBAR (Sadece Dark Modda) */
body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: #0D1117; 
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #30363D; 
    border-radius: 8px;
    border: 3px solid #0D1117; /* Sağdan soldan ince boşluk bırakır, Apple tarzı */
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4B5563; 
}

/* 4. ODAK MODU (Focus Mode) */
/* Bir inputa (örn: Bölüm Adı veya Manuel Cevap) tıklayınca diğer kartları karanlığa gömer */
body.dark-mode #questionList {
    transition: opacity 0.4s ease, filter 0.4s ease;
}
body.dark-mode #questionList:has(input:focus) .saas-card:not(:has(input:focus)) {
    opacity: 0.35;
    transform: scale(0.98);
    transition: all 0.4s ease;
}
/* ==========================================================================
   TOPLAM SORU BAŞLIĞI (Okunabilirlik ve Dark Mode)
   ========================================================================== */
#headerTitle {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #334155; 
    transition: all 0.3s ease;
}

#headerTitle span#questionCount {
    color: #0d6efd; 
    font-weight: 800;
}

body.dark-mode #headerTitle {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
    opacity: 1 !important;
}

body.dark-mode #headerTitle span#questionCount {
    color: #58A6FF !important; 
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(88, 166, 255, 0.4); 
}

/* ==========================================================================
   SAAS BUTONU (SEÇ & BİRLEŞTİR) TEMİZLİĞİ
   ========================================================================== */
.btn-saas {
    background-color: #3B82F6 !important;
    border: 1px solid #3B82F6 !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 10px;
    padding: 6px 14px;
    transition: all 0.2s ease;
}

.btn-saas:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

body.dark-mode .btn-saas {
    background-color: #238636 !important;
    border-color: #2ea043 !important;
    box-shadow: 0 0 15px rgba(35, 134, 54, 0.4) !important;
}

body.dark-mode .btn-saas:hover {
    background-color: #2ea043 !important;
}

/* ==========================================================================
   DARK MODE ARKA PLAN DESEN YUMUŞATMA
   ========================================================================== */
body.dark-mode #main-content {
    background-color: #0D1117 !important;
    background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}
/* =========================================
   KESİN ÇÖZÜM: TOPLAM SORU BAŞLIĞI
   ========================================= */
body.dark-mode #headerTitle, 
html.dark-mode #headerTitle,
.dark-mode #headerTitle {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0,0,0,1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.dark-mode #headerTitle span#questionCount,
html.dark-mode #headerTitle span#questionCount,
.dark-mode #questionCount {
    color: #58A6FF !important; 
    font-weight: 900 !important;
}
/* =========================================================
   📱 REIS APK BİLDİRİM ÇUBUĞU (STATUS BAR) DÜZELTMESİ
   ========================================================= */
@media (max-width: 991.98px) {
    /* 1. Sol menünün en üstüne 40px nefes payı bırakır (İkonlar şarjla çakışmaz) */
    #sidebar {
        padding-top: 45px !important;
    }
    
    /* 2. Üstteki beyaz menü çubuğunu (Tester Pro yazan yer) aşağı iter */
    #mobile-navbar {
        padding-top: 25px !important; 
        height: 75px !important;
    }
    
    /* 3. Arka plandaki ana içeriği (Soru listesi vs.) biraz daha aşağı kaydırır */
    #main-content {
        padding-top: 95px !important;
    }
    
    /* 4. Modalların (Açılır pencerelerin) tepesini de kurtaralım */
    .modal-dialog {
        margin-top: 45px !important;
    }
}
    /* REİS KESİN ÇÖZÜM V2 - JS İLE EKLENEN HER ŞEYİ EZER GEÇER */
    
    /* Başlığın kendisini ve içine JS ile giren tüm metinleri beyaz yap */
    body.dark-mode #headerTitle,
    body.dark-mode #headerTitle * {
        color: #FFFFFF !important;
        text-shadow: 0 2px 5px rgba(0,0,0,0.8) !important;
    }

    /* Sadece Sayıyı ve İkonu parlak mavi yap */
    body.dark-mode #headerTitle #questionCount,
    body.dark-mode #headerTitle i {
        color: #58A6FF !important;
        text-shadow: 0 0 10px rgba(88, 166, 255, 0.4) !important;
    }
	/* =========================================
       ZİYARET SAYISI (Dark Mode Uyumlu)
       ========================================= */
    body.dark-mode #visitCounter {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #A0AEC0 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }

    /* =========================================
       LOGO YUMUŞATMA (Göz almasını engeller)
       ========================================= */
    body.dark-mode #sidebar img[alt="Logo"] {
        filter: brightness(0.8) contrast(1.1); /* Işığını biraz kısar */
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Şık bir gölge */
    }

    /* =========================================
       '?' BİRLEŞTİRME BİLGİ MENÜSÜ (Dark Mode)
       ========================================= */
    body.dark-mode #infoMergeModal .modal-content {
        background-color: #161B22 !important;
        border: 1px solid #30363D !important;
    }
    body.dark-mode #infoMergeModal .modal-header {
        background-color: #161B22 !important;
        border-bottom: 1px solid #30363D !important;
    }
    body.dark-mode #infoMergeModal .modal-title {
        color: #58A6FF !important; /* Mavi Başlık */
    }
    body.dark-mode #infoMergeModal .bg-light,
    body.dark-mode #infoMergeModal .bg-white {
        background-color: #0D1117 !important; /* Uzay Grisi Arka Plan */
        border-color: #30363D !important;
        color: #C9D1D9 !important;
    }
    body.dark-mode #infoMergeModal .alert-info {
        background-color: rgba(31, 111, 235, 0.1) !important;
        border: 1px solid rgba(31, 111, 235, 0.2) !important;
        color: #8B949E !important;
    }
    body.dark-mode #infoMergeModal .alert-info h6 {
        color: #C9D1D9 !important;
    }
    body.dark-mode #infoMergeModal .text-muted,
    body.dark-mode #infoMergeModal .text-secondary {
        color: #8B949E !important;
    }
	/* ===== LOGO VE ZİYARETÇİ KÖŞESİ ===== */
    body.dark-mode #visitCounter {
        background: #161B22 !important;
        color: #8B949E !important;
        border: 1px solid #30363D !important;
    }
    body.dark-mode #sidebar h4 img[alt="Logo"] {
        filter: brightness(0.75) contrast(1.1); /* Logonun beyazlığını kısar, göz almasını engeller */
        border-radius: 8px !important;
    }

    /* ===== BİLGİ (?) BUTONU ===== */
    body.dark-mode button[onclick="showMergeInfo()"] {
        background-color: #161B22 !important;
        border-color: #30363D !important;
    }
    body.dark-mode button[onclick="showMergeInfo()"] i {
        color: #8B949E !important;
    }
    body.dark-mode button[onclick="showMergeInfo()"]:hover {
        background-color: #30363D !important;
    }
    body.dark-mode button[onclick="showMergeInfo()"]:hover i {
        color: #E6EDF3 !important;
    }

    /* ===== SOL MENÜDEKİ BEYAZ BUTONLAR (PDF Kırp vb.) ===== */
    body.dark-mode #sidebar .btn-light {
        background-color: #161B22 !important;
        border-color: #30363D !important;
        color: #8B949E !important;
    }
    body.dark-mode #sidebar .btn-light.text-primary {
        color: #58A6FF !important;
    }
    body.dark-mode #sidebar .btn-light:hover {
        background-color: #30363D !important;
        color: #FFFFFF !important;
    }

    /* ===== NASIL BİRLEŞTİRİLİR MODALI ===== */
    body.dark-mode #infoMergeModal .modal-content {
        background-color: #0D1117 !important;
        border: 1px solid #30363D !important;
    }
    body.dark-mode #infoMergeModal .modal-header {
        background-color: #161B22 !important;
        border-bottom: 1px solid #30363D !important;
    }
    body.dark-mode #infoMergeModal .modal-title {
        color: #58A6FF !important;
    }
    body.dark-mode #infoMergeModal .bg-light,
    body.dark-mode #infoMergeModal .bg-white,
    body.dark-mode #infoMergeModal .border.bg-white {
        background-color: #161B22 !important;
        border-color: #30363D !important;
        color: #C9D1D9 !important;
    }
    body.dark-mode #infoMergeModal .alert-info {
        background-color: rgba(31, 111, 235, 0.1) !important;
        border: 1px solid rgba(31, 111, 235, 0.2) !important;
        color: #8B949E !important;
    }
    body.dark-mode #infoMergeModal .alert-info h6 {
        color: #E6EDF3 !important;
    }
    body.dark-mode #infoMergeModal .text-secondary,
    body.dark-mode #infoMergeModal .text-muted {
        color: #8B949E !important;
    }
    body.dark-mode #infoMergeModal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
    body.dark-mode #infoMergeModal i.text-primary {
        color: #58A6FF !important;
    }
.reis-qr-box { background-color: #ffffff; transition: all 0.3s ease; }
            .reis-qr-title { color: #1f2937 !important; }
            .reis-qr-desc { color: #6b7280 !important; }
            .reis-qr-img-wrapper { background-color: transparent; border-radius: 4px; padding: 2px; }
            
            body.dark-mode .reis-qr-box { 
                background-color: #161b22 !important; 
                border: 1px solid #30363d !important; 
            }
            body.dark-mode .reis-qr-title { color: #e6edf3 !important; } 
            body.dark-mode .reis-qr-desc { color: #8b949e !important; }
            body.dark-mode .reis-qr-img-wrapper { 
                background-color: #ffffff !important; 
            }
            
            /* 🔥 YENİ: APK Butonunun Neon Parlamasını Kesen Ayar */
            body.dark-mode #apkDownloadBtn {
                background-color: #238636 !important; /* Göz yormayan, tok mat yeşil */
                color: #ffffff !important; /* Karanlıkta daha net okunması için beyaz yazı */
            }