/*
Theme Name: Dila Butik
Theme URI: https://dilabutik.com
Author: Antigravity
Author URI: 
Description: Modern, elegant, and premium WooCommerce theme for Dila Butik.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dilabutik
Tags: e-commerce, custom-colors, custom-menu, featured-images
*/

/* Sepet (Cart) ikonunun üzerine gelince (hover) açılır mini sepetin (dropdown) görünür olmasını sağlar */
.cart-wrapper:hover .mini-cart-container {
    display: block !important;
}

/* ================= WOOCOMMERCE GRID & CARD STYLES ================= */
/* WooCommerce'in varsayılan liste (ul) yapısını eziyor ve modern CSS Grid yapısına çeviriyoruz. 
   Bu sayede ürünler alt alta yığılmak yerine yan yana 4 kolon halinde dizilir. */
ul.products {
    display: grid !important; /* Standart blok/liste görünümünü Grid sistemine zorla */
    grid-template-columns: repeat(4, 1fr) !important; /* Masaüstünde tam olarak 4 eşit kolon oluştur */
    gap: 30px !important; /* Kartlar arasına 30px'lik ferah bir nefes alma boşluğu bırak */
    margin: 0 !important;
    padding: 0 !important;
}

/* WooCommerce'in float temizleme (clearfix) için ürettiği sahte elementleri gizler, grid düzenini bozmasını engeller */
ul.products::before, ul.products::after {
    display: none !important;
}

/* Tekil Ürün Kartı (Single Product Card) Tasarımı */
ul.products li.product {
    width: 100% !important; /* Grid hücresinin tamamını kapla */
    margin: 0 !important; /* Grid gap kullandığımız için margin'e gerek yok */
    background-color: var(--clr-white); /* Kart arka planı beyaz (CSS değişkeninden gelir) */
    border-radius: var(--radius-md); /* Köşeleri hafif yuvarlat (Premium hissiyat) */
    overflow: hidden; /* Taşan görsel/elementleri gizle (örnek: border-radius dışına çıkan resimler) */
    transition: var(--transition); /* Hover efektleri için yumuşak geçiş süresi eklendi */
    box-shadow: var(--shadow-sm); /* Çok hafif bir derinlik gölgesi */
    
    /* Kart içindeki elemanları dikey hizalamak (flex) için kullanıldı.
       Böylece 'Sepete Ekle' butonu margin:auto ile hep en alta itilir. Kart yükseklikleri eşitlenir. */
    display: flex;
    flex-direction: column;
    position: relative; /* İndirim etiketi (badge) gibi elemanların karta göre konumlanması için gerekli */
    float: none !important; /* WooCommerce'in varsayılan float bazlı eski düzenini iptal eder */
}

/* Kullanıcı fare ile ürün kartının üzerine geldiğindeki (Hover) mikro-animasyonlar */
ul.products li.product:hover {
    box-shadow: var(--shadow-lg); /* Gölge belirginleşir, kart öne çıkar */
    transform: translateY(-5px); /* Kart 5 piksel yumuşakça yukarı kalkar */
}

/* Ürün Görseli: Orantılı ve şık bir portre görünümü */
ul.products li.product img {
    width: 100%;
    aspect-ratio: 4/5; /* E-ticaret butikleri için en iyi olan 4:5 portre oranı. Resimleri zorla bu oranda keser. */
    object-fit: cover; /* Resmi sündürmeden, belirlediğimiz 4:5 kutuya sığacak şekilde ortalayarak doldurur. */
    margin-bottom: 15px;
    border-radius: var(--radius-md) var(--radius-md) 0 0; /* Sadece üst köşeleri yuvarlatır, alt kısımlar düz kalır */
}

/* Ürün Başlığı (Title) */
ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem;
    font-family: var(--font-body); /* Temanın modern gövde fontu (Örn: Jost) */
    margin-bottom: 5px;
    padding: 0 15px;
    text-align: center; /* Başlığı ortala */
    color: var(--clr-text-main);
}

/* Ürün Fiyatı */
ul.products li.product .price {
    font-weight: 600; /* Fiyatı kalınlaştırarak dikkat çekmesini sağla */
    font-size: 1.1rem;
    color: var(--clr-primary); /* Markanın ana/vurgu rengini kullan */
    padding: 0 15px;
    margin-bottom: 15px;
    text-align: center;
}

/* Sepete Ekle Butonu */
ul.products li.product .button {
    margin: auto 15px 15px 15px; /* 'margin-top: auto' sayesinde buton her zaman kartın en altına, dibe itilir. Bu sayede tüm kartlar aynı boyda hizalı durur. */
    background-color: var(--clr-primary) !important;
    color: var(--clr-white) !important;
    border-radius: 30px !important; /* Hap şeklinde (pill) yuvarlak buton tasarımı */
    padding: 10px 20px !important;
    text-align: center;
    display: block; /* Butonu tam genişlikte ve alt satıra geçecek şekilde blok element yap */
    font-weight: 500;
    transition: var(--transition); /* Hover için yumuşak renk değişimi animasyonu */
}

ul.products li.product .button:hover {
    background-color: var(--clr-primary-dark) !important; /* Üzerine gelince buton rengini bir ton koyulaştır */
    transform: translateY(-2px); /* Buton çok hafif yukarı zıplar (Geri bildirim efekti) */
    color: var(--clr-white) !important;
}

/* İndirim Etiketi (Sale Badge) */
ul.products li.product .onsale {
    position: absolute; /* Kartın (relative) içine sol üste sabitler */
    top: 15px;
    left: 15px;
    background-color: var(--clr-sale); /* İndirim (kırmızı/turuncu vb.) rengi */
    color: var(--clr-white);
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase; /* BÜYÜK HARF kullanımına zorla */
    border-radius: var(--radius-sm);
    z-index: 2; /* Görselin üstünde kalmasını garantile */
    margin: 0;
    line-height: 1;
    min-height: auto;
    min-width: auto;
}

/* ================= MOBİL VE TABLET UYUMLULUK (Responsive Grid) ================= */
/* Tabletler ve Küçük Laptoplar için (Maksimum 1024px genişlik) */
@media (max-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr) !important; /* 4 sütunu iptal et, yan yana 3 sütuna düşür */
    }
}

/* Tablet Dikey Mod ve Büyük Telefonlar için (Maksimum 768px genişlik) */
@media (max-width: 768px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important; /* Yan yana 2 sütuna düşür */
        gap: 15px !important; /* Ekran küçüldüğü için kartlar arası boşluğu daralt */
    }
}

/* Standart ve Küçük Akıllı Telefonlar için (Maksimum 480px genişlik) */
@media (max-width: 480px) {
    ul.products {
        grid-template-columns: 1fr !important; /* Kartların ekrana sığması için 1 SÜTUN (Alt alta tam ekran) dizilimine geç */
    }
}