/* ============================================================
   Electro tema — projeye özel kapsamlı katman.
   theme.css'in üzerine projeye özel bileşenler + modernizasyon:
   product card, cart, checkout, category sidebar, mega menu fix.
   ============================================================ */

:root {
    --el-primary: var(--primary, #fed700);
    --el-secondary: var(--secondary, #333e48);
    --el-accent: var(--blue, #0062bd);
    --el-ink: #1b232a;
    --el-muted: #6c757d;
    --el-line: #e6e8ec;
    --el-bg: #f5f7fa;
    --el-success: #16a34a;
}

/* ============================================================
   1) ÜRÜN KARTI — sıfırdan modern e-ticaret kart tasarımı
   ============================================================ */
.product .product-item,
.product-item,
.el-product-card {
    background: #fff;
    border: 1px solid var(--el-line);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: box-shadow .25s, transform .25s, border-color .2s;
    height: 100%;
    display: flex; flex-direction: column;
}
.product .product-item:hover,
.product-item:hover,
.el-product-card:hover {
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.12), 0 4px 12px -4px rgba(15,23,42,.06);
    border-color: #cfd5dc;
    transform: translateY(-2px);
    z-index: 2;
}

/* Görsel alanı */
.product-item__img-wrap,
.el-product-card .el-card-media {
    position: relative;
    background: #fff;
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
    overflow: hidden;
    border-bottom: 1px solid #f1f3f5;
}
.product-item__img-wrap img,
.el-product-card .el-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.el-product-card:hover .el-card-media img,
.product-item:hover .product-item__img-wrap img { transform: scale(1.04); }

/* Badge konteyner — sol üst kolon (YENİ / İNDİRİM / TÜKENDİ) */
.el-product-badges,
.product-item__badges {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    pointer-events: none;
}
.el-product-badges .el-badge,
.product-item__badges .badge,
.product-item__badge {
    display: inline-block;
    font: 700 10.5px/1 'Open Sans', sans-serif;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 8px; border-radius: 2px;
    pointer-events: auto;
}
.el-badge.el-badge--new, .product-item__badge--new { background: var(--el-primary); color: var(--el-secondary); }
.el-badge.el-badge--sale, .product-item__badge--sale { background: #de4437; color: #fff; }
.el-badge.el-badge--out, .product-item__badge--out { background: #6c757d; color: #fff; }
.el-badge.el-badge--hot { background: linear-gradient(135deg,#ff6a00,#ee0979); color: #fff; }

/* Sağ üst quick actions (favori, karşılaştır, hızlı bakış) */
.el-product-actions,
.product-item__actions {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; transform: translateX(8px);
    transition: all .25s;
}
.product-item:hover .el-product-actions,
.el-product-card:hover .el-product-actions,
.product-item:hover .product-item__actions { opacity: 1; transform: translateX(0); }
.el-product-actions .el-act,
.product-item__act {
    width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: #fff; color: var(--el-secondary);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.18);
    transition: all .2s;
    font-size: 15px;
}
.el-product-actions .el-act:hover,
.product-item__act:hover { background: var(--el-primary); color: var(--el-secondary); transform: scale(1.08); }
.el-act.is-active { background: var(--el-primary); color: var(--el-secondary); opacity: 1; }

/* Touch cihazlarda aksiyonlar hep görünsün */
@media (hover: none) {
    .el-product-actions, .product-item__actions { opacity: 1; transform: none; }
}

/* Ürün bilgi alanı */
.product-item__info,
.el-product-card .el-card-body {
    padding: 14px 14px 16px;
    flex: 1;
    display: flex; flex-direction: column;
}
.el-card-brand,
.product-item__brand {
    font: 600 11px/1.2 'Open Sans', sans-serif;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--el-muted);
    margin-bottom: 4px;
}
.el-card-title,
.product-item__title,
.product .product-item .product-item__title a {
    font: 600 14px/1.4 'Open Sans', sans-serif !important;
    color: var(--el-secondary) !important;
    text-decoration: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin: 0 0 8px;
    transition: color .15s;
}
.el-card-title:hover,
.product-item__title a:hover { color: var(--el-accent) !important; }

/* Rating yıldızları */
.el-card-rating,
.product-item__rating {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: #ffa800;
    margin-bottom: 8px;
}
.el-card-rating .el-rating-count { color: var(--el-muted); margin-left: 4px; }

/* Fiyat */
.el-card-prices,
.product-item__prices {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin-top: auto;
}
.el-card-price,
.product-item__price {
    font: 800 18px/1 'Open Sans', sans-serif;
    color: var(--el-secondary);
}
.el-card-price--old,
.product-item__price--old {
    font-size: 13px; color: var(--el-muted);
    text-decoration: line-through;
    font-weight: 400;
}
.el-card-discount {
    background: #fef2f2; color: #dc2626;
    font: 700 11px/1 'Open Sans', sans-serif;
    padding: 3px 6px; border-radius: 3px;
    margin-left: auto;
}

/* Sepete ekle butonu — kart altında inline, kompakt */
.el-card-cta,
.product-item__cta {
    margin-top: 12px;
    display: grid; grid-template-columns: 1fr auto; gap: 6px;
}
.el-card-cta .btn-add-cart,
.product-item__add {
    background: var(--el-secondary); color: #fff; border: 0;
    padding: 10px 14px; border-radius: 4px;
    font: 700 11.5px/1 'Open Sans', sans-serif;
    text-transform: uppercase; letter-spacing: 1px;
    cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.el-card-cta .btn-add-cart:hover,
.product-item__add:hover { background: var(--el-primary); color: var(--el-secondary); }
.el-card-cta .btn-add-cart:disabled,
.btn-add-cart.disabled { opacity: .5; pointer-events: none; }
.el-card-cta-secondary {
    width: 40px; padding: 10px 0; background: #fff; color: var(--el-secondary);
    border: 1px solid var(--el-line); border-radius: 4px;
    cursor: pointer; transition: all .2s;
}
.el-card-cta-secondary:hover { border-color: var(--el-secondary); background: #f8fafc; }

/* Eski "sarı yuvarlak cart" override edip yerine düzgün buton göster */
.product-item .btn-product-add-cart,
.product-item__buttons-wrap .btn-product-add-cart {
    position: static !important;
    width: 100% !important; height: auto !important;
    border-radius: 4px !important;
    background: var(--el-secondary) !important;
    color: #fff !important;
    font: 700 11.5px/1 'Open Sans', sans-serif !important;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 10px 14px !important;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
}
.product-item .btn-product-add-cart i { margin-right: 4px; }

/* Out of stock overlay */
.el-product-card.is-out-of-stock .el-card-media::after,
.product-item.is-out-of-stock .product-item__img-wrap::after {
    content: 'STOKTA YOK';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.78);
    display: grid; place-items: center;
    font: 700 13px/1 'Open Sans', sans-serif;
    color: var(--el-secondary);
    letter-spacing: 2px;
}

/* ============================================================
   2) MEGA MENU "Tüm Kategoriler" — açılma sorunu fix + z-index
   ============================================================ */
/* Anasayfada departments sidebar slider üstünde olmalı */
.products-entry .row,
.home-products-row { position: relative; }
.products-entry .vertical-menu,
.vertical-menu,
.vertical-menu-active {
    position: relative;
    z-index: 5;
}
.products-entry .vertical-menu .vertical-menu-list,
.vertical-menu .vertical-menu-list {
    background: #fff;
    border: 1px solid var(--el-line);
    border-radius: 6px;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.06);
    overflow: hidden;
}

/* HSMegaMenu — hover sırasında dropdown'un görünmesi (CSS-side guarantee) */
.hs-mega-menu.hs-position-right { z-index: 100 !important; }
.u-header .hs-has-mega-menu:hover > .hs-sub-menu,
.u-header .hs-has-mega-menu:hover > .hs-mega-menu,
.u-header .hs-has-sub-menu:hover > .hs-sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
}
.hs-mega-menu, .hs-sub-menu {
    position: absolute; min-width: 220px;
    background: #fff;
    border: 1px solid var(--el-line);
    border-radius: 4px;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.12);
    padding: 8px 0;
    z-index: 100;
}

/* Slider container — z-index 1, mega menu (z-index 100) üstte */
.js-slick-carousel, .slick-slider, .home-slider, .home-banner {
    position: relative;
    z-index: 1 !important;
}

/* Slick aktif iken üst-üste binmesin */
.slick-slider .slick-list { z-index: 1; }
.slick-slider .slick-dots { z-index: 2; }
.slick-slider .slick-prev, .slick-slider .slick-next { z-index: 3; }

/* Vertical menu submenu — hover'da görünür ol */
.vertical-menu .vertical-menu-list li.has-submenu:hover > .vertical-submenu,
.vertical-menu .yamm-content:hover { display: block; }

/* ============================================================
   3) KATEGORİ SAYFASI SOL SIDEBAR — modern filter UI
   ============================================================ */
.el-cat-sidebar { display: flex; flex-direction: column; gap: 12px; }

/* --- Kategori filtresi: MOBİL OFF-CANVAS DRAWER (v2.5.1)
   Desktop'ta (≥992px) normal sol kolon; mobilde varsayılan KAPALI, "Filtrele"
   butonuyla soldan açılan drawer (checkbox-hack — JS gerektirmez, güvenilir). */
.el-catfilter-trigger, .el-catfilter-backdrop, .el-catfilter-head { display: none; }
@media (min-width: 992px) {
    .el-catfilter-trigger, .el-catfilter-backdrop, .el-catfilter-head { display: none !important; }
}
@media (max-width: 991.98px) {
    .el-catfilter-trigger { display: flex !important; align-items: center; justify-content: center; }
    .el-cat-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 86%; max-width: 340px; z-index: 1060;
        background: #fff; padding: 0 14px 24px;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: 2px 0 26px rgba(0,0,0,.18);
    }
    .el-catfilter-checkbox:checked ~ .el-cat-sidebar { transform: translateX(0); }
    .el-catfilter-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.45); z-index: 1059;
        opacity: 0; visibility: hidden; transition: opacity .28s;
    }
    .el-catfilter-checkbox:checked ~ .el-catfilter-backdrop { opacity: 1; visibility: visible; }
    .el-catfilter-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 2; background: #fff;
        padding: 15px 2px 13px; margin-bottom: 8px;
        border-bottom: 1px solid var(--el-line, #e6e8ec);
        font-weight: 700; font-size: 16px; color: var(--el-ink, #1b232a);
    }
    .el-catfilter-close {
        font-size: 28px; line-height: 1; cursor: pointer; margin: 0;
        color: #6b7280; padding: 0 6px;
    }
}
.el-filter-card {
    background: #fff;
    border: 1px solid var(--el-line);
    border-radius: 8px;
    overflow: hidden;
}
.el-filter-head {
    padding: 14px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--el-line);
    font: 700 13px/1.2 'Open Sans', sans-serif;
    color: var(--el-secondary);
    text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
}
.el-filter-head::after {
    content: ''; width: 8px; height: 8px;
    border-right: 2px solid var(--el-secondary);
    border-bottom: 2px solid var(--el-secondary);
    transform: rotate(45deg);
    transition: transform .2s;
}
.el-filter-card.is-collapsed .el-filter-head::after { transform: rotate(-45deg); }
.el-filter-body {
    padding: 14px 16px;
    max-height: 260px;
    overflow-y: auto;
}
.el-filter-card.is-collapsed .el-filter-body { display: none; }

/* Fiyat aralığı slider */
.el-price-range { display: flex; gap: 8px; align-items: center; }
.el-price-range input[type=number] {
    flex: 1; padding: 9px 10px; border: 1px solid var(--el-line); border-radius: 4px;
    font-size: 13px;
}
.el-price-range input:focus { border-color: var(--el-accent); outline: 0; box-shadow: 0 0 0 3px rgba(0,98,189,.15); }

/* Marka/kategori checkbox listesi */
.el-filter-list { list-style: none; margin: 0; padding: 0; }
.el-filter-list li { padding: 6px 0; display: flex; align-items: center; gap: 8px; }
.el-filter-list li label { font-size: 13.5px; color: var(--el-ink); cursor: pointer; flex: 1; margin: 0; }
.el-filter-list li input[type=checkbox],
.el-filter-list li input[type=radio] { accent-color: var(--el-primary); width: 16px; height: 16px; cursor: pointer; }
.el-filter-list li .el-count { color: var(--el-muted); font-size: 12px; }

/* Apply / Clear butonları */
.el-filter-actions { display: flex; gap: 6px; margin-top: 12px; }
.el-filter-actions .btn { flex: 1; padding: 9px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

/* Aktif filtre chip'leri */
.el-active-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
}
.el-filter-chip {
    background: var(--el-primary); color: var(--el-secondary);
    padding: 4px 10px 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
}
.el-filter-chip button { background: none; border: 0; cursor: pointer; color: var(--el-secondary); padding: 0; line-height: 1; opacity: .7; }
.el-filter-chip button:hover { opacity: 1; }

/* ============================================================
   4) SEPET (cart) SAYFASI — sıfırdan modern tasarım
   ============================================================ */
.el-cart-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
@media (max-width: 991px) { .el-cart-wrap { grid-template-columns: 1fr; } }
.el-cart-items {
    background: #fff; border: 1px solid var(--el-line); border-radius: 8px; overflow: hidden;
}
.el-cart-head {
    padding: 14px 18px; background: #f8fafc; border-bottom: 1px solid var(--el-line);
    display: flex; align-items: center; justify-content: space-between;
}
.el-cart-head h1 { font: 700 18px/1.2 'Open Sans', sans-serif; color: var(--el-secondary); margin: 0; }
.el-cart-head .el-cart-count { color: var(--el-muted); font-size: 13px; }
.el-cart-row {
    display: grid; grid-template-columns: 88px 1fr 120px 140px 120px 40px;
    gap: 16px; align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--el-line);
}
.el-cart-row:last-child { border-bottom: 0; }
.el-cart-row__img {
    width: 88px; height: 88px;
    border: 1px solid var(--el-line); border-radius: 6px;
    display: grid; place-items: center;
    background: #fff;
}
.el-cart-row__img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.el-cart-row__title { font: 600 14px/1.4 'Open Sans', sans-serif; color: var(--el-secondary); text-decoration: none; }
.el-cart-row__title:hover { color: var(--el-accent); }
.el-cart-row__variants { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.el-cart-row__variants .el-variant-chip { background: #f1f3f5; color: var(--el-muted); font-size: 11px; padding: 2px 8px; border-radius: 3px; }
.el-cart-row__unit { font: 600 14px/1 'Open Sans', sans-serif; color: var(--el-secondary); }
.el-cart-row__qty { display: inline-flex; align-items: center; border: 1px solid var(--el-line); border-radius: 4px; overflow: hidden; }
.el-cart-row__qty button { background: #f8fafc; border: 0; width: 36px; height: 36px; cursor: pointer; font-size: 16px; color: var(--el-secondary); }
.el-cart-row__qty button:hover { background: var(--el-primary); }
.el-cart-row__qty input { border: 0; width: 50px; text-align: center; font-weight: 700; padding: 0; height: 36px; outline: 0; }
.el-cart-row__qty input::-webkit-inner-spin-button, .el-cart-row__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.el-cart-row__total { font: 800 16px/1 'Open Sans', sans-serif; color: var(--el-secondary); text-align: right; }
.el-cart-row__remove {
    background: none; border: 0; cursor: pointer; color: var(--el-muted); font-size: 18px;
    width: 36px; height: 36px; border-radius: 50%; transition: all .2s;
}
.el-cart-row__remove:hover { background: #fef2f2; color: #dc2626; }

@media (max-width: 768px) {
    .el-cart-row { grid-template-columns: 80px 1fr; grid-template-areas: 'img info' 'img price' 'qty total' 'remove remove'; row-gap: 8px; }
    .el-cart-row__img { grid-area: img; width: 80px; height: 80px; }
    .el-cart-row__info { grid-area: info; }
    .el-cart-row__unit { grid-area: price; font-size: 13px; color: var(--el-muted); }
    .el-cart-row__qty { grid-area: qty; justify-self: start; }
    .el-cart-row__total { grid-area: total; text-align: right; align-self: center; }
    .el-cart-row__remove { grid-area: remove; justify-self: end; }
}

/* Sepet alt aksiyonlar */
.el-cart-footer { padding: 14px 18px; background: #f8fafc; border-top: 1px solid var(--el-line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.el-cart-footer .el-cont-shopping { color: var(--el-accent); text-decoration: none; font-weight: 600; }

/* Sağ özet kartı */
.el-cart-summary {
    background: #fff; border: 1px solid var(--el-line); border-radius: 8px;
    padding: 22px; position: sticky; top: 90px;
    align-self: start;
}
.el-cart-summary h3 {
    font: 700 16px/1 'Open Sans', sans-serif; color: var(--el-secondary);
    margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--el-line);
    text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px;
}
.el-cart-summary h3::before { content: ''; width: 4px; height: 16px; background: var(--el-primary); border-radius: 2px; }
.el-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: var(--el-muted); }
.el-summary-row strong { color: var(--el-secondary); font-weight: 600; }
.el-summary-row.is-discount strong { color: var(--el-success); }
.el-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 6px; margin-top: 6px; border-top: 2px solid var(--el-secondary); font-weight: 700; }
.el-summary-total span { font-size: 14px; color: var(--el-secondary); text-transform: uppercase; letter-spacing: 1px; }
.el-summary-total strong { font: 800 22px/1 'Open Sans', sans-serif; color: var(--el-secondary); }

.el-freeship-bar { background: linear-gradient(135deg, rgba(254,215,0,.14), rgba(254,215,0,.08)); border: 1px solid rgba(254,215,0,.4); border-radius: 6px; padding: 12px 14px; margin: 10px 0 14px; font-size: 13px; color: var(--el-secondary); }
.el-freeship-bar.is-done { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.el-freeship-progress { height: 5px; background: rgba(0,0,0,.08); border-radius: 999px; margin-top: 8px; overflow: hidden; }
.el-freeship-progress > span { display: block; height: 100%; background: var(--el-primary); border-radius: 999px; transition: width .35s; }

.el-coupon-input { display: flex; gap: 6px; margin-top: 8px; }
.el-coupon-input input { flex: 1; padding: 11px 14px; border: 1px solid var(--el-line); border-radius: 4px; font-size: 13.5px; outline: 0; }
.el-coupon-input input:focus { border-color: var(--el-accent); box-shadow: 0 0 0 3px rgba(0,98,189,.12); }
.el-coupon-input button { background: var(--el-secondary); color: #fff; border: 0; padding: 0 18px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.el-coupon-input button:hover { background: #1f2730; }

.el-btn-checkout {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 14px; background: var(--el-primary); color: var(--el-secondary);
    border: 0; border-radius: 4px; font: 700 13.5px/1 'Open Sans', sans-serif;
    text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer;
    margin-top: 14px; transition: all .2s; text-decoration: none;
}
.el-btn-checkout:hover { background: #ffe23a; color: var(--el-secondary); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(254,215,0,.55); text-decoration: none; }

.el-cart-trust { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--el-line); font-size: 12px; color: var(--el-muted); flex-wrap: wrap; }
.el-cart-trust span { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   5) ÖDEME (checkout) SAYFASI — sıfırdan modern
   ============================================================ */
.el-checkout-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
@media (max-width: 991px) { .el-checkout-wrap { grid-template-columns: 1fr; } }

/* Step indicator */
.el-checkout-steps { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.el-checkout-steps li { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--el-muted); list-style: none; }
.el-checkout-steps li .el-step-num {
    width: 32px; height: 32px; border-radius: 50%; background: #e9ecef; color: var(--el-muted);
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
    transition: all .2s; flex-shrink: 0;
}
.el-checkout-steps li.is-active .el-step-num { background: var(--el-primary); color: var(--el-secondary); box-shadow: 0 4px 12px -4px rgba(254,215,0,.5); }
.el-checkout-steps li.is-done .el-step-num { background: var(--el-success); color: #fff; }
.el-checkout-steps li.is-done .el-step-num::before { content: '✓'; }
.el-checkout-steps li.is-done .el-step-num span { display: none; }
.el-checkout-steps li.is-active { color: var(--el-secondary); font-weight: 600; }
.el-checkout-steps li::after { content: ''; flex: 1; height: 2px; background: #e9ecef; margin-left: 6px; }
.el-checkout-steps li:last-child::after { display: none; }
.el-checkout-steps li.is-active::after, .el-checkout-steps li.is-done::after { background: var(--el-primary); }
@media (max-width: 600px) {
    .el-checkout-steps li span:not(.el-step-num) { display: none; }
    .el-checkout-steps li { gap: 4px; }
}

.el-checkout-block {
    background: #fff; border: 1px solid var(--el-line); border-radius: 8px;
    padding: 22px; margin-bottom: 14px;
}
.el-checkout-block .el-block-title {
    font: 700 14px/1 'Open Sans', sans-serif; color: var(--el-secondary);
    margin: 0 0 16px; text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px; border-bottom: 1px solid var(--el-line);
}
.el-checkout-block .el-block-num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--el-primary); color: var(--el-secondary);
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.el-checkout-block input[type=text],
.el-checkout-block input[type=email],
.el-checkout-block input[type=tel],
.el-checkout-block input[type=number],
.el-checkout-block select,
.el-checkout-block textarea,
.el-checkout-block .form-control {
    border: 1px solid var(--el-line) !important; border-radius: 4px !important;
    padding: 11px 14px !important; font-size: 14px !important;
    background: #fff !important; transition: border-color .15s, box-shadow .15s !important;
}
.el-checkout-block input:focus, .el-checkout-block select:focus, .el-checkout-block textarea:focus, .el-checkout-block .form-control:focus {
    border-color: var(--el-accent) !important; box-shadow: 0 0 0 3px rgba(0,98,189,.15) !important; outline: 0 !important;
}
.el-checkout-block .form-label, .el-checkout-block label { font: 600 12.5px/1 'Open Sans', sans-serif; color: var(--el-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: inline-block; }

.el-pay-option {
    border: 1.5px solid var(--el-line); border-radius: 6px;
    padding: 14px 16px; margin-bottom: 8px;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 12px;
}
.el-pay-option:hover { border-color: rgba(254,215,0,.6); background: rgba(254,215,0,.04); }
.el-pay-option:has(input:checked),
.el-pay-option.is-selected { border-color: var(--el-primary); background: rgba(254,215,0,.08); }
.el-pay-option input[type=radio] { accent-color: var(--el-primary); margin: 0; }
.el-pay-option strong { font: 700 14px/1.2 'Open Sans', sans-serif; color: var(--el-secondary); }
.el-pay-option small { color: var(--el-muted); display: block; margin-top: 2px; }

/* Sağ taraf sipariş özeti (cart summary class'larını paylaş) */

/* ============================================================
   6) FOOTER TRUST + PAYMENTS — Electro için
   ============================================================ */
.el-trust-row {
    background: #f8fafc;
    border-top: 1px solid var(--el-line);
    border-bottom: 1px solid var(--el-line);
    padding: 22px 0;
}
.el-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    max-width: 1200px; margin: 0 auto; padding: 0 16px;
}
.el-trust-item {
    display: flex; align-items: center; gap: 12px; font-size: 13px;
}
.el-trust-item .el-trust-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(254,215,0,.16); color: var(--el-secondary);
    display: grid; place-items: center; font-size: 22px; flex-shrink: 0;
}
.el-trust-item strong { display: block; font-weight: 700; color: var(--el-secondary); font-size: 13.5px; }
.el-trust-item small { display: block; color: var(--el-muted); font-size: 12px; margin-top: 1px; }
@media (max-width: 991px) { .el-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .el-trust-grid { grid-template-columns: 1fr; } }

.el-payments { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.el-payments .el-pay {
    background: #fff; border: 1px solid var(--el-line); border-radius: 4px;
    padding: 4px 10px; min-width: 48px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 10.5px/1 'Open Sans', sans-serif; letter-spacing: .5px; color: var(--el-secondary);
}

/* ============================================================
   7) MOBILE ALT NAVIGASYON
   ============================================================ */
.el-mbnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; background: #fff; border-top: 1px solid #e6e6e6;
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.el-mbnav a { flex: 1; text-align: center; padding: 7px 2px 6px; color: #767676; font-size: 11px; text-decoration: none; position: relative; }
.el-mbnav a i { display: block; font-size: 20px; margin-bottom: 2px; line-height: 1; }
.el-mbnav a.active { color: var(--el-secondary); }
.el-mbnav a.active i { color: var(--el-primary); }
.el-mbnav-badge { position: absolute; top: 2px; left: 50%; margin-left: 4px; background: var(--el-primary); color: var(--el-secondary); font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; font-size: 10px; line-height: 16px; }
@media (max-width: 1199.98px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }

/* ============================================================
   8) KARSILASTIRMA + TOAST
   ============================================================ */
.el-compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; background: var(--el-secondary); color: #fff; transform: translateY(110%); transition: transform .25s ease; display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.el-compare-bar.show { transform: translateY(0); }
@media (max-width: 1199.98px) { .el-compare-bar { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }
.el-compare-count { font-weight: 700; white-space: nowrap; }
.el-compare-items { flex: 1; display: flex; gap: 8px; overflow-x: auto; }
.el-compare-chip { background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 14px; font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.el-compare-chip i { cursor: pointer; font-style: normal; font-weight: 700; opacity: .8; }
.el-compare-actions { display: flex; gap: 8px; flex-shrink: 0; }

.el-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px); background: var(--el-secondary); color: #fff; padding: 12px 22px; border-radius: 4px; font-size: 14px; z-index: 1080; opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.el-toast.show { opacity: 1; transform: translate(-50%, 0); }
.el-toast--error { background: #de4437; }
@media (max-width: 1199.98px) { .el-toast { bottom: 70px; } }

/* ============================================================
   9) HESAP + İÇERİK SAYFALARI
   ============================================================ */
.list-group-item-action.active { color: var(--el-secondary); font-weight: 700; background: #fffbe6; }
.breadcrumb .breadcrumb-item.active { color: #767676; }
.el-content img { max-width: 100%; height: auto; border-radius: 4px; }
.el-content h2 { font-size: 22px; font-weight: 700; margin: 1.4rem 0 .8rem; color: var(--el-secondary); }
.el-content h3 { font-size: 18px; font-weight: 700; margin: 1.2rem 0 .6rem; color: var(--el-secondary); }
.el-content p { line-height: 1.8; margin-bottom: 1rem; }
.el-content ul, .el-content ol { margin-bottom: 1rem; padding-left: 1.4rem; }
.el-content a { color: var(--el-accent); }
.el-content table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.el-content table td, .el-content table th { border: 1px solid var(--el-line); padding: 8px 12px; }

/* ============================================================
   10) PRODUCT DETAIL — galeri zoom, sticky cta
   ============================================================ */
.el-pdp-gallery { background: #fff; border: 1px solid var(--el-line); border-radius: 8px; overflow: hidden; }
.el-pdp-gallery .el-pdp-main { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; padding: 24px; }
.el-pdp-gallery .el-pdp-main img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .3s; }
.el-pdp-gallery .el-pdp-main img:hover { transform: scale(1.02); }
.el-pdp-thumbs { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--el-line); overflow-x: auto; }
.el-pdp-thumb { width: 72px; height: 72px; flex: 0 0 72px; border: 2px solid var(--el-line); border-radius: 4px; cursor: pointer; transition: border-color .15s; display: grid; place-items: center; background: #fff; }
.el-pdp-thumb img { max-width: 86%; max-height: 86%; object-fit: contain; }
.el-pdp-thumb.is-active { border-color: var(--el-primary); }

.el-pdp-info { display: flex; flex-direction: column; gap: 14px; }
.el-pdp-brand { font: 600 11px/1 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; color: var(--el-accent); }
.el-pdp-title { font: 700 24px/1.3 'Open Sans', sans-serif; color: var(--el-secondary); margin: 0; }
.el-pdp-rating-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--el-muted); }
.el-pdp-rating-stars { color: #ffa800; font-size: 16px; }
.el-pdp-prices { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 16px; background: #f8fafc; border-radius: 6px; }
.el-pdp-prices .el-pdp-price { font: 800 28px/1 'Open Sans', sans-serif; color: var(--el-secondary); }
.el-pdp-prices .el-pdp-price-old { color: var(--el-muted); text-decoration: line-through; font-size: 16px; }
.el-pdp-prices .el-pdp-discount-badge { background: #dc2626; color: #fff; padding: 4px 10px; border-radius: 3px; font-size: 12px; font-weight: 700; margin-left: auto; }
.el-pdp-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.el-pdp-stock.in-stock { color: var(--el-success); }
.el-pdp-stock.out-of-stock { color: #dc2626; }
.el-pdp-features { background: #f8fafc; border-left: 3px solid var(--el-primary); padding: 14px 16px; border-radius: 0 4px 4px 0; }
.el-pdp-features ul { margin: 0; padding-left: 18px; }
.el-pdp-features li { font-size: 13.5px; line-height: 1.6; color: var(--el-secondary); }

.el-pdp-variants { display: flex; flex-direction: column; gap: 10px; }
.el-pdp-variant-group small { font: 600 12px/1 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--el-muted); margin-bottom: 4px; display: block; }
.el-pdp-variant-options { display: flex; gap: 6px; flex-wrap: wrap; }
.el-pdp-variant-option { padding: 8px 14px; border: 1.5px solid var(--el-line); border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; background: #fff; transition: all .15s; }
.el-pdp-variant-option:hover { border-color: var(--el-secondary); }
.el-pdp-variant-option.is-selected { border-color: var(--el-primary); background: rgba(254,215,0,.12); color: var(--el-secondary); }
.el-pdp-variant-option.is-disabled { opacity: .4; pointer-events: none; text-decoration: line-through; }

.el-pdp-cta-row { display: flex; gap: 8px; align-items: stretch; }
.el-pdp-cta-row .el-pdp-qty { display: inline-flex; align-items: center; border: 1px solid var(--el-line); border-radius: 4px; overflow: hidden; }
.el-pdp-cta-row .el-pdp-qty button { background: #f8fafc; border: 0; width: 44px; height: 48px; font-size: 18px; cursor: pointer; }
.el-pdp-cta-row .el-pdp-qty input { border: 0; width: 56px; text-align: center; font-weight: 700; font-size: 16px; height: 48px; outline: 0; }
.el-pdp-cta-row .el-pdp-add-cart { flex: 1; padding: 14px 24px; background: var(--el-primary); color: var(--el-secondary); border: 0; border-radius: 4px; font: 800 13px/1 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.el-pdp-cta-row .el-pdp-add-cart:hover { background: #ffe23a; transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(254,215,0,.55); }
.el-pdp-cta-row .el-pdp-wishlist { width: 48px; padding: 0; background: #fff; border: 1px solid var(--el-line); border-radius: 4px; font-size: 18px; color: var(--el-secondary); cursor: pointer; }
.el-pdp-cta-row .el-pdp-wishlist:hover { border-color: #dc2626; color: #dc2626; }

.el-pdp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--el-line); }
.el-pdp-meta-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.el-pdp-meta-item i { color: var(--el-primary); font-size: 22px; margin-top: 2px; }
.el-pdp-meta-item strong { display: block; color: var(--el-secondary); font-weight: 700; font-size: 13px; }
.el-pdp-meta-item small { color: var(--el-muted); font-size: 12px; }

/* PDP Tabs */
.el-pdp-tabs { background: #fff; border: 1px solid var(--el-line); border-radius: 8px; overflow: hidden; margin-top: 24px; }
.el-pdp-tabs nav { display: flex; border-bottom: 1px solid var(--el-line); overflow-x: auto; }
.el-pdp-tabs nav a { padding: 14px 22px; font: 700 13px/1 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--el-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.el-pdp-tabs nav a:hover { color: var(--el-secondary); }
.el-pdp-tabs nav a.is-active { color: var(--el-secondary); border-bottom-color: var(--el-primary); }
.el-pdp-tabs .el-pdp-tab-body { padding: 24px; }

/* Sticky Add to Cart bar — sayfa altında, ürün detayda görsel ekrandan çıkınca */
.el-pdp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1029; background: #fff; border-top: 1px solid var(--el-line); padding: 10px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.08); display: none; align-items: center; gap: 14px; }
.el-pdp-sticky-cta.show { display: flex; }
.el-pdp-sticky-cta .el-pdp-sticky-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.el-pdp-sticky-cta .el-pdp-sticky-info img { width: 44px; height: 44px; object-fit: contain; }
.el-pdp-sticky-cta .el-pdp-sticky-info strong { display: block; font-size: 13.5px; color: var(--el-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-pdp-sticky-cta .el-pdp-sticky-info span { display: block; font-weight: 800; color: var(--el-secondary); font-size: 15px; }
.el-pdp-sticky-cta .el-pdp-add-cart { padding: 11px 22px; font-size: 12px; }
@media (max-width: 1199.98px) { .el-pdp-sticky-cta { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }

/* ============================================================
   11) Reduced motion & accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   12) UX: touch targets, focus rings, form errors (v2.3.2)
   ============================================================ */
@media (pointer: coarse), (max-width: 992px) {
    .btn, button.btn, a.btn { min-height: 44px; }
    .form-control, input[type=text], input[type=email], input[type=tel],
    input[type=number], input[type=password], input[type=search],
    select, textarea { min-height: 44px; }
    .btn-icon, .icon-btn { min-height: 44px; min-width: 44px; }
}
/* iOS/Android odak-zoom'unu KAPAT: tarayıcı, font-size < 16px olan bir alana
   odaklanınca otomatik yakınlaştırır ("input'a basınca zoom"). TÜM metin
   alanlarını mobilde 16px'e sabitlersek bu auto-zoom hiç tetiklenmez
   (pinch-zoom erişilebilirliği korunur — viewport'a dokunmuyoruz). */
@media (max-width: 1024px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select, textarea, .form-control, .custom-select {
        font-size: 16px !important;
    }
}
*:focus-visible { outline: 2px solid var(--el-primary); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, a:focus-visible { outline-offset: 3px; }

/* Form error states */
.form-control.is-invalid, .form-control[aria-invalid="true"],
input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: #dc2626 !important; background: #fef2f2;
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important; }
.invalid-feedback, .form-error {
    display: block; color: #dc2626; font-size: 12.5px;
    margin-top: 4px; font-weight: 500;
}
.invalid-feedback::before { content: '\26A0 '; margin-right: 2px; }
.form-control.is-valid { border-color: #16a34a !important; }

/* ============================================================
   13) Account/Auth/Contact tema renkleriyle uyumlu
   ============================================================ */
.account-wrap .list-group-item-action {
    border-color: var(--el-line); padding: 12px 16px;
    transition: all .15s;
}
.account-wrap .list-group-item-action:hover {
    background: rgba(254,215,0,.08); color: var(--el-secondary);
    padding-left: 22px;
}
.account-wrap .list-group-item-action.active {
    background: var(--el-primary); color: var(--el-secondary); font-weight: 700;
    border-color: var(--el-primary);
}

.auth-card {
    max-width: 480px; margin: 40px auto;
    background: #fff; border: 1px solid var(--el-line); border-radius: 8px;
    padding: 32px;
    box-shadow: 0 12px 32px -16px rgba(0,0,0,.1);
}
.auth-card h1 { font: 800 24px/1.2 'Open Sans', sans-serif; color: var(--el-secondary); margin: 0 0 8px; }
.auth-card .auth-sub { color: var(--el-muted); margin: 0 0 24px; font-size: 14px; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card .form-label { font: 600 12.5px/1 'Open Sans', sans-serif; color: var(--el-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: inline-block; }
.auth-card .auth-actions { margin-top: 22px; }
.auth-card .auth-actions .btn-primary {
    background: var(--el-primary); color: var(--el-secondary); border: 0;
    width: 100%; padding: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; border-radius: 4px;
}
.auth-card .auth-actions .btn-primary:hover { background: #ffe23a; }
.auth-card .auth-footer { text-align: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--el-line); font-size: 13px; color: var(--el-muted); }
.auth-card .auth-footer a { color: var(--el-accent); font-weight: 600; }

/* Contact form */
.contact-card {
    background: #fff; border: 1px solid var(--el-line); border-radius: 8px;
    padding: 24px;
}
.contact-info {
    background: linear-gradient(135deg, rgba(254,215,0,.08), rgba(254,215,0,.02));
    border: 1px solid rgba(254,215,0,.25);
    border-radius: 8px; padding: 22px;
}
.contact-info .ci-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(254,215,0,.18); }
.contact-info .ci-item:last-child { border-bottom: 0; }
.contact-info .ci-icon {
    width: 40px; height: 40px; flex-shrink: 0; background: var(--el-secondary); color: var(--el-primary);
    border-radius: 50%; display: grid; place-items: center; font-size: 18px;
}
.contact-info .ci-label { font: 700 11px/1 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: var(--el-muted); margin-bottom: 2px; }
.contact-info .ci-value { font: 600 14px/1.4 'Open Sans', sans-serif; color: var(--el-secondary); }

/* Error pages (404, 419, 500, 503) */
.error-page {
    text-align: center; padding: 80px 20px;
    max-width: 640px; margin: 0 auto;
}
.error-page .err-code {
    font: 800 120px/1 'Open Sans', sans-serif;
    color: var(--el-primary); text-shadow: 4px 4px 0 var(--el-secondary);
    letter-spacing: -.04em; margin: 0;
}
.error-page h1 { font: 700 28px/1.2 'Open Sans', sans-serif; color: var(--el-secondary); margin: 16px 0 8px; }
.error-page p { color: var(--el-muted); font-size: 15px; margin: 0 0 28px; }
.error-page .err-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.error-page .err-actions .btn { min-width: 160px; }
@media (max-width: 600px) {
    .error-page { padding: 60px 16px; }
    .error-page .err-code { font-size: 84px; }
    .error-page h1 { font-size: 22px; }
}

/* Image loading optimize */
img { image-rendering: auto; }
img[loading="lazy"] { transition: opacity .25s; }


/* ============================================================
   v2.3.4 — SATIŞ DEMO READY: cihaz bazlı kapsamlı UX fixes
   ============================================================ */

/* Hero başlık responsive clamp — Bootstrap font-size-50 override */
.font-size-50, .home-section h1, .hero h1, .slick-slide h1 {
    font-size: clamp(22px, 5vw, 50px) !important;
    line-height: 1.15;
}
.font-size-30, .home-section h2, .section-title {
    font-size: clamp(20px, 3.5vw, 30px) !important;
}
.font-size-22 { font-size: clamp(18px, 2.5vw, 22px) !important; }

/* Hero side banners — 1024-1200px arası görünür yap */
@media (min-width: 992px) and (max-width: 1199px) {
    .home-section .hero-side-banners,
    .home-section .col-xl-3.d-none.d-xl-block {
        display: block !important;
    }
}

/* Mobile hero slider min-height clamp */
@media (max-width: 768px) {
    .js-slick-carousel .slick-slide,
    .home-section .slick-list { min-height: 280px !important; }
}
@media (max-width: 480px) {
    .js-slick-carousel .slick-slide,
    .home-section .slick-list { min-height: 220px !important; }
}

/* Account sidebar mobile drawer */
@media (max-width: 991px) {
    .account-wrap .account-sidebar,
    .account-wrap aside.col-lg-3 {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(320px, 90vw); z-index: 1100;
        background: #fff; transform: translateX(100%);
        transition: transform .35s cubic-bezier(.2,.86,.32,1.04);
        overflow-y: auto; padding: 24px 16px;
        box-shadow: -16px 0 32px -8px rgba(0,0,0,.18);
    }
    .account-wrap .account-sidebar.is-open,
    .account-wrap aside.col-lg-3.is-open { transform: translateX(0); }
    .account-mobile-trigger {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--el-primary); color: var(--el-secondary);
        padding: 11px 18px; border: 0; border-radius: 4px;
        font-weight: 700; font-size: 13px; cursor: pointer;
        margin-bottom: 16px; min-height: 44px;
    }
    body.account-drawer-open { overflow: hidden; }
    body.account-drawer-open::after {
        content: ''; position: fixed; inset: 0;
        background: rgba(0,0,0,.4); z-index: 1090;
    }
}
@media (min-width: 992px) { .account-mobile-trigger { display: none; } }

/* Empty state — daha çekici */
.empty-state, .el-empty-state {
    text-align: center; padding: 60px 24px; max-width: 480px; margin: 0 auto;
}
.empty-state .ec, .el-empty-state .ec {
    font-size: 72px; color: var(--el-muted);
    margin-bottom: 18px; opacity: .35; display: block;
}
.empty-state h2, .el-empty-state h2 {
    font: 700 22px/1.2 'Open Sans', sans-serif;
    color: var(--el-secondary); margin: 0 0 8px;
}
.empty-state p, .el-empty-state p {
    color: var(--el-muted); font-size: 14px;
    margin: 0 0 24px; line-height: 1.6;
}

/* Mobile cart row — Electro grid responsive zaten var */

/* Pagination active item — kare, makul boyut */
.pagination .page-item.active .page-link {
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--el-secondary) !important;
    border-color: var(--el-secondary) !important; color: #fff !important;
}
.pagination .page-link { min-width: 38px; height: 38px; }

/* Safe-area mobile sticky bars */
.cart-mobile-bar, .el-pdp-sticky-cta, .co-mobile-submit, .el-mbnav {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Trust bar mobile — 4→2 sıkışmasın */
@media (max-width: 768px) {
    .el-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    .el-trust-item .el-trust-icon { width: 38px; height: 38px; font-size: 18px; }
    .el-trust-item strong { font-size: 12px; }
    .el-trust-item small { font-size: 11px; }
}
@media (max-width: 420px) {
    .el-trust-grid { grid-template-columns: 1fr !important; }
}

/* Form input + select min-height 44 */
.form-control, .custom-select {
    min-height: 44px;
}

/* 1920px+ ferahlık */
@media (min-width: 1600px) {
    .container { max-width: 1480px; }
}

/* Hero search/banner: dark overlay text contrast */
.hero-overlay, .slick-slide .overlay {
    background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.18));
}

/* Compare bar — z-index temizle (mobile alt nav ile çakışma) */
.el-compare-bar { z-index: 1025 !important; }
/* MOBİL: compare bar bottom menünün TAM üstünde dursun (iOS safe-area dahil),
   tek satır kompakt kalsın → arkaya kaçma / "yarı yarıya" / stil bozulması biter. */
@media (max-width: 1199.98px) {
    .el-compare-bar {
        bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        flex-wrap: nowrap !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }
    .el-compare-bar .el-compare-count { font-size: 12px; flex: 0 0 auto; }
    .el-compare-bar .el-compare-items { gap: 6px; }
    .el-compare-bar .el-compare-chip { font-size: 11px; padding: 3px 8px; }
    .el-compare-bar .el-compare-actions { gap: 6px; flex: 0 0 auto; }
    .el-compare-bar .el-compare-actions .btn { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
}

/* ============================================================
   v2.3.5 — KRİTİK FIXLER: mega menu hover, ürün kart override
   ============================================================ */

/* Mega/Sub menu hover ile DAİMA aç (HSMegaMenu plugin başarısız olsa bile) */
.u-header__nav-item.hs-has-sub-menu { position: relative; }
.u-header__nav-item.hs-has-sub-menu > .hs-sub-menu,
.u-header__nav-item.hs-has-sub-menu > .u-header__sub-menu {
    position: absolute; top: 100%; left: 0;
    background: #fff;
    border: 1px solid var(--el-line);
    border-radius: 4px;
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.16);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    min-width: 220px;
    z-index: 1050;
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}
.u-header__nav-item.hs-has-sub-menu:hover > .hs-sub-menu,
.u-header__nav-item.hs-has-sub-menu:hover > .u-header__sub-menu,
.u-header__nav-item.hs-has-sub-menu:focus-within > .hs-sub-menu,
.u-header__nav-item.hs-has-sub-menu:focus-within > .u-header__sub-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.u-header__sub-menu-nav-item { list-style: none; }
.u-header__sub-menu-nav-link {
    display: block;
    padding: 8px 18px !important;
    color: var(--el-secondary) !important;
    font-size: 13.5px;
    text-decoration: none !important;
    transition: all .15s;
}
.u-header__sub-menu-nav-link:hover {
    background: rgba(254,215,0,.12);
    color: var(--el-secondary) !important;
    padding-left: 24px !important;
}

/* Mega menu icon rotation */
.u-header__nav-item.hs-has-sub-menu:hover .u-header__nav-link-icon { transform: rotate(180deg); }
.u-header__nav-link-icon { transition: transform .2s; display: inline-block; }

/* ============================================================
   ÜRÜN KARTI ESKİ YAPI OVERRIDE (Multikart-Electro çakışması)
   Eski theme.css buttons-wrap, hover-buttons absolute → KALDIR
   ============================================================ */
/* Eski sarı yuvarlak "btn-add-cart" circle ve absolute butonları SİL */
.product-item .product-item__buttons-wrap,
.product-item .product-item__add-cart,
.product-item__btn-quick-view,
.product-item__btn-wishlist,
.product-item__btn-compare {
    display: none !important;
}

/* Eski multikart "ribbon" (Yeni/İndirim) tilted ribbon → simple flat badge */
.product-item .ribbon,
.product-item .product-flag,
.product-item .ribbon-1 {
    position: absolute; top: 10px; left: 10px;
    background: var(--el-primary); color: var(--el-secondary);
    font: 700 10.5px/1 'Open Sans', sans-serif;
    text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 8px; border-radius: 2px;
    transform: none !important;
    z-index: 3;
}
.product-item .ribbon span,
.product-item .ribbon-1 span {
    background: transparent !important; padding: 0 !important;
    transform: none !important; border: 0 !important;
}
/* Yan dikey siyah bantları temizle */
.product-item .product-item__addons,
.product-item .product-action-side,
.product-item .product-icons,
.product-item .product-thumb-action,
.product-item__overlay {
    display: none !important;
}

/* "Cart-info" hover overlay (alttan yükselen butonlar) - yeni el-card-cta'ya yer ver */
.basic-product .cart-info,
.product-item .cart-info {
    display: none !important;
}

/* Anasayfa carousel & kategori grid'inde ürün kartı genel temizlik */
.products-section .product-item,
.products .product-item {
    box-shadow: none;
}
.product-item:hover {
    box-shadow: 0 12px 32px -8px rgba(15,23,42,.12) !important;
}

/* ============================================================
   v2.3.6 — GERÇEK KÖK FIXLER (theme.css override)
   ============================================================ */

/* KÖK SORUN 1: .product-item::after dikey ayırıcı çizgi (theme.css:35986) */
.product-item::after,
.product-item__card::after,
.product-item:nth-child(even)::after,
.product-item:nth-child(odd)::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}
.product-item {
    border-bottom: 0 !important;
    border: 0;
}

/* KÖK SORUN 2: .btn-add-cart theme.css daire (33784) — yeni el-card-cta override */
.el-card-cta .btn-add-cart,
.el-product-card .btn-add-cart,
.product-item__cta .btn-add-cart {
    width: auto !important;
    height: auto !important;
    border-radius: 4px !important;
    background: var(--el-secondary) !important;
    color: #fff !important;
    padding: 10px 14px !important;
    font: 700 11.5px/1 'Open Sans', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    transition: all .2s;
}
.el-card-cta .btn-add-cart:hover,
.el-product-card .btn-add-cart:hover {
    background: var(--el-primary) !important;
    color: var(--el-secondary) !important;
}
.el-card-cta .btn-add-cart:disabled {
    opacity: .5; pointer-events: none;
    background: #e6e6e6 !important;
    color: #999 !important;
}

/* Eski .btn-product-add-cart fully kaldır */
.product-item .btn-product-add-cart,
.product-item__buttons-wrap {
    display: none !important;
}

/* el-card-cta-secondary daire (mobile favori) */
.el-card-cta .el-card-cta-secondary {
    width: 40px !important; height: auto !important;
    min-height: 40px;
    border-radius: 4px !important;
    background: #fff !important;
    color: var(--el-secondary) !important;
    border: 1px solid var(--el-line) !important;
}

/* el-product-card render bağımsız çalışsın */
.product-item .el-product-card {
    margin-bottom: 16px;
}

/* ============================================================
   v2.3.7 — KÖK FIXLER: ürün ızgarası ferahlık, mega menü default
   gizli, slider çakışması
   ============================================================ */

/* ÜRÜN IZGARASI — "dip dibe" sıkışıklık fix.
   .product-item hem kolon hem kart border'ı alıyordu (çift border + no-gutters
   => bitişik). Kolonu sade bırak, görsel kart sadece .el-product-card'da. */
.products-group { margin-left: -10px !important; margin-right: -10px !important; }
.products-group > .product-item {
    padding: 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
.products-group > .product-item:hover {
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent !important;
}
.products-group > .product-item .el-product-card { margin-bottom: 0; height: 100%; }

/* MEGA MENÜ — varsayılan GİZLİ (display tabanlı; HSMegaMenu JS de display
   ile aç/kapa yaptığı için çakışmaz). Init çalışmadan önce paneller açık
   kalıp slider'ı örtüyordu; default display:none bunu engeller.
   JS yüklenince inline display:block ile açar (inline > stylesheet). */
.js-mega-menu .hs-mega-menu,
.js-mega-menu .hs-sub-menu,
.hs-mega-menu.u-header__sub-menu,
.hs-sub-menu.u-header__sub-menu {
    display: none;
}
/* JS yoksa / yüklenmeden: desktop hover ile aç (fallback).
   hs.megamenu.css default'u display:none + visibility:hidden veriyor;
   ikisini de geri açmamız gerekiyor (sadece display yetmez). */
@media (min-width: 1200px) {
    .hs-has-mega-menu:hover > .hs-mega-menu,
    .hs-has-sub-menu:hover > .hs-sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* SLIDER — hero metni departman menüsünün altında kalmasın (kullanıcı: "sağa çek").
   Anasayfada slider'ı net tut; mega menü panelleri (z-index 100) üstte. */
.js-slick-carousel, .slick-slider { position: relative; z-index: 1; }
.js-slide .row { position: relative; z-index: 2; }
@media (min-width: 1200px) {
    /* hero metin kolonu biraz nefes alsın */
    .js-slide .row > .col-md-6 { padding-left: 12px; }
}

/* ============================================================
   v2.3.8 — ELECTRO KÖK FIXLER (hesap sidebar+mobil accordion,
   floating butonlar, sepet görseli, ödeme sidebar, slider overlay)
   ============================================================ */

/* ---- 1) HESAP SOL SIDEBAR — sıfırdan temiz + mobil accordion ---- */
.el-account-sidebar .card { border: 1px solid var(--el-line); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px -8px rgba(15,23,42,.08); }
.el-account-sidebar .card-header.bg-primary { background: var(--el-secondary) !important; border: 0; }
.el-account-sidebar .list-group,
.el-account-sidebar .list-group-flush { border-radius: 0; }
.el-account-sidebar .list-group > li { list-style: none; }
.el-account-sidebar .list-group-item-action {
    display: flex !important; align-items: center;
    padding: 12px 18px !important;
    color: var(--el-ink) !important;
    border: 0 !important; border-bottom: 1px solid var(--el-line) !important;
    font-size: 14px !important; background: #fff !important;
    transition: background .15s, color .15s, padding .15s; text-decoration: none;
}
.el-account-sidebar .list-group > li:last-child .list-group-item-action { border-bottom: 0 !important; }
.el-account-sidebar .list-group-item-action i { margin-right: 10px; font-size: 17px; flex-shrink: 0; }
.el-account-sidebar .list-group-item-action:hover {
    background: var(--el-bg) !important; color: var(--el-accent) !important; padding-left: 22px !important;
}
.el-account-sidebar .list-group-item-action.active {
    background: var(--el-primary) !important; color: #1b232a !important;
    font-weight: 700 !important; box-shadow: inset 3px 0 0 var(--el-secondary);
}
.el-account-sidebar .list-group-item-action.text-danger { color: #dc3545 !important; }
.el-account-sidebar .list-group-item-action.text-danger:hover { background: #fdeaea !important; color: #b3261e !important; }
/* mobil accordion (checkbox-hack — güvenilir; <details> Chrome'da kapalı
   içeriği display:block ile açtırmıyor). Desktop'ta toggle gizli, kart hep açık. */
.el-account-sidebar .el-acc-caret { margin-left: auto; transition: transform .2s; }
.el-account-sidebar .el-acc-summary { display: none; }
@media (min-width: 992px) {
    .el-account-sidebar > .card { display: block !important; }
}
@media (max-width: 991px) {
    .el-account-sidebar .el-acc-summary {
        display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
        padding: 13px 16px; margin-bottom: 12px;
        background: var(--el-secondary); color: #fff;
        border-radius: 8px; font-weight: 700; font-size: 15px;
    }
    .el-account-sidebar .el-acc-summary i:first-child { font-size: 18px; }
    .el-account-sidebar > .card { display: none; }
    .el-account-sidebar .el-acc-checkbox:checked ~ .card { display: block; }
    .el-account-sidebar .el-acc-checkbox:checked ~ .el-acc-summary .el-acc-caret { transform: rotate(180deg); }
}

/* ---- 2) FLOATING BUTONLAR — çakışma çöz ---- */
.u-go-to { bottom: 88px !important; right: 18px !important; z-index: 1032 !important; }
/* Yumuşak kayma — compare bar açılıp kapanınca butonlar akıcı yer değiştirir */
#liveChatWidget, #aiBot, .u-go-to { transition: bottom .25s ease; }
@media (max-width: 1199px) {
    /* el-mbnav (~58px) üstüne diz */
    #liveChatWidget { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
    #aiBot { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
    .u-go-to { bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; }
}

/* ---- 2b) KARŞILAŞTIRMA ÇUBUĞU ↔ FLOATING BUTON KOORDİNASYONU ----
   Compare bar görünürken (.el-compare-bar.show) canlı destek / AI / yukarı-çık
   butonları çubuğun ÜSTÜNE çıksın; mobil alt menü + çubuk + butonlar net dizilsin.
   (:has() electro'da zaten kullanılıyor — modern tarayıcı.) */
body:has(.el-compare-bar.show) #liveChatWidget,
body:has(.el-compare-bar.show) #aiBot { bottom: 80px !important; }
body:has(.el-compare-bar.show) .u-go-to { bottom: 148px !important; }
@media (max-width: 1199px) {
    /* mobilde compare bar el-mbnav üstünde (bottom:58px, ~56px) → butonlar onun da üstüne */
    body:has(.el-compare-bar.show) #liveChatWidget,
    body:has(.el-compare-bar.show) #aiBot { bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important; }
    body:has(.el-compare-bar.show) .u-go-to { bottom: calc(194px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- 3) SEPET ÜRÜN GÖRSELİ — taşma fix ---- */
.el-cart-row__img { overflow: hidden; flex: 0 0 auto; }
.el-cart-row__img img {
    width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    object-fit: contain !important;
}

/* ---- 4) ÖDEME SAĞ SIDEBAR — minmax(0,..) ile taşma/düşme önle ---- */
.el-checkout-wrap { grid-template-columns: minmax(0, 1fr) 360px !important; align-items: start !important; }
@media (max-width: 1199px) { .el-checkout-wrap { grid-template-columns: 1fr !important; } }
.checkout-summary { position: sticky; top: 90px; }
@media (max-width: 1199px) { .checkout-summary { position: static !important; } }

/* ---- 5) ANASAYFA DİKEY DEPARTMAN MENÜSÜ (v2.5.3 KÖK FIX — slider regresyonu) ----
   REGRESYON: v2.5.1'de `#basicsCollapseOne.vertical-menu{position:relative}` eklemiştim;
   bu theme.css'teki `.vertical-menu{position:absolute;top:100%}` overlay davranışını
   EZDİ → menü akışa girip her zaman açık tam-yükseklik liste header'ı uzattı →
   ANASAYFA SLIDER'I AŞAĞI İTTİ ("slider ayrı yere gitti").
   ÇÖZÜM: theme'in absolute overlay'ine geri dön. Liste VARSAYILAN KAPALI; "Tüm
   Kategoriler" üzerine gelince (veya tıkla→.show) açılır ve içeriğin ÜSTÜNE overlay
   olarak iner — slider'ı ne iter ne de kalıcı kapatır (klasik Electro dropdown).
   Flyout (alt mega-menü) sağa açılır. */
@media (min-width: 1200px) {
    #basicsAccordion { position: relative; z-index: 1001; }
    #basicsAccordion .card { overflow: visible; }
    /* Liste: absolute overlay, kapalı başlar, slider'ı İTMEZ */
    #basicsCollapseOne.vertical-menu {
        position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
        display: none; background: #fff;
        border: 1px solid var(--el-line, #e6e8ec); border-top: 0;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 18px 40px -14px rgba(15,23,42,.28);
        max-height: none; overflow: visible;
    }
    /* "Tüm Kategoriler" üzerine gelince ya da tıklayınca (.show) aç */
    #basicsAccordion:hover #basicsCollapseOne.vertical-menu,
    #basicsCollapseOne.vertical-menu.show { display: block; }
    #basicsCollapseOne .card-body { max-height: none; overflow: visible; }
    #basicsCollapseOne .navbar,
    #basicsCollapseOne .navbar-collapse,
    #basicsCollapseOne .u-header__navbar,
    #basicsCollapseOne .u-header__navbar-collapse { overflow: visible; position: static; padding: 0; display: block; }
    #basicsCollapseOne .navbar-nav,
    #basicsCollapseOne .u-header__navbar-nav { flex-direction: column; width: 100%; }

    /* Dikey liste öğeleri — temiz satır görünümü */
    #basicsCollapseOne .u-header__nav-item { position: static; width: 100%; }
    #basicsCollapseOne .u-header__nav-link {
        display: flex; align-items: center; justify-content: space-between;
        padding: 11px 18px; font-size: 14px; line-height: 1.3;
        color: var(--el-ink, #1b232a);
        border-bottom: 1px solid var(--el-line, #e6e8ec);
    }
    #basicsCollapseOne .u-header__nav-item:last-child .u-header__nav-link { border-bottom: 0; }
    #basicsCollapseOne .u-header__nav-link:hover { background: var(--el-bg, #f7f8fa); color: var(--el-accent, #d51243); }
    #basicsCollapseOne .hs-has-mega-menu > .u-header__nav-link::after {
        content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
        color: #9aa4af; font-size: 13px; margin-left: 10px; flex: 0 0 auto;
    }

    /* Flyout: 270px sidebar'ın SAĞINA, menünün üstünden hizalı aç */
    #basicsCollapseOne .hs-has-mega-menu > .hs-mega-menu.vmm-tfw {
        position: absolute; left: 100%; top: 0; margin: 0;
        width: 600px; max-width: 70vw; min-height: 100%;
        padding: 22px 26px; border-radius: 0 8px 8px 0;
        box-shadow: 10px 14px 36px -12px rgba(15,23,42,.22);
        overflow: hidden;
    }
    /* Sağ kenara yakınsa (HSMegaMenu .hs-reversed ekler) sola aç */
    #basicsCollapseOne .hs-has-mega-menu > .hs-mega-menu.vmm-tfw.hs-reversed {
        left: auto; right: 100%; border-radius: 8px 0 0 8px;
    }
    /* Hover ile aç — JS init çalışmasa bile garanti */
    #basicsCollapseOne .hs-has-mega-menu:hover > .hs-mega-menu.vmm-tfw {
        display: block !important; visibility: visible !important; opacity: 1 !important;
    }
    #basicsCollapseOne .hs-mega-menu .u-header__sub-menu-title {
        display: block; font-weight: 700; color: var(--el-ink, #1b232a);
        font-size: 14px; margin-bottom: 10px;
    }
    #basicsCollapseOne .hs-mega-menu .u-header__sub-menu-nav-link { padding: 5px 0; font-size: 13px; }
    #basicsCollapseOne .hs-mega-menu .vmm-bg { position: absolute; right: 0; bottom: 0; max-width: 42%; opacity: .10; pointer-events: none; }
    #basicsCollapseOne .hs-mega-menu .vmm-bg img { width: 100%; height: auto; }
}

/* ============================================================
   v2.5.3 — EKSİK ec-* GLYPH ALIAS'LARI (blank ikon fix)
   Electro icon fontunda OLMAYAN ec-* sınıfları (blank kutu olarak
   render olur) FontAwesome 5 Free karşılıklarına eşlenir. Tek nokta,
   görünüm bozulmadan tüm view'lardaki kayıp ikonlar düzelir.
   (font-electro.css'ten SONRA yüklenir → :before override eder.)
   ============================================================ */
.ec-add-tag:before,
.ec-arrow-left-categledt:before,
.ec-arrow-left-categproes:before,
.ec-arrow-right-categledt:before,
.ec-check:before, .ec-check-circle:before,
.ec-copy:before, .ec-credit-card:before,
.ec-electro-devices:before, .ec-flash:before,
.ec-gift:before, .ec-help:before, .ec-home:before,
.ec-image:before, .ec-lock:before, .ec-locked:before,
.ec-megaphone:before, .ec-newspaper:before,
.ec-protect:before, .ec-rotate-l:before, .ec-time:before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}
.ec-add-tag:before                { content: "\f02b" !important; } /* tag */
.ec-arrow-left-categledt:before   { content: "\f104" !important; } /* angle-left */
.ec-arrow-left-categproes:before  { content: "\f104" !important; }
.ec-arrow-right-categledt:before  { content: "\f105" !important; } /* angle-right */
.ec-check:before                  { content: "\f00c" !important; }
.ec-check-circle:before           { content: "\f058" !important; }
.ec-copy:before                   { content: "\f0c5" !important; }
.ec-credit-card:before            { content: "\f09d" !important; }
.ec-electro-devices:before        { content: "\f009" !important; } /* th-large */
.ec-flash:before                  { content: "\f0e7" !important; } /* bolt */
.ec-gift:before                   { content: "\f06b" !important; }
.ec-help:before                   { content: "\f059" !important; } /* question-circle */
.ec-home:before                   { content: "\f015" !important; }
.ec-image:before                  { content: "\f03e" !important; }
.ec-lock:before, .ec-locked:before{ content: "\f023" !important; }
.ec-megaphone:before              { content: "\f0a1" !important; } /* bullhorn */
.ec-newspaper:before              { content: "\f1ea" !important; }
.ec-protect:before                { content: "\f3ed" !important; } /* shield-alt */
.ec-rotate-l:before               { content: "\f0e2" !important; } /* undo */
.ec-time:before                   { content: "\f017" !important; } /* clock */

/* v2.5.3 — Kategori arka plan görseli (admin banner alanı) — dekoratif hero */
.el-cat-banner { position: relative; height: 180px; background-size: cover; background-position: center; border-radius: 10px; overflow: hidden; display: flex; align-items: flex-end; }
.el-cat-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5)); }
.el-cat-banner__label { position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 24px; padding: 16px 20px; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
@media (max-width: 767px) { .el-cat-banner { height: 120px; } .el-cat-banner__label { font-size: 18px; } }