/* Stitch export'undan taşınan ve projeye özgü stiller.
   Renk / font / spacing değerleri tailwind.config.js içinde tanımlıdır. */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
}

/* Stitch görünümü korunuyor: kaydırma çubuğu gizli. */
::-webkit-scrollbar {
  display: none;
}

/* Klavye kullanıcıları için görünür odak. */
:focus-visible {
  outline: 2px solid #173a5e;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: #0b1f3a;
  color: #f8f7f3;
  padding: 0.75rem 1rem;
  font-size: 13px;
}

.skip-link:focus {
  top: 1rem;
}

/* Koleksiyon sekmeleri: mobilde yalnızca seçili şehir görünür.
   md ve üzeri ekranda iki kart yan yana (Stitch desktop düzeni). */
.city-card[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .city-card[hidden] {
    display: flex;
  }
}

/* Mobil menü: açık değilken gizli. */
#mobile-menu[hidden] {
  display: none;
}

/* Hareket azaltma tercihi: Stitch'teki ping / pulse / scale geçişlerini kapatır. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hero Kâbe / Tavaf animasyonu (js/hero-tawaf.js).
   .hero-track kaydırma mesafesini verir; .hero-stage sticky ile ekranda kalır.
   Burada overflow-x kullanılmaz: position: sticky'yi bozabilir. */
.hero-track {
  height: 400vh;
}

/* Mobilde hero metni ve CTA'lar sabit alt menünün (h-16 + güvenli alan) altında kalmasın. Masaüstü değişmez. */
@media (max-width: 767px) {
  .hero-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

/* Sahne ekran yüksekliğini doldurur; aksi halde sabitlenmiş sahnenin altında sayfa zemini kalır. */
.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

/* Hero iki aşamalı açılış (js/hero-tawaf.js, --hero-p = tüm hero ilerlemesi 0–1):
   Aşama A (0–0.5): yalnızca Kâbe/Tavaf animasyonu, metin ve gradyan yok.
   Aşama B (0.5–0.65): hero kompozisyonu (marka, başlık, paragraf, CTA) tek blok olarak belirir.
   0.65 sonrası: tamamen görünür. Yalnızca JavaScript açıkken ve hareket azaltma kapalıyken uygulanır. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-stage {
    --hero-p: 0;
  }

  .js .hero-reveal {
    --r: clamp(0, calc((var(--hero-p) - 0.5) / 0.15), 1);
    opacity: var(--r);
    transform: translate3d(0, calc((1 - var(--r)) * 18px), 0);
  }

  .js .hero-shade {
    opacity: clamp(0, calc((var(--hero-p) - 0.5) / 0.15), 1);
  }

  /* Metin tamamen görünmeden CTA'lar tıklanmaz. */
  .js .hero-stage:not(.is-revealed) .hero-cta-group {
    pointer-events: none;
  }
}

/* Dekoratif katman: tıklamayı ve klavye odağını almaz. */
.hero-poster,
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Hareket azaltma: kare dizisi çalışmaz, sahne sabitlenmez; sayfa normal akışta ve poster görünür. */
@media (prefers-reduced-motion: reduce) {
  .hero-track {
    height: auto;
  }

  .hero-stage {
    position: relative;
  }
}

/* Hero CTA klavye odağı: koyu fotoğraf üzerinde görünür, normal görünümü değiştirmez. */
.hero-cta-group a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}