/*
    Bu dosya, Tailwind CSS'in sağlamadığı bazı özel stilleri ve
    bileşenlerin özelleştirilmiş görünümlerini içerir.
*/

/* GLOBAL STİLLER */
/* Ürünler sayfasındaki ana sekme linklerinin stili */
.tab-link {
    @apply px-4 py-3 text-text-light/70 dark:text-text-dark/70 hover:text-primary transition-colors border-b-2 border-transparent -mb-[2px];
}
/* Ürünler sayfasındaki aktif sekme linkinin stili */
.active-tab {
    @apply text-primary font-bold border-b-2 border-primary;
}


/* ÜRÜN KART STİLİ (urunler.html için default) */
.product-card {
    /* Ana kart: Geliştirilmiş gölge ve yuvarlak köşeler */
    @apply flex flex-col items-center justify-between p-4 bg-white dark:bg-[#1f1a0f] rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-black/5 dark:border-white/5;
    text-align: center;
}

/* Parfüm Görsel Alanı (urunler.html için default) */
.product-img {
    /* Görsel kapsayıcı: Görselin sığması için 'contain' kullanıldı. */
    @apply w-full bg-center bg-no-repeat aspect-square bg-contain rounded-lg mb-4;
    height: 200px; /* Sabit bir yükseklik */
    width: 200px;
    background-size: contain; 
}

/* YENİ/DÜZELTİLMİŞ: index.html Özel Koleksiyon için tam genişlikli kart stili (Eski .product-card-list yerine) */
.product-card-list {
    /* Tam genişlik kart: Dikey yapıya geri dönüldü, flex-col ile içerik akışı sağlandı */
    @apply flex flex-col justify-start bg-white dark:bg-[#1f1a0f] rounded-xl shadow-2xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-black/5 dark:border-white/5 overflow-hidden;
    text-align: center; 
    min-height: auto; 
}

/* YENİ/DÜZELTİLMİŞ: index.html Özel Koleksiyon için orantılı, tam genişlikli görsel stili (Eski .product-img-list yerine) */
.product-img-list {
    width: 100%;
    /* 4:3 oranında yükseklik vererek orantılı büyüme sağlandı (Genişliğin %75'i kadar yükseklik) */
    padding-top: 75%; 
    flex-shrink: 0;
    
    background-size: contain; /* GÖRSELİN TAM GÖRÜNMESİ SAĞLANDI */
    background-repeat: no-repeat;
    background-position: center;
    
    position: relative;
    @apply rounded-t-xl; /* Sadece üst köşeleri yuvarla */
    margin: 0 !important; /* Marjinleri sıfırla */
}


/* Bilgi İletişim Butonu */
.contact-button {
    /* Buton: Altın renkli, dolgulu ve tam genişlikte */
    /* index.html'de mx-auto verilerek ortalandı */
    @apply flex items-center justify-center gap-2 mt-4 w-full px-4 py-2 bg-primary text-text-light font-bold rounded-lg hover:bg-[#e09e0a] transition-colors text-sm;
}


/* WHATSAPP SABİT BUTONU STİLİ (Tüm Sayfalar İçin) */
.whatsapp-fixed-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* WhatsApp yeşili */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    z-index: 1000; /* Her zaman üstte kalsın */
    transition: transform 0.3s, box-shadow 0.3s;
}

.whatsapp-fixed-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.whatsapp-fixed-button svg {
    fill: white; /* İkon rengini beyaz yap */
    width: 30px;
    height: 30px;
}

/* DİĞER STİLLER */

/* Yeni estetik accordion stilleri (index.html için) */
.new-accordion-item {
    /* Ana Kart stili: Daha belirgin bir gölge, koyu arkaplan vurgusu */
    @apply rounded-xl shadow-2xl overflow-hidden bg-white dark:bg-[#1f1a0f] border border-primary/20 transition-all duration-300;
}

.new-accordion-summary {
    /* Açma/Kapama Başlık Stili: Altın Çizgi ve Hover Efekti */
    @apply flex justify-between items-center px-8 py-6 cursor-pointer focus:outline-none border-l-4 border-l-transparent transition-all duration-300;
}

.new-accordion-summary:hover {
    /* Hover'da altın vurgu */
    @apply bg-black/5 dark:bg-white/5 border-l-4 border-l-primary;
}

.new-accordion-item[open] .new-accordion-summary {
    /* Açık olduğunda altın çizgi */
    @apply border-l-primary bg-black/5 dark:bg-white/5;
}

/* Kişiliğin İmzası Bölümü: Akordiyon içeriği */
.accordion-content {
    /* Akordiyon içeriği: Üst üste (tek sütun) düzen. */
    @apply flex flex-col gap-8 p-8 border-t border-black/10 dark:border-white/10 items-center;
}

/* Rehber Görseli için Alan (GÖRSEL TAM VE ORANTILI GÖZÜKÜYOR) */
.rehber-img-old {
    height: 350px; /* Yükseklik artırıldı */
    width: 100%; 
    max-width: 500px; /* Max-width artırıldı */
    flex-shrink: 0; 
    
    background-size: contain; /* GÖRSELİN TAM GÖRÜNMESİ SAĞLANDI */
    background-repeat: no-repeat;
    background-position: center;
    
    @apply mb-4 rounded-xl border border-black/10 dark:border-white/10 p-4 bg-background-light dark:bg-background-dark/50 shadow-inner;
}

/* Hero Kaydırıcı Stilleri (FIXED) */
.slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

/* index.html hero görsel yolları */
.slide-1 {
    background-image: url('slider_ana_1.png');
}

.slide-2 {
    background-image: url('slider_ana_2.png');
}

.slide-3 {
    background-image: url('slider_ana_3.png');
}

/* İletişim Formu (iletisim.html) */
.input-field {
    @apply w-full px-4 py-3 bg-white dark:bg-[#1a150c] border border-black/10 dark:border-white/10 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors placeholder-text-light/50 dark:placeholder-text-dark/50;
}

.submit-button {
    @apply w-full px-6 py-3 bg-primary text-text-light font-bold rounded-lg hover:bg-[#e09e0a] transition-colors;
}

/* Hakkımızda Sayfası (hakkimizda.html) */
.gallery-image {
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    @apply rounded-xl shadow-xl border-4 border-white dark:border-background-dark transition-transform duration-300 hover:scale-[1.02];
}