/* ==========================================================================
   GAZALI AVIATION — kiralama.css
   Yalniz /kiralama sayfasinda eslesen kurallar.
   Ortak katman main.css'tedir; bu dosya ONUN USTUNE biner.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21. Hızlı teklif kutusu — kiralama sayfaları
   --------------------------------------------------------------------------
   Koyu .page-hero'nun içine, başlığın altına oturan beyaz kart. Dört sekme
   (özel jet / yolcu / kargo / uzun dönem ve ACMI — KIRALAMA_TURLERI) aynı
   formu paylaşır; yalnız dördüncü alan ve etiketler sekmeye göre değişir.
   Sekme seçimi ve alanlar /teklif sihirbazına query string ile devredilir —
   kullanıcı aynı bilgiyi iki kez yazmaz. Kalkış/varış havalimanı kutusudur
   (havalimani.css).
   ⚠ "Uzun dönem ve ACMI" sekmesi bir tur KALDIRILMIŞTI ve 2026-09-23'te GERİ
     GELDİ (kullanıcı silinmesini istememişti): tür config.php
     KIRALAMA_TURLERI'ne eklendi, sekme o listeden basılıyor.

   Sekme durumu iki yerde tutulur: görünüm .is-active ile (mevcut .segment
   kuralıyla aynı dil), erişilebilirlik aria-pressed ile. initQuickQuote
   ikisini birlikte günceller.
   -------------------------------------------------------------------------- */

/* ⚠ HERO DİKEYDE TAŞABİLİR (2026-09-23): .page-hero `overflow: hidden`
     taşıyor (dekoratif uçak sağ kenardan dışarı uzanıyor). Kalkış/varış
     kutusunun havalimanı listesi de hero'nun ALT kenarında kesiliyordu —
     kutunun altında yalnız hero'nun alt dolgusu kadar (56–88 px) yer var,
     10 öneri ~500 px.
     `overflow: clip visible`: yatayda KIRPMA sürer (uçak sayfayı yana
     kaydırmaz), dikeyde liste taşar. `hidden` değil `clip`: hidden öteki
     ekseni de kaydırılabilir yapardı; clip yapmaz.
   ⚠ z-index: taşan liste bir sonraki bölümün ÜSTÜNDE kalsın — hero zaten
     isolation: isolate ile kendi katmanını açıyor. */
.page-hero--ucak {
  overflow: clip visible;
  z-index: 2;
}

.quickquote {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.125rem, 2.4vw, 1.75rem);
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- sekmeler --- */

.quickquote__tabs {
  display: flex;
  flex-wrap: wrap; /* .segment'te yok; dört sekme dar ekranda taşardı */
  gap: 4px;
  padding: 4px;
  margin-bottom: clamp(1rem, 2vw, 1.375rem);
  background: var(--paper-2);
  border-radius: var(--radius-pill);
}

.quickquote__tabs button {
  flex: 1 1 auto;
  padding: 0.6rem 1.1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--slate-600);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.22s var(--ease), background 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.quickquote__tabs button:hover {
  color: var(--navy-800);
}

.quickquote__tabs button.is-active {
  font-weight: 600;
  color: var(--navy-950);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* --- form --- */

.quickquote__form {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
}

/* Düğme, alanlarla aynı hizada dursun diye .field yüksekliğini taklit eder */
.quickquote__form .btn {
  height: calc(0.85rem * 2 + var(--step-0) * 1.5 + 2px);
  white-space: nowrap;
}

.quickquote__note {
  margin-top: 0.875rem;
  font-size: var(--step--1);
  color: var(--slate-500);
}

.quickquote__note a {
  color: var(--gold-700);
  font-weight: 600;
}

/* Sekmeye göre değişen dördüncü alan — [hidden] reset kuralıyla gizlenir */

/* Havalimanı listesi — geniş ekranda kutu beş sütunlu ve kalkış/varış
   sütunu ~200 px: liste kutu genişliğinde kalsaydı havalimanı adı üç
   satıra kırılıyordu (ölçüldü, 1280 px). Liste sütundan GENİŞ açılır ve
   satır başı yönüne (LTR sağa, RTL sola) uzar; 1100 px altında form iki/tek
   sütuna iner ve kutu zaten yeterince geniş olur. */
@media (min-width: 1101px) {
  .quickquote .hav__acilir {
    inset-inline-end: auto;
    width: max(100%, 20rem);
  }
}

/* --------------------------------------------------------------------------
   Kutunun kendi kırılma noktaları. Genel eşiklerden (768/480/390/360/320)
   ayrı tutuldu: kutu beş sütunlu olduğu için daha erken, 1100 ve 780'de
   sıkışıyor. Genel eşikleri değiştirmek diğer sayfaları da etkilerdi.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .quickquote__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quickquote__form .btn {
    grid-column: 1 / -1;
    height: auto;
  }
}


/* ⚠ DÖRT SEKME 2 × 2 IZGARA (2026-09-23, dördüncü sekme geri gelince):
     `flex: 1 1 auto` ile sekmeler metin genişliğine göre diziliyordu —
     ölçüldü, 561–600 px'te üç dilde, 700 px'e kadar EN'de 3+1 (son sekme
     satırda tek başına), 390 px'te TR/AR 3+1, 360 px EN'de 2+1+1. Esnek temel %50 de yetmedi:
     nowrap metin ("Uzun Dönem ve ACMI" ~170 px) yarım sütuna sığmayınca yine
     kendi satırına iniyordu (390 px: 2+1+1). Izgara iki eşit sütunu
     SABİTLER; sığmayan etiket sekmenin İÇİNDE iki satıra kırılır, satırdaki
     komşusu aynı boyu alır.
   ⚠ EŞİK 719 px, 560 DEĞİL: dört sekme EN'de ancak 720 px'te tek satıra
     sığıyor (ölçüldü: 700 px'te hâlâ 3+1; TR/AR 640'ta sığıyor). */
@media (max-width: 719px) {
  .quickquote__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quickquote__tabs button {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .quickquote__form {
    grid-template-columns: 1fr;
  }

  .quickquote__tabs button {
    padding-inline: 0.75rem;
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   Üyelik logoları — "Neden Gazali Aviation" › Uluslararası üyelikler kartı
   --------------------------------------------------------------------------
   Logolar Üyelik Kartları'ndan gelir (KiralamaView; Hakkımızda ızgarasıyla
   aynı liste, Macit kararı 2026-09-25). Hiç logo yoksa kart bugünkü
   .card__icon'u basar — bu kurallar o durumda hiç eşleşmez.
   ⚠ KUTU .card__icon İLE AYNI: 54 px boy + 1.5rem alt boşluk. Kart bir
     ızgara satırında ikonlu iki kartla yan yana; kutu daha uzun olsaydı bu
     kartın <h3>'ü komşularından aşağıda kalırdı.
   ⚠ BEYAZ PLAKA: kart koyu (.card--dark). Bugünkü iki logo zaten beyaz
     zeminli, ama panelden yüklenen saydam ve koyu bir PNG/WebP plakasız
     lacivert kartta GÖRÜNMEZDİ.
   ⚠ BİR-İKİ LOGO: SIĞMAZSA KÜÇÜLÜR, ALT SATIRA İNMEZ: `flex-shrink` +
     `min-inline-size: 0` plakaları genişlikleriyle orantılı daraltır,
     `object-fit: contain` logoyu oranını koruyarak küçültür — iki logo her
     genişlikte AYNI boyda kalır. Kaydırma (wrap) kutuyu iki satıra çıkarır ve
     <h3> hizasını bozardı. Üç ve daha çok logo için aşağıdaki ayrı blok.
   ÖLÇÜLDÜ (2026-09-25, 1280/1024/768/390 × EN/TR/AR, iki logo): taşma 0 ·
   plakalar kart içeriğinde · satırdaki <h3>'lerin karta göre konumu aynı
   (fark 0 px) · ilk logo inline-start kenarında (AR'de sağda, uzaklık 0).
   Logo boyu: 1280 → 35.5 px, 1024 → 30.1 px (en dar içerik 233.5 px),
   768 → 38.3 px, 390 → 41.8 px; tek logoda her genişlikte 141×42 (tam boy). */
.uyelik-logolar {
  display: flex;
  gap: 0.625rem;
  block-size: 54px;
  margin-block-end: 1.5rem;
}

.uyelik-logolar__logo {
  flex: 0 1 auto;
  min-inline-size: 0;
  inline-size: auto;
  block-size: 100%;
  padding-block: 0.375rem;
  padding-inline: 0.5rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* ÜÇ VE DAHA ÇOK LOGO — en küçük okunur boy + satır kırma (F1, 2026-09-25)
   Liste Üyelik Kartları'ndan geldiği için yönetici üçüncü bir logolu kart
   ekleyebilir. Yukarıdaki "küçül, alt satıra inme" kuralı o zaman logoları
   okunmaz yapıyordu (ölçüldü, S4 doğrulayıcısı: 1024 px'te 3 logo 17 px,
   4 logo 11 px; 1280 px'te 20,6 / 13,7 px).
   ⚠ ALT SINIR 30 PX GÖRÜNÜR LOGO: bugünkü iki logonun HİÇBİR genişlikte
     inmediği boy — kart içeriği en dar 233,5 px (grid--3 minmax 18rem),
     orada iki logo 30,1 px. Plaka 2.625rem = 30 px logo + 2 × 0.375rem
     dolgu; rem ile, kullanıcı yazıyı büyütünce logo da büyür.
   ⚠ SIĞMAYAN ALT SATIRA İNER (flex-wrap), küçülmez: satırlar logonun bu
     sabit boydaki genişliğiyle kurulur. Tek başına bile sığmayan çok geniş
     bir logo kendi satırında daralır (flex-shrink + min-inline-size: 0
     yukarıdan gelir) — taşma olmaz.
   ⚠ YALNIZ 3+ LOGODA: `:has(> :nth-child(3))`. Aynı kurallar koşulsuz
     yazılsaydı iki logo da alt alta inerdi (doğal genişlikleri 157 + 142 +
     10 = 309 px, kart 234–268 px) — bir-iki logoda görünüm DEĞİŞMEZ
     (ölçüldü: 11 genişlik × 3 dil, konum ve boy birebir aynı). :has()
     tanımayan tarayıcı bu bloğu bütünüyle atlar, eski davranışa (küçülme)
     düşer; taşma yine olmaz.
   ÖLÇÜLDÜ (F1, 2026-09-25; geçici test kartlarıyla 3 ve 4 logo, 11 genişlik
   1440…320 × EN/TR/AR = 66 ölçüm): her logo 30 px, taşma 0, plakalar kart
   içinde, AR'de ilk logo sağda. Satır sayısı: 3 logo 2 satır (480–600 px'te
   tek satır), 4 logo 2 satır (1024–1100 ve 320 px'te 3 satır).
   ⚠ BEDELİ: logolar alt satıra inince kutu 54 px'ten uzar (2 satır 94 px,
     3 satır 146 px) ve bu kartın <h3>'ü aynı satırdaki ikonlu kartlarınkinden
     aşağıda kalır (+40 / +92 px). Okunmaz logoya tercih edildi. */
.uyelik-logolar:has(> .uyelik-logolar__logo:nth-child(3)) {
  flex-wrap: wrap;
  block-size: auto;
}

.uyelik-logolar:has(> .uyelik-logolar__logo:nth-child(3)) > .uyelik-logolar__logo {
  block-size: 2.625rem;
}