/* === TEMEL (Varsayılan Tema) === */
:root {
    --primary-color: #182C45;       
    --accent-color: #D4AF37;        
    --bg-body: #222;                
    --bg-app: #FDFBF7;              
    --text-main: #2D2D2D;
    --text-muted: #666;
    --gold-gradient: linear-gradient(
        to right,
        #AA8520,
        #D4AF37,
        #FFEFBA,
        #D4AF37,
        #AA8520
    );
    --shadow-soft: 0 10px 25px rgba(0,0,0,0.05);
}



/* === 🎄 YILBAŞI TEMASI (CHRISTMAS) === */
#app-root[data-theme="christmas"] {
    --primary-color: #8F1616;   /* Sıcak bordo kırmızı */
    --accent-color: #D8B26A;    /* Altın */
    --bg-body: #F3E7D8;         /* Dış arka plan krem */
    --bg-app: #F9F3E9;          /* Uygulama zemini */
    --text-main: #5C3723;       /* Koyu kahve metin */
    --text-muted: #A07C5A;      /* Soluk kahve */

    --gold-gradient: linear-gradient(
        to right,
        #C6923A,
        #E2C37A,
        #F5E3BD,
        #E2C37A,
        #C6923A
    );

    --shadow-soft: 0 10px 25px rgba(143, 22, 22, 0.12);
}

/* === HEADER === */
#app-root[data-theme="christmas"] .app-header {
    background: linear-gradient(to bottom, #FDF6EB, #F3E0CB);
    border-bottom-color: #D8B26A;
     background: #8F1616 !important;
    box-shadow: 0 12px 30px rgba(143, 22, 22, 0.18);
}

/* Aktif kategori */
#app-root[data-theme="christmas"] #category-list li.active {
    background-color: #8F1616;
    color: #FDF6EB;
    box-shadow: 0 5px 16px rgba(143, 22, 22, 0.45);
}

/* === HOŞGELDİNİZ EKRANI === */
#app-root[data-theme="christmas"] .welcome-section {
    background: radial-gradient(circle at top, #FDF6EB, #F7E7D6, #F3E0CB);
}
#app-root[data-theme="christmas"] .welcome-title {
    color: #8F1616;
}
#app-root[data-theme="christmas"] .welcome-text {
    color: #A07C5A;
}

/* ======================================================= */
/* === ALT ÜRÜNLER MODALı – Yılbaşı Tema Uyumu === */
/* ======================================================= */

#app-root[data-theme="christmas"] .modal-window {
    background: #F9F3E9;
    border-top: 3px solid #D8B26A;
    box-shadow: 0 -8px 25px rgba(143, 22, 22, 0.25);
}

#app-root[data-theme="christmas"] .modal-header {
    background: linear-gradient(to bottom, #FDF6EB, #F3E0CB);
    border-bottom: 1px solid #D8B26A;
}

#app-root[data-theme="christmas"] .modal-title,
#app-root[data-theme="christmas"] .modal-close {
    color: #8F1616 !important;
}

#app-root[data-theme="christmas"] .modal-content {
    background: #F9F3E9;
    color: #5C3723;
}

/* Modal ürün kartları */
#app-root[data-theme="christmas"] .modal-product-card {
    background: #FDF6EB;
    border: 1px solid rgba(216, 178, 106, 0.6);
    box-shadow: 0 4px 12px rgba(143, 22, 22, 0.08);
}

/* Ürün isimleri ve fiyat */
#app-root[data-theme="christmas"] .modal-product-name {
    color: #8F1616 !important;
}

#app-root[data-theme="christmas"] .product-price {
    color: #D8B26A !important;
}

/* Modal içindeki favorit butonu */


#app-root[data-theme="christmas"] .modal-product-card .fav-btn.active {
    color: #D8B26A !important;
}

/* ======================================================= */
/* === BEĞENDİKLERİM MODALI – Yılbaşı Tema Uyumu === */
/* ======================================================= */

#app-root[data-theme="christmas"] .favorites-grid .product-card {
    background: #FDF6EB;
    border: 1px solid rgba(216, 178, 106, 0.8);
    box-shadow: 0 4px 10px rgba(143,22,22,0.07);
}

#app-root[data-theme="christmas"] .favorites-grid .modal-product-name {
    color: #8F1616 !important;
}

#app-root[data-theme="christmas"] .favorites-grid .product-price {
    color: #D8B26A !important;
}

/* Favoriler içindeki kalp */
#app-root[data-theme="christmas"] .favorites-grid .fav-btn.active {
    color: #D8B26A !important;
}

#app-root[data-theme="christmas"] .fav-btn.active {
    background: #8F1616;  
    color: #D8B26A;       
}




/* === RAMAZAN TEMASI (EID THEME) === */
#app-root[data-theme="ramadan"] {
    --primary-color: #0E4B3A;    
    --accent-color: #D9B46A;      
    --bg-body: #ded8f5;          
    --bg-app: #FBF7EF;           
    --text-main: #1F3A34;        
    --text-muted: #8D8B7A;       
    --gold-gradient: linear-gradient(
        to right,
        #C69D51,
        #E8D3A7,
        #F5EBD8,
        #E8D3A7,
        #C69D51
    );
}

/* HEADER */
#app-root[data-theme="ramadan"] .app-header {
    background: linear-gradient(to bottom, #FBF7EF, #F1E6D4);
    border-bottom-color: var(--accent-color);
    box-shadow: 0 12px 30px rgba(14, 75, 58, 0.18);
    background: #145C32 !important;
}

/* NAV - Aktif kategori */
#app-root[data-theme="ramadan"] #category-list li.active {
    background-color:#145730;
    color: #FBF7EF;
    box-shadow: 0 5px 16px rgba(14, 75, 58, 0.45);
}

/* HOŞGELDİNİZ ekranı */
#app-root[data-theme="ramadan"] .welcome-section {
    background: radial-gradient(circle at top, #FBF7EF, #F7EEDC, #F1E6D4);
}

#app-root[data-theme="ramadan"] .welcome-title {
    color: #145C32 ;
}

#app-root[data-theme="ramadan"] .welcome-text {
    color: #D4AF37;
}

/* MODAL */
#app-root[data-theme="ramadan"] .modal-window {
    background: #FBF7EF;
    border-top: 3px solid #D9B46A;
    box-shadow: 0 -8px 25px rgba(14, 75, 58, 0.25);
}

#app-root[data-theme="ramadan"] .modal-header {
    background: linear-gradient(to bottom, #FBF7EF, #F1E6D4);
    border-bottom: 1px solid #D9B46A;
}

#app-root[data-theme="ramadan"] .modal-title,
#app-root[data-theme="ramadan"] .modal-close {
    color: #0E4B3A !important;
}

/* Kartlar */
#app-root[data-theme="ramadan"] .modal-product-card,
#app-root[data-theme="ramadan"] .product-card {
    background: #FBF7EF;
    border: 1px solid rgba(217, 180, 106, 0.5);
    box-shadow: 0 4px 12px rgba(14, 75, 58, 0.08);
}

#app-root[data-theme="ramadan"] .product-price {
    color: #D9B46A !important;
}

/* Favori butonu */
#app-root[data-theme="ramadan"] .fav-btn {
    background: rgba(255,255,255,0.9);
    color: #0E4B3A;
}

#app-root[data-theme="ramadan"] .fav-btn.active {
    background: #0E4B3A;
    color: #D9B46A;
}