/* ===============================
   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%;
    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: 0vw !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;
}
/* ===========================================
   MOBİL FİX (600px ALTI) — İKİ BANNER AYRI AMA
   GÖRÜNÜM %100 AYNI OLACAK
=========================================== */
@media(max-width: 600px){

    /* --- KATI SABUN BANNER --- */
    .brand-full-slider {
        width: 100vw !important;
        left: 50% !important;
        margin-left: 0vw !important;
        aspect-ratio: 16/7 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .brand-full-slider img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }


    /* --- SIVI SABUN BANNER --- */
    .kategori-banner {
        width: 100vw !important;
        left: 50% !important;
        margin-left: 0vw !important;
        aspect-ratio: 16/7 !important;
        overflow: hidden !important;
        border-radius: 10px !important;
        position: relative !important;
    }

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


    /* --- BANNER YAZILARI (İkisinde de aynı) --- */
    .banner-yazi {
        position: absolute !important;
        bottom: 8% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(255,255,255,0.55) !important;
        padding: 6px 14px !important;
        border-radius: 10px !important;
        text-align: center !important;
        width: max-content !important;
        z-index: 5 !important;
    }

    .banner-yazi h2 {
        font-size: 18px !important;
        margin: 0 !important;
    }
}
/* ===========================
   MASAÜSTÜ — Yazı Normal Boy ve Ortalı
=========================== */

.kati-yazi h2,
.sivi-yazi h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 20px auto 0;
    text-align: center;
    color: #003d79;
}


/* ===========================
   MOBİL — YAZIYI BANNER İÇİNE AL
=========================== */

@media(max-width: 600px){

    /* Katı Sabun Banner */
    .kati-yazi {
        position: absolute !important;
        bottom: 8% !important;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255,255,255,0.55);
        padding: 6px 14px;
        border-radius: 10px;
        width: max-content;
    }

    .kati-yazi h2 {
        font-size: 18px !important;
        margin: 0;
    }

    /* Sıvı Sabun Banner */
    .sivi-yazi {
        position: absolute !important;
        bottom: 8% !important;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255,255,255,0.55);
        padding: 6px 14px;
        border-radius: 10px;
        width: max-content;
    }

    .sivi-yazi h2 {
        font-size: 18px !important;
        margin: 0;
    }
}
/* ============================================
   TEK BANNER SİSTEMİ — TÜM ÜRÜN BANNERLARI
============================================ */

.urun-banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    height: 260px; /* Masaüstü yüksekliği */
    margin: 40px 0;
}

.urun-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Her iki banner tam doldurur */
    object-position: center;
    display: block;
}

/* Banner yazı */
.urun-banner-yazi {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.55);
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 32px;
    font-weight: 700;
    color: #003d79;
}


/* ============================================
   MOBİL AYAR — İki banner da aynı görünür
============================================ */
@media(max-width: 600px){

    .urun-banner {
        height: 180px !important; /* 🔥 SIVI SABUNUN BÜYÜMESİNİ ENGELLER */
        border-radius: 10px;
    }

    .urun-banner-yazi {
        font-size: 18px !important;
        padding: 6px 14px;
        bottom: 8%;
    }
}
.urun-banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    height: 260px; /* Masaüstü sabit yüksekliği */
    margin: 40px 0;
    background: #bde7ff; /* Maryna arka plan rengi (kesilmeyen boşluğu doldurur) */
}

/* Görsel taşmasın ve kesilmesin */
.urun-banner img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;   /* 🔥 KESİLMEYİ TAMAMEN ENGELLER */
    object-position: center;
    display: block;
}

/* Banner yazısı */
.urun-banner-yazi {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.55);
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 32px;
    font-weight: 700;
    color: #003d79;
}


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

    .urun-banner {
        height: 180px !important;
    }

    .urun-banner img {
        object-fit: contain !important;
    }

    .urun-banner-yazi {
        font-size: 18px !important;
        padding: 6px 14px;
        bottom: 8%;
    }
}
/* Sayfada yana kayma olmasın */
html, body { overflow-x: hidden; }

/* Banner'ı container'dan taşırıp ekran genişliğine yayar */
.banner-fullbleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  border-radius: 12px;        /* İstersen kaldırabilirsin */
  overflow: hidden;
}

/* Görsel tam doldursun (kesme istemezsen contain yapabilirsin) */
.banner-fullbleed img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* kesme olmasın dersen -> contain */
  object-position: center;
}

/* Oran istersen (opsiyonel) */
.banner-fullbleed{ aspect-ratio: 16 / 6; }

/* iOS Safari için güvenli viewport (opsiyonel) */
@supports (width: 100svw){
  .banner-fullbleed{
    margin-left: -50svw;
    margin-right: -50svw;
    width: 100svw;
    max-width: 100svw;
  }
}
/* Banner görselini tam doldur (contain'i ezer) */
.urun-banner img,
.kategori-banner img,
.banner-fullbleed img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* 🔥 yan boşlukları bitirir */
  object-position: center !important;
}

/* Banner yüksekliği kontrol (istersen ayarlarsın) */
.urun-banner,
.kategori-banner,
.banner-fullbleed{
  height: clamp(220px, 22vw, 380px);  /* responsive yükseklik */
  overflow: hidden;                   /* taşmayı gizle */
  border-radius: 12px;
}