/* ==========================================================================
   2K / Geniş ekran + anasayfa düzenlemeleri  (2026-06)
   ========================================================================== */

html {
    background-color: #eaf6fb; /* 2K'da kenar payi olursa notr zemin */
    overflow-x: hidden;        /* yatay tasma/scrollbar olmasin */
}

/* Slider sayfa-noktalari konteyneri: plugin CSS'i `left:20.5% + width:100%`
   ile saga %20.5 tasiriyordu (2K'da sagda bosluk). Genisligi auto yap. */
.responsive-slider .pages {
    width: auto !important;
}

/* Header arama modulu kaldirildi (istenmedi): tum arama ikonlari (.btn2),
   arama kutusu (#p2) ve mobil arama linkleri gizli. */
.btn2,
#p2,
.mobile-arama {
    display: none !important;
}

/* Anasayfa footer'ina beyaz arka plan (cicek desenleri background-image olarak
   ustte kalir). Anasayfa <footer> etiketi; ic sayfalar .footer div -> yalniz anasayfa.
   margin-top:0 -> eski tasarimdaki -150px ust-binme yeni panellerde gereksiz. */
footer,
.footer {
    background-color: #ffffff !important;
    /* Footer arka plani: kabarcik deseni (cicekler kaldirildi). Anasayfa + ic sayfalar. */
    background-image: url(../images/footer-pattern.svg) !important;
    background-position: top left !important;
    background-repeat: repeat !important;
    background-size: 90px 90px !important;
}
footer {
    margin-top: 0 !important; /* anasayfa footer'inin eski -150px ust-binmesi */
}

/* ==========================================================================
   Slider: sabit 500px yukseklik (mobil HARIC, >=768px). Gorsel dikeyde
   ortalanip 500px banda kirpilir. Mobil (<768px) plugin'in kendi yuksekligi.
   ========================================================================== */
@media (min-width: 768px) {
    .responsive-slider .slides ul li .slide-body {
        height: 500px !important;
        overflow: hidden !important;
    }
    .responsive-slider .slides ul li .slide-body img {
        position: relative !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    /* caption baslik h2: margin-top kaldirildi (istek) */
    .responsive-slider .slides ul li .slide-body .caption.header h2 {
        margin-top: 0 !important;
    }
    /* caption.header margin-top: -18.5% (>=768). 2K icin >1920 blogunda -19%. */
    .responsive-slider .slides ul li .slide-body .caption.header {
        margin-top: -18.5% !important;
    }
}

/* ==========================================================================
   Anasayfa ürün kategorileri — temiz bölünmüş paneller (yeniden tasarlandi)
   Iki esit yari (yesil/mavi); her yarida baslik + aciklama + buton + urun
   gorseli, ortali ve panel icinde (tasma yok). Responsive: mobilde alt alta.
   ========================================================================== */
.kat-bolum {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    font-family: Raleway, sans-serif;
}
.kat-panel {
    flex: 1 1 0;          /* esit genislik -> 3 panel tek sirada */
    min-width: 0;
    box-sizing: border-box;
    padding: 75px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kat-baby { background-color: #7bbb20; }
.kat-home { background-color: #1e7ec0; }
.kat-hand { background-color: #1ba8a3; }  /* turkuaz - istenirse degisir */

.kat-ic {
    width: 100%;
    max-width: 520px;
    text-align: center;
    color: #fff;
}
.kat-ic h2 {
    font-family: Raleway, sans-serif;
    font-size: 40px;
    font-weight: 300;
    color: #fff;
    margin: 0 0 16px;
    line-height: 1.1;
}
.kat-ic h2 span { font-weight: 700; }
.kat-ic p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #fff;
    margin: 0 auto 26px;
    max-width: 420px;
    opacity: .95;
}
.kat-btn {
    display: inline-block;
    padding: 13px 42px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color .3s ease, color .3s ease;
}
.kat-btn:hover,
.kat-btn:focus {
    background-color: #fff;
    text-decoration: none;
}
.kat-baby .kat-btn:hover { color: #7bbb20; }
.kat-home .kat-btn:hover { color: #1e7ec0; }
.kat-hand .kat-btn:hover { color: #1ba8a3; }

.kat-gorsel { margin-top: 40px; }
.kat-gorsel img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
}

/* Tablet ve alti: panelleri alt alta (3 panel dar sutunda sikismasin) */
@media (max-width: 991px) {
    .kat-panel { flex: 1 1 100%; padding: 45px 24px; }
    .kat-ic h2 { font-size: 32px; }
    .kat-gorsel img { max-height: 240px; }
}

/* ==========================================================================
   Yalniz >1920px: full-bleed arka planlari ekran genisligine yay
   (slider + footer cicekleri + ic sayfa hero'lari). 1920 ve alti HIC degismez.
   ========================================================================== */
@media (min-width: 1920px) {

    /* Footer cicekleri: germeden köşelere sabitle (sol turkuaz / sag pembe).
       Anasayfa <footer>'da ayrica kabarcik deseni taban katman olarak eklenir. */
    /* Footer cicekleri tamamen kaldirildi (anasayfa + ic sayfa) -> sadece desen. */
    /* 2K: footer ic icerik blogu ustten bosluk */
    footer .footer-social-media {
        margin-top: 50px !important;
    }
    .hakkimizda-ust,
    .hakkimizda-alt {
        background-size: cover !important;
        background-position: center !important;
    }

    /* Urun sayfasi bannerlari 2K'da yarida kaliyordu (1920px sola yasli / contain).
       Ekrani doldur. */
    .urunler-grup-banner .banner img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
    .banner-2,
    .ic-banner {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Slider: slayt native 1920px ORTADA keskin; arkasi kendi BULANIK kopyasiyla
       dolar (js/slider-backdrop.js). 100% (100vw degil) -> sagda tasma olmaz. */
    .responsive-slider .slides ul li,
    .responsive-slider .slides ul li .slide-body {
        width: 100% !important;
        max-width: 100% !important;
    }
    .responsive-slider .slides ul li .slide-body {
        position: relative;
        overflow: hidden;
    }
    .responsive-slider .slides ul li .slide-body .soop-blur-bd {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 0;
        background-size: cover;
        background-position: center center;
        filter: blur(34px);
        transform: scale(1.15);
    }
    .responsive-slider .slides ul li .slide-body img {
        position: relative;
        z-index: 1;
        width: auto !important;
        max-width: 1920px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
    .responsive-slider .slides ul li .slide-body .caption {
        z-index: 5 !important;
    }
    .responsive-slider .slides ul li .slide-body .caption.header {
        margin-left: calc((100% - 1920px) / 2 + 20px) !important;
        margin-top: -19% !important;   /* 2K: -18.5% yerine -19% */
    }
}

/* ==========================================================================
   Ürün detay sayfası düzenlemeleri (2026-06)
   ========================================================================== */
/* banner-menü: tüm linkler beyaz; seçili (aktif) ürün beyaz zemin + siyah yazı */
.banner-menu ul li a,
.banner-menu ul li a:link,
.banner-menu ul li a:visited,
.banner-menu ul li a:hover { color: #fff !important; }
.banner-menu ul li.active a {
    background: #fff !important;
    color: #000 !important;
    padding: 2px 12px;
    border-radius: 3px;
    display: inline-block;
    font-weight: 500;
}
/* ürün detay bloğunu ~50px aşağı kaydır */
.urunler-detay { margin-top: 50px; }

/* ==========================================================================
   Mobil slider (<768px): sabit 300px yükseklik, görseller cover (2026-06)
   ========================================================================== */
@media (max-width: 767px) {
    .responsive-slider .slides ul li,
    .responsive-slider .slides ul li .slide-body {
        width: 100% !important;
        max-width: 100% !important;
    }
    .responsive-slider .slides ul li .slide-body {
        height: 300px !important;
        overflow: hidden !important;
    }
    .responsive-slider .slides ul li .slide-body img {
        width: 100% !important;
        height: 300px !important;
        max-width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* ==========================================================================
   Mobil slider yazı + buton büyütme (<768px) (2026-06)
   ========================================================================== */
@media (max-width: 767px) {
    /* başlık (SOOP BABY) */
    .responsive-slider .slides ul li .slide-body .caption.header h2.slider-baslik {
        font-size: 26px !important;
    }
    /* açıklama metni */
    .slider-yazi { width: auto !important; }
    .slider-yazi p {
        font-size: 13px !important;
        width: 80% !important;
        line-height: 1.4 !important;
    }
    /* Keşfedin butonu */
    .button {
        height: auto !important;
        max-width: 170px !important;
        min-width: 130px !important;
        padding: 9px 16px !important;
    }
    .button a,
    .details a {
        font-size: 14px !important;
    }
    .center-wrap { height: auto !important; }
}

/* ==========================================================================
   Mobil slider caption: tam ortala + arkasına yarı saydam siyah kutu (2026-06)
   ========================================================================== */
@media (max-width: 767px) {
    .responsive-slider .slides ul li .slide-body { position: relative !important; }
    .responsive-slider .slides ul li .slide-body .caption.header {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: 86% !important;
        max-width: 420px !important;
        text-align: center !important;
        background: rgba(0, 0, 0, 0.45) !important;
        padding: 20px 16px !important;
        border-radius: 10px !important;
        z-index: 5 !important;
    }
    .caption.header .baslik,
    .caption.header .baslik .container,
    .caption.header .row {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .caption.header .slider-baslik {
        text-align: center !important;
        margin: 0 0 6px !important;
    }
    .caption.header .baslik-cizgi { margin: 8px auto !important; }
    .caption.header .slider-yazi {
        width: auto !important;
        height: auto !important;
    }
    .caption.header .slider-yazi p {
        text-align: center !important;
        margin: 6px auto 0 !important;
        width: 100% !important;
    }
    .caption.header .details {
        margin: 14px 0 0 !important;
        margin-left: 0 !important;
    }
    .caption.header .center-wrap {
        position: static !important;
        width: auto !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
    }
    .caption.header .button { margin: 0 auto !important; display: inline-block !important; }
}

/* Mobil: footer sosyal medya bloğu üstten boşluk */
@media (max-width: 767px) {
    .footer-social-media { margin-top: 50px !important; }
}