.anasayfabanner {
    width: 100%;
    height: auto;
}

    .anasayfabanner .container {
        padding: 5px;
    }

    .anasayfabanner .bannerliste {
        width: 100%;
        float: left;
        padding: 10px;
    }

        .anasayfabanner .bannerliste .ic {
            width: 100%;
            float: left;
        }

            .anasayfabanner .bannerliste .ic img {
                border-radius: 10px;
            }
    /* -------------------------------------------------
   Slick oklarını (prev/next) yeniden stillendir
   ------------------------------------------------- */

    /* Ortak stil */
    .anasayfabanner .slick-prev,
    .anasayfabanner .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px; /* Daha büyük tıklama alanı  */
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,.55); /* Yarı saydam koyu zemin    */
        display: flex; /* Ok ikonunu merkeze hizala */
        justify-content: center;
        align-items: center;
        color: #fff; /* İkon rengi                */
        opacity: .7; /* Hafif silik başlangıç     */
        transition: opacity .2s, background .2s;
        z-index: 3; /* Slide üstünde kalsın      */
        cursor: pointer;
    }

    /* Sol–sağ konum */
    .anasayfabanner .slick-prev {
        left: 8px;
    }

    .anasayfabanner .slick-next {
        right: 8px;
    }

        /* Hover / keyboard-focus ile belirginleştir */
        .anasayfabanner .slick-prev:hover,
        .anasayfabanner .slick-next:hover,
        .anasayfabanner .slick-prev:focus-visible,
        .anasayfabanner .slick-next:focus-visible {
            opacity: 1;
            background: rgba(0,0,0,.85);
            outline: none; /* Default outline’ı bastır  */
        }

        /* İçteki ok ikonları (Slick varsayılan font-ikon seti) */
        .anasayfabanner .slick-prev:before,
        .anasayfabanner .slick-next:before {
            font-family: 'slick'; /* Slick’in kendi ikon fontu */
            font-size: 20px;
            line-height: 1;
            color: inherit; /* .slick-prev’te tanımlı #fff */
        }

    /* Font Awesome örneği — önce FontAwesome CSS’ini import et */
    .anasayfabanner .slick-prev:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        content: '\f053'; /* fa-chevron-left */
    }

    .anasayfabanner .slick-next:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        content: '\f054'; /* fa-chevron-right */
    }



/* Küçük ekranlarda boyutu azalt, gerekirse gizle */
@media (max-width:575px) {
    .anasayfabanner .slick-prev,
    .anasayfabanner .slick-next {
        width: 36px;
        height: 36px;
    }
}



/* Küçük cihazlar (telefonlar, dikey) */
@media only screen and (max-width: 575px) {
    .anasayfabanner {
        width: 100%;
        min-height: auto;
    }
}
/* Orta cihazlar (tabletler) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .anasayfabanner {
        width: 100%;
        min-height: auto;
    }
}
/* Büyük cihazlar (küçük laptoplar, büyük tabletler) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}
/* Ekstra büyük cihazlar (masaüstü monitörleri) */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
}

/* -------------------------------------------------
   Slick FOUC (Flash-Of-Unstyled-Content) önleme
   ------------------------------------------------- */

/* Slider satırı henüz initalize edilmemişken gizle */
.anasayfabannerkayan { /* <div class="anasayfabannerkayan"> */
    opacity: 0; /* yükseklik korunur, flaş olmaz   */
    transition: opacity .25s ease;
}

    /* Slick DOM’a .slick-initialized sınıfını ekleyince göster */
    .anasayfabannerkayan.slick-initialized {
        opacity: 1;
    }

/* (İsteğe bağlı) Oklar init olana kadar gözükmesin */
.anasayfabanner button.slick-prev,
.anasayfabanner button.slick-next {
    opacity: 0;
}

    .anasayfabannerkayan.slick-initialized + button.slick-prev,
    .anasayfabannerkayan.slick-initialized + button.slick-next,
    .anasayfabanner button.slick-prev.slick-arrow,
    .anasayfabanner button.slick-next.slick-arrow {
        opacity: 1;
    }

.slider-loader {
    position: absolute;
    inset: 0; /* tam üstüne otur */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff; /* arka planı beyaz kalsın */
    z-index: 2; /* ok/slick track’in üstünde olsun */
}

/* Slick init olduğunda loader’ı gizle */
.anasayfabannerkayan.slick-initialized + .slider-loader {
    display: none;
}

/* Her slayt içindeki <div class="ic"> sabit oranlı bir kutu olsun  */
.anasayfabanner .bannerliste .ic {
    aspect-ratio: 3 / 2; /* Örn. 3:2 → 600×400 → isteğe göre 16/9, 1/1… */
    overflow: hidden; /* Taşan kısmı kırp */
}

    /* Görüntüyü kutuya “doldur-kırp” tarzında yerleştir   */
    .anasayfabanner .bannerliste .ic img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* “contain” dersen kırpmaz, letterbox yapar */
        border-radius: 10px; /* Eski kuralın aynısı */
    }


@supports not (aspect-ratio: 1 / 1) {
    .anasayfabanner .bannerliste .ic {
        position: relative;
    }

        .anasayfabanner .bannerliste .ic::before {
            content: '';
            display: block;
            padding-top: 66.66%; /* 3:2 = 2/3 ≈ 0.6666 → % değeri */
        }

        .anasayfabanner .bannerliste .ic img {
            position: absolute;
            top: 0;
            left: 0;
        }
}

@media (max-width: 575px) {
    .anasayfabanner .bannerliste .ic {
        aspect-ratio: 1;
        height: 250px;
    }
    /* mobilde kare */
}