/* ============================================================
   Elegant Theme — Page Banner
   Detay/list sayfalarında üst banner. 3 varyant:
     1) banner--theme  → görsel yoksa tema rengi gradient
     2) banner          → tek görsel (inline background-image)
     3) banner--slider  → çoklu görsel, swiper fade slider
   Banner ana yapısı (height, padding, gradient overlay) base
   theme tarafından gelir. Bu dosya yalnızca varyantları sarar.
   ============================================================ */

/* ---------- Default (tek görsel + theme) --------------------- */
.banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner--theme {
    background: var(--bg-button);
}

.banner--theme:before {
    background: linear-gradient(rgba(0, 0, 0, .25), transparent);
}

/* ---------- Slider variant ----------------------------------- */
.banner--slider {
    padding-top: 0;
    overflow: hidden;
}

.banner--slider:before {
    display: none;
}

.banner--slider .banner-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner--slider .banner-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.banner--slider .banner-slide:after {
    content: "";
    position: absolute;
    inset: 0;
    /* Alttan yukarı kararma — title okunaklı, üst şeffaf */
    background: linear-gradient(0deg,
        rgba(0, 0, 0, .70) 0%,
        rgba(0, 0, 0, .30) 50%,
        rgba(0, 0, 0, 0) 100%);
}

.banner--slider .banner-content {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 120px;
}

.banner--slider .swiper-pagination,
.banner--slider .swiper-button-prev,
.banner--slider .swiper-button-next {
    z-index: 5;
}