/* ══════════════════════════════════════════════════════════════
   THEME SYSTEM — Karanlık & Aydınlık Mod
   Tüm sayfalarda yüklenir
   ══════════════════════════════════════════════════════════════ */

/* ── KARRANLIK MOD (Varsayılan) ─────────────────────────────── */
:root, [data-theme="dark"] {
    --bg:          #0f1117;
    --bg-2:        #080b14;
    --surface:     #181c27;
    --surface-2:   #1e2332;
    --surface-3:   #252b3b;
    --border:      rgba(255,255,255,0.08);
    --border-2:    rgba(255,255,255,0.14);

    --primary:     #6366f1;
    --primary-h:   #4f46e5;
    --primary-l:   #818cf8;
    --primary-dim: rgba(99,102,241,0.15);
    
    --success:     #10b981;
    --success-dim: rgba(16,185,129,0.15);
    
    --danger:      #ef4444;
    --danger-dim:  rgba(239,68,68,0.15);
    
    --warning:     #f59e0b;
    --warning-dim: rgba(245,158,11,0.15);
    
    --info:        #3b82f6;
    --info-dim:    rgba(59,130,246,0.15);

    --text:        #f1f5f9;
    --text-2:      #94a3b8;
    --text-3:      #64748b;
    --text-4:      #475569;

    --glass-bg:    rgba(17, 24, 39, 0.4);
    --glass-border: rgba(255, 255, 255, 0.08);

    --shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);

    --sidebar-w:   260px;
    --topbar-h:    64px;
    --radius:      14px;
    --radius-sm:   8px;

    /* Özel arka plan görselleri */
    --bg-pattern:  radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                   radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
}

/* ── AYDINLIK MOD ─────────────────────────────────────────── */
/* html[...]: sayfa içi :root tanımlarından daha özgül, aydınlık mod ezilmesin */
html[data-theme="light"] {
    --bg:          #f8fafc;
    --bg-2:        #ffffff;
    --surface:     #ffffff;
    --surface-2:   #f1f5f9;
    --surface-3:   #e2e8f0;
    --border:      rgba(15,23,42,0.08);
    --border-2:    rgba(15,23,42,0.14);

    --primary:     #6366f1;
    --primary-h:   #4f46e5;
    --primary-l:   #4338ca;
    --primary-dim: rgba(99,102,241,0.12);
    
    --success:     #059669;
    --success-dim: rgba(5,150,105,0.12);
    
    --danger:      #dc2626;
    --danger-dim:  rgba(220,38,38,0.12);
    
    --warning:     #d97706;
    --warning-dim: rgba(217,119,6,0.12);
    
    --info:        #2563eb;
    --info-dim:    rgba(37,99,235,0.12);

    --text:        #0f172a;
    --text-2:      #475569;
    --text-3:      #64748b;
    --text-4:      #94a3b8;

    --glass-bg:    rgba(255, 255, 255, 0.7);
    --glass-border: rgba(15, 23, 42, 0.08);

    --shadow-sm:   0 1px 3px rgba(15,23,42,0.08);
    --shadow-md:   0 2px 8px rgba(15,23,42,0.1);
    --shadow-lg:   0 4px 16px rgba(15,23,42,0.12);

    /* Aydınlık mod arka plan */
    --bg-pattern:  radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
                   radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.02) 0%, transparent 50%);
}

/* ── Geçiş animasyonları ─────────────────────────────────────── */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar,
.topbar,
.card,
.kpi-card,
.kpi-chip,
.btn,
.search-input,
.nav-link,
.sb-link {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ── Tema değiştirme butonu ─────────────────────────────────── */
.theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    transition: all 0.2s;
}

[data-theme="light"] .theme-toggle {
    background: rgba(15,23,42,0.04);
    border: 1px solid rgba(15,23,42,0.08);
}

.theme-toggle:hover {
    background: rgba(99,102,241,0.12);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.2);
    transform: translateY(-1px);
}

.theme-toggle .material-symbols-outlined {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.theme-toggle:active .material-symbols-outlined {
    transform: rotate(180deg);
}

/* ── Glow orbs (Landing page için) ────────────────────────────── */
.glow-orb {
    transition: opacity 0.5s ease;
}

[data-theme="light"] .glow-orb {
    opacity: 0.3 !important;
}

/* ── Mobil responsive iyileştirmeleri ────────────────────────── */
@media (max-width: 768px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
}