/* ════════════════════════════════════════════════════════════════════
   SkyraIrl — Açık Tema (light) override katmanı
   html[data-theme="light"] aktifken devreye girer.
   Tüm değişken katmanlarını (--bs-*, --skyra-*, --home-*, --snv-*)
   yeniden eşler; ayrıca literal !important yüzeyleri ezer.
   En son yüklenir, böylece diğer !important kurallarını geçer.
   ════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
    /* ── blackspace-refresh (--bs-*) ── */
    --bs-bg: #f3f6fb;
    --bs-bg-2: #eaeff6;
    --bs-panel: #ffffff;
    --bs-panel-2: #f4f7fb;
    --bs-line: rgba(120, 140, 170, .18);
    --bs-line-soft: rgba(120, 140, 170, .12);
    --bs-text: #182338;
    --bs-muted: rgba(48, 64, 92, .78);
    --bs-dim: rgba(80, 96, 124, .62);
    --bs-cyan: #0c8fb8;
    --bs-violet: #6a5acd;
    --bs-amber: #d98a12;
    --bs-green: #168f6a;
    --bs-rose: #d8395c;
    --bs-shadow: 0 6px 20px rgba(40, 60, 100, .07);

    /* ── skyra core (--skyra-*) ── */
    --skyra-bg: #f3f6fb;
    --skyra-bg2: #eaeff6;
    --skyra-surface: #ffffff;
    --skyra-nav-bg: #ffffff;
    --skyra-border: rgba(120, 140, 170, .2);
    --skyra-border-h: rgba(106, 90, 205, .55);
    --skyra-text: #182338;
    --skyra-text-muted: rgba(48, 64, 92, .70);

    /* ── home (--home-*) ── */
    --home-bg: #f3f6fb;
    --home-panel: #ffffff;
    --home-panel-soft: #f4f7fb;
    --home-line: rgba(120, 140, 170, .18);
    --home-line-soft: rgba(120, 140, 170, .12);
    --home-text: #182338;
    --home-muted: rgba(48, 64, 92, .78);
    --home-dim: rgba(80, 96, 124, .60);
    --home-cyan: #0c8fb8;
    --home-violet: #6a5acd;
    --home-amber: #d98a12;
    --home-green: #168f6a;

    /* ── navbar (--snv-*) ── */
    --snv-bg: #ffffff;
    --snv-line: rgba(120, 140, 170, .18);
    --snv-text: #182338;
    --snv-muted: rgba(48, 64, 92, .76);
    --snv-cyan: #0c8fb8;
    --snv-violet: #6a5acd;
    --snv-amber: #d98a12;
}

/* ── Sayfa zemini + yıldız dokusu ──────────────────────────────────────── */
html[data-theme="light"] body.skyra-body {
    background:
        radial-gradient(circle at 84% 4%, rgba(240, 168, 30, .06), transparent 34%),
        radial-gradient(circle at 12% 6%, rgba(12, 143, 184, .05), transparent 30%),
        linear-gradient(180deg, #f4f7fb 0%, #eef3f9 55%, #f4f7fb 100%) !important;
    color: var(--bs-text) !important;
}

html[data-theme="light"] body.skyra-body::before {
    opacity: 0 !important;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
html[data-theme="light"] .snv {
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(20, 38, 70, .06);
}

html[data-theme="light"] .snv-icon-btn {
    background: #f4f7fb;
}

html[data-theme="light"] .snv-link:hover,
html[data-theme="light"] .snv-icon-btn:hover,
html[data-theme="light"] .snv-icon-btn.is-active {
    background: rgba(12, 143, 184, .10);
}

html[data-theme="light"] .snv-avatar {
    background: radial-gradient(circle at 32% 28%, #cfe0ff, #8aa6d8);
    color: #1d3a66;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
html[data-theme="light"] .skyra-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--bs-line) !important;
    box-shadow: 0 -1px 0 rgba(20, 38, 70, .06) !important;
}

html[data-theme="light"] .footer-brand { color: #0c8fb8 !important; }
html[data-theme="light"] .footer-copy,
html[data-theme="light"] .footer-tech { color: var(--bs-muted) !important; }

/* ── Genel kartlar / formlar (custom.css + blackspace literal'ları) ────── */
html[data-theme="light"] .skyra-card,
html[data-theme="light"] .qz-card,
html[data-theme="light"] .qz-state-card,
html[data-theme="light"] .dash-hero,
html[data-theme="light"] .dash-stat,
html[data-theme="light"] .dash-panel,
html[data-theme="light"] .member-card,
html[data-theme="light"] .qc-sidebar,
html[data-theme="light"] .qc-main,
html[data-theme="light"] .qc-catpanel {
    background: #ffffff !important;
    border-color: var(--bs-line) !important;
    box-shadow: var(--bs-shadow) !important;
}

html[data-theme="light"] .skyra-input,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
    background: #ffffff !important;
    border-color: var(--bs-line) !important;
    color: var(--bs-text) !important;
}

html[data-theme="light"] .skyra-input::placeholder,
html[data-theme="light"] .form-control::placeholder {
    color: var(--bs-dim) !important;
}

/* ── Ana sayfa hero ────────────────────────────────────────────────────── */
/* Home kart/panel yüzeyleri: kutu değil, hafif yüzey */
html[data-theme="light"] .home-stat,
html[data-theme="light"] .home-panel {
    background: #ffffff;
    border-color: var(--home-line);
    box-shadow: none;
}

html[data-theme="light"] .home-task,
html[data-theme="light"] .home-live-row,
html[data-theme="light"] .home-leaders a {
    background: #f6f8fc;
    border-color: var(--home-line-soft);
}

html[data-theme="light"] .home-hero {
    border-color: var(--home-line);
    background:
        radial-gradient(120% 120% at 76% 46%, rgba(240, 168, 30, .12), transparent 46%),
        linear-gradient(90deg, #ffffff 0%, #f7f9fc 52%, #eef3f9 100%);
}

html[data-theme="light"] .home-hero::before { opacity: .16; }

html[data-theme="light"] .home-orbit::after {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25) 26%, transparent 52%),
        radial-gradient(circle at 60% 48%, rgba(240, 168, 30, .14), transparent 30%);
}

html[data-theme="light"] .home-kicker {
    background: #ffffff;
    border-color: var(--home-line);
    color: #2b3850;
    box-shadow: 0 2px 8px rgba(40, 60, 100, .05);
}

html[data-theme="light"] .home-kicker-mark {
    background: var(--bs-cyan);
    box-shadow: 0 0 10px rgba(12, 143, 184, .5);
}

/* Görev/canlı/lider satırları light hover → cyan yardımcı vurgu */
html[data-theme="light"] .home-task:hover,
html[data-theme="light"] .home-live-row:hover,
html[data-theme="light"] .home-leaders a:hover {
    border-color: rgba(12, 143, 184, .30);
    background: rgba(12, 143, 184, .05);
}

/* ── Sıcak güneş ana vurgu + cyan yardımcı (light) ─────────────────────── */
/* Birincil buton → standart mor→camgöbeği (her iki temada aynı konsept) */
html[data-theme="light"] .home-btn-primary {
    background: linear-gradient(135deg, #7b5cff, #2aa8d8) !important;
    border-color: rgba(123, 92, 255, .5) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(123, 92, 255, .22) !important;
}

html[data-theme="light"] .home-btn-primary:hover {
    color: #ffffff !important;
    border-color: rgba(123, 92, 255, .8) !important;
}

/* Hayalet buton "Günlük Quiz" → sade border */
html[data-theme="light"] .home-btn-ghost {
    background: #ffffff !important;
    border-color: var(--home-line) !important;
    color: var(--bs-text) !important;
}

html[data-theme="light"] .home-btn-ghost:hover {
    border-color: rgba(12, 143, 184, .45) !important;
}

/* Ghost/outline butonlar açık temada açık zemin + koyu metin (blackspace koyu zeminini ez) */
html[data-theme="light"] .btn-skyra-ghost,
html[data-theme="light"] .skyra-btn-outline,
html[data-theme="light"] .dash-btn--ghost,
html[data-theme="light"] .qc-add-q-btn {
    background: #ffffff !important;
    border: 1px solid var(--home-line, rgba(120,140,170,.3)) !important;
    color: var(--bs-text, #182338) !important;
}
html[data-theme="light"] .btn-skyra-ghost:hover,
html[data-theme="light"] .skyra-btn-outline:hover,
html[data-theme="light"] .dash-btn--ghost:hover {
    border-color: rgba(123, 92, 255, .55) !important;
}

/* Rehber (Info) hero — blackspace koyu hero bg'sini açık temada ez */
html[data-theme="light"] .info-hero {
    background:
        radial-gradient(circle at 50% 28%, rgba(106, 90, 205, .12), transparent 46%),
        radial-gradient(circle at 74% 64%, rgba(12, 143, 184, .08), transparent 44%),
        linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%) !important;
}
/* Rehber kartları/ikon/tag/accordion — açık temada açık zemin (blackspace koyusunu ez) */
html[data-theme="light"] .info-tl-card,
html[data-theme="light"] .info-tl-icon,
html[data-theme="light"] .info-acc-item,
html[data-theme="light"] .info-orbit-sun,
html[data-theme="light"] .info-planet {
    background: #ffffff !important;
    border-color: var(--home-line, rgba(120,140,170,.3)) !important;
}
html[data-theme="light"] .info-tl-tag {
    background: rgba(106, 90, 205, .12) !important;
    border-color: transparent !important;
}
html[data-theme="light"] .info-orbit-sun {
    background:
        radial-gradient(circle at 50% 36%, rgba(240,165,30,.28), transparent 64%),
        #ffffff !important;
    border-color: rgba(226,150,20,.45) !important;
}

/* Panel "tümünü gör" linkleri → cyan yardımcı */
html[data-theme="light"] .home-panel-more {
    color: var(--bs-cyan);
}

html[data-theme="light"] .home-panel-more:hover {
    color: #0a7596;
}

/* Başlık aksan çizgisi → güneşten gökyüzüne */
html[data-theme="light"] .home-title-stack::before {
    background: linear-gradient(180deg, #f2a51d, rgba(12, 143, 184, .5), transparent);
}

/* Navbar aktif "Ana Sayfa" → sade sıcak ton, az baskın */
html[data-theme="light"] .snv-link--active {
    background: rgba(240, 168, 30, .12);
    border-color: rgba(240, 168, 30, .28);
    color: #8a5d06;
}

html[data-theme="light"] .snv-link:hover,
html[data-theme="light"] .snv-icon-btn:hover,
html[data-theme="light"] .snv-icon-btn.is-active {
    background: rgba(12, 143, 184, .09);
    border-color: rgba(12, 143, 184, .26);
}

/* Puan rozeti → beyaz / kenarlıklı, koyu metin, sıcak gem */
html[data-theme="light"] .snv-points {
    background: #ffffff;
    border-color: var(--home-line);
    color: #2b3850;
}

html[data-theme="light"] .snv-points:hover {
    border-color: rgba(240, 168, 30, .5);
    background: rgba(240, 168, 30, .05);
}

html[data-theme="light"] .snv-points-val {
    color: #182338;
}

html[data-theme="light"] .snv-points-gem svg {
    fill: rgba(240, 168, 30, .2);
    stroke: #d98a12;
}

/* Yörünge rozeti (online sayacı) → açık zemin */
html[data-theme="light"] .home-orbit-meta {
    background: rgba(255, 255, 255, .82);
    border-color: var(--home-line);
    color: var(--bs-muted);
    box-shadow: 0 4px 14px rgba(40, 60, 100, .08);
}

html[data-theme="light"] .home-orbit-meta strong {
    color: var(--bs-cyan);
}

/* Sparkline gölgesini light zeminde hafiflet */
html[data-theme="light"] .home-spark polyline { opacity: 1; }

/* ── Tema anahtarı (light aktifken) ────────────────────────────────────── */
html[data-theme="light"] .snv-switch {
    background: rgba(20, 38, 70, .04);
}

/* ── Tablolar (Geçmiş Quizler vb.) — açık temada okunur metin ──────────────
   blackspace-refresh td rengini koyu tema için neredeyse beyaz yapıyor;
   açık zeminde kayboluyordu. ── */
html[data-theme="light"] .skyra-table th {
    color: var(--bs-muted) !important;
    border-bottom-color: var(--bs-line) !important;
}
html[data-theme="light"] .skyra-table td {
    color: var(--bs-text) !important;
    border-bottom-color: var(--bs-line) !important;
}
html[data-theme="light"] .skyra-table tr:hover td {
    background: rgba(12, 143, 184, .05) !important;
}