/**
 * Z-Index Sistemi
 *
 * Hiyerarşi (düşükten yükseğe, her seviye 10 aralıklı):
 *   10  → Promotion banner (sayfa içeriği üstü ama her şeyin altı)
 *   20  → Sticky header
 *   25  → Header üstü top banner (header ile aynı flex container içinde, order ile yönetilir)
 *   30  → Dropdown'lar (header user/cart/category dropdown)
 *   40  → Modal overlay (karartılmış arka plan)
 *   50  → Modal/Drawer body (side-cart, mobile menü, search modal, vb.)
 *   60  → Modal içi tooltip/dropdown (modal'ın üstüne)
 *   100 → Cookie banner
 *   110 → Newsletter / exit-intent popup (cookie üstü)
 *   200 → Toast / notification (her şeyin üstünde, kısa süreli)
 *
 * Kural: Yeni element eklerken AÇIK seviyeleri kullan, ara değer (örn 45) ekleme.
 * Sayfa-spesifik CSS bu değişkenleri override etmemeli.
 */

:root {
    --z-promotion-banner: 10;
    --z-header:           20;
    --z-top-banner:       25;
    --z-dropdown:         30;
    --z-modal-overlay:    40;
    --z-modal:            50;
    --z-modal-tooltip:    60;
    --z-cookie:          100;
    --z-popup:           110;
    --z-toast:           200;
}

/* Sayfa elemanları */
#promotion-banner { z-index: var(--z-promotion-banner); }

/* Sticky header */
header[role="banner"],
header.site-header,
body > header {
    z-index: var(--z-header);
}

/* Header üstü top banner (flex sıralama ile yönetilir) */
header .top-banner,
header .text-center.py-3 {
    z-index: var(--z-top-banner);
    position: relative;
}

/* Header dropdown'lar (user menu, kategori, sepet preview) */
.header-dropdown,
.user-menu-dropdown,
.category-dropdown {
    z-index: var(--z-dropdown);
}

/* Modal arkaplan karartması */
#cart-overlay,
#mobile-menu-overlay,
.modal-overlay,
[data-modal-overlay] {
    z-index: var(--z-modal-overlay);
}

/* Modal / Drawer body */
#side-cart,
#mobile-menu,
#search-modal,
#video-modal,
#image-modal,
#cart-loading-overlay,
#remove-cart-item-modal,
#membership-offer-modal,
#cod-verification-modal,
#checkout-loading-overlay,
#address-modal,
#email-change-modal,
#phone-change-modal,
.modal,
[data-modal] {
    z-index: var(--z-modal);
}

/* Modal içi tooltip / popper */
.modal-tooltip,
[data-modal-tooltip] {
    z-index: var(--z-modal-tooltip);
}

/* Cookie banner */
#cookie-consent,
.cookie-banner {
    z-index: var(--z-cookie);
}

/* Newsletter / Exit-intent */
#newsletter-popup,
#exit-intent-popup,
.popup-modal {
    z-index: var(--z-popup);
}

/* Toast / Notification */
.toast,
.notification,
[data-toast] {
    z-index: var(--z-toast);
}