/* ============================================================
   Halil & Sude Kontrol Paneli — Koyu (Dark / "Aurora") Tema Katmanı
   ------------------------------------------------------------
   Bu dosya yalnızca html[data-theme="dark"] iken devreye girer.
   Görevleri:
   1. index.html içindeki <style> bloğunda tanımlı özel sınıfların
      (glass-card, kişi temaları, yapışkan notlar, hava durumu pill'i
      vb.) koyu/neon karşılıklarını vermek.
   2. Renk eşlemesi yüzünden ters kalan birkaç Tailwind utility'sini
      (modal karartması, görsel üzeri rozetler, beyaz yüzeyler) elle
      düzeltmek.
   Tailwind build'lerinden (css/tailwind*.build.css) SONRA yüklenir.
   ============================================================ */

/* ---------- Genel zemin & tipografi ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    background:
        radial-gradient(1100px 700px at 85% -10%, rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(900px 620px at -10% 22%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(820px 600px at 50% 112%, rgba(16, 185, 129, 0.13), transparent 60%),
        linear-gradient(165deg, #05070f 0%, #070b17 45%, #0a0f1e 100%);
    color: #e7fdf3;
}

/* Aurora ışık küreleri: menekşe / camgöbeği / zümrüt */
html[data-theme="dark"] .bg-blob {
    opacity: 0.42;
    filter: blur(90px);
}
html[data-theme="dark"] .blob-1 { background: #7c3aed; }
html[data-theme="dark"] .blob-2 { background: #0891b2; }
html[data-theme="dark"] .blob-3 { background: #059669; }

/* İmza başlık: el yazısı yerine degrade "Sora" */
html[data-theme="dark"] .font-hand {
    font-family: 'Sora', 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(115deg, #5eead4 0%, #38bdf8 48%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ---------- Cam kartlar & form alanları ---------- */
html[data-theme="dark"] .glass-card {
    background: linear-gradient(160deg, rgba(23, 32, 51, 0.82), rgba(12, 18, 32, 0.68));
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.6rem;
    box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.75),
                inset 0 1px 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .input-glass {
    background: rgba(13, 20, 36, 0.72);
    border: 1.5px solid rgba(148, 163, 184, 0.22);
    color: #e7fdf3;
}
html[data-theme="dark"] .input-glass:focus {
    background: rgba(13, 20, 36, 0.94);
    border-color: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.16);
}

/* Yüzey olarak kullanılan beyaz tonları: koyu cam yüzeylere çevir */
html[data-theme="dark"] .bg-white\/50,
html[data-theme="dark"] .bg-white\/60,
html[data-theme="dark"] .bg-white\/70,
html[data-theme="dark"] .bg-white\/75 {
    background-color: rgba(148, 163, 184, 0.10);
}
html[data-theme="dark"] .bg-white\/80 {
    background-color: rgba(148, 163, 184, 0.12);
}
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/95 {
    background-color: rgba(10, 16, 32, 0.86);
}

/* Beyaz kenarlıklar: koyu zeminde ince gri halka */
html[data-theme="dark"] .border-white {
    border-color: rgba(148, 163, 184, 0.16);
}

/* Kapatma düğmeleri (yalnızca <button class="bg-white">): koyu yüzey.
   İçindeki beyaz nokta/rozet <span>'leri beyaz kalır. */
html[data-theme="dark"] button.bg-white {
    background-color: #1d2740;
    color: #c9f7e4;
}

/* ---------- Kişi temaları: Halil (camgöbeği) & Sude (zümrüt) ---------- */
html[data-theme="dark"] .theme-halil {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(56, 189, 248, 0.10));
    border: 1px solid rgba(56, 189, 248, 0.38);
    color: #d6efff;
    box-shadow: 0 8px 20px -6px rgba(14, 165, 233, 0.30);
}
html[data-theme="dark"] .theme-sude {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.24), rgba(52, 211, 153, 0.10));
    border: 1px solid rgba(52, 211, 153, 0.38);
    color: #d9fbea;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.30);
}

/* ---------- Google Keep tarzı yapışkan notlar (koyu varyant) ---------- */
html[data-theme="dark"] .sticky-note {
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #e8f6ef;
    box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .sticky-note-halil {
    background: linear-gradient(160deg, #10263c 0%, #17395c 100%);
}
html[data-theme="dark"] .sticky-note-sude {
    background: linear-gradient(160deg, #0d2a24 0%, #154439 100%);
}

/* ---------- Not editörü ---------- */
html[data-theme="dark"] .note-editor:empty::before {
    color: rgba(148, 163, 184, 0.55);
}
html[data-theme="dark"] .note-tool {
    color: #7ce8c0;
}
html[data-theme="dark"] .note-tool-active {
    background: rgba(52, 211, 153, 0.20);
    color: #a7f3d0;
    opacity: 1;
}

/* ---------- Hava durumu pill'leri: koyulaştırılmış illüstrasyon ---------- */
html[data-theme="dark"] .weather-pill-urfa {
    background-image: linear-gradient(rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.55)), url("../assets/urfa.svg");
    background-size: cover;
    background-position: center 45%;
}
html[data-theme="dark"] .weather-pill-ankara {
    background-image: linear-gradient(rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.55)), url("../assets/ankara.svg");
    background-size: cover;
    background-position: center 45%;
}

/* ---------- Hava durumu modalı: koyulaştırılmış illüstrasyon ---------- */
html[data-theme="dark"] .weather-modal-urfa {
    background-image: linear-gradient(rgba(2, 6, 23, 0.6), rgba(2, 6, 23, 0.6)), url("../assets/urfa.svg");
    background-size: cover;
    background-position: center 45%;
}
html[data-theme="dark"] .weather-modal-ankara {
    background-image: linear-gradient(rgba(2, 6, 23, 0.6), rgba(2, 6, 23, 0.6)), url("../assets/ankara.svg");
    background-size: cover;
    background-position: center 45%;
}

/* ---------- Aktif ders vurgusu ---------- */
html[data-theme="dark"] .active-timeline-item {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(20, 184, 166, 0.10));
    border-color: rgba(52, 211, 153, 0.45) !important;
}

/* ---------- Ters kalan utility düzeltmeleri ---------- */

/* Modal karartması: koyu lacivert perde */
html[data-theme="dark"] .bg-emerald-950\/30 {
    background-color: rgb(2 6 23 / 0.72);
}

/* Bildirim balonu (toast): koyu zemin */
html[data-theme="dark"] .bg-emerald-950\/90 {
    background-color: rgb(5 10 22 / 0.94);
    border: 1px solid rgba(148, 163, 184, 0.20);
}

/* Müzik listesindeki sıra rozeti gibi sabit koyu yeşil zeminler */
html[data-theme="dark"] .bg-emerald-950 {
    background-color: #0f3a2c;
}

/* Afiş üzerindeki Dizi/Film rozetleri (koyu zemin + açık metin kalmalı) */
html[data-theme="dark"] .bg-emerald-900\/75 { background-color: rgb(4 47 46 / 0.82); }
html[data-theme="dark"] .bg-teal-900\/75 { background-color: rgb(19 78 74 / 0.82); }
html[data-theme="dark"] .text-emerald-100 { color: #bff0dc; }
html[data-theme="dark"] .text-teal-100 { color: #b2f2ea; }

/* Video kartı alt karartması (afiş görselinin üstünde) */
html[data-theme="dark"] .from-emerald-950\/45 {
    background-image: linear-gradient(to top, rgb(2 6 23 / 0.66), rgb(2 6 23 / 0.10) 45%, transparent);
}

/* Arama açılır listeleri: yumuşak gri kenarlık ve ayraçlar */
html[data-theme="dark"] .border-emerald-100 {
    border-color: rgba(148, 163, 184, 0.16);
}
html[data-theme="dark"] .divide-emerald-50\/80 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .divide-emerald-50 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(148, 163, 184, 0.12);
}

/* Spotify aktarma düğmesi: metin rengi koyu yeşil kalmasın */
html[data-theme="dark"] .text-\[\#0f7a35\] {
    color: #5eead4;
}

/* ---------- Modal yüzeyi: biraz daha derli toplu köşe ---------- */
html[data-theme="dark"] .modal-content {
    border-radius: 1.6rem;
    background-color: rgba(12, 18, 32, 0.92);
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}