/* ------------------------------------------------- */
/* MAIN SLIDE (tablet & normal ekranlar için 16/9)   */
/* ------------------------------------------------- */
.myHeaderSwiper .swiper-slide {
    position: relative;
    aspect-ratio: 16/9;
}

/* Slide image */
.myHeaderSwiper .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* İçerik ortalama */
.myHeaderSwiper .swiper-slide-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ------------------------------------------------- */
/* 1) MOBIL < 576px → 3:4                            */
/* ------------------------------------------------- */
@media (max-width: 575.98px) {
    .myHeaderSwiper .swiper-slide {
        aspect-ratio: 3/4;
    }
}

/* ------------------------------------------------- */
/* 3) DESKTOP 992px–1400px → 18:9                    */
/* ------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .myHeaderSwiper .swiper-slide {
        aspect-ratio: 18/9;
    }
}

/* ------------------------------------------------- */
/* 4) LARGE DESKTOP 1400px+ → 21/9                   */
/* ------------------------------------------------- */
@media (min-width: 1400px) {
    .myHeaderSwiper .swiper-slide {
        aspect-ratio: 21/9;
    }
}

/* ------------------------------------------------- */
/* THUMBNAIL SWIPER                                  */
/* ------------------------------------------------- */
.myThumbSwiper {
    height: 90px;
    box-sizing: border-box;
    padding: 10px 0;
}

.swiper-pagination {
    position: absolute;
    bottom: 20px !important; /* Buraya !important ekleyelim */
    right: 20px !important;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    /* height: 70px; */
    transform: none !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
}

/* Mobile first thumbnail size */
.swiper-pagination-bullet {
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.25);
    box-sizing: border-box;
    transition: transform .25s ease, opacity .25s ease, border-color .25s ease;
    justify-content: flex-end;
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 4px !important; /* istersen */
    border-color: var(--bs-secondary);
}

    .swiper-pagination-bullet img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* Bu zaten var ve genellikle sorunu çözer */
        /* Deneyebileceğiniz ekler: */
        vertical-align: central; /* Resmi yukarı yasla, bazen img'lerin altındaki boşluğu giderir */
        font-size: 0; /* Kapsayıcıdaki font-size'ın yarattığı boşluğu engeller */
    }

    /* Hover效果 */
    .swiper-pagination-bullet:hover {
        /*transform: scale(1.25);*/
        opacity: 1;
        border-color: var(--bs-warning);
    }

/* Active slide */
.swiper-pagination-bullet-active {
    opacity: 1;
    border-color: var(--bs-warning);
    transform: scale(1.25);
}


.myThumbSwiper .swiper-slide {
    width: 90px;
    height: 90px;
    aspect-ratio: 1/1;
    opacity: 0.5;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: 0.25s ease;
}

/* Aktif thumbnail */
.myThumbSwiper .swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--bs-warning);
}

/* Thumbnail image */
.myThumbSwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Büyük ekran için thumbnail küçültme */
@media (min-width: 992px) {
    .myThumbSwiper .swiper-slide {
        width: 80px;
        height: 80px;
    }
}

@media (min-width: 1400px) {
    .myThumbSwiper .swiper-slide {
        width: 75px;
        height: 75px;
    }
}