/* --- Büyük Kapsayıcı (Öncekiyle aynı) --- */
/* Masaüstü ve Genel Düzenlemeler */
.product-scroll-container .row {
    row-gap: 3rem; 
    margin-left: 0;
    margin-right: 0;
    display: flex;
    flex-wrap: wrap; /* Satır sonunda alt satıra geçiş */
    align-items: stretch; /* Tüm sütunların yüksekliğini en uzuna göre eşitler */
}

.product-scroll-container .col-3 {
    display: flex;
    flex-direction: column;
    /* Kartın içindeki her şeyin aynı hizada olması için: */
}

/* Ürün İsmi (Başlık) */
.product-scroll-container .col-3 span:nth-of-type(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Fiyat Alanı: Burası artık en kritik nokta */
.product-scroll-container .col-3 span.text-muted {
    display: block; /* Alt alta dizilime izin verir */
    margin-bottom: 1rem;
    line-height: 1.2;
    min-height: 50px; /* Fiyat satır sayısı değişken olsa bile burada bir alan ayırıyoruz */
    flex-grow: 0; /* Fiyat alanı genişlemesin */
}

/* Ürün Butonu (Görsel) */
.product-scroll-container .urun-card {
    margin-top: auto; /* Çok önemli: Boşluğu yukarı iter ve görseli en alta yapıştırır */
    flex-shrink: 0; /* Görselin boyutunun değişmesini engeller */
}

.urun-card {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    
    /* YAZI OKUNABİLİRLİĞİ İÇİN AYARLAR */
 /*   position: relative; /* Katman (overlay) için gerekli */
  /*  color: white;       /* Yazı rengini beyaz yap */
  /*  z-index: 1;         /* Yazıyı en üste çıkar */
   /* transition: 0.3s; */ 
}

/* --- MOBİL UYUMLULUK AYARLARI (768px altındaki ekranlar için) --- */
/* Mobil için Media CSS */
@media (max-width: 768px) {
    /* Sütunları tam genişlik (alt alta) yapıyoruz */
    .product-scroll-container .col-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2.5rem; /* Ürünler arasında boşluk bırakır */
    }

    /* Sıralamayı değiştirmek için Flexbox order kullanıyoruz */
    /* 1. Sıra: Ürün Başlığı */
    .product-scroll-container .col-3 span:nth-of-type(1) {
        order: 1;
        font-size: 1.1rem; /* Mobilde başlığın okunabilirliği artırıldı */
        margin-bottom: 0.3rem;
    }

    /* 2. Sıra: Ürün Fiyatı */
    .product-scroll-container .col-3 span:nth-of-type(2) {
        order: 2;
        margin-bottom: 1rem; /* Fiyat ile resim arasında boşluk bırakır */
    }

    /* 3. Sıra: Ürün Resmi (Buton) */
    .product-scroll-container .urun-card {
        order: 3;
        height: 250px !important; /* Mobilde resmin daha net görünmesi için yükseklik artırıldı */
        width: 100% !important;
        margin-top: 0; /* Mobilde sıra değiştiği için otomatik margin sıfırlanır */
    }
}

/* --- Yazının altına koyu katman (Overlay) ekleme --- */
.urun-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Hafif şeffaf siyah bir katman (yazının okunması için) */
    background-color: rgba(0, 0, 0, 0.4); 
    
    border-radius: 4px;
    z-index: -1; /* Görselin üstünde, yazının altında kalır */
}

/* --- Hover Efekti (İsteğe Bağlı) --- */
.urun-card:hover::before {
    background-color: rgba(0, 0, 0, 0.6); /* Üzerine gelince biraz daha kararır */
}

/*
.urun-1 { background-image: url(); }
.urun-2 { background-image: url(); }
.urun-3 { background-image: url(); }
.urun-4 { background-image: url(); }
.urun-5 { background-image: url(); }
/* ... urun-12'ye kadar devam et ... */



#detay-alani {
    background-color: rgb(240, 245, 255); /* Buz mavisi tonu */
    border-color: rgb(200, 210, 230) !important;
}

#detay-resim {
    max-height: 470px; /* Görselin çok büyük olup sayfayı bozmasını engeller */
    width: 100%;
    object-fit: cover; /* Görseli oranlı bir şekilde kutuya sığdırır */
}