/* Omega Vizyon — efekt katmanı
   Kural: yalnız transform ve opacity animate edilir.
   Her blok prefers-reduced-motion ve @supports korumalıdır.
   Fallback sınıfı: .gorundu (IntersectionObserver ile eklenir) */

/* ---- 1. Sayfa geçişleri (MPA'da app hissi, tek blok) ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation: ov-cikis .22s cubic-bezier(.4,0,1,1) both;
  }
  ::view-transition-new(root) {
    animation: ov-giris .28s cubic-bezier(0,0,.2,1) both;
  }
}
@keyframes ov-cikis { to { opacity: 0; transform: translateY(-8px); } }
@keyframes ov-giris { from { opacity: 0; transform: translateY(10px); } }

/* ---- 2. Scroll ile giriş — bölüm çocukları ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {

    @keyframes ov-belir {
      from { opacity: 0; transform: translateY(28px) scale(.985); }
    }

    .sahne > * {
      animation: ov-belir auto linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* Fallback: scroll-driven animations desteklenmeyen tarayıcı (Firefox) */
@media (prefers-reduced-motion: no-preference) {
  @supports not ((animation-timeline: view()) and (animation-range: entry)) {
    .sahne > * {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .sahne > *.gorundu { opacity: 1; transform: none; }
  }
}

/* ---- 3. Paralaks katman — dekoratif, fallback yok ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes ov-paralaks { to { transform: translateY(-14%); } }

    .paralaks-arka {
      animation: ov-paralaks auto linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
  }
}

/* ---- 4. Kırmızı vurgu çizgisinin scroll ile çizilmesi ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes ov-cizgi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .cizgi-ciz {
      transform-origin: left center;
      animation: ov-cizgi auto linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}

/* ---- 5. Yatay scroll-snap galerisi ---- */
.galeri-yatay {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-block: 8px;
}
.galeri-yatay > * {
  flex: 0 0 clamp(260px, 34vw, 420px);
  scroll-snap-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes ov-kart-buyu { from { opacity: .45; transform: scale(.9); } }
    @keyframes ov-kart-kucul { to   { opacity: .45; transform: scale(.9); } }

    .galeri-yatay > * {
      animation:
        ov-kart-buyu auto linear backwards,
        ov-kart-kucul auto linear forwards;
      animation-timeline: view(inline);
      animation-range: entry, exit;
    }
  }
}

/* ---- 6. Sticky bölüm içinde ilerleyen süreç çizelgesi ---- */
.surec-sticky { position: sticky; top: 12vh; }

/* ---- 7. Ağır bölümler için render erteleme ---- */
.agir-bolum {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ---- 8. Katlama üstü kuralı ----
   Hero'ya .sahne VERME. LCP elemanı ilk boyamada tam opak görünmeli. */
.hero, .hero * { animation: none !important; opacity: 1 !important; }