/*
 * ORTAK MEKANİK CSS — Hero/Banner Slider
 *
 * Bu dosya default VE tadic temaları için TEK "layout mekaniği" kaynağıdır:
 * height / display / flex / grid / object-fit / object-position / responsive
 * breakpoint mantığının TAMAMI burada, tek bir yerde tanımlanır.
 *
 * Dekoratif kurallar (border-radius, box-shadow, renkler, tipografi) burada
 * DEĞİL, her temanın kendi partials.css dosyasında kalır.
 *
 * KURALLAR (bozulmamalı):
 * - Bu dosyaya tema kontrolü eklenemez (if($theme...), switch($theme...) vb. YASAK).
 * - Tema bazlı görsel farklılıklar SADECE tema CSS'inde (partials.css) çözülür.
 * - !important kullanılmaz: her selector+property kombinasyonu için burada
 *   TEK bir tanım vardır, dolayısıyla rekabet/specificity savaşı yoktur.
 * - Slide-level "Image Fit" (Cover/Contain) davranışı, mevcut üretim
 *   davranışıyla bilinçli olarak birebir korunmuştur: yalnızca Block seviyesi
 *   --sf-hero-fit uygulanır, --sf-slide-fit-desktop/mobile OKUNMAZ. Bu ayrı
 *   bir bug-fix adımının konusudur, bu dosyada DOKUNULMAMIŞTIR.
 */

.sf-hero.sf-hero-block {
    --sf-hero-h-desktop: 360px;
    --sf-hero-h-mobile: 220px;
    --sf-hero-fit: cover;
    --sf-hero-bg: #333;
    --sf-hero-text: #fff;

    width: 100%;
    max-width: 100%;
    margin-top: 0;
}

@media (min-width: 992px) {
    .sf-hero.sf-hero-block {
        margin-top: 18px;
    }
}

/* Crossfade: slide'lar üst üste, sadece opacity ile geçiş — boş ekran yok */
.sf-hero-slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}

.sf-hero-slider-wrap.initialized {
    opacity: 1;
}

.sf-hero-slider-wrap .carousel-inner {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    height: var(--sf-hero-h-mobile);
    min-height: var(--sf-hero-h-mobile);
}

@media (min-width: 992px) {
    .sf-hero-slider-wrap .carousel-inner {
        height: var(--sf-hero-h-desktop);
        min-height: var(--sf-hero-h-desktop);
    }
}

.sf-hero-slider-wrap .carousel-item {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: var(--sf-hero-h-mobile);
    background-color: var(--sf-hero-bg);
    opacity: 0;
    transition: opacity 450ms ease-in-out;
    pointer-events: none;
    overflow: hidden;
    backface-visibility: hidden;
    will-change: opacity;
    transform: translateZ(0);
    z-index: 1;
}

.sf-hero-slider-wrap .carousel-item.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

@media (min-width: 992px) {
    .sf-hero-slider-wrap .carousel-item {
        min-height: var(--sf-hero-h-desktop);
    }
}

.sf-hero-slider-wrap .carousel-item picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.sf-hero-slider-wrap .carousel-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

.sf-hero-banner-card img {
    width: 100%;
    height: 100%;
    display: block;
}

/* object-fit — TEK kaynak: sadece Block seviyesi --sf-hero-fit okunur. */
.sf-hero-slider-wrap .carousel-item img,
.sf-hero.sf-hero-block .sf-hero-banner-card img {
    object-fit: var(--sf-hero-fit, cover);
}

/* object-position — TEK kaynak: slide seviyesi --sf-slide-position-* okunur. */
.sf-hero.sf-hero-block .sf-hero-banner-card img,
.sf-hero-slider-wrap .carousel-item img {
    object-position: var(--sf-slide-position-mobile, center);
}

@media (min-width: 769px) {
    .sf-hero.sf-hero-block .sf-hero-banner-card img,
    .sf-hero-slider-wrap .carousel-item img {
        object-position: var(--sf-slide-position-desktop, center);
    }
}

/* Slide seviyesi height — sadece single/double/quad (manual-grid) layout'ta okunur. */
.sf-hero.sf-hero-block .sf-hero-banner-card {
    min-height: var(--sf-slide-h-mobile, var(--sf-hero-h-mobile));
    height: var(--sf-slide-h-mobile, var(--sf-hero-h-mobile));
}

@media (min-width: 992px) {
    .sf-hero.sf-hero-block .sf-hero-banner-card {
        min-height: var(--sf-slide-h-desktop, var(--sf-hero-h-desktop));
        height: var(--sf-slide-h-desktop, var(--sf-hero-h-desktop));
    }
}

.sf-hero.sf-hero-block .sf-hero-banner-card picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}