/* ==========================================================================
   E-TİCARET TAM DİNAMİK TEMA VE RENK PALETLERİ (HER TEMAYA FARKLI KONTRAST)
   ========================================================================== */

/* 1. MAVİ PALET -> Üst Bar & Footer: AÇIK GRİ / SLATE (Gözden Geçirildi ve Düzeltildi) */
:root, [data-theme="blue"] {
    --bs-primary: #0d6efd !important;
    --bs-primary-rgb: 13, 110, 253 !important;
    --bs-primary-bg-subtle: #cfe2ff !important;       /* Mavi tonuna uyarlandı */
    --bs-primary-border-subtle: #9ec5fe !important;   /* Mavi tonuna uyarlandı */
    --bs-primary-text-emphasis: #052c65 !important;
    --bs-link-color: #0d6efd !important;
    --bs-link-hover-color: #0a58ca !important;
    
    --theme-dark: #f1f5f9 !important;        /* Daha temiz ve modern bir açık gri Slate-100 */
    --theme-footer: #e2e8f0 !important;      /* Slate-200 */
    --theme-text-dark: #1e293b !important;   /* Açık arka planda mükemmel okunabilir koyu metin */
    --theme-hero-bg: #f8fafc !important;
    --theme-hero-circle: rgba(13, 110, 253, 0.08) !important;
}

/* 2. TURUNCU PALET -> Üst Bar & Footer: DERİN GECE MAVİSİ (Optimize Edildi) */
[data-theme="orange"] {
    --bs-primary: #fd7e14 !important;
    --bs-primary-rgb: 253, 126, 20 !important;
    --bs-primary-bg-subtle: #ffe8db !important;
    --bs-primary-border-subtle: #febc95 !important;
    --bs-primary-text-emphasis: #7e3f0a !important;
    --bs-link-color: #fd7e14 !important;
    --bs-link-hover-color: #df6407 !important;       /* Buton ve link hover kontrastı artırıldı */
    
    --theme-dark: #0f172a !important;      
    --theme-footer: #020617 !important;    
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #fffbf8 !important;
    --theme-hero-circle: rgba(253, 126, 20, 0.1) !important;
}

/* 3. GOLD PALET -> Üst Bar & Footer: ASİL BORDO / MÜRDÜM (Gözden Geçirildi) */
[data-theme="gold"] {
    --bs-primary: #ffc107 !important;
    --bs-primary-rgb: 255, 193, 7 !important;
    --bs-primary-bg-subtle: #fff3cd !important;
    --bs-primary-border-subtle: #ffe69c !important;
    --bs-primary-text-emphasis: #664d03 !important;
    --bs-link-color: #e0a800 !important;             /* Beyaz üstünde okunabilirlik için ana gold biraz koyulaştırıldı */
    --bs-link-hover-color: #b38600 !important;
    
    --theme-dark: #2d121c !important;      
    --theme-footer: #1a0a10 !important;    
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #fafafa !important;
    --theme-hero-circle: rgba(255, 193, 7, 0.1) !important;
}

/* 4. ZÜMRÜT YEŞİLİ PALET -> Üst Bar & Footer: HAKİ / ASKERİ YEŞİL (Gözden Geçirildi) */
[data-theme="green"] {
    --bs-primary: #198754 !important;
    --bs-primary-rgb: 25, 135, 84 !important;
    --bs-primary-bg-subtle: #d1e7dd !important;
    --bs-primary-border-subtle: #a3cfbb !important;
    --bs-primary-text-emphasis: #0f5132 !important;
    --bs-link-color: #198754 !important;
    --bs-link-hover-color: #146c43 !important;
    
    --theme-dark: #1c2e24 !important;      
    --theme-footer: #111d17 !important;    
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #f7fbf9 !important;
    --theme-hero-circle: rgba(25, 135, 84, 0.1) !important;
}

/* 5. YENİ: SİYAH / PREMIUM DARK PALET -> Üst Bar & Footer: MAT SİYAH / ANTRASİT */
[data-theme="black"] {
    --bs-primary: #212529 !important;                 /* Premium Mat Siyah */
    --bs-primary-rgb: 33, 37, 41 !important;
    --bs-primary-bg-subtle: #e2e3e5 !important;       /* Bootstrap Light Siyah/Gri alt zemin */
    --bs-primary-border-subtle: #c4c8cb !important;   /* Hafif gri border kenarlık */
    --bs-primary-text-emphasis: #1b1e21 !important;
    --bs-link-color: #1a1d20 !important;
    --bs-link-hover-color: #000000 !important;
    
    --theme-dark: #1a1a1a !important;                 /* Üst bar için asil koyu antrasit */
    --theme-footer: #0f0f0f !important;               /* Tamamen şık bir mat derin siyah */
    --theme-text-dark: #ffffff !important;             /* Koyu temada parlayacak beyaz metinler */
    --theme-hero-bg: #fdfdfd !important;               /* Temiz ve lüks hissettiren kırık beyaz kahraman alanı arka planı */
    --theme-hero-circle: rgba(33, 37, 41, 0.05) !important;
}

/* 6. KIRMIZI / RED PALET -> Üst Bar & Footer: Koyu Kiremit / Antrasit */
[data-theme="red"] {
    --bs-primary: #dc3545 !important;
    --bs-primary-rgb: 220, 53, 69 !important;
    --bs-primary-bg-subtle: #f8d7da !important;
    --bs-primary-border-subtle: #f5c2c7 !important;
    --bs-primary-text-emphasis: #58151c !important;
    --bs-link-color: #dc3545 !important;
    --bs-link-hover-color: #b02a37 !important;
    
    --theme-dark: #1f1213 !important;      
    --theme-footer: #12090a !important;     
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #fff8f8 !important;
    --theme-hero-circle: rgba(220, 53, 69, 0.08) !important;
}

/* 7. ASİL MOR / PURPLE PALET -> Üst Bar & Footer: DERİN MOR / GECE */
[data-theme="purple"] {
    --bs-primary: #6f42c1 !important;
    --bs-primary-rgb: 111, 66, 193 !important;
    --bs-primary-bg-subtle: #e2d9f3 !important;
    --bs-primary-border-subtle: #c5b3e6 !important;
    --bs-primary-text-emphasis: #2c1a4d !important;
    --bs-link-color: #6f42c1 !important;
    --bs-link-hover-color: #59339d !important;
    
    --theme-dark: #191224 !important;      
    --theme-footer: #0e0a14 !important;     
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #fcfaff !important;
    --theme-hero-circle: rgba(111, 66, 193, 0.08) !important;
}

/* 8. TURKUAZ / CYAN PALET -> Üst Bar & Footer: KARSILANABİLİR DEEP CYAN */
[data-theme="cyan"] {
    --bs-primary: #0dcaf0 !important;
    --bs-primary-rgb: 13, 202, 240 !important;
    --bs-primary-bg-subtle: #cff4fc !important;
    --bs-primary-border-subtle: #9eeaf9 !important;
    --bs-primary-text-emphasis: #055160 !important;
    --bs-link-color: #0aa2c0 !important;     /* Okunabilirlik için biraz koyusu */
    --bs-link-hover-color: #087990 !important;
    
    --theme-dark: #09252c !important;      
    --theme-footer: #041418 !important;     
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #f4fcfe !important;
    --theme-hero-circle: rgba(13, 202, 240, 0.1) !important;
}

/* 9. CANLI PEMBE / PINK PALET -> Üst Bar & Footer: KOYU FUŞYA / GECE */
[data-theme="pink"] {
    --bs-primary: #d63384 !important;
    --bs-primary-rgb: 214, 51, 132 !important;
    --bs-primary-bg-subtle: #f7d6e6 !important;
    --bs-primary-border-subtle: #f0adc9 !important;
    --bs-primary-text-emphasis: #551434 !important;
    --bs-link-color: #d63384 !important;
    --bs-link-hover-color: #ab2869 !important;
    
    --theme-dark: #23101a !important;      
    --theme-footer: #14080f !important;     
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #fff7fa !important;
    --theme-hero-circle: rgba(214, 51, 132, 0.08) !important;
}

/* 10. İNDİGO / DEEP BLUE PALET -> Üst Bar & Footer: İNDİGO ANTRASİT */
[data-theme="indigo"] {
    --bs-primary: #6610f2 !important;
    --bs-primary-rgb: 102, 16, 242 !important;
    --bs-primary-bg-subtle: #e0cffc !important;
    --bs-primary-border-subtle: #c29ffa !important;
    --bs-primary-text-emphasis: #290661 !important;
    --bs-link-color: #6610f2 !important;
    --bs-link-hover-color: #520dc2 !important;
    
    --theme-dark: #15102a !important;      
    --theme-footer: #0c0919 !important;     
    --theme-text-dark: #ffffff !important;  
    --theme-hero-bg: #f9f8fe !important;
    --theme-hero-circle: rgba(102, 16, 242, 0.08) !important;
}

/* -------------------------------------------------------------
 * TÜM TEMALAR İÇİN DİNAMİK .btn-outline-primary ÖZELLEŞTİRMESİ
 * ------------------------------------------------------------- */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb) !important;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: transparent !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

/* ==========================================================================
   BİLEŞEN OVERRIDE (EZME) KURALLARI - AKILLI RENK EŞLEŞTİRME
   ========================================================================== */

/* Üst Bar Alanı Arka Planı ve Dinamik Yazı Renkleri */
header .dynamic-dark-bg,
div.dynamic-dark-bg,
.dynamic-dark-bg { 
    background: var(--theme-dark) !important; 
    background-color: var(--theme-dark) !important;
    color: var(--theme-text-dark) !important;
}
header .dynamic-dark-bg *,
.dynamic-dark-bg span, 
.dynamic-dark-bg i {
    color: var(--theme-text-dark) !important;
}

@media (min-width: 992px) {
	.dropdown-menu .dropdown-submenu { display: block; }
	.dropdown-menu .dropdown-submenu:hover > .dropdown-menu { display: block; }
}

/* Başlık ve Yumuşak Geçiş */
header {
	transition: all 0.3s ease;
}

.kategoriler-nav, .kategoriler-nav2 {
	max-height: 150px;
	opacity: 1;
	overflow: visible; /* Dropdown menülerin dışarı taşması için açık olmalı */
	transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

/* Header aşağı inildiğinde olacaklar */
header.header-scrolled .kategoriler-nav,
header.header-scrolled .kategoriler-nav2 {
	max-height: 0;
	opacity: 0;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	pointer-events: none; /* Gizliyken tıklanmasını önle */
	overflow: hidden !important; 
	border: none !important;
}

/* Logoun soluna gelecek küçük menü (Scroll edildiğinde ortaya çıkar) */
.scrolled-menu-wrapper {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	margin-right: 0;
	transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}

header.header-scrolled .scrolled-menu-wrapper {
	max-width: 80px; /* Butonun sığacağı kadar genişlik */
	opacity: 1;
	margin-right: 1.5rem;
	overflow: visible; /* Dropdown'un aşağı doğru açılabilmesi için */
}


/* Ana Footer Alanı */
footer.dynamic-dark-bg,
footer { 
    background: var(--theme-dark) !important; 
    background-color: var(--theme-dark) !important; 
    color: var(--theme-text-dark) !important;
}
footer h6, footer p, footer span, footer li, footer a:not(.transition-link), footer i {
    color: var(--theme-text-dark) !important;
}

/* En Alttaki Telif Hakları Şeridi */
.dynamic-footer-bg,
footer div.dynamic-footer-bg { 
    background: var(--theme-footer) !important; 
    background-color: var(--theme-footer) !important; 
}
footer div.dynamic-footer-bg * {
    color: var(--theme-text-dark) !important;
}

/* Yukarı Çık Buton Sabitleme ve Tasarım Ayarları */
#btnYukariCik {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1050; /* Diğer elementlerin üzerinde kalması için */
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Üzerine gelindiğinde hafifçe yukarı zıplama efekti */
#btnYukariCik:hover {
    transform: translateY(-5px);
}


/* Sayaçların büyüme/küçülme animasyon geçişi */
#sepet-sayac, #sepet-sayac-mobil {
    transition: transform 0.2s ease-in-out;
}

/* Vitrin (Hero) Alanı */
.dynamic-hero-bg { background: var(--theme-hero-bg) !important; background-color: var(--theme-hero-bg) !important; }
.dynamic-hero-circle { background: var(--theme-hero-circle) !important; background-color: var(--theme-hero-circle) !important; }

/* Standart Bootstrap Buton Ezmesi */
.btn-primary, .input-group .btn-primary, .navbar-light .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--bs-link-hover-color) !important;
    border-color: var(--bs-link-hover-color) !important;
    color: #ffffff !important;
	transition: all 0.3s ease !important;
}


/* ==========================================================================
   ÖZEL SEPET VE KATEGORİ MENÜSÜ AYARLARI (SABİT SİYAH & DINAMIK HOVER)
   ========================================================================== */

/* Sepet Butonu ve Tüm Kategoriler Butonu - İlk Başta Hep Sabit Siyah */
.btn-dynamic-dark,
#allCategoriesDropdown,
.dropdown.me-4 button,
header .btn-dark,
a[href*="sepet"],
.navbar #allCategoriesDropdown {
    background-color: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out !important; /* Yumuşak renk geçişi efekti */
}

/* Üzerine Gelince (Hover) Aktif Temanın Rengini Alması İçin */
.btn-dynamic-dark:hover, 
.btn-dynamic-dark:focus,
#allCategoriesDropdown:hover,
.dropdown.me-4 button:hover {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

/* ========================================================================== */

/* Yazı ve Link Geçişleri */
.text-primary { color: var(--bs-primary) !important; }
.text-primary-hover:hover { color: var(--bs-primary) !important; }
.transition-link { color: var(--theme-text-dark) !important; opacity: 0.85; }
.transition-link:hover { color: var(--bs-primary) !important; opacity: 1; padding-left: 4px; }

/* Marka Kartları -------------------------------------------------*/
.brand-card:hover { border-color: var(--bs-primary) !important; }
.brand-card:hover span { color: var(--bs-primary) !important; }

/* urun kartları -------------------------------------------------*/
.product-image {max-height: 240px;}
.product-img-hover {object-fit: cover;}
.product-img-hover:hover {object-fit: contain;}

/* Ana sayfa slider --------------------------------------------------*/
.slider-img-container {
        height: 500px;
        background-color: #f1f3f5;
    }
.slider-img-container img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.backdrop-blur {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
@media (max-width: 767.98px) {
	.slider-img-container {
		height: 240px;
	}
}

/* Ana sayfa banner -----------------------------------------------*/
.banner-box {
	position: relative;
	min-height: 220px;
	max-height: 280px;
	background-color: #f8f9fa;
	cursor: pointer;
}
.banner-box img {
	transition: transform 0.5s ease;
}
.banner-box:hover img {
	transform: scale(1.06);
}
.banner-box .banner-overlay {
	transition: background-color 0.3s ease;
}
.banner-box:hover .banner-overlay {
	background-color: rgba(0, 0, 0, 0.45) !important;
}
.text-shadow {
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.banner-box:hover .banner-btn {
	background-color: #0d6efd !important;
	color: #ffffff !important;
	border-color: #0d6efd !important;
}

/* Ana sayfa kategoriler -------------------------------------*/

/* Kaydırma Çubuğunu Gizleme */
.story-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.story-scroll-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* MOBİL BOYUTLAR (Büyütüldü) */
.story-item {
    width: 90px; /* Eski: 80px */
    transition: transform 0.2s ease;
}
.story-item:hover {
    transform: translateY(-3px);
}

.story-ring-avatar {
    width: 80px;  /* Eski: 72px */
    height: 80px; /* Eski: 72px */
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--bs-primary, #fd7e14) 0%, var(--bs-primary-border-subtle, #febc95) 100%);
    transition: background 0.3s ease;
}

.story-item:hover .story-ring-avatar {
    background: var(--bs-primary, #fd7e14);
}

.story-img-box {
    width: 100%;
    height: 100%;
    border: 3px solid #ffffff; /* Kalınlaştırılmış iç çerçeve */
}

.story-title {
    max-width: 100px;
    font-size: 0.8rem !important;
}

/* MASAÜSTÜ BOYUTLAR (Büyütüldü) */
@media (min-width: 768px) {
    .story-item {
        width: 110px; /* Eski: 90px */
    }
    .story-ring-avatar {
        width: 100px;  /* Eski: 80px */
        height: 100px; /* Eski: 80px */
    }
    .story-title {
        max-width: 110px;
        font-size: 0.9rem !important;
    }
}

/* Ana sayfa ozel metin ----------------------------------------------*/
.anasayfa-ozel-metin-section {
	border-top: 1px solid #eef2f5;
	border-bottom: 1px solid #eef2f5;
}
.anasayfa-ozel-metin-section .content-area {
	color: #5a626a !important;
	font-weight: 400;
}
/* Editörden gelebilecek olası p veya span etiketlerinin satır aralıklarını korumak için */
.anasayfa-ozel-metin-section .content-area p {
	margin-bottom: 1.5rem;
}

/* urun detay----------------------------------------------------------*/

/* GALERİ KAPSAYICI (MASAÜSTÜ & MOBİL UYUMLU) */
#galeriKapsayici {
    padding: 4px;                          /* Çerçeve kesilmelerini önlemek için iç boşluk */
    box-sizing: border-box;
}

/* Masaüstü dikey kaydırma çubuğu */
#galeriKapsayici::-webkit-scrollbar { 
    width: 5px; 
    height: 5px; 
}
#galeriKapsayici::-webkit-scrollbar-thumb { 
    background-color: rgba(0,0,0,0.2); 
    border-radius: 4px; 
}

/* Mobil yatay kaydırma desteği (Kaydırma çubuğunu mobilde görünür yapar) */
@media (max-width: 767.98px) {
    #galeriKapsayici {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-height: none !important;
        padding-bottom: 8px !important;    /* Kaydırma çubuğu için alt boşluk */
    }
}

/* Masaüstü dikey görünüm ayarları */
@media (min-width: 768px) {
    #galeriKapsayici {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-width: 82px;                   /* Resim kutusunun sığması için nefes alanı */
    }
}

/* KÜÇÜK RESİM KUTULARI */
.thumbnail-box {
    width: 70px !important;                /* Rahat sığması için hafif genişletildi */
    height: 70px !important;
    flex-shrink: 0 !important;             /* Mobilde resimlerin büzüşmesini engeller */
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
	margin: 3px;
}

.active-thumb { 
    border-color: var(--bs-primary) !important; 
    box-shadow: 0 0 5px rgba(var(--bs-primary-rgb), 0.3); 
}

/* BÜYÜK RESİM KAPATICI VE ORTALAMA */
.main-image-box {
    height: 420px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative;
    background-color: #fff;
}

.main-image-box img#anaUrunGorseli {
    max-height: 100% !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: auto !important;
}

/*anasayfa koleksiyon ------------------------------------------------------------*/

.koleksiyon-box {
    background-color: #f8f9fa; 
}
.koleksiyon-box .image-zoom {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}
.koleksiyon-box .koleksiyon-overlay {
    transition: background-color 0.4s ease, opacity 0.4s ease;
}

/* --- PARLAMA VE AYDINLANMA EFEKTİ --- */
.koleksiyon-box:hover .image-zoom {
    transform: scale(1.03);
    filter: brightness(1.15) contrast(1.05); /* Resmi %15 oranında parlatır ve renkleri canlandırır */
}
.koleksiyon-box:hover .koleksiyon-overlay {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Siyahlığı kaldırıp çok hafif beyaz bir parlama katmanı ekler */
}

.koleksiyon-box:hover .koleksiyon-btn {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}
.text-shadow {
    /* Resim parladığında beyaz yazıların kaybolmaması için gölgeyi biraz daha belirginleştirdik */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.85), 0px 0px 4px rgba(0, 0, 0, 0.5);
}