/*
 * Katmanlı hero (`hero-layered`) — katman yerleşimi ve animasyonları.
 *
 * Yapı:  .vtl-stage > .vtl-layer (geometri) > .vtl-anim (giriş) > .vtl-loop (sürekli hareket)
 * Giriş ve sürekli hareket ayrı elemanlarda, çünkü ikisi de `transform` kullanıyor ve
 * aynı elemanda birbirini ezerlerdi.
 *
 * Keyframe adları CMS panelindeki katman editörüyle AYNIDIR — panelde görülen animasyon
 * sitede de birebir çalışsın diye. Yeni bir preset eklerken iki tarafı da güncelleyin.
 */

.vtl-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Yazı boyutları `cqw` ile verildiği için sahne bir container olmalı. */
    container-type: inline-size;
}

/*
 * Alan seviyesindeki kalıcı katmanlar slider'ın DIŞINDA, çerçevenin üstünde durur;
 * slaytlar değişse de yerlerinde kalmalarının sebebi budur. Oklar ve sayfalama
 * göstergesi bunların da üstünde kalsın diye z-index düşük tutulur.
 */
.site-ui-hero__sticky-layers {
    position: absolute;
    inset: 0;
    /* Oklar (z-index:3) ve sayfalama (4) bu katmanların üstünde kalmalı. */
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: 12px;
}

/*
 * Anchor kaydırması, paralaks ve döndürme TEK bir transform içinde birleşir; ayrı ayrı
 * yazılsalardı biri diğerini ezerdi.
 *   --vtl-ax / --vtl-ay : merkez bağlanmada kutuyu kendi yarısı kadar geri çeker
 *   --vtl-px / --vtl-py : paralaks kayması (JS yazar)
 *   --vtl-rot           : döndürme
 * Hepsi satır içi stilden ya da JS'ten gelir; verilmezse etkisiz varsayılana düşer.
 */
.vtl-layer {
    position: absolute;
    transform-origin: center center;
    transform:
        translate(var(--vtl-ax, 0), var(--vtl-ay, 0))
        translate3d(var(--vtl-px, 0px), var(--vtl-py, 0px), 0)
        rotate(var(--vtl-rot, 0deg));
}

/* Tam kanvas katmanda anchor kaydırması uygulanmamalı, yoksa kutu dışarı taşar. */
.vtl-layer.is-full-bleed {
    inset: 0;
    --vtl-ax: 0;
    --vtl-ay: 0;
}

.vtl-anim,
.vtl-loop {
    width: 100%;
    height: 100%;
}

.vtl-img {
    display: block;
    width: 100%;
    height: 100%;
}

.vtl-shape {
    width: 100%;
    height: 100%;
}

.vtl-text {
    margin: 0;
    word-break: break-word;
}

/* Katmanların kendisi tıklanamaz; yalnız link taşıyan katman tıklanabilir olur. */
.vtl-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
}

/*
 * Animasyonlar duraklatılmış başlar; slayt aktif olduğunda çalışır. Aksi halde arka
 * plandaki slaytların animasyonu görünmeden biter ve sıra ona geldiğinde hareket olmaz.
 */
.vtl-anim,
.vtl-loop {
    animation-play-state: paused;
}

.is-active .vtl-anim,
.is-active .vtl-loop,
.vtl-stage--static .vtl-anim,
.vtl-stage--static .vtl-loop {
    animation-play-state: running;
}

/* ---------------------------------------------------------------- Giriş efektleri */

@keyframes vtl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vtl-fade-up { from { opacity: 0; transform: translateY(var(--vtl-d, 40px)); } to { opacity: 1; transform: none; } }
@keyframes vtl-fade-down { from { opacity: 0; transform: translateY(calc(var(--vtl-d, 40px) * -1)); } to { opacity: 1; transform: none; } }
@keyframes vtl-fade-left { from { opacity: 0; transform: translateX(calc(var(--vtl-d, 40px) * -1)); } to { opacity: 1; transform: none; } }
@keyframes vtl-fade-right { from { opacity: 0; transform: translateX(var(--vtl-d, 40px)); } to { opacity: 1; transform: none; } }
@keyframes vtl-zoom-in { from { opacity: 0; transform: scale(var(--vtl-si, .8)); } to { opacity: 1; transform: none; } }
@keyframes vtl-zoom-out-settle { from { opacity: 0; transform: scale(var(--vtl-s, 1.4)); } to { opacity: 1; transform: none; } }
@keyframes vtl-slide-right { from { transform: translateX(var(--vtl-d, 40px)); } to { transform: none; } }
@keyframes vtl-slide-left { from { transform: translateX(calc(var(--vtl-d, 40px) * -1)); } to { transform: none; } }
@keyframes vtl-slide-up { from { transform: translateY(var(--vtl-d, 40px)); } to { transform: none; } }
@keyframes vtl-blur-in { from { opacity: 0; filter: blur(18px); } to { opacity: 1; filter: blur(0); } }
@keyframes vtl-wipe-left { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes vtl-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* ------------------------------------------------------- Sürekli (ambient) hareket */

/* ken-burns* dongude gidip gelir (alternate + infinite); zoom-slow-* tek yon, bir kez calisir. */
@keyframes vtl-ken-burns { from { transform: scale(1); } to { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } }
@keyframes vtl-ken-burns-out { from { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } to { transform: scale(1); } }
@keyframes vtl-zoom-slow-in { from { transform: scale(1); } to { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } }
@keyframes vtl-zoom-slow-out { from { transform: scale(calc(1 + var(--vtl-a, 8) / 100)); } to { transform: scale(1); } }
@keyframes vtl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--vtl-a, 8) * -1px)); } }
@keyframes vtl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + var(--vtl-a, 8) / 200)); } }
@keyframes vtl-sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(calc(var(--vtl-a, 8) * 1px)); } }

/* --------------------------------------------------------------------- Paralaks */

/* Kayma miktarını JS `--vtl-px` / `--vtl-py` değişkenlerine yazar; birleşik transform yukarıda. */
.vtl-layer[data-vtl-parallax] {
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* --------------------------------------------------------------- Mobil kanvas oranı */

/*
 * Banner alanında mobil oran tanımlıysa dar ekranda hero o orana geçer; masaüstünde
 * geniş duran bir kompozisyon telefonda basık kalmasın diye. Değişken yoksa
 * masaüstü oranı olduğu gibi kullanılır (geriye dönük uyumlu).
 */
@media (max-width: 768px) {
    .site-ui-hero__slides {
        aspect-ratio: var(--site-ui-banner-area-mobile-ratio, var(--site-ui-banner-area-ratio, 1270 / 420));
    }
}

/* ------------------------------------------------------------------ Tam ekran hero */

/*
 * Alan ayarında "Tam ekran" seçiliyse hero ziyaretçinin ekranını kaplar.
 *
 * `svh` (small viewport height) bilinçli tercih: `vh` mobilde adres çubuğunun altında
 * kalan kısmı kırpar, `dvh` ise kaydırma sırasında yüksekliği değiştirip hero'yu
 * zıplattığı için katmanlar kayar. `svh` sabittir.
 *
 * Ana sayfa header'ı zaten `position:fixed` ve saydam olduğundan (.site-header--home)
 * hero'nun üstüne biner; ayrıca boşluk düşmek gerekmez.
 */
.site-ui-hero.is-fullscreen {
    padding: 0;
}

.site-ui-hero.is-fullscreen .container-xl {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.site-ui-hero.is-fullscreen .site-ui-hero__frame,
.site-ui-hero.is-fullscreen .site-ui-hero__slides,
.site-ui-hero.is-fullscreen .site-ui-hero__slide {
    max-width: none;
    border-radius: 0;
}

/* Oran kuralını ezer — bu seçici mobil oran media query'sinden daha yüksek özgüllükte. */
.site-ui-hero.is-fullscreen .site-ui-hero__slides {
    aspect-ratio: auto;
    height: 100vh;                                   /* svh desteklemeyen tarayıcılar */
    height: 100svh;
    max-height: var(--site-ui-banner-max-height, none);
    box-shadow: none;
}

/* ------------------------------------------------------------------ Erişilebilirlik */

@media (prefers-reduced-motion: reduce) {
    .vtl-anim,
    .vtl-loop {
        animation: none !important;
    }

    .vtl-layer[data-vtl-parallax] {
        --vtl-px: 0px;
        --vtl-py: 0px;
        transition: none !important;
    }
}

/* ------------------------------------------------- Mobil gezinti / sayfalama */

/*
 * Banner alanı ayarındaki mobil override'ları. Sınıf yalnız "göster"/"gizle" seçildiğinde
 * yazılır; hiçbiri yoksa masaüstü ayarı aynen geçerlidir.
 *
 * Dokunmatik ekranda ziyaretçi zaten kaydırarak geçebildiği için okları gizlemek yaygın
 * bir tercihtir; oklar dar ekranda hero içeriğinin üstünü kapatabiliyor.
 */
@media (max-width: 768px) {
    .site-ui-hero.hide-nav-mobile .site-ui-hero__nav {
        display: none;
    }

    .site-ui-hero.hide-pager-mobile .site-ui-hero__pager {
        display: none;
    }

    /* Masaüstünde kapalı olsa bile mobilde açıkça istenmişse göster. */
    .site-ui-hero.show-nav-mobile .site-ui-hero__nav {
        display: inline-flex;
    }

    .site-ui-hero.show-pager-mobile .site-ui-hero__pager {
        display: flex;
    }
}