/* ===============================
   GENEL BANNER (MASAÜSTÜ)
=============================== */
.kategori-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
}

.kategori-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ===============================
   BANNER YAZI – MASAÜSTÜ
=============================== */
.banner-yazi {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.45);
    padding: 12px 24px;
    border-radius: 12px;
    color: #003d79;
    text-align: center;
}

.banner-yazi h2 {
    font-size: 32px;
    margin: 0;
}

/* ===============================
   MOBİL – 600px ALTINDA
=============================== */
@media(max-width: 600px){

    /* Banner oranı her iki banner için aynı */
    .kategori-banner {
        aspect-ratio: 16 / 6;
        height: auto;
        border-radius: 10px;
    }

    .kategori-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* YAZI TAM BANNERIN ÜZERİNE ALINIYOR */
    .banner-yazi {
        top: 85% !important;                      /* 🔥 İSTEDİĞİN TAM KONUM */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;

        padding: 6px 16px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.55) !important;

        width: max-content !important;
    }

    .banner-yazi h2 {
        font-size: 18px !important;
        margin: 0;
    }
}
/* ============================
   TÜM BANNERLARI EŞİT AYARLA
============================ */
.kategori-banner {
    width: 100%;
    aspect-ratio: 16 / 6;     /* 🔥 İki banner da aynı oran */
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

/* Banner görüntüsü aynı şekilde davransın */
.kategori-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;     /* 🔥 contain’i KAPATIR */
    object-position: center !important;
    display: block;
}

/* MOBİL */
@media(max-width: 600px){
    .kategori-banner {
        aspect-ratio: 16 / 6 !important;   /* 🔥 İki banner birebir aynı */
        border-radius: 10px;
    }

    .kategori-banner img {
        object-fit: cover !important;   /* 🔥 Boşluklar tamamen gider */
    }

    /* Yazı konumu ve stili */
    .banner-yazi {
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 16px;
        background: rgba(255,255,255,0.55);
        border-radius: 8px;
        text-align: center;
    }

    .banner-yazi h2 {
        font-size: 18px !important;
    }
}
/* ================================================
   TÜM BANNERLARI TEK SİSTEME AL — KESİN ÇÖZÜM
================================================ */

/* 1) Katı Sabun ve Sıvı Sabun bannerları aynı boyut ve davranış */
.brand-full-slider,
.kategori-banner {
    width: 100%;
    aspect-ratio: 16/6;        /* 🔥 iki banner da birebir aynı oran */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    margin: 40px 0;
}

/* 2) Banner içindeki görsel — DAİMA BİREBİR AYNI */
.brand-full-slider img,
.kategori-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;     /* 🔥 contain → cover yapıldı */
    object-position: center center !important;
    display: block;
}

/* 3) Banner yazısı — iki banner için ortak stil */
.banner-yazi {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.55);
    padding: 8px 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 5;
}

.banner-yazi h2 {
    font-size: 26px;
    margin: 0;
    color: #003d79;
}


/* ==========================
   MOBİL DÜZENLEME (600px)
========================== */
@media(max-width: 600px){

    .brand-full-slider,
    .kategori-banner {
        aspect-ratio: 16/7;   /* 🔥 Mobil için biraz daha yüksek, iki banner aynı */
        border-radius: 10px;
    }

    .banner-yazi {
        bottom: 6%;
        padding: 6px 14px;
    }

    .banner-yazi h2 {
        font-size: 18px;
    }
}
/* ============================
   SIVI SABUN BANNER — FULL WIDTH YAP
============================ */
.kategori-banner {
    width: 100vw !important;
    position: relative;
    left: 50% !important;
    margin-left: -50vw !important;   /* 🔥 Container'dan taşırır ve tam ortalar */
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16/6;
}

/* Banner içindeki görsel */
.kategori-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}