/* ==========================================================================
   EB Temel — ortak anahtar görünümü (.anahtar; Tur 14a, docs/tema-spesifikasyonu.md §2d.5).
   Yalnızca GÖRÜNÜM: iki seçenekli bir ray ve seçili seçeneğin altında kayan bir başlık. Davranış ve semantik her
   kontrolün kendi öğesindedir (dil bağlantısı <a>, sekmeler tablist/tab, tema düğmesi aria-pressed, pasif mod
   anahtarı role=switch); bu dosyada JS yoktur. Başlığın hangi seçenekte durduğu kontrolün kendi durum
   özniteliğinden okunur, yeni durum tutulmaz.

   İşaretleme: <ÖĞE class="anahtar"> <x class="anahtar__secenek">…</x> <x class="anahtar__secenek">…</x>
               <span class="anahtar__baslik" aria-hidden="true"></span> </ÖĞE>
   (Başlık son çocuktur; seçenekler :nth-child(1)/(2) ile seçilir.)
   ========================================================================== */
.anahtar {
  position: relative; isolation: isolate;
  display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(var(--wp--custom--anahtar--yukseklik), auto);
  padding: 0; border: 1px solid var(--wp--preset--color--metin-soluk); border-radius: var(--wp--custom--radius--tam);
  background: var(--wp--preset--color--yuzey); color: var(--wp--preset--color--metin);
  font: inherit; font-size: var(--wp--preset--font-size--xs); font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.anahtar:hover { color: var(--wp--preset--color--metin); }
/* Tıklama alanı = kutunun tamamı: tarayıcı isabet testini yuvarlatılmış köşeye göre yapar; köşesiz, saydam katmanlar
   hap biçiminin dışında kalan köşeleri de kontrolün (ya da seçeneğin) kendisine bağlar. */
.anahtar::before, .anahtar__secenek::before { content: ""; position: absolute; inset: 0; border-radius: 0; }
.anahtar:focus-visible { outline-offset: 2px; }

.anahtar__secenek {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: var(--wp--custom--anahtar--yukseklik); padding: 0 0.85rem;
  border: 0; border-radius: var(--wp--custom--radius--tam); background: none;
  color: var(--wp--preset--color--metin); font: inherit; cursor: inherit;
  transition: color var(--wp--custom--duration--menu) var(--wp--custom--ease--standart);
}
.anahtar__secenek .ikon { width: 1.15rem; height: 1.15rem; }

/* Kayan başlık: geometrisi seçeneğin kutusuyla birebir aynıdır (tıklanan yarıyı tümüyle kaplar); raydan ayrılan
   iç boşluk görseldir: zemin yalnızca iç kutuya boyanır (background-clip), boşlukta ray görünür. */
.anahtar__baslik {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%;
  border-radius: var(--wp--custom--radius--tam);
  padding: var(--wp--custom--anahtar--ic-bosluk);
  background: var(--wp--preset--color--ters-zemin) content-box;
  transition: transform var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis);
  pointer-events: none;
}

/* Durum → başlık ikinci seçenekte. */
.anahtar[aria-pressed="true"] > .anahtar__baslik,
.anahtar[aria-checked="true"] > .anahtar__baslik,
.anahtar.anahtar--ikinci > .anahtar__baslik,
.anahtar:has(> .anahtar__secenek + .anahtar__secenek[aria-selected="true"]) > .anahtar__baslik { transform: translateX(100%); }

/* Başlığın altındaki seçenek ters renkte. */
.anahtar > .anahtar__secenek:nth-child(1),
.anahtar[aria-pressed="true"] > .anahtar__secenek:nth-child(2),
.anahtar[aria-checked="true"] > .anahtar__secenek:nth-child(2),
.anahtar.anahtar--ikinci > .anahtar__secenek:nth-child(2),
.anahtar > .anahtar__secenek:nth-child(2)[aria-selected="true"] { color: var(--wp--preset--color--ters-metin); }
.anahtar[aria-pressed="true"] > .anahtar__secenek:nth-child(1),
.anahtar[aria-checked="true"] > .anahtar__secenek:nth-child(1),
.anahtar.anahtar--ikinci > .anahtar__secenek:nth-child(1),
.anahtar > .anahtar__secenek:nth-child(1)[aria-selected="false"] { color: var(--wp--preset--color--metin); }

/* Seçenek odak halkası (sekmeler): seçeneğin içinde, başlığın iç boşluğundan 4 px içeride çizilir; seçili
   seçenekte iki yanı da başlık zemini olur. Varsayılan odak rengi açık modda ters-zemin ile aynı olduğundan seçili
   seçeneğin halkası kendi metin rengiyle çizilir (Tur 11 sekme kuralının ortak hâli). */
.anahtar > .anahtar__secenek:focus-visible { outline-offset: calc(-1 * (var(--wp--custom--anahtar--ic-bosluk) + 4px)); }
.anahtar > .anahtar__secenek[aria-selected="true"]:focus-visible { outline-color: var(--wp--preset--color--ters-metin); }

/* Pasif (davranışı henüz olmayan) anahtar: "yardım" imleci; ray kenarı referanstaki gibi düz (Tur 14e, header ve panel),
   pasiflik ipucu ve aria-disabled ile anlatılır. Renkler soluklaştırılmaz (kontrast korunur). */
.anahtar[aria-disabled="true"] { cursor: help; }

/* Kompakt: tek hücre. İki seçenek aynı hücrede üst üste durur; seçili olan kayarak gelir (tema düğmesi, her
   genişlikte; Tur 14c). */
.anahtar--kompakt { grid-template-columns: var(--wp--custom--anahtar--yukseklik); }
.anahtar--kompakt > .anahtar__secenek { grid-area: 1 / 1; min-width: 0; padding: 0; color: var(--wp--preset--color--ters-metin); transition: transform var(--wp--custom--duration--orta) var(--wp--custom--ease--cikis), opacity var(--wp--custom--duration--menu) var(--wp--custom--ease--standart); }
.anahtar--kompakt > .anahtar__baslik { width: 100%; transform: none; }
.anahtar--kompakt > .anahtar__secenek:nth-child(2) { opacity: 0; transform: translateY(45%); }
.anahtar--kompakt[aria-pressed="true"] > .anahtar__secenek:nth-child(1) { opacity: 0; transform: translateY(-45%); }
.anahtar--kompakt[aria-pressed="true"] > .anahtar__secenek:nth-child(2) { opacity: 1; transform: none; color: var(--wp--preset--color--ters-metin); }
.anahtar--kompakt[aria-pressed="true"] > .anahtar__baslik { transform: none; }

/* Küçük (header; Tur 14c, ölçüler Tur 14d): referans görseldeki (kaynak/referans/header-referans.png) oranlar, taban
   menüdeki büyük harf yüksekliği (§2d.5). Dış kutu kucuk-yukseklik (28.2 px); TR/EN gibi iki seçenekli anahtarda her
   hücre kucuk-hucre (2 × 32.75 + 2 kenar = 67.5 px); görünen dilim hücreden kucuk-ic-bosluk (1.2 px) içeride. Etiket en
   az 11 px (kucuk-yazi); seçili etiket kalın, diğeri metin-soluk renkte ve orta ağırlıkta (renk tek başına durum
   taşımaz). Görünüm küçülür, tıklama alanı küçülmez: kontrolün ::before katmanı dikeyde (kompakt anahtarda dört
   yönde) dolgu kutusunun dışına taşarak 44 px'e (anahtar--yukseklik) tamamlanır; yatayda 1 px kenarlığı da kapsar.
   Yatay taşma yalnızca tek hücreli kompakt anahtardadır (≈8 px); header-sag aralığı (kucuk-aralik, 12 px) bu taşmadan
   geniş olduğundan alanlar çakışmaz. */
.anahtar--kucuk {
  grid-template-columns: var(--wp--custom--anahtar--kucuk-hucre) var(--wp--custom--anahtar--kucuk-hucre);
  grid-template-rows: calc(var(--wp--custom--anahtar--kucuk-yukseklik) - 2px);
  flex: none; font-size: var(--wp--custom--anahtar--kucuk-yazi); letter-spacing: 0.02em;
}
.anahtar--kucuk > .anahtar__secenek { min-width: 0; padding: 0; }
.anahtar--kucuk > .anahtar__secenek .ikon { width: var(--wp--custom--anahtar--kucuk-ikon); height: var(--wp--custom--anahtar--kucuk-ikon); }
.anahtar--kucuk > .anahtar__baslik { padding: var(--wp--custom--anahtar--kucuk-ic-bosluk); }
.anahtar--kucuk::before { inset: calc((var(--wp--custom--anahtar--kucuk-yukseklik) - 2px - var(--wp--custom--anahtar--yukseklik)) / 2) -1px; }
/* Seçili olmayan etiket: metin-soluk, orta ağırlık; seçili: kalın (rengi yukarıdaki ortak kurallardan). */
.anahtar--kucuk > .anahtar__secenek { font-weight: 700; }
.anahtar--kucuk > .anahtar__secenek:nth-child(2),
.anahtar--kucuk.anahtar--ikinci > .anahtar__secenek:nth-child(1),
.anahtar--kucuk[aria-checked="true"] > .anahtar__secenek:nth-child(1) { color: var(--wp--preset--color--metin-soluk); font-weight: 500; }
.anahtar--kucuk.anahtar--ikinci > .anahtar__secenek:nth-child(2),
.anahtar--kucuk[aria-checked="true"] > .anahtar__secenek:nth-child(2) { font-weight: 700; }
/* Küçük kompakt (tema düğmesi): referanstaki gibi dolgusuz, kenarlı daire; ikon metin renginde. */
.anahtar--kucuk.anahtar--kompakt { grid-template-columns: calc(var(--wp--custom--anahtar--kucuk-yukseklik) - 2px); }
.anahtar--kucuk.anahtar--kompakt > .anahtar__baslik { background: none; }
.anahtar--kucuk.anahtar--kompakt > .anahtar__secenek,
.anahtar--kucuk.anahtar--kompakt[aria-pressed="true"] > .anahtar__secenek:nth-child(2) { color: var(--wp--preset--color--metin); }
.anahtar--kucuk.anahtar--kompakt::before { inset: calc((var(--wp--custom--anahtar--kucuk-yukseklik) - 2px - var(--wp--custom--anahtar--yukseklik)) / 2); }