/* ==========================================================================
   Karanlık tema

   Yaklaşım: markup'taki her renk sınıfının yanına dark: varyantı eklemek yerine
   (sitede ~576 kullanım var), fiilen kullanılan Tailwind sınıflarının karanlık
   karşılıkları burada html.dark altında tanımlanıyor.

   html.dark .sinif seçicisi, Tailwind'in tek sınıflı kuralından daha spesifik
   olduğu için !important gerekmiyor; CDN'in stilleri sonradan enjekte etmesi de
   sonucu değiştirmiyor.

   Buradaki sınıf listesi tahminle değil, view'lardaki gerçek kullanım sayılarak
   seçildi. Yeni bir renk sınıfı kullanılırsa buraya karşılığını eklemek gerekir.
   ========================================================================== */

html.dark {
    --k-bg: #0b1220;
    --k-yuzey: #131c2e;
    --k-yuzey-2: #1b2740;
    --k-cizgi: #2a3a57;
    --k-cizgi-soluk: #223049;
    --k-metin: #e6ecf5;
    --k-metin-soluk: #93a4bf;
    --k-metin-silik: #6b7d9c;
    --k-sayi: #f1f6ff;
    --k-altin: #d4b862;
    --k-mavi: #60a5fa;
    --k-mavi-dolu: #2563eb;
    --k-yesil: #34d399;
    --k-kirmizi: #f87171;

    /* Tarayıcının kendi kontrolleri (scrollbar, tarih seçici) de koyu olsun */
    color-scheme: dark;
}

html.dark body {
    background-color: var(--k-bg);
    color: var(--k-metin);
}

/* --------------------------------------------------------------------------
   Yüzeyler
   -------------------------------------------------------------------------- */

html.dark .bg-white { background-color: var(--k-yuzey); }

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .bg-gray-50\/50,
html.dark .bg-gray-50\/30,
html.dark .bg-gray-50\/80,
html.dark .bg-slate-50,
html.dark .bg-slate-100 { background-color: var(--k-yuzey-2); }

/* --------------------------------------------------------------------------
   Metin
   Koyu grinin tonları karanlıkta ters sıralanır: gray-900 en parlak olmalı.
   -------------------------------------------------------------------------- */

html.dark .text-gray-900,
html.dark .text-slate-900 { color: var(--k-metin); }

html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-slate-800,
html.dark .text-slate-700 { color: #d5deec; }

html.dark .text-gray-600,
html.dark .text-gray-500,
html.dark .text-slate-600,
html.dark .text-slate-500 { color: var(--k-metin-soluk); }

html.dark .text-gray-400,
html.dark .text-gray-300,
html.dark .text-slate-400 { color: var(--k-metin-silik); }

/* Navigasyon ve başlıklarda kullanılan sabit lacivert */
html.dark .text-\[\#0f172a\] { color: var(--k-metin); }

/* --------------------------------------------------------------------------
   Kenarlıklar
   -------------------------------------------------------------------------- */

html.dark .border-gray-50,
html.dark .border-gray-100 { border-color: var(--k-cizgi-soluk); }

html.dark .border-gray-200,
html.dark .border-gray-300,
html.dark .border-gray-700 { border-color: var(--k-cizgi); }

/* --------------------------------------------------------------------------
   Marka renkleri
   Altın karanlıkta bir tık parlatılıyor; #bfa046 koyu zeminde donuk kalıyor.
   -------------------------------------------------------------------------- */

html.dark .text-\[\#bfa046\] { color: var(--k-altin); }

html.dark .text-primary { color: var(--k-mavi); }
/* bg-opacity-* ile birlikte kullanılıyor (Contact.cshtml): düz renk yazarsak
   Tailwind'in --tw-bg-opacity değişkeni devre dışı kalıp soluk tint parlak maviye
   dönüşüyor. Bu yüzden opaklığı koruyacak biçimde yazıyoruz. */
html.dark .bg-primary { background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); }
html.dark .border-primary { border-color: var(--k-mavi-dolu); }

/* --------------------------------------------------------------------------
   Sayılar sayfanın en parlak öğesi: kurlar okunmak için var.
   -------------------------------------------------------------------------- */

html.dark .font-mono,
html.dark [data-field="alis"],
html.dark [data-field="satis"] { color: var(--k-sayi); }

/* --------------------------------------------------------------------------
   Durum panelleri (Grafikler sayfasındaki başlangıç/son/düşük/yüksek kutuları)
   Açık tonlu -50/-100 zeminler karanlıkta saydam renk katmanına dönüşüyor.
   -------------------------------------------------------------------------- */

html.dark .bg-blue-50,
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.12); }
html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3); }
html.dark .text-blue-900,
html.dark .text-blue-800,
html.dark .text-blue-700,
html.dark .text-blue-600 { color: #93c5fd; }

html.dark .bg-green-50,
html.dark .bg-green-100 { background-color: rgba(16, 185, 129, 0.14); }
html.dark .border-green-200 { border-color: rgba(16, 185, 129, 0.3); }
html.dark .text-green-900,
html.dark .text-green-800,
html.dark .text-green-700,
html.dark .text-green-600,
html.dark .text-green-500 { color: var(--k-yesil); }

html.dark .bg-red-50,
html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.14); }
html.dark .border-red-200,
html.dark .border-red-400 { border-color: rgba(239, 68, 68, 0.3); }
html.dark .text-red-900,
html.dark .text-red-800,
html.dark .text-red-700,
html.dark .text-red-600,
html.dark .text-red-500,
html.dark .text-red-400 { color: var(--k-kirmizi); }

html.dark .bg-purple-50,
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.14); }
html.dark .border-purple-200 { border-color: rgba(168, 85, 247, 0.3); }
html.dark .text-purple-900,
html.dark .text-purple-800 { color: #d8b4fe; }

/* Dolu renkli düğmeler: beyaz yazı korunduğu için sadece zemini biraz koyultuyoruz */
html.dark .bg-blue-500 { background-color: #2563eb; }
html.dark .bg-blue-600 { background-color: #1d4ed8; }
html.dark .bg-blue-700 { background-color: #1e40af; }

/* --------------------------------------------------------------------------
   Hover durumları
   -------------------------------------------------------------------------- */

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover,
html.dark .hover\:bg-gray-50\/50:hover,
html.dark .hover\:bg-gray-50\/30:hover { background-color: #223049; }

html.dark .hover\:bg-gray-600:hover { background-color: #33456a; }

html.dark .hover\:text-\[\#bfa046\]:hover { color: #e6cd85; }

html.dark .hover\:bg-primary:hover { background-color: var(--k-mavi-dolu); }
html.dark .hover\:border-primary:hover { border-color: var(--k-mavi-dolu); }

html.dark .hover\:bg-blue-500:hover { background-color: #2563eb; }
html.dark .hover\:bg-blue-600:hover { background-color: #1d4ed8; }
html.dark .hover\:bg-blue-700:hover,
html.dark .hover\:bg-blue-800:hover { background-color: #1e40af; }
html.dark .hover\:bg-red-600:hover { background-color: #dc2626; }
html.dark .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.2); }

/* --------------------------------------------------------------------------
   Form alanları
   Tailwind bunlara sınıf vermediği için doğrudan elemana yazıyoruz.
   -------------------------------------------------------------------------- */

html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--k-yuzey-2);
    border-color: var(--k-cizgi);
    color: var(--k-metin);
}

html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--k-metin-silik); }

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--k-mavi);
    outline-color: var(--k-mavi);
}

/* --------------------------------------------------------------------------
   Ticker
   Altın kimliği korunuyor, sadece koyu uca kaydırılıyor. Açık temada para birimi
   etiketi siyah; koyu zeminde okunmayacağı için o da açılıyor.
   -------------------------------------------------------------------------- */

html.dark .ticker-container {
    background: linear-gradient(135deg, #1b2740 0%, #8a6f2e 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

html.dark .ticker-item { border-right-color: rgba(255, 255, 255, 0.08); }
html.dark .ticker-item .currency { color: var(--k-metin); }
html.dark .ticker-item .value { color: #fff; }

/* --------------------------------------------------------------------------
   Tablolar
   -------------------------------------------------------------------------- */

html.dark table thead tr { background-color: var(--k-yuzey-2); }
html.dark table tbody tr { border-color: var(--k-cizgi-soluk); }

/* --------------------------------------------------------------------------
   Grafik kartı
   -------------------------------------------------------------------------- */

html.dark .chart-container,
html.dark #chartContainer { color: var(--k-metin); }

/* --------------------------------------------------------------------------
   Tema geçiş düğmesi
   Açık temada ay, karanlık temada güneş simgesi görünür.
   -------------------------------------------------------------------------- */

#temaDugmesi .tema-ikon-koyu { display: none; }
html.dark #temaDugmesi .tema-ikon-koyu { display: block; }
html.dark #temaDugmesi .tema-ikon-acik { display: none; }

html.dark #temaDugmesi { color: var(--k-altin); }
html.dark #temaDugmesi:hover { background-color: #223049; }

/* --------------------------------------------------------------------------
   Erişilebilirlik: klavye odağı her iki temada da görünür kalmalı
   -------------------------------------------------------------------------- */

html.dark :focus-visible {
    outline: 2px solid var(--k-altin);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sabit lacivert zeminler (alt bilgi ve ana sayfadaki yuvarlak ikon rozetleri).
   #0f172a karanlık temada sayfa zeminine çok yakın kalıp kayboluyor; bir kademe
   açarak ayrımı koruyoruz.
   -------------------------------------------------------------------------- */

html.dark .bg-\[\#0f172a\] { background-color: var(--k-yuzey-2); }

html.dark footer { border-top: 1px solid var(--k-cizgi); }

/* --------------------------------------------------------------------------
   Apple logosu siyah bir SVG; koyu zeminde görünmez oluyor.
   -------------------------------------------------------------------------- */

html.dark img[src*="Apple_logo_black"] { filter: invert(1); }

/* --------------------------------------------------------------------------
   body üzerinde bg-gray-50 var; sınıf kuralı yukarıdaki element kuralını yendiği
   için sayfa zemini kartlardan daha açık kalıyordu (derinlik ters dönüyordu).
   -------------------------------------------------------------------------- */

html.dark body.bg-gray-50 { background-color: var(--k-bg); }

/* --------------------------------------------------------------------------
   Yapışkan tablo başlıkları (css/styles/table-height-limit.css)
   Zemin doğrudan "white" olarak yazılmış, Tailwind sınıfı değil.
   -------------------------------------------------------------------------- */

html.dark .table-height-limited table thead,
html.dark .table-height-limited table thead th {
    background: var(--k-yuzey-2);
}

html.dark .table-height-limited table thead {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

html.dark .table-height-limited table thead th {
    border-bottom-color: var(--k-cizgi);
}

/* Üst/alt solma efektleri de beyazdan zemine geçiyordu */
html.dark .table-height-limited::before {
    background: linear-gradient(to bottom, rgba(19, 28, 46, 0.9), rgba(19, 28, 46, 0));
}

html.dark .table-height-limited::after {
    background: linear-gradient(to top, rgba(19, 28, 46, 0.9), rgba(19, 28, 46, 0));
}

html.dark .table-height-limited::-webkit-scrollbar-track { background: var(--k-yuzey-2); }
html.dark .table-height-limited::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3a4d70, #2a3a57);
}

/* --------------------------------------------------------------------------
   Fark rozetinin nötr hali
   Yükseliş/düşüş renkleri doviz-table.css'te zaten koyu temaya uygun; ama değişim
   sıfırken rozet "bg-gray-100 text-black" oluyor ve siyah yazı okunmuyordu.
   -------------------------------------------------------------------------- */

html.dark [data-field="fark"] .bg-gray-100 { background-color: rgba(148, 163, 184, 0.15); }
html.dark [data-field="fark"] .text-black { color: var(--k-metin-soluk); }

/* --------------------------------------------------------------------------
   Döviz çevirici (css/styles/simple-converter.css)
   Kendi renklerini doğrudan yazıyor; Tailwind eşlemesi buraya ulaşmıyor.
   Mor başlık gradyanı ve koyu sonuç alanı karanlıkta zaten çalışıyor, korunuyor.
   -------------------------------------------------------------------------- */

html.dark .simple-converter {
    background-color: var(--k-yuzey);
    border: 1px solid var(--k-cizgi);
}

html.dark .amount-input-group label,
html.dark .currency-group label { color: var(--k-metin-soluk); }

html.dark .amount-input,
html.dark .currency-select {
    background-color: var(--k-yuzey-2);
    border-color: var(--k-cizgi);
    color: var(--k-metin);
}

/* Select okunun rengi data URI içinde gömülü; koyu zeminde açık tona çeviriyoruz */
html.dark .currency-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2393a4bf' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

html.dark .amount-input:focus,
html.dark .currency-select:focus { border-color: var(--k-mavi); }

html.dark .swap-button {
    background-color: var(--k-yuzey-2);
    border-color: var(--k-cizgi);
    color: #a5b4fc;
}

html.dark .swap-button:hover {
    background-color: #223049;
    border-color: #3a4d70;
    color: #c7d2fe;
}

html.dark .custom-select-dropdown {
    background-color: var(--k-yuzey);
    border-color: var(--k-cizgi);
}

html.dark .custom-select-search {
    background-color: var(--k-yuzey);
    border-bottom-color: var(--k-cizgi);
}

html.dark .custom-select-search-input {
    background-color: var(--k-yuzey-2);
    border-color: var(--k-cizgi);
    color: var(--k-metin);
}

html.dark .custom-select-no-result { color: var(--k-metin-silik); }
html.dark .custom-select-item:hover { background-color: #223049; }
html.dark .custom-select-item.selected { background-color: #2a3a57; }

html.dark .custom-select-dropdown::-webkit-scrollbar-track { background: var(--k-yuzey-2); }
html.dark .custom-select-dropdown::-webkit-scrollbar-thumb { background: #3a4d70; }
html.dark .custom-select-dropdown::-webkit-scrollbar-thumb:hover { background: #4a5f88; }

/* Sonuç alanı karanlıkta kartla neredeyse aynı tonda kalıyor; ince bir çizgiyle ayırıyoruz */
html.dark .result-area { border: 1px solid var(--k-cizgi); }

/* --------------------------------------------------------------------------
   Ana sayfadaki yatırım bölümü (site.css)
   Zemini #f8fafc ve beyaza giden bir gradyan; karanlıkta sayfadan kopuyordu.
   Markanın mavi ve altın tintleri korunuyor, sadece koyu uca taşınıyor.
   -------------------------------------------------------------------------- */

html.dark .investment-section {
    background-color: var(--k-yuzey);
    background-image:
        radial-gradient(circle at 25% 25%, rgba(96, 165, 250, 0.06) 0%, transparent 10%),
        radial-gradient(circle at 75% 75%, rgba(212, 184, 98, 0.06) 0%, transparent 10%),
        linear-gradient(to bottom, #16213a 0%, #131c2e 100%);
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    border-top-color: var(--k-cizgi-soluk);
    border-bottom-color: var(--k-cizgi-soluk);
}