/* ==========================================================================
   GAZALI AVIATION — main.css
   ORTAK — tokenlar, reset, tipografi, yerlesim, baslik, alt bilgi,
   dugmeler, kartlar, formlarin ortak katmani. HER sayfa yukler.
   ⚠ Sayfaya OZEL kurallar burada DEGIL, /assets/tema/css/<sayfa>.css iginde.
     Model $sayfaCss[] ile bildirir; head.php basar.
   ========================================================================== */

/* ==========================================================================
   GAZALI AVIATION — Tasarım Sistemi
   Statik sürüm. PHP'ye geçerken bu dosya olduğu gibi kalır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokenlar
   -------------------------------------------------------------------------- */
:root {
  /* Lacivert — PANTONE 281 C çevresinde kurulu rampa.
     281 C en koyu yüzeydir; üstündeki tonlar giderek açılır. Eski rampa
     #060d1a ile siyaha yakın başlıyordu ve site "çok koyu" duruyordu.
     --navy-950 aynı zamanda altın/beyaz zemin üstünde koyu METİN rengidir
     (.btn--primary, .card__tag, .segment.is-active) — değiştirirken
     kontrastı kontrol et: altın üstünde 7.3:1, beyaz üstünde 15.5:1. */
  --navy-950: #00205b; /* PANTONE 281 C — marka laciverti */
  --navy-900: #062a6d;
  --navy-800: #0b3480;
  --navy-700: #113e92;
  --navy-600: #1d54b0;

  /* Altın — marka vurgusu */
  --gold-300: #f0dda0;
  --gold-400: #e3c567;
  --gold-500: #d4af37; /* ana vurgu */
  --gold-600: #b8860b; /* marka altını */
  --gold-700: #8c6a0a; /* açık zemin üstünde metin için (kontrast) */

  /* Nötrler */
  --ink: #0f1620;
  --slate-700: #33404f;
  --slate-600: #4a5568;
  --slate-500: #718096;
  --slate-400: #9aa5b1;
  --paper: #f7f9fc;
  --paper-2: #eef2f7;
  --white: #ffffff;

  --line: rgba(15, 22, 32, 0.1);
  --line-strong: rgba(15, 22, 32, 0.16);
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Tipografi */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Arapça — SİSTEM yazı tipleri. Inter ve Poppins alt kümelerinin hiçbiri
     U+0600-06FF taşımıyor (ölçüldü: fonts.css'te 12 @font-face, 0 tanesi
     Arapça), bu yüzden Arapça metin zaten sistem yüzüne düşerdi; yığın onu
     RASTLANTIYA bırakmak yerine platform platform seçiyor.
     ⚠ Yerel bir Arapça webfont eklenirse adı bu listenin BAŞINA yazılır;
       başka hiçbir satır değişmez. */
  --font-arabic: "Noto Sans Arabic", "Noto Naskh Arabic", "SF Arabic",
                 "Geeza Pro", "Segoe UI", Tahoma, "Traditional Arabic", sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --step-3: clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem);
  --step-4: clamp(1.875rem, 1.45rem + 2.1vw, 3.25rem);
  --step-5: clamp(2.25rem, 1.6rem + 3.2vw, 4.375rem);

  /* Ölçü */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06), 0 2px 8px rgba(10, 22, 40, 0.05);
  --shadow: 0 4px 12px rgba(10, 22, 40, 0.07), 0 16px 40px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 22, 40, 0.1), 0 32px 72px rgba(10, 22, 40, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
  /* Başlık logosunun YÜKSEKLİĞİ — 5. bölüm; --header-h ile birlikte
     daralır (768: 50 · 480: 46). Yapışkan başlık 70 px'e inse de sığar. */
  --brand-h: 56px;

  /* Yüzen köşe düğmeleri (yukarı çık · çerez simgesi) — 18. bölüm.
     44 px: WCAG 2.5.5 dokunma hedefi. */
  --kose-boyut: 44px;
  --kose-bosluk: clamp(1rem, 2.5vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* ⚠ scroll-padding-bottom — ÖLÇÜLMÜŞ KUSUR (WCAG 2.2 SC 2.4.11): sabit
     çerez şeridi ilk ziyarette sayfanın altını örter. Tarayıcı Tab ile
     odaklanan öğeyi görünüme kaydırırken şeridi hesaba katmıyor, odağı onun
     ARKASINDA bırakıyordu: 390 px ana sayfada 36 odak durağının 14'ü, 1280 px'te
     48'in 5'i tamamen örtülüydü. Değişkeni cerez.js ölçer; şerit yokken ya da
     çerez sistemi kapalıyken 0 → yalnız 1rem kalır. Üstteki eşi sabit başlık
     için, aynı gerekçe. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-padding-bottom: calc(var(--cerez-bar-h, 0px) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

/* .btn / .field gibi display kuralları hidden'ı ezmesin */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Klavye kullanıcıları için içeriğe atlama */
/* ==========================================================================
   GORSEL OLARAK GIZLI, EKRAN OKUYUCUYA ACIK
   --------------------------------------------------------------------------
   display:none ya da visibility:hidden ekran okuyucudan DA gizler; burada
   amac tam tersi: metin gorunmeyecek ama duyurulacak. Standart kirpma tekniği.
   ⚠ Kullanim: anasayfadaki tekil <h1>. Sayfanin TEK h1'i odur; hero
     taşıyıcısının üç slayt başlığı h2'dir (ÖLÇÜLDÜ: üçü de h1 iken
     sayfada 3 adet h1 vardı — 14 tema sayfasının tek aykırısıydı).
     Kanonik kaynak (simyakoleji) da tam bu deseni kullanıyor.
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--navy-900);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  inset-inline-start: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  letter-spacing: -0.035em;
}
h2 {
  font-size: var(--step-4);
  letter-spacing: -0.03em;
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--slate-600);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.eyebrow--center::before {
  display: none;
}

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

.muted {
  color: var(--slate-600);
}

/* Koyu zeminlerde tipografi */
.on-dark {
  color: rgba(255, 255, 255, 0.82);
}
.on-dark h1,
.on-dark h2,
.on-dark h3,
/* ==========================================================================
   .baslik--kart — ANLAMSAL DUZEY h3, GORSEL OLCEK h4
   --------------------------------------------------------------------------
   ⚠ NEDEN VAR: kart ve callout başlıkları bir <h2> bölümünün içinde duruyor,
     yani doğru anlamsal düzeyleri h3'ür. Etiketleri h4 iken HER sayfada
     h2=>h4 SEVİYE ATLAMASI oluşuyordu (WCAG 1.3.1; 17 sayfada ölçüldü,
     kanonik kaynak simyakoleji'de hiç atlama yok).
   ⚠ NEDEN SINIF: etiketi h3 yapmak başlığı BÜYÜTÜRDÜ (h3 ölçeği daha
     büyük). Anlamsal düzey ile görsel düzey AYRI şeylerdir: etiket
     belgeyi, sınıf görünümü anlatır. Böylece görünüm BİREBİR korunur.
   ⚠ Gerçekten h3'ün ALTINDA duran h4'ler DOKUNULMADI (6 adet, ölçüldü) —
     onlar doğru yuvalanmadır.
   ========================================================================== */
.baslik--kart {
  font-size: var(--step-1);
}

.on-dark h4,
.on-dark .baslik--kart {
  color: var(--white);
}
.on-dark .eyebrow {
  color: var(--gold-400);
}
.on-dark .lead {
  color: rgba(255, 255, 255, 0.76);
}
.on-dark .muted {
  color: rgba(255, 255, 255, 0.62);
}
.on-dark .gold {
  color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   4. Yerleşim
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
}

.section--dark {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.82);
}

.section--paper {
  background: var(--paper);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head .eyebrow {
  margin-bottom: 1.125rem;
}

.section-head h2 + .lead {
  margin-top: 1.25rem;
}

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Dört iş kolu kartı (ana sayfa hizmetler bölümü + 404): AÇIKÇA 1 / 2 sütun,
   yani geniş ekranda 2×2. Ölçüldü (2026-09-24):
   - grid--4'ün auto-fit'i 900 ve 1024 px'te 3+1 diziyordu; dördüncü iş kolu
     alt satırda tek başına kalıyordu.
   - 4 sütun denendi: 1280 px'te kart 252 px genişliğe iniyor ve ana sayfa
     kartı 791 px boya uzuyordu (liste + paragraf dar sütunda satır satır
     kırılıyor). 2×2'de 1099 px'te 492 px genişlik, ~520 px boy. */
.grid--is-kollari {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--is-kollari {
    grid-template-columns: repeat(2, 1fr);
  }
}

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-left {
    grid-template-columns: 1.15fr 0.85fr;
  }
  .split--wide-right {
    grid-template-columns: 0.85fr 1.15fr;
  }


}



.stack > * + * {
  margin-top: 1.125rem;
}

/* --------------------------------------------------------------------------
   5. Başlık / navigasyon
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
    height 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Şeffaf durum — koyu hero üzerinde */
.header--transparent {
  background: transparent;
}

.header--transparent .nav__link {
  color: rgba(255, 255, 255, 0.86);
}

/* Kaydırıldığında katı durum */
.header.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(10, 22, 40, 0.07);
  height: 70px;
}

.header.is-stuck .nav__link {
  color: var(--slate-700);
}

/* Marka — logo DOSYADAN gelir (<img>, header.php / footer.php).
   ⚠ BOY YÜKSEKLİKTEN verilir, genişlik orandan türer: logo dik bir
     amblem (≈1,84:1). Eski işaret 4:1 yatay yazıydı; genişlikle boyutlamak
     yeni logoyu başlıktan taşırırdı.
   ⚠ HÂLE GÖRE RENK/BOY DEĞİŞMEZ: tek renk altın logo iki zeminde de okunuyor
     — hesaplandı: #CF9323 yapışkan başlığın beyazında 2,67:1, marka
     lacivertinde (#00205b) 5,78:1 (logo metni WCAG 1.4.3'te kontrast
     şartından muaftır; yine de iki zeminde de seçiliyor). Boy da sabit:
     yapışkan hâlde küçültmek logonun genişliğini değiştirir ve
     space-between menüyü kaydırma anında yana kaydırırdı.
   ⚠ "AVIATION" satırı logo boyunun %14,65'i (tarayıcıda 819 px'lik
     çizimde satır satır ölçüldü: amblem %36,9 · GAZALI %28,0 · AVIATION
     %14,65). --brand-h 56 px → AVIATION 8,2 px · 50 px → 7,3 px ·
     46 px → 6,7 px. Başlık yüksekliği (84 / 74 / 68, yapışkan 70)
     DEĞİŞMEDİ. */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand__logo {
  display: block;
  block-size: var(--brand-h);
  inline-size: auto;
}

/* Menü */
.nav {
  display: none;
}

/* ⚠ BOŞ <nav> SARMALI 1100 px ALTINDA DÜZENE GİRMEZ (2026-09-25, ölçüldü):
   menü listesi (.nav, <ul>) burada gizli, ama onu saran <nav> (header.php)
   .header__inner'ın ÜÇÜNCÜ flex öğesi olarak kalıyordu — genişliği 0, ama
   İKİ aralık (2 × 2rem = 64 px) yiyerek. 320 px'te içerik 288 px: logo
   84,75 + eylemler 143,05 (EN; TR 142,45 · AR 142,69) + 64 = 291,8 px →
   3,8 px açık dil seçiciden (75 → 72 px, oku 10,4 → 7,5 px) ve burgerden
   (44 → 43,1 px; dokunma hedefi 44'ün altına) kesiliyordu. Şimdi tek
   aralık kalır: 320 px'te 28 px pay, hiçbir şey büzülmez.
   ⚠ display: contents, none DEĞİL — kutu kalkar, öğe kalır:
     · none, kırılma noktası .nav'da değişip burada unutulursa o aralıkta
       masaüstü menüsünü DE gizlerdi; burger de gizliyse sayfada HİÇ gezinme
       kalmaz (bkz. aşağıdaki "DÖRT BLOK" notu). contents'te en kötü sonuç
       yerleşimdir, menü görünür kalır.
     · contents tarayıcının erişilebilirlik ağacını değiştirmez: nav
       işareti ("Ana menü") aynı adla, aynı çocuklarla yerinde (CDP
       getFullAXTree, 320/390 px × 3 dil, önce/sonra aynı). ⚠ Playwright'ın
       ariaSnapshot'ı onu artık LİSTELEMEZ — kendi görünürlük sezgisi
       (kutusuz öğe + görünür çocuk yok); tarayıcı ağacı değil, araç farkı.
   ⚠ ≥1100 px'e DOKUNMAZ: orada <nav> bir blok kutudur ve menünün
     margin-inline-start: auto'su ona göre çalışır. Ölçüldü (S2): 8 genişlik
     × 9 sayfa × (çubuklu/çubuksuz) = 144 ölçüm, 3.600 başlık kutusu
     önce/sonra birebir; 340–1099 px'te 648 kutu da birebir (boş alan
     varken space-between konumu aralıktan bağımsız) — yalnız 320 px
     değişti. */
@media (max-width: 1099.98px) {
  .header__inner > nav {
    display: contents;
  }
}

/* ⚠ 1000 -> 1100: ÖLÇÜLDÜ, İngilizce başlıkta ana CTA 1000-1063 px
   arasında ekranın DIŞINDA kalıyordu (1000 pxte sağ kenarı 1061) ve
   gövde kaymadığı için sessizce kırpılıyordu. Menüye nowrap eklenince
   genişledi; dar ekranda doğru davranış metni bölmek değil MOBİL
   ÇEKMECEYE devretmek — çekmecede CTA zaten var (header.php .mobile-nav__foot).
   ⚠ DÖRT BLOK BİRLİKTE TAŞINIR (.nav · .header__actions · .header__cta ·
   .burger): yalnız birini taşımak, hem masaüstü menüsünün hem burgerin
   gizlendiği bir aralık açar ve sayfada HİÇ gezinme kalmaz. */
@media (min-width: 1100px) {
  .nav {
    display: flex;
    align-items: center;
    /* ⚠ 0.25rem -> 0: öğelerin kendi yatay dolgusu zaten ayırıyor.
       Boşluk + dolgu birlikte 34 px'e çıkıyordu ve İngilizce etiketler
       sığmayıp ORTADAN BÖLÜNÜYORDU (ölçüldü: 1000-1600 px arası beş
       genişlikte de iki satır). */
    gap: 0;
    margin-inline-start: auto;
  }

  /* ⚠ MASAÜSTÜ BAŞLIK BÜZÜLMEZ, SIĞMAZSA TAŞAR (2026-09-25, ölçüldü):
     başlık sığmadığında önce açılır menü okları (12 → 3,5 px) ve dil
     seçici (75 → 65,6 px) SESSİZCE büzülüyor, ancak sonra "Teklif Al"
     ekran dışına itiliyordu — kusur görünmeden birikiyordu. Artık ikisi
     de büzülmez (.nav__caret kuralı aşağıda; .dil-ac burada, 1100 px
     ile sınırlı: altında dil seçici zaten sığıyor — 320 px'te 28 px pay,
     bkz. yukarıdaki "BOŞ <nav> SARMALI" notu). Sınır aşılırsa artık hiçbir şey
     ezilmez: Teklif Al aşım kadar kenar boşluğuna kayar (ölçüldü; 44 px
     aşıma dek ekranda) — kusur görünür. Menünün sığması panelin genişlik
     bütçesinin işidir (MenuVeri::GENISLIK) — bütçe bu eşikte ölçülür.
   ⚠ ARALIK 2rem → 1rem YALNIZ SINIRDA ETKİLİ: .header__inner
     space-between'dir; boş alan varken öğelerin konumu aralıktan
     BAĞIMSIZDIR (menünün başı = (içerik + logo − menü − eylem − pay) / 2,
     aralık sadeleşir). Ölçüldü (D3): varsayılan menüde 320–1920 px'te 16
     genişlik × 9 sayfa (3 dil), 4.248 başlık kutusu önce/sonra birebir;
     ekran görüntüsü farkı gürültü düzeyinde. Aralık yalnız menü sınıra
     dayandığında devreye girer ve menüye 2 × 16 = 32 px yer açar; logo ile
     menü yazısı arasında yine 16 + 8 px (bağlantı dolgusu) kalır.
     1100 px'teki menü alanı bu aralıkla EN 605,0 · TR 669,2 · AR 626,0 px
     (2rem iken 573,0 · 637,2 · 593,9); 17 px klasik kaydırma çubuğuyla
     17 px az — bütçe O değerden alınır (MenuVeri::GENISLIK). Aralık,
     logo, dil seçici ya da Teklif Al değişirse bütçe yeniden ölçülür. */
  .header__inner {
    column-gap: 1rem;
  }

  .dil-ac {
    flex-shrink: 0;
  }


}



.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* ⚠ 0.95rem -> 0.6rem: bkz. .nav'daki not. */
  padding: 0.6rem 0.6rem;
  /* ⚠ MENÜ ETİKETİ ORTADAN BÖLÜNMEZ: bölünen bir etiket hem satır
     yüksekliğini bozuyor (komşu öğeler dikeyde kayıyor) hem de tıklama
     hedefini bulanıklaştırıyordu. Etiket sığmıyorsa çözüm onu bölmek
     değil, KISALTMAKTIR — 'Motor ve APU' menüde 'Motor' oldu. */
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate-700);
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

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

.nav__link[aria-current] {
  color: var(--gold-600);
  font-weight: 600;
}

/* ⚠ flex-shrink: 0 — ok büzülmez (bkz. .nav'daki "MASAÜSTÜ BAŞLIK
     BÜZÜLMEZ" notu): sığmayan menü oku 12 → 3,5 px'e eziyordu (ölçüldü).
     Bütçedeki 'ok' (17,6 px = 12 + 0,35rem aralık) bu kurala dayanır. */
.nav__caret {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  transition: transform 0.25s var(--ease);
}

.nav__item:hover .nav__caret {
  transform: rotate(180deg);
}

/* Açılır alt menü */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  inset-inline-start: 0;
  min-width: 19rem;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
    visibility 0.22s var(--ease);
}

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: background 0.18s var(--ease);
}

.nav__dropdown a:hover {
  background: var(--paper-2);
}

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

.nav__dropdown span {
  display: block;
  font-size: 0.8125rem;
  color: var(--slate-500);
  line-height: 1.45;
  margin-top: 2px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ⚠ 1000 -> 1100: ÖLÇÜLDÜ, İngilizce başlıkta ana CTA 1000-1063 px
   arasında ekranın DIŞINDA kalıyordu (1000 pxte sağ kenarı 1061) ve
   gövde kaymadığı için sessizce kırpılıyordu. Menüye nowrap eklenince
   genişledi; dar ekranda doğru davranış metni bölmek değil MOBİL
   ÇEKMECEYE devretmek — çekmecede CTA zaten var (header.php .mobile-nav__foot).
   ⚠ DÖRT BLOK BİRLİKTE TAŞINIR (.nav · .header__actions · .header__cta ·
   .burger): yalnız birini taşımak, hem masaüstü menüsünün hem burgerin
   gizlendiği bir aralık açar ve sayfada HİÇ gezinme kalmaz. */
@media (min-width: 1100px) {
  .header__actions {
    margin-inline-start: 1rem;
  }


}



/* Masaüstü menüsüyle birlikte görünür; altında yerini hamburger alır
   (Teklif Al bağlantısı mobil menünün en altında zaten var).
   Seçici iki sınıflı: aksi hâlde daha sonra gelen .btn kuralı display'i eziyor. */
.header__actions .header__cta {
  display: none;
}

/* ⚠ 1000 -> 1100: ÖLÇÜLDÜ, İngilizce başlıkta ana CTA 1000-1063 px
   arasında ekranın DIŞINDA kalıyordu (1000 pxte sağ kenarı 1061) ve
   gövde kaymadığı için sessizce kırpılıyordu. Menüye nowrap eklenince
   genişledi; dar ekranda doğru davranış metni bölmek değil MOBİL
   ÇEKMECEYE devretmek — çekmecede CTA zaten var (header.php .mobile-nav__foot).
   ⚠ DÖRT BLOK BİRLİKTE TAŞINIR (.nav · .header__actions · .header__cta ·
   .burger): yalnız birini taşımak, hem masaüstü menüsünün hem burgerin
   gizlendiği bir aralık açar ve sayfada HİÇ gezinme kalmaz. */
@media (min-width: 1100px) {
  .header__actions .header__cta {
    display: inline-flex;
  }


}



/* Mobil menü düğmesi */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ⚠ 1000 -> 1100: ÖLÇÜLDÜ, İngilizce başlıkta ana CTA 1000-1063 px
   arasında ekranın DIŞINDA kalıyordu (1000 pxte sağ kenarı 1061) ve
   gövde kaymadığı için sessizce kırpılıyordu. Menüye nowrap eklenince
   genişledi; dar ekranda doğru davranış metni bölmek değil MOBİL
   ÇEKMECEYE devretmek — çekmecede CTA zaten var (header.php .mobile-nav__foot).
   ⚠ DÖRT BLOK BİRLİKTE TAŞINIR (.nav · .header__actions · .header__cta ·
   .burger): yalnız birini taşımak, hem masaüstü menüsünün hem burgerin
   gizlendiği bir aralık açar ve sayfada HİÇ gezinme kalmaz. */
@media (min-width: 1100px) {
  .burger {
    display: none;
  }


}



.burger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.header--transparent .burger {
  color: var(--white);
}
.header.is-stuck .burger {
  color: var(--ink);
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobil panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy-900);
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* :not(.btn) — alttaki eylem düğmeleri bu menü stilini almasın */
.mobile-nav a:not(.btn) {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line-dark);
}

.mobile-nav a[aria-current] {
  color: var(--gold-400);
}

.mobile-nav a.is-sub {
  font-size: 1rem;
  padding-inline-start: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
}

.mobile-nav__foot {
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}

body.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. Düğmeler
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease),
    color 0.22s var(--ease), border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 0.22s var(--ease);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn--primary {
  background: linear-gradient(135deg, var(--gold-600), var(--gold-500));
  color: var(--navy-950);
  box-shadow: 0 6px 20px rgba(184, 134, 11, 0.28);
}

.btn--primary:hover {
  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.38);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--gold-600);
  color: var(--gold-700);
}

.on-dark .btn--ghost,
.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}

.on-dark .btn--ghost:hover,
.btn--ghost-light:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
  background: rgba(212, 175, 55, 0.06);
}

.btn--sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1.05rem 2rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

/* Metin bağlantısı */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform 0.22s var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.on-dark .link-arrow {
  color: var(--gold-400);
}

/* Sayfa içi hero (alt sayfalar) */
.page-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 7vw, 6rem))
    clamp(3.5rem, 7vw, 5.5rem);
  background: linear-gradient(160deg, var(--navy-950), var(--navy-800) 70%, var(--navy-700));
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    820px 460px at 84% 8%,
    rgba(212, 175, 55, 0.16),
    transparent 64%
  );
}

.page-hero h1 {
  font-size: var(--step-4);
  color: var(--white);
  margin-block: 1rem 1.25rem;
}

.page-hero .lead {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.74);
}

/* Kırıntı yolu */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

.crumbs a:hover {
  color: var(--gold-400);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-inline-start: 0.5rem;
  opacity: 0.4;
}

.crumbs li {
  display: inline-flex;
  align-items: center;
}

.crumbs [aria-current] {
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   9. Kartlar
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 134, 11, 0.35);
  box-shadow: var(--shadow);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(
    140deg,
    rgba(212, 175, 55, 0.16),
    rgba(184, 134, 11, 0.07)
  );
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.card__icon svg {
  width: 26px;
  height: 26px;
  color: var(--gold-700);
}

.card h3 {
  margin-bottom: 0.85rem;
}

.card p {
  color: var(--slate-600);
}

.card__list {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.7rem;
}

.card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9375rem;
  color: var(--slate-700);
}

.card__list svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--gold-600);
}

.card__foot {
  margin-top: auto;
  padding-top: 1.75rem;
}

/* Koyu kart */
.card--dark {
  background: var(--navy-800);
  border-color: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
}

.card--dark h3 {
  color: var(--white);
}

.card--dark p,
.card--dark .card__list li {
  color: rgba(255, 255, 255, 0.68);
}

.card--dark .card__list {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.card--dark .card__icon {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.26);
}

.card--dark .card__icon svg,
.card--dark .card__list svg {
  color: var(--gold-500);
}

.card--dark:hover {
  border-color: rgba(212, 175, 55, 0.4);
}

/* Vurgulu kart */
.card--feature {
  border-color: rgba(184, 134, 11, 0.4);
  box-shadow: 0 0 0 1px rgba(184, 134, 11, 0.08), var(--shadow-sm);
}

.card__tag {
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.5rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-950);
  background: var(--gold-500);
  border-radius: var(--radius-pill);
}

/* Numaralı adım kartı */
.step-card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step-card__no {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(184, 134, 11, 0.28);
  margin-bottom: 1rem;
}

.step-card h4,
.step-card .baslik--kart {
  margin-bottom: 0.5rem;
}

.step-card p {
  font-size: 0.9375rem;
  color: var(--slate-600);
}

/* --------------------------------------------------------------------------
   10. İstatistikler
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Sayısı dörde bölünmeyen şerit (parça ve motor sayfaları — üç istatistik).
   ⚠ IZGARA DEĞİL ESNEK KUTU: ızgara 2 sütuna düştüğünde (≤768 px ya da dar
     sütunda auto-fit) üçüncü kutunun yanında BOŞ bir hücre kalır ve şeridin
     --line zemini gri bir dikdörtgen olarak görünür. Esnek satırda her satır
     kendi kutularıyla dolar (2 + 1 → alttaki tam genişlik). Taban 12rem
     ızgaranın minmax'ıyla aynı. Ortam sorgularındaki grid-template-columns
     esnek kutuya uygulanmaz. */
.stats--esnek {
  display: flex;
  flex-wrap: wrap;
}

.stats--esnek .stat {
  flex: 1 1 12rem;
}

.stat {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--white);
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.875rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gold-700);
}

.stat__label {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--slate-600);
}

.section--dark .stats {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
}

.section--dark .stat {
  background: var(--navy-900);
}

.section--dark .stat__value {
  color: var(--gold-500);
}

.section--dark .stat__label {
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   11. Onay listesi
   -------------------------------------------------------------------------- */
.checklist {
  display: grid;
  gap: 1rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: var(--step-0);
  color: var(--slate-700);
}

.checklist svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--gold-600);
}

.checklist b {
  font-weight: 600;
  color: var(--ink);
}

.on-dark .checklist li {
  color: rgba(255, 255, 255, 0.78);
}

.on-dark .checklist b {
  color: var(--white);
}

.on-dark .checklist svg {
  color: var(--gold-500);
}

/* Bilgi kutusu */
.callout {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border-inline-start: 3px solid var(--gold-600);
  border-start-start-radius: 0;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  border-end-start-radius: 0;
}

/* ⚠ İKİ SEÇİCİ: temadaki 23 callout başlığı h4'ür; yasal sayfalardaki
   "Şablon metin uyarısı" ise h1'den HEMEN SONRA geldiği için h2'dir
   (h4 iken h1=>h4 seviye atlaması oluşuyordu — ölçüldü).
   İkisi de AYNI görünsün diye seçici ikisini birden kapsıyor. */
.callout h4,
.callout .baslik--kart,
.callout .callout__baslik {
  /* ⚠ BOYUT AÇIK YAZILIYOR: kural önceden boyut vermiyordu, ETIKETIN
     varsayılanından geliyordu. Yasal sayfadaki uyarı h2'ye çevrilince
     (h1=>h4 atlamasını kapatmak için) aynı kutu 19,97px yerine 25,76px
     basıyordu — ölçüldü. Artık iki etiket de h4 ölçeğinde. */
  font-size: var(--step-1);
  margin-bottom: 0.6rem;
}

.callout p {
  font-size: 0.9375rem;
  color: var(--slate-600);
}

.on-dark .callout {
  background: rgba(255, 255, 255, 0.05);
}

.on-dark .callout p {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   12. Operasyon ağı haritası
   -------------------------------------------------------------------------- */
.netmap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(
      900px 500px at 55% 45%,
      rgba(28, 53, 87, 0.9),
      transparent 70%
    ),
    var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.netmap svg {
  width: 100%;
  height: auto;
  display: block;
}

.netmap__route {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: 0.75;
  animation: dash 26s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -260;
  }
}

.netmap__node circle {
  fill: var(--gold-500);
}

.netmap__node text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
}

/* Etiketlerin rota çizgileri üzerinde okunur kalması için koyu hale */
.netmap text {
  paint-order: stroke;
  stroke: #060d1a;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.netmap__hub circle {
  fill: var(--gold-400);
}

.netmap__hub text {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  fill: var(--white);
}

.netmap__pulse {
  fill: rgba(212, 175, 55, 0.3);
  transform-origin: center;
  animation: pulse 3s ease-out infinite;
}

@keyframes pulse {
  0% {
    r: 4;
    opacity: 0.6;
  }
  100% {
    r: 17;
    opacity: 0;
  }
}

.netmap__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.netmap__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.netmap__legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-500);
}

.netmap__legend i.is-hub {
  width: 11px;
  height: 11px;
  background: var(--gold-300);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
}

/* Bölge listeleri */
.region {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.region__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.region__head h4,
.region__head .baslik--kart {
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.region__count {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-700);
  white-space: nowrap;
}

.region__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.region__cities li {
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--slate-700);
  background: var(--paper-2);
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   13. Formlar
   -------------------------------------------------------------------------- */
.field {
  display: grid;
  gap: 0.5rem;
}

.field > label,
.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-600);
}

.field .req {
  color: var(--gold-700);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--step-0);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.14);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--slate-400);
}

.textarea {
  min-height: 8rem;
  resize: vertical;
}

.select {
  appearance: none;
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234A5568' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.field-error {
  font-size: 0.8125rem;
  color: #c0392b;
  display: none;
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: #c0392b;
}

.field.has-error .field-error {
  display: block;
}

.form-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.form-note {
  font-size: 0.8125rem;
  color: var(--slate-500);
  line-height: 1.55;
}

/* Form altı veri notundaki yasal belge bağlantıları (formVeriNotu() —
   iletişim, kiralama sihirbazı, uçak satış ve motor formları). Bir ara
   iletisim.css'teydi; öteki üç form satır içi style="" taşıyordu. Renk
   --gold-700 (#8c6a0a) beyaz kartta 5.02:1 (hesaplandı, WCAG bağıl
   parlaklık). */
.form-note a {
  color: var(--gold-700);
  text-decoration: underline;
}

.form-card {
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Onay mesajı */
/* ==========================================================================
   SONUÇ KUTUSU — SABİT BAŞLIĞIN ALTINDA DURUR
   --------------------------------------------------------------------------
   ⚠ ÖLÇÜLMÜŞ KUSUR: PRG dönüşünde çapa kutuyu görüntüye getiriyor ama
     .header position:fixed ve 70px yüksekliğinde — kutunun üstü başlığın
     ARKASINDA kalıyordu. 390px'te görünen piksel 0 ölçüldü.
   ⚠ scroll-margin-top ÇAPA KAYDIRMASINI etkiler (margin'den farklı olarak
     düzeni bozmaz): tarayıcı kutuyu bu kadar aşağıda durdurur.
     84px = başlık 70px + 14px pay.
   ========================================================================== */
#form-sonuc {
  scroll-margin-top: 84px;
}

#form-sonuc:focus {
  outline: none;        /* odak program tarafindan aliniyor, halka gerekmez */
}

.form-success {
  display: none;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(184, 134, 11, 0.08);
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: var(--radius);
}

.form-success.is-visible {
  display: flex;
}

/* Sunucu doğrulaması başarısız olduğunda — .form-success'in kırmızı ikizi */
.form-error {
  display: none;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(155, 44, 44, 0.07);
  border: 1px solid rgba(155, 44, 44, 0.3);
  border-radius: var(--radius);
  color: var(--slate-700);
}

.form-error.is-visible {
  display: block;
}

.form-error strong {
  color: #9b2c2c;
}

/* Bal küpü — bot'lar bu alanı doldurur, insanlar görmez.
   display:none KULLANILMAZ: bazı botlar gizli alanları atlar.
   Ekran dışına alınır, klavye ve ekran okuyucudan da çıkarılır. */
.bal-kupu {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold-700);
}

.form-success p {
  font-size: 0.9375rem;
  color: var(--slate-700);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.on-dark .contact-item {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.on-dark .contact-item__icon {
  background: rgba(212, 175, 55, 0.14);
}

.on-dark .contact-item__icon svg {
  color: var(--gold-500);
}

.on-dark .contact-item p,
.on-dark .contact-item a {
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   16. Kapanış çağrısı
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    700px 400px at 88% 50%,
    rgba(212, 175, 55, 0.2),
    transparent 62%
  );
}

.cta__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .cta__inner {
    grid-template-columns: 1.4fr auto;
  }


}



.cta h2 {
  color: var(--white);
  margin-bottom: 0.85rem;
}

.cta p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 36rem;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* --------------------------------------------------------------------------
   17. Alt bilgi
   -------------------------------------------------------------------------- */
/* ⚠ ALT DOLGU KÖŞE DÜĞMELERİNİ AŞAR (bkz. 18. bölüm): yukarı çık ve çerez
     simgesi dipten --kose-bosluk + 44 px yer kaplar. Dolgu 2rem kalsaydı
     sayfa sonuna inildiğinde telif satırının başı ve sonu düğmelerin
     ALTINDA kalırdı (390 px'te iki uç da). */
.footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.66);
  padding-block: clamp(3rem, 6vw, 4.5rem) calc(var(--kose-boyut) + var(--kose-bosluk) + 1rem);
  font-size: 0.9375rem;
}

.footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .footer__top {
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  }


}



/* Altbilgide logo BÜYÜK: yer var ve başlıktaki boy sınırı burada yok.
   84 px → "AVIATION" satırı 12,3 px (oran 5. bölümde). Zemin --navy-950
   (#00205b): altın logo 5,78:1. */
.footer .brand {
  --brand-h: 84px;
}

.footer__tagline {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-500);
}

.footer__about {
  margin-top: 0.65rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 26rem;
}

.footer h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 1.25rem;
}

.footer__links {
  display: grid;
  gap: 0.7rem;
}

.footer__links a,
.footer__links li {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s var(--ease);
}

.footer__links a:hover {
  color: var(--gold-400);
}

.footer__contact {
  display: grid;
  gap: 0.85rem;
  font-size: 0.9375rem;
}

.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.62);
}

.footer__contact svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--gold-500);
}

.footer__contact a:hover {
  color: var(--gold-400);
}

.footer__contact strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* Yasal uyarı */
.disclaimer {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.035);
  border-inline-start: 2px solid var(--gold-600);
  border-start-start-radius: 0;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  border-end-start-radius: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

.disclaimer strong {
  color: var(--gold-500);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  /* ⚠ .45 → .55 — ÖLÇÜLMÜŞ KUSUR (2026-09-23): 13 px metin navy-950
     üstünde 4.12:1 çıkıyordu, AA'nın 4.5 eşiğinin altında. */
  color: rgba(255, 255, 255, 0.55);
}

.footer__bottom a:hover {
  color: var(--gold-400);
}

/* Yasal metinler şeridi — simyakoleji .site-footer__legal karşılığı.
   ⚠ İLK SATIRI TEK BAŞINA KAPLAR (flex-basis 100%): altı Türkçe başlık
     telif satırıyla yan yana sığmıyor ve 1280 px'te üç parçalı düzensiz
     bir sarma veriyordu. Bağlantılar üstte, telif + beyan altta.
   ⚠ EN/AR'de bugün HİÇ basılmaz (yayında çeviri yok) → alt şerit eski
     iki parçalı hâlinde kalır.
   ⚠ AYRAÇ YOK, yalnız boşluk (kaynakla aynı): '·' ayracı sarılan satırın
     BAŞINA düşüyor ve ::after içeriği olarak ekran okuyucuya "orta nokta"
     okutuyordu.
   ⚠ Kontrast (ölçüldü, navy-950 üstünde): bağlantı .66 → 7.34:1, şeridin
     geri kalanı .55 → 5.49:1. Bağlantı bir ton açık: tıklanabilir metin. */
.footer__yasal {
  flex: 1 1 100%;
}

.footer__yasal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.footer__yasal a {
  color: rgba(255, 255, 255, 0.66);
  transition: color 0.2s var(--ease);
}

.footer__yasal a[aria-current="page"] {
  color: var(--gold-400);
}

.ncage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.ncage span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

.ncage b {
  color: var(--gold-400);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Açık zeminde NCAGE rozetleri */
.ncage--light span {
  color: var(--slate-600);
  background: var(--paper);
  border-color: var(--line);
}

.ncage--light b {
  color: var(--gold-700);
}

/* --------------------------------------------------------------------------
   18. Yüzen köşe düğmeleri — yukarı çık (+ çerez simgesi cerez.css'te)
   --------------------------------------------------------------------------
   simyakoleji .back-to-top karşılığı; her sayfada basılır (footer.php).
   Çerez sistemi (şerit, pencere, simge) cerez.css'te — o dosya panelden
   kapatılabilir, bu düğme kapatılamaz; bu yüzden ortak katmanda.

   ⚠ İKİ KÖŞE, İKİ DÜĞME: yukarı çık inline-END, çerez simgesi
     inline-START. Mantıksal konum: RTL'de ikisi kendiliğinden yer değiştirir,
     hiçbir zaman aynı köşeye düşmezler.
   ⚠ ORTAK ÖLÇÜLER JETONDA (--kose-*): iki düğme aynı hizada ve aynı boyda
     durmalı; ayrı ayrı yazılsaydı biri değişince köşeler kayardı.
   ⚠ z-index 80: sepet düğmesi (90) ve penceresi (95), mobil menü (99),
     başlık (100) bunun ÜSTÜNDE. Mobil menü açıkken köşe düğmeleri onun
     altında kalır — menünün üstünde yüzen bir düğme menüyü delerdi.
   ⚠ --cerez-bar-h (cerez.js): çerez şeridi görünürken düğmeler onun
     üstüne çıkar; şerit yokken 0.
   ⚠ --yukari-cik-ek: sayfa aynı köşede kendi yüzen düğmesini taşıyorsa
     (parça sepeti) yukarı çık onun üstüne çıksın diye sayfa CSS'i doldurur.
   -------------------------------------------------------------------------- */
.yukari-cik {
  position: fixed;
  inset-inline-end: var(--kose-bosluk);
  bottom: calc(var(--kose-bosluk) + var(--cerez-bar-h, 0px) + var(--yukari-cik-ek, 0px));
  z-index: 80;
  display: grid;
  place-items: center;
  width: var(--kose-boyut);
  height: var(--kose-boyut);
  padding: 0;
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.yukari-cik svg {
  width: 20px;
  height: 20px;
  /* #i-chevron aşağı bakar; 180° döndürme yönden bağımsızdır (RTL'de de doğru) */
  transform: rotate(180deg);
}

.yukari-cik:hover {
  color: var(--gold-400);
  background: var(--navy-950);
  transform: translateY(-2px);
}

/* ⚠ İKİ TONLU ODAK HALKASI — ÖLÇÜLMÜŞ KUSUR (WCAG 1.4.11): sitenin altın
     halkası (gold-500) bu düğmenin çoğu zaman durduğu beyaz içerikte 2.1:1,
     3:1 eşiğinin altındaydı. Yalnız lacivert yetmez: düğme altbilginin
     (navy-950) üstüne de gelir ve orada lacivert halka kaybolur.
     Dıştan içe: beyaz bant (4–6 px) · lacivert halka (2–4 px) · beyaz bant
     (0–2 px). Beyaz zeminde lacivert, lacivert zeminde dış beyaz bant seçilir
     (ikisi de 15.47:1). Çerez simgesi aynı kuralı cerez.css'te taşır. */
.yukari-cik:focus-visible {
  outline: 2px solid var(--navy-950);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--white), var(--shadow);
}

/* Yukarı çık odağı <body>'ye bırakır (main.js); programatik odak klavyeden
   sonra geldiğinde tarayıcı :focus-visible sayar ve bütün sayfanın
   çevresine altın çerçeve çizerdi. */
body[tabindex="-1"]:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   19. Giriş animasyonu
   Not: yalnızca JS aktifse gizlenir; JS yoksa içerik anında görünür kalır.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js .reveal[data-delay="1"] {
  transition-delay: 0.09s;
}
.js .reveal[data-delay="2"] {
  transition-delay: 0.18s;
}
.js .reveal[data-delay="3"] {
  transition-delay: 0.27s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }


}



.prose h3 {
  font-size: var(--step-1);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.text-center {
  text-align: center;
}
.mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   22. Uçak envanteri — ucak-satisi.php
   --------------------------------------------------------------------------
   Süzgeç kutusu mevcut .form-card + .form-grid ile kuruluyor, ek stil yok.
   Burada yalnız kart künyesi, sonuç sayacı ve boş durum tanımlı.
   Süzme tarayıcıda yapılır (main.js → initEnvanter); kartlar sunucudan
   hepsi basılır, eşleşmeyenler [hidden] alır.
   -------------------------------------------------------------------------- */

.envanter__sayac {
  margin: 1.75rem 0 1.25rem;
  font-size: var(--step--1);
  color: var(--slate-600);
}

.envanter__sayac b {
  color: var(--ink);
}

/* Süzgeç hiçbir kaydı tutmadığında */
.envanter__bos {
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.envanter__bos h3 {
  margin-bottom: 0.5rem;
}

.envanter__bos p {
  max-width: 32rem;
  margin-inline: auto;
  color: var(--slate-600);
}

/* --- durum rozeti --- */

.rozet {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  color: var(--slate-700);
}

.rozet--new {
  background: rgba(184, 134, 11, 0.14);
  color: var(--gold-700);
}

.rozet--serviceable {
  background: rgba(29, 84, 176, 0.12);
  color: var(--navy-700);
}

.rozet--overhauled {
  background: rgba(74, 85, 104, 0.14);
  color: var(--slate-700);
}

/* ⚠ BU İKİSİ JS'TE ÜRETİLİYORDU AMA KURALI YOKTU (denetim bulgusu):
   19 parça taban rozete düşüyor, yani "Söküm" ile "Belirtilmemiş" ekranda
   AYNI görünüyordu — rozet tam da bu ikisini ayırmak için var.
   ⚠ Renkler ölçülü: as-removed uyarı tonunda (kullanılmış ünite),
   na nötr — "bilinmiyor" bir durum bildirimi, bir kalite iddiası değil. */
.rozet--as-removed {
  background: rgba(180, 83, 9, 0.12);
  color: #8a4408;                     /* beyaz üzerinde 5.61:1 */
}

.rozet--na {
  background: rgba(74, 85, 104, 0.08);
  color: var(--slate-600);            /* 7.53:1 */
}

.sepet-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.sepet-satir strong {
  display: block;
  font-size: 0.875rem;
}

.sepet-satir span {
  font-size: 0.8125rem;
  color: var(--slate-600);
}

.sepet-sil {
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  color: var(--slate-600);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sepet-sil:hover {
  color: #9b2c2c;
  border-color: #9b2c2c;
}

/* Menü 1000-1199 px arasında altı öğeyle sığmıyor: bu aralıkta kapsayıcı
   daralıyor ama menü aynı kalıyor. Bağlantı iç boşluğunu daraltmak 6 öğede
   ~38 px kazandırıyor; 1200 px üstünde dokunmaya gerek yok. */
/* ⚠ ARALIK 1100-1199: en dar masaüstü. Bu kural bir ara 0.7rem yazıyordu ve
   o değer taban 0.95rem iken DARALTMAK içindi; taban 0.6rem'e inince aynı
   kural GENİŞLETMEYE başlamıştı — yani en dar aralığa en geniş dolguyu
   veriyordu (ölçülmüş kusur). Artık tabandan dar. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .nav__link {
    padding-inline: 0.5rem;
  }


}



/* --------------------------------------------------------------------------
   25. Dar ekranlar — 768 / 480 / 390 / 360 / 320
   -------------------------------------------------------------------------- */

/* Uzun Türkçe kelimeler dar sütunda taşmasın */
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

/* ---- 768 ve altı ---- */
@media (max-width: 768px) {
  :root {
    --header-h: 74px;
    --brand-h: 50px;
  }

  /* Haritada şehir etiketleri okunamayacak kadar küçülüyor; merkezler kalsın */
  .netmap__node text {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Parça satırı dört sütunla sığmıyor; no+ad üstte, durum+düğme altta */

  .cta__actions .btn,
  .hero__actions .btn {
    flex: 1 1 auto;
  }


}



/* ---- 480 ve altı ---- */
@media (max-width: 480px) {
  :root {
    --header-h: 68px;
    --gutter: 1.125rem;
    --brand-h: 46px;
  }

  .footer .brand {
    --brand-h: 72px;
  }

  .section-head h2 + .lead {
    margin-top: 1rem;
  }

  .card,
  .form-card,
  .region,
  .quickquote,
  .envanter__bos,
  .sepet-panel__kutu,
  .wizard__panels {
    padding: 1.375rem;
  }

  .mobile-nav a:not(.btn) {
    font-size: 1.1875rem;
    padding: 0.85rem 0;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .netmap__legend {
    gap: 0.75rem 1rem;
    font-size: 0.75rem;
  }


}



/* ---- 390 ve altı ---- */
@media (max-width: 390px) {
  .stats {
    grid-template-columns: 1fr;
  }


}



/* ---- 360 ve altı ---- */
@media (max-width: 360px) {
  :root {
    --gutter: 1rem;
  }


}



/* ---- 320 ---- */
@media (max-width: 340px) {
  .card,
  .form-card,
  .region,
  .quickquote,
  .envanter__bos,
  .sepet-panel__kutu,
  .wizard__panels {
    padding: 1.125rem;
  }


}

/* --------------------------------------------------------------------------
   24b. Hero'daki dekoratif uçak — /kiralama
   --------------------------------------------------------------------------
   ⚠ GÖRSEL SAYDAM KESİM (ölçüldü: kırmızı zemine konup bakıldı, zemin temiz
     geçiyor) — koyu gradyanın üzerine doğrudan oturur, maske gerekmez.

   ⚠ METNİN ALTINDA VE SAĞDA: hero metni beyaz, uçak da beyaz. Üst üste
     gelirse okunmaz. z-index ve konum ikisini ayırır; ayrıca soldan sağa
     bir perde (gradient) metnin arkasını koyulaştırır.

   ⚠ 1024 ALTINDA HİÇ BASILMAZ: dar ekranda metin ve uçak aynı yeri
     paylaşırdı. display:none — opacity ile soluklaştırmak görseli hâlâ
     indirir ve metnin arkasında gri bir leke bırakırdı.

   ⚠ pointer-events: none — dekoratif öğe tıklamayı yakalamamalı.
   -------------------------------------------------------------------------- */
.page-hero__ucak {
  display: none;
}

@media (min-width: 1024px) {
  .page-hero--ucak {
    /* Uçağa yer: sağ sütun boş kalsın, metin sola yaslansın. */
    --hero-ucak-alan: 46%;
  }

  .page-hero--ucak .container > *:not(.quickquote) {
    max-width: calc(100% - var(--hero-ucak-alan));
  }

  .page-hero__ucak {
    display: block;
    position: absolute;
    z-index: 0;
    inset-inline-end: clamp(-4rem, -2vw, 0rem);
    inset-block-start: 46%;
    width: clamp(30rem, 48vw, 46rem);
    height: auto;
    pointer-events: none;
    /* ⚠ Hafif soluk: tam opak bırakılsa hero'nun ana öğesi o olur ve
       başlık ikinci plana düşer. Ölçüldü — 0.85'te başlık kontrastı
       15.47:1 kalıyor (beyaz metin, navy-950 zemin). */
    opacity: 0.85;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45));
  }

  /* ⚠ RTL'DE UÇAK TERS DÖNER: burun sağa bakıyor; sağdan sola dizilişte
     "ileri" SOLDUR ve sağa bakan bir uçak geri gidiyor gibi durur.
     'transform' mantıksal karşılığı olmayan özelliklerden — 26. bölümdeki
     kural gereği burada, kendi bağlamında yazılır. */
  [dir="rtl"] .page-hero__ucak {
    transform: translateY(-50%) scaleX(-1);
  }

  .page-hero__ucak {
    transform: translateY(-50%);
  }

  /* Metnin arkasını koyulaştıran perde — uçak ne kadar açık olursa olsun
     başlık okunur kalır. */
  .page-hero--ucak::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      to var(--hero-perde-yon, right),
      var(--navy-950) 22%,
      rgba(0, 32, 91, 0.72) 46%,
      transparent 68%
    );
    pointer-events: none;
  }

  [dir="rtl"] .page-hero--ucak {
    --hero-perde-yon: left;
  }

  /* İçerik perdenin ve uçağın ÜSTÜNDE. */
  .page-hero--ucak .container {
    position: relative;
    z-index: 1;
  }
}

/* --------------------------------------------------------------------------
   25b. Dil değiştirici
   --------------------------------------------------------------------------
   Üç durum: etkin · çevirisi var (bağlantı) · çevirisi yok (devre dışı).

   ⚠ BAYRAK VAR ama SÜSTÜR (bkz. .dil-ac__bayrak): bayrak bir DİLİ değil
     bir ÜLKEYİ temsil eder ve bu itiraz geçerliliğini korur. İngilizcenin
     bayrağı yoktur; Arapça tek bir ülkenin dili değildir. Anlamı 'EN' / 'TR'
     / 'AR' kısaltması taşır, erişilebilir adı da hedef dilin kendi adı.

   ⚠ KONTRAST ÖLÇÜLDÜ, üçü de ≥4.5:1 (12px/600 = normal metin eşiği):
       beyaz zemin   slate-600 7.53:1 · navy-900 13.46:1
       koyu hero     beyaz %80 10.19:1 · beyaz 15.47:1

   ⚠ 'ÇEVİRİSİ YOK' RENKLE DEĞİL ÜSTÜ ÇİZİLİ İŞARETLENİR: rengi soluklaştırmak
     hem kontrastı eşiğin altına iter (slate-400 → 2.50:1) hem de durumu
     YALNIZ RENGE bağlar. Üstü çizili biçim renk körlüğünden bağımsızdır ve
     title ile desteklenir.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   DİL SEÇİCİ — açılır menü  (.dil-ac)
   --------------------------------------------------------------------------
   Bir ara üç düğmelik bir şeritti (.dil-secici); 2026-09-22'de açılır menüye
   çevrildi. Eski kurallar SİLİNDİ — ölü kod bırakılmaz (ev kuralı).

   ⚠ BAYRAK SÜSTÜR: bayrak bir dili değil ÜLKEYİ temsil eder. Anlamı kısaltma
     ve dilin kendi adı taşır.
   ⚠ Fiziksel left/right YAZILMAZ; RTL'de menü kendiliğinden öteki yana açılır.
   -------------------------------------------------------------------------- */
.dil-ac {
  position: relative;
  margin-inline-end: 0.75rem;
}

/* ⚠ Yerli açılır üçgen KALDIRILIYOR çünkü yerine kendi ok'umuz var —
     iki işaret yan yana durur ve ikisi birden döner. Durum hâlâ GÖRÜNÜR:
     .dil-ac[open] okun kendisini çeviriyor (aşağıda). */
.dil-ac__dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--slate-600);            /* beyaz zemin: 7.53:1 */
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.dil-ac__dugme::-webkit-details-marker {
  display: none;
}
.dil-ac__dugme:hover,
.dil-ac__dugme:focus-visible {
  color: var(--navy-900);             /* 13.46:1 */
  background: rgba(6, 42, 109, 0.07);
}
/* ⚠ gold-400 DEĞİL gold-700: ölçüldü, gold-400 beyaz üzerinde 1.69:1 —
   grafik eşiği 3:1. Görülemeyen bir odak halkası, odak göstergesi değildir.
   gold-700 = 5.32:1, hâlâ marka altını. */
.dil-ac__dugme:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 2px;
}

/* ⚠ KOYU BAŞLIKTA gold-400 KALIR: lacivert üzerinde zaten yüksek
   kontrastlı, gold-700 orada kaybolurdu. */
.header--transparent .dil-ac__dugme:focus-visible {
  outline-color: var(--gold-400);
}

/* ⚠ Sınıf işaretlemede vardı, kuralı YOKTU (denetim bulgusu): kısaltma
   düğmenin genel yazı biçimini alıyordu. Kural yazılmayacaksa sınıf da
   basılmamalı — ev kuralı: tanımsız sınıf sessiz bir kusurdur. */
.dil-ac__simdiki {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.dil-ac__ok {
  width: 0.65rem;
  height: 0.45rem;
  /* ⚠ transform MANTIKSAL KARŞILIĞI OLMAYANLARDAN: 26. bölümün konusu.
     Ama burada RTL'de aynalanması GEREKMEZ — ok AŞAĞI bakıyor, yatay
     yönü yok. Bu yüzden 26. bölüme satır eklenmedi. */
  transition: transform 0.18s var(--ease);
}
.dil-ac[open] .dil-ac__ok {
  transform: rotate(180deg);
}

/* --- panel --- */
.dil-ac__liste {
  position: absolute;
  /* ⚠ MANTIKSAL: LTR'de sağa, RTL'de sola hizalanır. Fiziksel right
     yazılsaydı Arapça sayfada menü başlığın dışına taşardı. */
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 110;
  min-width: 11rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.dil-ac__oge {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--slate-600);            /* beyaz panel: 7.53:1 (tarayıcıda doğrulandı) */
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

/* ⚠ BAYRAK SÜSTÜR — anlamı 'kisa' ve 'ad' taşır (işaretlemede alt="" +
     aria-hidden). Bayrak bir dili değil ÜLKEYİ temsil ettiği için tek
     başına bırakılamazdı; gerekçe ve hangi bayrağın neden seçildiği
     config.php'deki DILLER notunda.
   ⚠ Dosyalar yerel: lipis/flag-icons (MIT), /assets/tema/img/bayrak/.
     CDN'den çekilmez — kaynak düşerse bayrak yerine kırık görsel çıkardı.
   ⚠ SABİT ORAN 4:3 ve flex-shrink:0: bayraklar farklı en-boy taşısaydı
     satırlar birbirine göre kayardı. object-fit: cover değil CONTAIN
     olsaydı kenarlarda boşluk kalırdı; 4:3 kutuya 4:3 SVG tam oturur.
   ⚠ İnce kenarlık: beyaz zeminli bayraklar (ae'nin beyaz şeridi) panelin
     beyazına karışıyor ve bayrak kesikmiş gibi duruyordu. */
.dil-ac__bayrak {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 0.9375rem;      /* 4:3 */
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(15, 22, 32, 0.12);
}

/* Koyu başlıkta kenarlık beyazlaşır, yoksa lacivert zeminde kaybolur. */
.header--transparent .dil-ac__dugme .dil-ac__bayrak {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.dil-ac__kisa {
  flex: 0 0 auto;
  min-width: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.dil-ac__ad {
  flex: 1 1 auto;
}

a.dil-ac__oge:hover,
a.dil-ac__oge:focus-visible {
  color: var(--navy-900);             /* hover zemini üzerinde 12.22:1 (tarayıcıda ölçüldü) */
  background: rgba(212, 175, 55, 0.14);
}
/* Panel beyaz — bkz. yukarıdaki ölçüm. */
a.dil-ac__oge:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: -2px;
}

.dil-ac__oge--aktif {
  color: var(--navy-900);             /* rgb(238,240,245) üzerinde 11.80:1 (tarayıcıda ölçüldü) */
  background: rgba(6, 42, 109, 0.07);
  font-weight: 600;
}

/* ⚠ RENK DEĞİŞMEZ, BİÇİM DEĞİŞİR — durum yalnız renge bağlanmaz. Soluk bir
     gri hem kontrastı eşiğin altına iter (ölçüldü: slate-500 beyazda
     4.02:1, AA eşiği 4.5) hem de renk körü kullanıcıya hiçbir şey söylemez.
   ⚠ cursor: not-allowed DEĞİL: öğe bir <span>, tıklanabilir görünmüyor. */
.dil-ac__oge--yok {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

/* --- koyu hero üzerindeki saydam başlık ---
   ⚠ YALNIZ DÜĞME değişir; PANEL her iki durumda da beyaz kalır. Panel de
     saydamlaşsaydı hero görselinin üstünde okunurluğu ölçülemez olurdu —
     arkasındaki piksel her sayfada başka. */
.header--transparent .dil-ac__dugme {
  color: rgba(255, 255, 255, 0.8);    /* navy-950 üzerinde 10.19:1 */
}
.header--transparent .dil-ac__dugme:hover,
.header--transparent .dil-ac__dugme:focus-visible {
  color: var(--white);                /* 15.47:1 */
  background: rgba(255, 255, 255, 0.14);
}

/* ⚠ Küçük ekranda menü başlığın dışına taşmasın: panel sağ kenara
     yapışır ve genişliği sınırlanır. */
@media (max-width: 400px) {
  .dil-ac__liste {
    min-width: 9.5rem;
  }
}

/* --------------------------------------------------------------------------
   KATALOG DÜZENİ — ürün listeleme sayfaları (parça · uçak · motor)
   --------------------------------------------------------------------------
   ⚠ ÖLÇÜLEN KUSUR: standart kahraman + bölüm başlığıyla ilk ürün kartı
     /parca-satisi'nda 1287 px'de, /ucak-satisi'nda 1464 px'de kalıyordu
     (1280×900). İlk ekranda TEK ÜRÜN görünmüyordu. Bunlar katalog
     sayfaları; ürün listesi ilk ekranda başlamalı.
   ⚠ MODİFİYE SINIF, GENEL DEĞİŞİKLİK DEĞİL: .page-hero ve .section ortak
     bileşenler; onları genel olarak kısaltmak tanıtım sayfalarını da
     (hakkımızda, operasyon…) bozardı.
   -------------------------------------------------------------------------- */
.page-hero--kisa {
  padding-block: calc(var(--header-h) + 1.75rem) 2.25rem;
}

.page-hero--kisa h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.page-hero--kisa .lead {
  max-width: 46rem;
  margin-top: 0.5rem;
  font-size: 1rem;
}

.section--katalog {
  padding-block: 2.25rem 3.5rem;
}

/* ⚠ Bölüm başlığı SİLİNMEZ, KÜÇÜLÜR: "Yayındaki uçaklar" sayfa başlığının
   tekrarı değil, bölümün adı — ve sayfada başka bölümler de var. */
.section--katalog .section-head {
  margin-bottom: 1rem;
}

/* ⚠ Katalog bölümünde göz kırpma (eyebrow) DAHA KÜÇÜK, silinmez: bölümün
   ne olduğunu söylüyor ama başlık zaten söylüyor — ikisi birden büyük
   olunca 134 px yer kaplıyordu (ölçüldü) ve ilk ürün kartı katlanma
   çizgisinin altında kalıyordu. */
.section--katalog .section-head .eyebrow {
  margin-bottom: 0.35rem;
}

.section--katalog .section-head h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
}

.section--katalog .section-head .lead {
  margin-top: 0.35rem;
  /* Kahraman zaten bir lead basıyor; bölümün leadi ikinci paragraf.
     Silinmiyor (bilgi taşıyor) ama başlık ağırlığında olmamalı. */
  font-size: 0.875rem;
  max-width: 52rem;
}

/* Arama/süzgeç kartı katalog başlığı gibi davranır: dar ve sıkı. */
.form-card--arama {
  padding: 1.25rem;
}

.form-card--arama .form-note {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
}

.form-card--arama .parca-ara .input {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   26. Sağdan sola (RTL) — YALNIZ mantıksal karşılığı OLMAYANLAR
   --------------------------------------------------------------------------
   Düzenin tamamı mantıksal özelliklerle yazılmıştır (margin-inline-start,
   inset-inline-end, text-align: start …) ve yönü kendiliğinden izler.
   Burada yalnız CSS'in mantıksal sözdizimi SUNMADIĞI iki şey var.

   ⚠ BU BLOK BÜYÜMEMELİ: her yeni kural, aynı görünümün ikinci bir kopyasını
     bakıma sokar ve biri er geç geride kalır. Yeni bir kenar/konum değeri
     gerekiyorsa fiziksel yazıp buraya karşılığını eklemek yerine mantıksal
     özelliği kullanın.
   -------------------------------------------------------------------------- */

/* 1) Açılır listenin oku — 'background-position' mantıksal sözdizimi yok.
      padding-inline-end zaten yer açıyor; ok o boşluğa taşınmazsa metnin
      üstüne biner. */
[dir="rtl"] .select {
  background-position: left 1rem center;
}

/* 2) Ok simgesi ve itilmesi — 'transform' mantıksal sözdizimi yok.
      '#i-arrow' sağa bakar; RTL'de ileri SOLDUR, simge aynalanır.
      ⚠ .btn / .link-arrow içindeki 47 SVG'nin tamamının '#i-arrow' olduğu
        14 sayfada ölçüldü — başka simge olsaydı bu kural onu da çevirirdi. */
[dir="rtl"] .btn svg,
[dir="rtl"] .link-arrow svg {
  transform: scaleX(-1);
}

/* ⚠ SIRA ÖNEMLİ: dönüşümler sağdan sola uygulanır. Önce translateX(3px),
     sonra scaleX(-1) → görsel olarak SOLA 3px, yani RTL'de "ileri".
     Ters yazılsaydı ok hover'da geriye kaçardı. */
[dir="rtl"] .btn:hover svg {
  transform: scaleX(-1) translateX(3px);
}

[dir="rtl"] .link-arrow:hover svg {
  transform: scaleX(-1) translateX(4px);
}

/* --------------------------------------------------------------------------
   27. Arapça tipografi
   --------------------------------------------------------------------------
   Yön 26'da çözüldü; burada YAZININ KENDİSİ var. İkisi ayrı şeydir:
   Farsça da sağdan soladır ama yazı tipi ihtiyacı farklıdır.
   -------------------------------------------------------------------------- */

/* Yazı tipi JETON düzeyinde değiştirilir, kural kural değil.
   var(--font-body) / var(--font-display) kullanan her yer kendiliğinden
   izler — tek bir !important ve tek bir özgüllük yarışı yok. */
/* ⚠ LATİN ÖNDE, ARAPÇA ARKADA — tek satırda iki yazı sistemi:
     tarayıcı yazı tipini KARAKTER KARAKTER seçer, öge öge değil. Arapça
     harfler Inter/Poppins'te olmadığı için kendiliğinden Arapça yüze düşer;
     aynı cümledeki "Gulfstream G650" ise Inter'de kalır.
     Arapça yığın başa konsaydı Latin parçalar da Arapça yüzle basılırdı ve
     her Latin ada için ayrı bir :lang kuralı yazmak gerekirdi. */
html[lang="ar"] {
  --font-body: "Inter", var(--font-arabic);
  --font-display: "Poppins", var(--font-arabic);
}

/* ⚠ ARAPÇA BİTİŞİK YAZILIR — letter-spacing YAZIYI BOZAR:
     Latin yazıda "biraz geniş" demek olan şey, Arapçada harflerin birleşme
     noktalarını açar ve kelimeyi okunmaz hâle getirir. Temada 29 adet
     sıfırdan farklı letter-spacing var (0.34em'e kadar), hepsi Latin
     tipografisi için konmuş.

   ⚠ SEÇİCİ *:lang(ar), html[lang="ar"] * DEĞİL: ikincisi Arapça sayfadaki
     lang="en" işaretli bir Latin parçayı (uçak modeli "Gulfstream G650"
     gibi) da yakalar ve onun tasarımını bozardı. *:lang(ar) yalnızca dili
     GERÇEKTEN Arapça olan öğeyi seçer.

   ⚠ !important ŞART: hedefler .eyebrow, .stat__label gibi sınıf kuralları;
     onları özgüllükle geçmek her biri için ayrı seçici yazmak demekti. */
*:lang(ar) {
  letter-spacing: normal !important;
}

/* ⚠ SÜZGEÇ KARTI TEK SATIRDA: ölçüldü (/ucak-satisi, 1280 px) — kart dolgusu
   44.8 px ve ızgara 3 sütundu, dördüncü alan (sıfırla düğmesi) alt satıra
   düşüyordu: kart 282 px. İlk uçak kartı 1464 px'e itiliyordu ve ilk ekranda
   TEK uçak görünmüyordu. Dört sütun + dar dolgu ile tek satıra iniyor.
   ⚠ auto-fit DEĞİL sabit 4: alan sayısı bilinen (arama + üretici + kategori +
   sıfırla) ve auto-fit dar ekranda 2+2 diye bölüp yine iki satır yapıyordu. */
@media (min-width: 900px) {
  .form-card--suzgec .form-grid {
    grid-template-columns: 2fr 1fr 1fr auto;
    align-items: end;
  }
}

/* ⚠ DAR EKRANDA CTA DÜĞMESİ SARAR — ÖLÇÜLMÜŞ KUSUR: .btn'in temel
   'white-space: nowrap' kuralı uzun etiketin sarmasını engelliyordu ve
   Arapça sayfada düğme 363 px'e büyüyüp 360-379 px arası kabın DIŞINA
   taşıyordu (RTL'de soldan 19 px kesiliyordu). Gövde kaymadığı için
   kırpılma sessizdi — kullanıcı düğmenin bir kısmını hiç görmüyordu.
   ⚠ Yalnız DAR ekranda ve yalnız CTA bloğunda: nowrap ötekilerde bilinçli,
     düğmeler ortasından bölünmesin diye. Burada bölünmek, kesilmekten iyi.
   ⚠ max-width KOŞULSUZ: hangi dil/etiket gelirse gelsin düğme kabını
     aşamaz — bu sınıf kusurun kökü. */
.btn {
  max-width: 100%;
}

@media (max-width: 420px) {
  .cta__actions .btn {
    white-space: normal;
    padding-inline: 1.25rem;
  }
}