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

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 3rem) clamp(4rem, 8vw, 7rem);
  background: var(--navy-950);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

/* --- katmanlar (alttan üste): __art (-3) · __photo (-2) · __grid (-1) ---
   ⚠ FOTOĞRAF KATMANI 2026-09-26'da YENİDEN AMAÇLANDI (Anasayfa Slider): bir
     ara "assets/img/hero.jpg konursa devreye girer" diyen bir
     background-image: var(--hero-image) kuralıydı — değişken hiçbir yerde
     tanımlı değildi, üstelik katman OPAK __art'ın ALTINDAYDI (z-index -3 <
     -2): görsel verilse bile görünmezdi. Ölü kural silindi; katman artık
     slaytların arka plan görsellerini (.hero-foto) taşır ve __art'ın ÜSTÜNDE.
   ⚠ Görselsiz slaytta (ve hiçbir slaytın görseli yokken) katman BOŞ bir
     div'dir: zemini yok, z-index değişimi görünüşü değiştirmez (hero içindeki
     74 öğenin kutusu 1440 ve 390 px'te, üç dilde birebir aynı ölçüldü). */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Slayt görseli — bolum/slider.php slayt başına basar, anasayfa.js show() etkin
   slaytınkini .is-active yapar; geçiş slaytın kendi geçişiyle aynı (0,6 s). */
.hero-foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.hero-foto.is-active {
  opacity: 1;
}

.hero-foto picture,
.hero-foto img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-foto img {
  object-fit: cover;
}

/* ⚠ LACİVERT PERDE — metin görselin ÜSTÜNDE okunur kalmalı: marka jetonu
     (--navy-950) %90 örtücülükle. Sabit rgba YAZILMAZ (ev kuralı: temada
     sabit renk yok); color-mix() de değil — sitede yalnız ön yükleyicide var,
     tanımayan tarayıcı bildirimi düşürür ve perde KALKAR (beyaz görselde
     beyaz metin). opacity her tarayıcıda çalışır; renk jetondan gelir.
     ⚠ ÖLÇÜM EN KÖTÜ DURUMDA, IZGARA DAHİL: .hero__grid (z-index -1) perdenin
       ÜSTÜNDE durur ve zemini açar — ızgarasız hesap yanıltır (%88'de "4,52
       garanti" deniyordu, gerçek pikselde alt satır 4,44'e iniyordu —
       doğrulayıcı ölçtü). %90'da, perdenin altı SAF BEYAZ görselle, metin
       saydam yapılıp gerçek piksellerden (1440 ve 390, / ve /ar; scratchpad
       b5/sl-duzelt1/site/kontrast-sonra.txt): başlık 10,68 · altın vurgu
       5,02 · açıklama (%76 beyaz) 6,85 · rozet 7,37 · ikincil düğme 10,55 ·
       bilgi şeridinin soluk alt satırı (%55 beyaz) en kötü piksel 4,64
       (%5'lik dilim 4,68). Renkli sınama görselinde alt satır 5,00; görselsiz
       4,81 (değişmedi).
     ⚠ Sayaç ("1 / 3", %45 beyaz) perdeden bağımsız olarak 4,5'in altında —
       görselsiz koyu zeminde de 3,59, beyaz görselde 3,60 (önceden de
       böyleydi; ≤ 480 px'te gizli) — ayrı iş.
     Daha açık bir perde görseli belirginleştirir ama kontrastı GÖRSELE
     bağlar — seçilen her görselde ölçmek gerekirdi. */
.hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-950);
  opacity: 0.9;
}

/* Fotoğraf yokken (ve görselsiz slaytta) dolu duran vektörel gökyüzü */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1100px 620px at 72% 18%, rgba(212, 175, 55, 0.16), transparent 62%),
    radial-gradient(900px 700px at 12% 88%, rgba(28, 53, 87, 0.85), transparent 68%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-800) 48%, var(--navy-900) 100%);
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 42%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(
    ellipse 90% 70% at 50% 42%,
    #000 25%,
    transparent 78%
  );
}

/* İki sütun: solda slider metni, sağda küre */
.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }
}


.hero__content {
  min-width: 0;
  max-width: 42rem;
}

/* --- slider --- */
.hero-slider {
  display: grid; /* slaytlar üst üste — yükseklik en uzun slayta göre sabit */
}

.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
    visibility 0.6s var(--ease);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hero-slider__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.hero-nav-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease),
    background 0.22s var(--ease);
}

.hero-nav-btn:hover {
  color: var(--gold-400);
  border-color: var(--gold-500);
  background: rgba(212, 175, 55, 0.08);
}

.hero-nav-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.hero-nav-btn--prev svg {
  transform: scaleX(-1);
}

/* ⚠ RTL'DE İKİSİ YER DEĞİŞTİRİR: sağdan sola dizilişte "ileri" SOLDUR.
     '#i-arrow' sağa bakar; sonraki düğmesinin oku çevrilir, önceki
     düğmesininki ise ÇEVİRİSİ KALDIRILIR (iki kez çevrilmiş olurdu).
   ⚠ Kural main.css'teki RTL bloğunda değil burada: varlık sözleşmesi
     sayfaya özel CSS'i sayfanın dosyasında tutar. */
[dir="rtl"] .hero-nav-btn svg {
  transform: scaleX(-1);
}

[dir="rtl"] .hero-nav-btn--prev svg {
  transform: none;
}

.hero-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-dots button {
  width: 26px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}

.hero-dots button.is-active {
  width: 44px;
  background: var(--gold-500);
}

/* Sayaç ('1 / 3') bir METİNDİR: %45 beyaz lacivert zeminde 3,59, perdeli
   beyaz görselde 3,60:1 ölçüldü (2026-09-27, gerçek piksel) — eşiğin (4,5)
   altı. .trustbar__item'ın %62'si — ölçüldü (aynı betik, 1440): görselsiz
   5,43, perdeli beyaz görselde 5,40, 3. slaytta 5,93. ≤ 480 px'te gizli. */
.hero-slider__count {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
  margin-inline-start: auto;
}

/* --- küre --- */
.hero__globe {
  display: none;
}

@media (min-width: 960px) {
  .hero__globe {
    display: block;
    min-width: 0;
  }
}


.globe {
  position: relative;
  width: 100%;
  max-width: clamp(18rem, 31vw, 30rem);
  margin-inline: auto;
  aspect-ratio: 1;
  isolation: isolate;
}

.globe canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* yumuşak dış parıltı */
.globe::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.16) 0%,
    rgba(28, 53, 87, 0.18) 45%,
    transparent 70%
  );
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* ⚠ MANTIKSAL: dolgu ASİMETRİK (simge tarafı dar, metin tarafı geniş) ve
     fiziksel kısayolla yazılınca RTL'de ters tarafa düşüyordu — metin pilin
     ucuna yapışıyordu. Ev kuralı: fiziksel left/right yazılmaz. */
  padding-block: 0.5rem;
  padding-inline: 0.55rem 1.1rem;
  margin-bottom: 1.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-300);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: var(--radius-pill);
}

.hero__badge b {
  padding: 0.25rem 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--navy-950);
  background: var(--gold-500);
  border-radius: var(--radius-pill);
}

/* ⚠ h1 DEĞİL h2: hero taşıyıcısının üç slayt başlığı artık h2'dir.
   Sayfanın TEK h1'i <main> başındaki görsel olarak gizli başlıktır
   (önceden üç slaydın üçü de h1'di — sayfada 3 adet h1 vardı).
   GÖRÜNÜM DEĞİŞMEZ, yalnız etiket değişti. */
.hero h2 {
  /* İki sütunlu düzende --step-5 fazla geliyor; başlık kendi ölçeğini kullanır */
  font-size: clamp(2.125rem, 1.35rem + 2.45vw, 3.5rem);
  color: var(--white);
  margin-bottom: 1.5rem;
}

.hero h2 em {
  display: block;
  font-style: normal;
  color: var(--gold-500);
}

.hero__lead {
  max-width: 40rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero__fact {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

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

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

.hero__fact span {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   8. Güven şeridi
   -------------------------------------------------------------------------- */
.trustbar {
  background: var(--navy-800);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-block: 1.5rem;
}

.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  text-align: center;
}

.trustbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.trustbar__item svg {
  width: 17px;
  height: 17px;
  color: var(--gold-500);
  flex-shrink: 0;
}

.trustbar__item b {
  color: var(--gold-400);
  font-weight: 600;
}

/* Azaltılmış hareket: görsel geçişi anında (slayt geçişi zaten
   anasayfa.js'te otomatik oynatılmaz). */
@media (prefers-reduced-motion: reduce) {
  .hero-foto {
    transition: none;
  }
}

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

  .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 2.5rem) 3.5rem;
  }
}


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

  /* Rozet tek satıra sığmıyor — sarmasına izin ver */
  .hero__badge {
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 0.35rem;
    padding-inline-end: 0.85rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  .hero__facts {
    flex-direction: column;
    gap: 1.125rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero-slider__count {
    display: none;
  }
}


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

  .hero-nav-btn {
    width: 38px;
    height: 38px;
  }

  .hero-dots button {
    width: 20px;
  }

  .hero-dots button.is-active {
    width: 34px;
  }

  .trustbar__item {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }
}