/* ==========================================================================
   ŞENLER SÜT - %100 MOBİL UYUMLU RESPONSIVE CSS (TAMAMI YENİDEN YAZILDI)
   ========================================================================== */

/* --- 1. GENEL TAŞMA VE KUTU SIFIRLAMALARI --- */
html, 
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.container, 
.production-container,
.page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

img {
    max-width: 100% !important;
    height: auto;
}

/* ==========================================================================
   2. TABLET VE KÜÇÜK EKRANLAR (992px ve altı)
   ========================================================================== */
@media (max-width: 992px) {

    /* --- Header & Navbar --- */
    body {
        padding-top: 80px;
    }
    
    .navbar-brand img {
        width: 130px !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    .navbar-nav {
        gap: 15px !important;
        padding: 20px 0;
        text-align: center;
        background: var(--primary);
        border-radius: 12px;
        margin-top: 10px;
    }

    /* --- Hero Slider & İç Sayfa Heroları --- */
    .hero-slider,
    .page-hero {
        height: 500px !important;
    }

    .hero-content {
        width: 90% !important;
        text-align: center;
        align-items: center !important;
    }

    .hero-content h1,
    .page-hero .page-content h1 {
        font-size: 44px !important;
        line-height: 1.2 !important;
    }

    .hero-content p,
    .page-hero .page-content p {
        width: 100% !important;
        font-size: 17px !important;
    }

    .hero-info {
        right: 30px !important;
        bottom: 30px !important;
        gap: 25px !important;
    }

    /* --- Çift Kolonlu Sayfalar (Hakkımızda & Üretim Tesisleri) --- */
    .about-company .row,
    .factory-item .row,
    .fleet-section .row,
    .corporate-section .row {
        display: flex !important;
        flex-direction: column !important;
        gap: 35px !important;
    }

    .about-company .row > div:first-child,
    .about-company .row > div:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Görsel Yüksekliklerini Dengele */
    .about-company-image img,
    .corporate-image img,
    .factory-item .carousel-item img,
    .fleet-section .carousel-item img {
        height: 400px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .corporate-image {
        max-width: 100% !important;
    }

    /* --- Ürün Kartları --- */
    .product-card {
        height: auto !important;
        padding: 30px !important;
    }

    .product-gallery {
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
    }

    /* --- İletişim Kartları --- */
    .contact-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   3. MOBİL TELEFON EKRANLARI (768px ve altı)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Section Boşlukları --- */
    section {
        padding: 60px 0 !important;
    }

    /* --- Hero Slider & Butonlar --- */
    .hero-slider,
    .heroSwiper .swiper-slide,
    .page-hero {
        height: 460px !important;
    }

    .hero-content h1,
    .page-hero .page-content h1 {
        font-size: 34px !important;
    }

    .hero-content p,
    .page-hero .page-content p {
        font-size: 15px !important;
    }

    .hero-badge,
    .hero-content span,
    .page-hero .page-content span {
        font-size: 13px !important;
        padding: 8px 16px !important;
        margin-bottom: 15px !important;
    }

    .hero-content .btn {
        width: 100%;
        margin-bottom: 12px;
        text-align: center;
    }

    .hero-content .btn-light {
        margin-left: 0 !important;
    }

    .hero-info {
        display: none !important; /* Küçük ekranda görüntü kirliliğini önler */
    }

    /* --- Genel Başlıklar --- */
    .section-title h2,
    .about-company h2,
    .corporate-section h2,
    .factory-item h3,
    .products-header h2,
    .fleet-content h3 {
        font-size: 28px !important;
        text-align: center !important;
    }

    .section-title p,
    .about-company p,
    .corporate-section p,
    .factory-item p,
    .fleet-content p {
        font-size: 15px !important;
        text-align: center !important;
    }

    /* --- Sağlıklı Beslenme - İkonlu 4'lü Kutu --- */
    .corporate-features,
    .about-features {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    .feature-box {
        padding: 18px 10px !important;
    }

    .feature-box h3 {
        font-size: 28px !important;
    }

    /* --- Mobil Görsel Boyutları --- */
    .about-company-image img,
    .corporate-image img,
    .factory-item .carousel-item img,
    .fleet-section .carousel-item img {
        height: 260px !important;
    }

    /* --- Markalarımız (Polem, Şenler, Araç) --- */
    .brands-wrapper {
        gap: 25px !important;
        margin-top: 40px !important;
    }

    .brand-card {
        width: 100% !important;
        min-height: auto !important;
        padding: 30px 20px !important;
    }

    /* Mobilde hover çalışmayacağı için açıklamalar her zaman görünür olur */
    .brand-info {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 15px !important;
    }

    /* --- Ürünler Sayfası & Kartları --- */
    .product-item {
        height: 320px !important;
    }

    .product-card h3 {
        font-size: 22px !important;
        text-align: center;
    }

    .product-card p {
        text-align: center;
        margin-bottom: 20px !important;
    }

    .package img {
        height: 200px !important;
    }

    /* --- İletişim Kartları --- */
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 30px !important;
    }

    .contact-card {
        padding: 30px 20px !important;
    }

    /* --- Footer --- */
    .footer {
        padding: 50px 0 25px !important;
        text-align: center !important;
    }

    .footer-social {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
        margin-top: 15px;
    }

    .footer-links a:hover {
        padding-left: 0 !important;
    }
}

/* ==========================================================================
   4. KÜÇÜK MOBİL EKRANLAR (576px - 480px ve altı)
   ========================================================================== */
@media (max-width: 576px) {
    .hero-content h1,
    .page-hero .page-content h1 {
        font-size: 28px !important;
    }

    .section-title h2,
    .about-company h2,
    .factory-item h3 {
        font-size: 24px !important;
    }

    .feature-box h3 {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .hero-content h1,
    .page-hero .page-content h1 {
        font-size: 24px !important;
    }

    .hero-content .btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* Çok küçük ekranlarda 4'lü özellikleri alt alta diz */
    .corporate-features,
    .about-features {
        grid-template-columns: 1fr !important;
    }
}
/* ==========================================================================
   5. MOBİLDE BEYAZ BANNER DÜZENİ (SIFIR BOZULMA, SIFIR BOŞLUK, NET RESİM)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Ana Alanları Esnek ve Temiz Beyaz/Açık Gri Bir Banner'a Çevir */
    .hero-slider,
    .heroSwiper,
    .heroSwiper .swiper-slide,
    .page-hero {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
        background-color: #ffffff !important; /* Altında kalan gri/siyah boşluk tamamen BEYAZ oldu */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    /* Swiper Wrapper'ın animasyon geçişlerini bozmamasını garantile */
    .heroSwiper .swiper-wrapper {
        height: auto !important;
        display: flex !important;
        align-items: stretch !important;
    }

    /* 2. Resmi Hiç Kesmeden En Üste Yerleştir ve Kırpılmayı Engelle */
    .heroSwiper .swiper-slide img,
    .page-hero img {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 280px !important;
        object-fit: contain !important; /* Resmin hiçbir köşesi kesilmez, tam sığar */
        object-position: center !important;
        display: block !important;
        z-index: 1 !important;
        background-color: #ffffff !important; /* Resmin üstünde/altında kalabilecek milimetrik boşluk beyaz olur */
    }

    /* 3. Resmin Üzerindeki Siyah Karartma Katmanını Kaldır (Peynirler Net Görünsün) */
    .hero-overlay,
    .page-overlay {
        display: none !important;
    }

    /* 4. Yazıları Resmin Altındaki BEYAZ BANNER ALANINA Yerleştir */
    .hero-content,
    .page-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 24px 20px 30px !important;
        text-align: center !important;
        background: #fdfdfd !important; /* Şık bir beyaz banner zemin */
        border-top: 3px solid var(--primary) !important; /* Resimle yazıyı ayıran şık pembe çizgi */
        border-bottom: 1px solid #eeeeee !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 5 !important;
        box-sizing: border-box !important;
    }

    /* 5. Yazı Renklerini Beyaz Banner'a Uygun Koyu Renklere Çevir */
    .hero-badge,
    .hero-content span,
    .page-content span {
        font-size: 11px !important;
        padding: 6px 16px !important;
        margin-bottom: 12px !important;
        display: inline-block !important;
        background: var(--primary) !important;
        color: #ffffff !important;
        border-radius: 30px !important;
        font-weight: 700 !important;
    }

    .hero-content h1,
    .page-content h1 {
        font-size: 24px !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
        color: #1a1a1a !important; /* Koyu, şık ve net başlık */
        width: 100% !important;
    }

    .hero-content p,
    .page-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
        color: #555555 !important; /* Gri, okunaklı açıklama metni */
        width: 100% !important;
    }

    /* 6. Butonları Düzenle */
    .hero-content .btn {
        padding: 12px 26px !important;
        font-size: 14px !important;
        width: auto !important;
        display: inline-block !important;
    }
}

/* ==========================================================
   HERO - YENİ MOBİL RESPONSIVE
   768px ve altı
==========================================================*/

@media (max-width:768px){

.hero-content{

    position:absolute !important;

    top:50% !important;
    left:50% !important;

    transform:translate(-50%,-50%) !important;

    width:calc(100% - 40px) !important;
    max-width:420px !important;

    padding:0 10px !important;

    text-align:center !important;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    z-index:20;
}

@media (max-width:768px){

.hero-content{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.hero-content *{
    background: transparent !important;
}

.hero-content .btn{
    background: #df80b7 !important;
}

}

.hero-content span{

    display:inline-block;
    margin-bottom:15px;

    font-size:12px;

    padding:8px 18px;
}
.hero-content h1{

    color:#fff;

    -webkit-text-stroke:1px rgb(245, 245, 245);

    text-shadow:
        0 3px 12px rgba(0,0,0,.75);

}

.hero-content p{

    color:#ffffff;

    text-shadow:
        0 2px 8px rgba(0,0,0,.80);

}

.hero-content .btn{

    width:auto;

    min-width:180px;

    margin:0 auto;
}

}

/* =====================================
   576px
=====================================*/

@media (max-width:576px){

    .hero-content{

        left:16px;
        right:16px;
        bottom:35px;
    }

    .hero-content h1,
    .page-content h1{

        font-size:28px;
    }

    .hero-content p,
    .page-content p{

        font-size:14px;
    }

}


/* =====================================
   430px
=====================================*/

@media (max-width:430px){

    .hero-slider,
    .heroSwiper,
    .heroSwiper .swiper-slide,
    .page-hero{

        min-height:90vh;
        height:90vh;
    }

    .hero-content h1,
    .page-content h1{

        font-size:24px;
    }

    .hero-content p,
    .page-content p{

        font-size:13px;
        line-height:1.6;
    }

}
@media (max-width:768px){

.hero-products h1{

    font-size:27px !important;
    line-height:1.15 !important;

}

.hero-products p{

    font-size:14px !important;
    line-height:1.5 !important;

    max-width:280px;
    margin:auto;
    margin-top:12px;
    margin-bottom:20px;

}

.hero-products span{

    font-size:11px;
    padding:7px 16px;

}

}