/* ==========================================================================
   GAZALI AVIATION — secim.css
   Kart görünümlü radyo seçimi (.choice) + seçim grubu (fieldset.secim-alan).

   Yükleyen sayfalar ($sayfaCss): /teklif (kiralama türü, uçak sınıfı),
   /ucak-satisi + /ucak-satisi/<slug> (talep yönü), /motor-apu +
   /motor-apu/<slug> (aciliyet).

   ⚠ NEDEN AYRI DOSYA (2026-09-23): bileşen bir ara yalnız teklif.css'teydi.
     Satış ve motor talep formları da aynı kartları kullanınca iki yol vardı:
     kuralları ikinci bir sayfa CSS'ine KOPYALAMAK (iki kopya zamanla ayrışır)
     ya da main.css'e taşımak (bileşeni kullanmayan ~12 sayfaya bedava bayt).
     havalimani.css ile aynı desen: bileşen kendi dosyasında, kullanan sayfa
     onu $sayfaCss ile ister.
   ⚠ SIRA: teklif.css bu dosyadan SONRA yüklenir (TeklifModel) ve kendi
     .tur-secim üstyazımlarını taşır. Taşıma öncesi/sonrası /teklif'te
     .choice / .tur-secim öğelerinin hesaplanan stili 1280 ve 390 px'te
     karşılaştırıldı — fark yok.
   ⚠ Yalnız mantıksal özellikler: RTL'de ek kural gerekmez.
   ========================================================================== */

/* Seçim grubu — birkaç radyo TEK bir soru: fieldset + legend, ekran okuyucu
   grubu legend'ın adıyla duyurur.
   ⚠ min-inline-size:0 olmadan fieldset içeriğinin en geniş satırına göre
     genişler ve dar ekranda taşar; tarayıcı kenarlığı/dolgusu sıfırlanır. */
.secim-alan {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.secim-alan > legend {
  margin-bottom: 0.625rem;
  padding: 0;
}

/* Kart seçimi (uçak tipi vb.) */
.choice-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.choice {
  position: relative;
  display: block;
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.22s var(--ease);
}

.choice:hover {
  border-color: var(--gold-600);
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
}

.choice span {
  display: block;
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin-top: 3px;
}

.choice:has(input:checked) {
  border-color: var(--gold-600);
  background: rgba(212, 175, 55, 0.06);
  box-shadow: 0 0 0 1px var(--gold-600);
}

/* ⚠ KLAVYE ODAĞI KARTTA GÖRÜNÜR: radyo düğmesi opacity:0 ile gizli ve
     genel :focus-visible çerçevesi onun ÜZERİNDE çiziliyordu — yani
     görünmüyordu. Ok tuşlarıyla sınıf/tür seçen ziyaretçi nerede olduğunu
     göremiyordu. Çerçeve kartın kendisine taşınır. */
.choice:has(input:focus-visible) {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

/* ---- 390 ve altı ---- */
@media (max-width: 390px) {

  .choice-grid {
    grid-template-columns: 1fr;
  }
}