/*
 * Otocars tasarım token'ları (renk, tipografi, boşluk, kap, köşe, gölge, katman, hareket).
 *
 * tema.css'ten SONRA, site.css'ten ÖNCE yüklenir (bkz. Partials/_Stiller.cshtml). Dosya adı
 * tarihsel; içerik docs/04-tasarim-sistemi.md §5'in sözleşmesidir.
 *
 * Kurallar:
 *  - Sayfa/bileşen CSS'i ham renk, yeni font-size/border-radius/box-shadow değeri YAZMAZ;
 *    buradaki token'ları kullanır (1px kenar serbest).
 *  - Temanın değişkenleri (--primary-color1, --title-color, --text-color, --font-*) ve eski
 *    proje adları (--otocars-*, --acilir-*) aşağıda yeni token'lara bağlanır; eski adlar
 *    çalışmaya devam eder, toplu değişiklik gerekmez.
 *  - --gri-400 ve daha açık griler METİNDE kullanılmaz (AA kontrastı geçmez).
 */

:root {
    /* ── Renk: marka ─────────────────────────────────────────────────── */
    --renk-marka:         #b50217;   /* tek vurgu: ana eylem, canlı, kritik süre, odak */
    --renk-marka-koyu:    #96020f;   /* hover / basılı */
    --renk-marka-acik:    #fcf0f1;   /* seçili satır, rozet zemini */
    --renk-marka-cizgi:   #f1c9ce;   /* vurgulu kenar */
    --renk-marka-uzeri:   #ffffff;   /* marka zemininde metin (7,1:1) */

    /* ── Renk: nötr (sıcak gri) ──────────────────────────────────────── */
    --gri-0:   #ffffff;
    --gri-25:  #fafaf9;
    --gri-50:  #f5f4f2;   /* sayfa zemini */
    --gri-100: #eeedea;   /* yüzey vurgusu, hover */
    --gri-200: #e3e2de;   /* kenar */
    --gri-300: #d3d1cc;   /* güçlü kenar, girdi kenarı */
    --gri-400: #a3a19b;   /* yalnız ikon / devre dışı — METİN DEĞİL */
    --gri-500: #6e6c66;   /* soluk metin: beyazda 5,3:1, --gri-50'de 4,8:1 (AA); --gri-100 üzerinde 4,48 — orada ikincil metin kullanın */
    --gri-600: #57554f;   /* ikincil metin: beyazda 7,4:1 */
    --gri-700: #3d3c38;
    --gri-800: #2a2926;
    --gri-900: #1b1b19;   /* başlık metni; sayfanın tek koyu yüzeyi (footer) */

    /* ── Renk: anlamsal ──────────────────────────────────────────────── */
    --renk-zemin:          var(--gri-50);
    --renk-yuzey:          var(--gri-0);
    --renk-yuzey-ikincil:  var(--gri-25);
    --renk-yuzey-vurgu:    var(--gri-100);
    --renk-kenar:          var(--gri-200);
    --renk-kenar-guclu:    var(--gri-300);
    --renk-metin:          var(--gri-900);
    --renk-metin-ikincil:  var(--gri-600);
    --renk-metin-soluk:    var(--gri-500);
    --renk-metin-ters:     #ffffff;

    /* Durum — yalnız metin + açık zemin; dolu blok yok. Bilgi nötrdür (mavi yok). */
    --renk-basari:        #1f6b3a;
    --renk-basari-zemin:  #eaf3ec;
    --renk-uyari:         #7a5200;
    --renk-uyari-zemin:   #fbf4e6;
    --renk-hata:          var(--renk-marka);
    --renk-hata-zemin:    var(--renk-marka-acik);
    --renk-bilgi:         var(--gri-800);
    --renk-bilgi-zemin:   var(--gri-100);

    /* Koyu yüzey (footer) üzerindeki metin tonları */
    --renk-koyu-metin:        rgba(255, 255, 255, .86);
    --renk-koyu-metin-soluk:  rgba(255, 255, 255, .68);
    --renk-koyu-cizgi:        rgba(255, 255, 255, .14);

    --odak-halkasi: 0 0 0 3px rgba(181, 2, 23, .28);
    --odak-cizgi:   2px solid var(--renk-marka);

    /* ── Tipografi ───────────────────────────────────────────────────── */
    --t-aile:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --t-aile-baslik: var(--t-aile);
    --t-sayi:        "tnum" 1, "lnum" 1;   /* fiyat, sayaç, km: font-feature-settings */

    --t-xs:  .75rem;     /* 12 — yalnız yasal not, zaman damgası, rozet */
    --t-sm:  .875rem;    /* 14 — yardım metni, etiket, tablo, ikincil, düğme */
    --t-md:  1rem;       /* 16 — gövde, girdi (iOS yakınlaştırma eşiği) */
    --t-lg:  1.125rem;   /* 18 — kart başlığı */
    --t-xl:  1.25rem;    /* 20 — H3 */
    --t-2xl: 1.5rem;     /* 24 — H2 (mobil H1) */
    --t-3xl: 1.875rem;   /* 30 — H1 */
    --t-4xl: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);   /* yalnız ana sayfa hero ve TV fiyatı */

    --t-satir-siki:   1.2;
    --t-satir-arayuz: 1.35;
    --t-satir-govde:  1.55;

    --t-normal: 400;
    --t-orta:   600;
    --t-kalin:  700;     /* EN FAZLA 3 AĞIRLIK */
    --t-harf-baslik: -.01em;

    /* ── Boşluk (4/8 ölçeği) ─────────────────────────────────────────── */
    --b-1: 4px;   --b-2: 8px;   --b-3: 12px;  --b-4: 16px;  --b-5: 20px;  --b-6: 24px;
    --b-8: 32px;  --b-10: 40px; --b-12: 48px; --b-16: 64px; --b-20: 80px;

    /* ── Kap ve ızgara ───────────────────────────────────────────────── */
    --kap:        1240px;   /* halka açık içerik (≥1400'de; altında Bootstrap kapları) */
    --kap-genis:  1440px;   /* yönetim grid'leri, canlı yönetim */
    --kap-dar:    760px;    /* okuma metni, tek sütun formlar */
    --kap-form:   480px;    /* giriş, şifre */
    --kap-kenar:  16px;

    --bolum-dikey:     48px;
    --izgara-bosluk:   16px;
    --kart-ic:         16px;
    --form-alan-arasi: 16px;
    --form-etiket-arasi: 6px;
    --form-yukseklik:  46px;   /* input, select, ozel-secim — mobil dahil */

    /* ── Köşe, kenar, gölge ──────────────────────────────────────────── */
    --r-kucuk: 6px;
    --r-orta:  10px;
    --r-buyuk: 14px;
    --r-tam:   999px;

    --kenar:        1px solid var(--renk-kenar);
    --kenar-guclu:  1px solid var(--renk-kenar-guclu);

    --golge-1: 0 1px 2px rgba(27, 27, 25, .06);
    --golge-2: 0 1px 2px rgba(27, 27, 25, .04), 0 8px 24px -12px rgba(27, 27, 25, .18);
    --golge-3: 0 2px 6px rgba(27, 27, 25, .06), 0 22px 48px -18px rgba(27, 27, 25, .32);

    /* ── Katmanlar ───────────────────────────────────────────────────── */
    --z-yapiskan-icerik: 10;
    --z-alt-cubuk:       100;
    --z-ust:             900;    /* .site-ust */
    --z-acilir:          1000;   /* dropdown, ozel-secim */
    --z-cekmece:         1040;   /* mobil menü, sohbet paneli, arka örtü */
    --z-pencere:         1050;   /* modal */
    --z-ipucu:           1070;
    --z-bildirim:        1080;   /* toast, bağlantı durumu */

    /* ── Hareket ─────────────────────────────────────────────────────── */
    --sure-hizli: 150ms;
    --sure-orta:  250ms;
    --egri:       cubic-bezier(.2, .7, .2, 1);

    /* ── Pencere (modal) görünüm kuralı — §6.10 ──────────────────────────
       yonetim-pencere (P-Yonetim), canli-pencere (P-Canli) ve Bootstrap .modal bu token'lara
       bağlanır: beyaz yüzey, büyük köşe, en güçlü gölge; başlık satırı + 44×44 kapat; eylemler
       sağa yaslı (ikincil · ana); mobilde (<576) alttan açılan tam genişlik çekmece. */
    --pencere-yuzey:        var(--renk-yuzey);
    --pencere-kose:         var(--r-buyuk);
    --pencere-golge:        var(--golge-3);
    --pencere-genislik:     560px;
    --pencere-genis:        800px;
    --pencere-ic:           var(--b-6);
    --pencere-kapat-boyut:  44px;
    --pencere-ortu:         rgba(27, 27, 25, .45);
    --pencere-z:            var(--z-pencere);

    /* ── Eski adlar (takma ad) ───────────────────────────────────────── */
    --otocars-ana:   var(--renk-marka);
    --otocars-zemin: var(--renk-yuzey);
    --otocars-koyu:  var(--gri-900);
    --otocars-ana-uzeri-metin: var(--renk-marka-uzeri);
    /* Eski "açılan kırmızılar" hover'ı soldururdu; hover artık koyu ton. */
    --otocars-kirmizi-1: var(--renk-marka-koyu);
    --otocars-kirmizi-2: var(--renk-marka-koyu);
    --otocars-kirmizi-3: var(--renk-marka-cizgi);

    --acilir-zemin-vurgu: var(--gri-50);
    --acilir-cizgi:       rgba(27, 27, 25, .08);
    --acilir-golge:       var(--golge-3);

    /* ── Temanın değişkenleri ────────────────────────────────────────── */
    --primary-color1: var(--renk-marka);
    --title-color:    var(--renk-metin);
    --black-color2:   var(--renk-metin);
    --text-color:     var(--renk-metin-ikincil);
    --font-montserrat: var(--t-aile);
    --font-open-sans:  var(--t-aile);
}

@media (min-width: 576px) {
    :root { --kap-kenar: 24px; }
}

@media (min-width: 768px) {
    :root {
        --bolum-dikey: 64px;
        --kart-ic: 20px;
    }
}

@media (min-width: 992px) {
    :root { --izgara-bosluk: 24px; }
}

@media (min-width: 1200px) {
    :root {
        --kap-kenar: 32px;
        --bolum-dikey: 80px;
        --kart-ic: 24px;
    }
}

/* ── Hareket azaltma ──────────────────────────────────────────────────── */

/* Süre token'ı kullanan her geçiş kendiliğinden kapanır; temanın "* { scroll-behavior: smooth }"
   kuralı da geri alınır. Yerel animasyonlar kendi reduced-motion bloklarını taşır. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --sure-hizli: 0ms;
        --sure-orta: 0ms;
    }

    *,
    html {
        scroll-behavior: auto;
    }
}

/* ── Odak göstergesi ──────────────────────────────────────────────────── */

/* tema.css "input, button { outline: none }" ile odak çerçevesini kaldırıyordu (bulgu 4).
   :where() özgüllük eklemez; :focus-visible (0,1,0) temanın tür seçicisini (0,0,1) geçer,
   sayfaya özel bir odak stili yazılmışsa o kazanır. Yalnız klavye odağında görünür. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
    outline: var(--odak-cizgi);
    outline-offset: 2px;
}

/* ── Temada sabit yazılmış vurgu renkleri ─────────────────────────────── */

.sub-title,
.section-title span,
.text-primary-color1 {
    color: var(--renk-marka);
}

a:hover,
.menu-list > li > a:hover,
.menu-list > li > a.active,
.sub-menu li a:hover {
    color: var(--renk-marka);
}

/* ── Formlar (Bootstrap) ──────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus,
.form-inner input:focus,
.form-inner textarea:focus {
    border-color: var(--renk-marka);
    box-shadow: var(--odak-halkasi);
}

.form-check-input:checked {
    background-color: var(--renk-marka);
    border-color: var(--renk-marka);
}

.form-check-input:focus {
    border-color: var(--renk-marka);
    box-shadow: var(--odak-halkasi);
}

/* ── Bootstrap köprüsü ────────────────────────────────────────────────── */

/* Projedeki Bootstrap 5.0 (beta3) bileşenleri CSS değişkeni kullanmıyor; köprü değişkenlere
   ek olarak doğrudan özelliklerle kurulur. */
:root {
    --bs-primary: var(--renk-marka);
    --bs-primary-rgb: 181, 2, 23;
    --bs-font-sans-serif: var(--t-aile);
    --bs-body-font-family: var(--t-aile);
    --bs-body-color: var(--renk-metin);
    --bs-link-color: var(--renk-marka);
    --bs-link-hover-color: var(--renk-marka-koyu);
}

.btn-primary {
    border-color: var(--renk-marka);
    background-color: var(--renk-marka);
    color: var(--renk-marka-uzeri);
}

.btn-primary:hover,
.btn-primary:active {
    border-color: var(--renk-marka-koyu);
    background-color: var(--renk-marka-koyu);
    color: var(--renk-marka-uzeri);
}

.btn-primary:focus,
.btn-check:focus + .btn-primary {
    box-shadow: var(--odak-halkasi);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--renk-yuzey-vurgu);
    color: var(--renk-metin);
}

/* Bootstrap pencereleri pencere token'larıyla (§6.10). */
.modal-content {
    border: var(--kenar);
    border-radius: var(--pencere-kose);
    background-color: var(--pencere-yuzey);
    box-shadow: var(--pencere-golge);
}

.modal-backdrop.show {
    opacity: 1;
    background-color: var(--pencere-ortu);
}

.accordion-button:not(.collapsed) {
    background-color: var(--renk-yuzey-ikincil);
    color: var(--renk-metin);
    box-shadow: inset 0 -1px 0 var(--renk-kenar);
}

.accordion-button:focus {
    border-color: var(--renk-marka);
    box-shadow: var(--odak-halkasi);
}