/* ======================================== */
/* MOBİL UYUMLULUK DÜZELTMELERİ (HERO VE KARTLAR) */
/* ======================================== */

/* 1. HERO BÖLÜMÜ İYİLEŞTİRMELERİ */

/* 768px ve altı (Tablet ve Mobil) */
@media (max-width: 768px) {
    
    /* Hero Bölümü Yüksekliği ve Navbar Boşluğu */
    .brand-hero {
        /* Yüksekliği 80vh'den 65vh'ye düşürerek içeriğin sığmasını sağla */
        height: 65vh !important; 
        /* Navbar yüksekliğini telafi etmek için boşluğu ayarla */
        margin-top: 80px !important; 
    }

    /* Başlık Boyutu */
    .carousel-caption h1 {
        /* Mobil cihazlarda başlık font boyutunu küçült */
        font-size: 2.5rem !important; 
        line-height: 1.2;
    }

    /* Alt Metin Boyutu */
    .carousel-caption p {
        /* Mobil cihazlarda alt metin font boyutunu küçült */
        font-size: 1rem !important; 
        margin-top: 0.5rem;
    }

    /* Marka Logosu Boyutu */
    .carousel-caption .brand-logo {
        /* Mobil cihazlarda logoyu küçült */
        max-width: 150px !important; 
    }
}

/* 480px ve altı (Küçük Mobil) */
@media (max-width: 480px) {
    
    .brand-hero {
        /* Çok küçük ekranlarda yüksekliği daha da kısalt */
        height: 55vh !important; 
    }

    .carousel-caption h1 {
        /* Başlığı daha da küçült */
        font-size: 2rem !important; 
    }

    .carousel-caption .brand-logo {
        /* Logoyu daha da küçült */
        max-width: 120px !important; 
    }
}


/* 2. KART DÜZENİ İYİLEŞTİRMELERİ (İkişerli Kart) */

/* 768px ve altı (Tablet ve Mobil) */
@media (max-width: 768px) {
    
    /* Ürün ızgarasını mobil cihazlarda iki sütunlu yap */
    .product-grid {
        /* Varsayılan minmax(250px, 1fr) yerine iki sütunlu düzen */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important;
        padding: 30px 10px !important; /* İç boşlukları azalt */
    }
    
    /* Ürün kartı genişliğini ızgaraya göre ayarla */
    .product-item {
        /* Grid'in 1fr'ını kullanacağı için max-width'i kaldır */
        max-width: none !important; 
        min-width: auto !important;
        margin: 0 !important;
    }

    /* Ürün resmi yüksekliğini mobil için ayarla */
    .product-card .product-image-container {
        height: 180px !important;
    }
}

/* 480px ve altı (Çok Küçük Mobil) */
@media (max-width: 480px) {
    
    /* Kullanıcının isteği üzerine: Tüm telefon boyutlarında (480px altı dahil) iki sütunlu düzeni koru */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* İki sütunlu düzeni zorunlu kıl */
        gap: 10px !important; /* Boşluğu biraz daha azalt */
        padding: 10px !important; /* Kenar boşluklarını azalt */
    }

    /* Ürün resmi yüksekliğini mobil için ayarla */
    .product-card .product-image-container {
        height: 150px !important; /* Daha küçük ekranlara uygun yükseklik */
    }
    
    /* Kart başlıklarını küçült */
    .product-card .product-name {
        font-size: 0.9rem !important;
    }
}