/* Genel Sayfa Stilleri */
body {
    /* Daha modern bir yazı tipi ailesi */
    font-family: 'Poppins', sans-serif; 
    
    /* Footer'ı (alt bilgi) her zaman sayfanın en altına sabitlemek için */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Ana içerik alanının esnek olmasını sağlar */
main {
    flex: 1;
}

/* Üst Menü (Navbar) Marka Stili */
.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

/* Ürün Kartı Stilleri */
.product-card {
    /* Geçiş efektlerinin yumuşak olması için */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    
    /* Kartın kenarlarını yuvarlak yapar */
    border-radius: 15px; 
    
    /* Bootstrap'in varsayılan kenarlığını kaldırır */
    border: none; 
    
    /* Karta modern bir gölge efekti verir */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Fare ile ürün kartının üzerine gelince... */
.product-card:hover {
    /* Kartı hafifçe yukarı kaldırır */
    transform: translateY(-10px); 
    
    /* Gölgeyi daha belirgin hale getirir */
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* --- ÜRÜN GÖRSELİ BOYUTLANDIRMA ---
Bu bölüm, tüm ürün görsellerinin aynı boyutta ve oranda görünmesini sağlar.
*/
.product-card img {
    /* Resmin üst kenarlarını kart ile uyumlu şekilde yuvarlak yapar */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    
    /* En-Boy Oranı: Görselleri 4:3 (yatay fotoğraf) oranına sabitler.
       Kare yapmak için "1 / 1" veya dikey yapmak için "3 / 4" olarak değiştirebilirsiniz. */
    aspect-ratio: 4 / 3;
    
    /* Oranı bozmadan resmi alana sığdırır, gerekirse kırpar. Ezilme/büzülmeyi engeller. */
    object-fit: cover;
    
    /* Genişliğin her zaman kartı doldurmasını sağlar */
    width: 100%;
}

/* ============================================= */
/* KATEGORİ KARTI STİLLERİ              */
/* ============================================= */

.category-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 330px; /* YENİ DEĞER */
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    transition: transform 0.3s ease-in-out;
}

.category-card:hover {
    transform: scale(1.05); /* Üzerine gelince hafif büyüme efekti */
}

/* Resmin üzerindeki karartma efekti */
.category-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1));
    z-index: 1;
    transition: background 0.3s ease;
}

.category-card:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
}

/* Kategori Yazısı */
.category-card h3 {
    position: relative;
    z-index: 2; /* Karartma efektinin üzerinde kalması için */
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    padding: 10px;
}