/*
  DİL DEĞİŞTİRİCİ — bayraklı pill (TeslimSonrasi1, 2026-07-30)
  ==========================================================================
  Şartname : docs/12-PlanModu/TeslimSonrasi1/01-dil-secici-tasarim.md
  Sorun    : dil seçici menü öğeleriyle BİREBİR aynı sınıfları kullandığı için
             menünün parçası gibi okunuyordu (görsel ayrım eksikliği).
  Çözüm    : DOM sözleşmesi (li.menu-item > button + kardeş ul.sub-menu) AYNEN
             korunur; li'ye yalnız `site-dil` scope sınıfı eklenir, görünüm
             buradan gelir. Paylaşılan style.min.css'e DOKUNULMADI.

  ⚠️ ÖZGÜLLÜK NOTU — buradaki uzun seçiciler süs değil:
     tema kuralları `.header-section .main-navbar .custom-nav .menu-item …`
     (4 sınıf + element) düzeyinde yazılmış. Onları ezmek gereken her yerde
     aynı zincir + `.site-dil` kullanıldı. Yalnız YENİ özellik veren kurallar
     kısa seçicidir.

  Kullanılan renkler: temanın kendi token'ları (--p1 --n0 --n900 --n30 --n40
  --n100 --bg1) + bunların rgba alpha varyantları. YENİ RENK UYDURULMADI.
  (rgba(35,92,242,…) = --p1 · rgba(0,5,19,…) = --n900)

  🔴 Bu dosya style.min.css'ten SONRA yüklenmek zorundadır (_headVC/Default.cshtml).
*/

/* ══════════════════════════════════════════════════════════════════
   1) Bayrak sprite kabı — sayfada yer kaplamaz, akışı etkilemez
   ══════════════════════════════════════════════════════════════════ */
.site-dil-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   2) Bayrak (pill + liste satırları ortak)
   ══════════════════════════════════════════════════════════════════ */
/* NOT: bayrak kenar çizgisi BURADA verilmez. `box-shadow: inset` svg'nin arka plan
   katmanına boyanıyor ve içteki <rect fill="#fff"> onu tamamen kapatıyordu (RU · BG
   beyaz zeminde kayboluyordu, kontrast 1.016:1). Çerçeve artık her <symbol>'ün SON
   çocuğu olan hairline <rect>'ten geliyor → dolguların üstüne boyanır.

   🔴 20×14px ZORUNLU (21×15 DEĞİL): symbol viewBox'ı "0 0 20 14". 21×15'te ölçek 1.05/1.071
   gibi kesirli oluyor, x=.5/y=.5 merkezli 1 birimlik stroke iki cihaz satırına bölünüyor ve
   ışığı yarılıyordu → üst kenar kontrastı 2.672:1'de kalıyordu (sol kenar 3.272:1). 20×14'te
   ölçek tam 1.0, 2x ekranda 40×28 — stroke tam 0–1 piksel aralığına oturur. */
.site-dil__bayrak {
    width: 20px;
    height: 14px;
    flex: none;
    border-radius: 2px;
}

/* GERİ DÜŞÜŞ: BayrakKodu boş veya sprite'ta karşılığı yok → kısa kod rozeti.
   Hizalama bozulmaz, 7. dil eklenince hiçbir şey kırılmaz. */
.site-dil__bayrak--metin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    /* temanın mobil .sub-menu li a{letter-spacing:2px} kuralı rozeti bozmasın */
    letter-spacing: 0;
    line-height: 1;
    color: var(--n100);
    background: var(--n30);
}

/* ══════════════════════════════════════════════════════════════════
   3) Pill (button) — menüden görsel olarak AYRIK
   ══════════════════════════════════════════════════════════════════ */
.header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--n0);
    border: 1px solid var(--n30);
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 5, 19, .04);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill:hover,
.header-section .main-navbar .custom-nav .menu-item.site-dil:hover > .site-dil__pill {
    border-color: var(--p1);
    box-shadow: 0 1px 3px rgba(35, 92, 242, .18);
}

/* 🔴 TEK NÖTRLEME — tema `.custom-nav .menu-item button::after` ile FontAwesome
   oku enjekte ediyor. Kendi SVG ok'umuz olduğu için çift ok çıkmasın diye
   YALNIZ bu öğede kapatıldı; diğer menü öğelerinde aynen çalışmaya devam eder. */
.header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill::after {
    content: none;
    display: none;
}

.site-dil__kod {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--n900);
}

/* Yerel ad — yalnız mobil pill'de görünür (markup'ta d-lg-none) */
.site-dil__ad {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    color: var(--n100);
}

.site-dil__ok {
    width: 10px;
    height: 6px;
    flex: none;
    color: var(--n100);
    transition: transform .25s ease, color .25s ease;
}

/* ══════════════════════════════════════════════════════════════════
   4) Açılır liste satırları (masaüstü + mobil ortak)
   ══════════════════════════════════════════════════════════════════ */
.site-dil__satir + .site-dil__satir {
    border-top: 1px solid rgba(0, 5, 19, .05);
}

/* Tema `… .menu-item .sub-menu .menu-link a` (0,6,1) ile renk/boyut veriyor;
   aşağıdaki zincir `.site-dil` ile (0,7,1) olduğu için kazanır. */
.header-section .main-navbar .custom-nav .menu-item.site-dil .sub-menu .menu-link .site-dil__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--n900);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.header-section .main-navbar .custom-nav .menu-item.site-dil .sub-menu .menu-link .site-dil__link:hover {
    background: rgba(35, 92, 242, .055);
    color: var(--p1);
}

.header-section .main-navbar .custom-nav .menu-item.site-dil .sub-menu .menu-link .site-dil__link[aria-current] {
    background: rgba(35, 92, 242, .075);
    color: var(--p1);
    font-weight: 700;
}

.site-dil__isim {
    font-weight: inherit;
}

.site-dil__etiket {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: 1;
    color: var(--n100);
}

.site-dil__link:hover .site-dil__etiket,
.site-dil__link[aria-current] .site-dil__etiket {
    color: var(--p1);
}

/* ══════════════════════════════════════════════════════════════════
   5) MASAÜSTÜ ≥992px
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

    /* Tema `.custom-nav .menu-item{padding:34px 0}` veriyor. Pill, düz metin
       menü öğesinden ~16px daha yüksek olduğu için bu padding korunsa header
       yüksekliği ve CTA konumu KAYAR. Padding sıfırlanıp pill dikeyde
       ortalanınca satır yüksekliğini yine diğer menü öğeleri belirler
       → header yüksekliği birebir aynı kalır (§5 responsive garantisi). */
    .header-section .main-navbar .custom-nav .menu-item.site-dil {
        display: flex;
        align-items: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Açılır panel: temanın position/min-width/box-shadow/transform kurallarına
       DOKUNULMADI. Bilinçli ve dar iki değişiklik:
         · left:-30px → right:0  : dil seçici nav'ın SON öğesi; 240px'lik panel
           sola doğru açılınca 992-1199px arasında sağa taşma riski kalmaz.
           (Onaylı mockup'ta panel sola hizalıydı; §5 responsive garantisi
            mockup'ın önünde geldiği için sağa hizalandı.)
         · padding: markup'tan p-lg-5 kaldırıldı, satırlar tam genişlikte
           hover alsın diye dikey padding buradan verilir. */
    .header-section .main-navbar .custom-nav .menu-item.site-dil > .sub-menu {
        left: auto;
        right: 0;
        padding: 8px 0;
        border-radius: 6px;
        overflow: hidden;
    }

    /* Panel açıkken ok döner (tema açılmayı :hover ile yönetiyor) */
    .header-section .main-navbar .custom-nav .menu-item.site-dil:hover .site-dil__ok {
        color: var(--p1);
        transform: rotate(180deg);
    }
}

/* ══════════════════════════════════════════════════════════════════
   6) MOBİL ≤991px — custom-nav d-grid, pill tam genişlik.
      Mevcut slideToggle akordeonu (main.js:165) AYNEN çalışır.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    .header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill {
        display: flex;
        width: 100%;
        padding: 12px 14px;
    }

    .header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill .site-dil__ok {
        margin-left: auto;
    }

    /* Temanın mobil .sub-menu kuralı (display:none · border-left:2px solid --p1
       · margin · background) KORUNUR — akordeon ve tema görünümü ondan gelir.
       Yalnız satır iç boşluğu, ul'un 14px yan padding'iyle çift girinti
       yapmasın diye daraltıldı. */
    .header-section .main-navbar .custom-nav .menu-item.site-dil .sub-menu .menu-link .site-dil__link {
        padding: 9px 6px;
        border-radius: 4px;
    }
}

/* 575px altı: tema menü fontunu küçültüyor; pill de bir tık daralır */
@media (max-width: 575px) {

    .header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill {
        gap: 8px;
        padding: 11px 12px;
    }

    .site-dil__ad {
        font-size: 12.5px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   7) Erişilebilirlik
   ══════════════════════════════════════════════════════════════════ */
.header-section .main-navbar .custom-nav .menu-item.site-dil > .site-dil__pill:focus-visible,
.header-section .main-navbar .custom-nav .menu-item.site-dil .sub-menu .menu-link .site-dil__link:focus-visible {
    outline: 2px solid var(--p1);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Klavyeyle pill'e odaklanınca panel açılsın (masaüstünde :hover'a bağlıydı) */
@media (min-width: 992px) {

    .header-section .main-navbar .custom-nav .menu-item.site-dil:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(60px);
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .site-dil__pill,
    .site-dil__ok,
    .site-dil__link {
        transition: none !important;
    }

    .header-section .main-navbar .custom-nav .menu-item.site-dil:hover .site-dil__ok {
        transform: none;
    }
}