/**
 * OTOEKO Ecommerce - Desktop Components CSS
 * Sadece desktop'ta yuklenir.
 * Reset, header, home, footer, product card, modal, loading, badge, overlay.
 */

/*
 * UYARI: svg.lucide kuralı 1.2em kullanır — parent font-size'a bağlıdır.
 * font-size: 0 olan bir parent içinde ikon 0×0px olur ve GÖRÜNMEZ olur!
 * Bu yüzden ikon içeren butonlarda ASLA font-size: 0 kullanma.
 * Text gizlemek için span { display: none } kullan.
 * Ikon boyutu override ederken MUTLAKA !important ekle:
 *   .my-btn [data-lucide] { width: 24px !important; height: 24px !important; }
 */
svg.lucide {
    width: 1.2em !important;
    height: 1.2em !important;
}

/* ========================================
   HEADER SHARED
   ======================================== */
/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-700);
    background-color: var(--color-white);
}

/* TL flash önleme: kayıtlı para birimi USD/EUR ise fiyatlar ve buton etiketi JS uygulayana kadar gizli */
html.currency-pending .current-price,
html.currency-pending .old-price,
html.currency-pending .currency-label,
html.currency-pending [data-base-price] {
    opacity: 0;
}
.current-price[data-base-price],
.old-price[data-base-price],
.currency-label,
[data-base-price] {
    transition: opacity 0.12s ease;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ========================================
   UTILITIES
   ======================================== */
/* Container genişliği: variables.css içinde tek merkezi kural (1600px) */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ========================================
   HEADER (Sticky: scroll aşağı → gizle, yukarı → göster)
   ======================================== */

/* Gölge: ortada belirgin, kenarlardan yumuşak geçişle soluyor */
body.ecommerce-front .site-header.scrolled {
    box-shadow: none !important;
}

/* Scroll aşağı gidince menü yukarı kayar, yukarı scroll'da tekrar görünür */
body.ecommerce-front .site-header.header-hidden {
    transform: translateY(-100%) !important;
}

body.ecommerce-front .site-header.header-hidden.scrolled {
    transform: translateY(-100%) !important;
}

/* Top Bar */
.header-top {
    font-size: var(--font-size-sm);
}

.header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fef3e2 0%, #fef9f3 100%);
    border: 1px solid rgba(251, 146, 60, 0.15);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-5);
}

.header-top-left,
.header-top-right {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* Top Contact Links */
.top-contact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    transition: color var(--transition-fast);
}

.top-contact:hover {
    color: var(--color-primary-hover);
}

.top-contact i,
.top-contact svg {
    color: var(--color-primary);
    width: 16px;
    height: 16px;
}

/* Top Dropdown */
.top-dropdown {
    position: relative;
}

.top-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.top-dropdown-toggle:hover {
    background: var(--color-white);
    border-color: var(--color-gray-200);
    color: var(--color-gray-800);
}

.top-dropdown-toggle i:first-child,
.top-dropdown-toggle svg:first-child {
    color: var(--color-primary);
    width: 16px;
    height: 16px;
}

.top-dropdown-toggle i:last-child,
.top-dropdown-toggle svg:last-child {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    transition: transform var(--transition-fast);
}

.top-dropdown:hover .top-dropdown-toggle i:last-child,
.top-dropdown:hover .top-dropdown-toggle svg:last-child {
    transform: rotate(180deg);
}

.top-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-base);
    z-index: var(--z-fixed);
    overflow: hidden;
}

.top-dropdown:hover .top-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.top-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 14px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,.04);
    transition: all .18s ease;
    position: relative;
}

.top-dropdown-menu a:last-child {
    border-bottom: none;
}

.top-dropdown-menu a:hover {
    background: linear-gradient(90deg, rgba(249,115,22,.06), transparent);
    color: #1f2937;
}

.top-dropdown-menu a.active {
    background: linear-gradient(135deg, #fffbf5, #fff7ed);
    color: #1a1611;
    font-weight: 700;
}

.top-dropdown-menu a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #f97316, #ea580c);
    box-shadow: 0 0 8px rgba(249,115,22,.35);
}

.top-dropdown-menu a.active::after {
    content: '✓';
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #f97316;
}

.top-dropdown-menu a span {
    font-weight: 700;
    min-width: 16px;
}

.top-dropdown-menu a img {
    width: 18px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}


/* Search */

.search-form:focus-within {
    border-color: var(--color-primary);
}

.search-form input:focus {
    outline: none;
}

.search-btn:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

.search-btn i {
    font-size: var(--font-size-base);
}

.search-btn [data-lucide] {
    width: 18px;
    height: 18px;
}

/* ========================================
   AUTOCOMPLETE DROPDOWN — 2 kolon × 5 satır
   ======================================== */
.search-autocomplete {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.search-ac-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.search-ac-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    text-decoration: none;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
    border-right: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.search-ac-product:nth-child(2n) {
    border-right: none;
}

/* Son satır border-bottom kaldır */
.search-ac-product:nth-last-child(-n+2) {
    border-bottom: none;
}

.search-ac-product:hover {
    background: #fff7ed;
}

.search-ac-product img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.search-ac-product-info {
    flex: 1;
    min-width: 0;
}

.search-ac-product-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-gray-700);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-ac-product-name mark {
    background: none;
    color: var(--color-primary-hover);
    font-weight: 700;
    padding: 0;
}

.search-ac-product-price {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
    padding-left: 4px;
}

.search-ac-old-price {
    display: block;
    color: var(--color-gray-400);
    text-decoration: line-through;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

.search-ac-current-price {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-primary-hover);
    line-height: 1.2;
}

/* Footer */
.search-ac-footer {
    border-top: 1px solid var(--color-gray-100);
}

.search-ac-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gray-500);
    text-decoration: none;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}

.search-ac-footer a:hover {
    background: #fff7ed;
    color: var(--color-primary-hover);
}

.search-ac-empty {
    padding: 20px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--color-gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.search-ac-empty i {
    color: var(--color-gray-300);
}

/* Mobile */
.mobile-search {
    position: relative;
}

.mobile-search .search-autocomplete {
    border-radius: 12px;
}

.mobile-search .search-ac-grid {
    grid-template-columns: repeat(2, 1fr);
}


/* Header Actions */

.header-action:hover {
    background: var(--color-gray-50);
    color: var(--color-primary-hover);
}

.header-action i {
    font-size: 24px;
    margin-bottom: 2px;
}

/* WhatsApp Action */

.header-action.whatsapp-action:hover {
    background: rgba(37, 211, 102, 0.1);
    color: #128c7e;
}

.header-action.whatsapp-action i {
    font-size: 26px;
}

.header-action.whatsapp-action [data-lucide] {
    width: 26px;
    height: 26px;
    stroke-width: 2;
}

/* Cart Action */

.header-action.cart-action:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.header-action.cart-action i {
    font-size: 18px;
    margin-bottom: 0;
}

.header-action.cart-action span {
    font-size: 12px;
}

/* Mobile Toggle */

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-gray-700);
    border-radius: 2px;
    transition: all var(--transition-fast);
}


/* Navigation */

.site-nav .container {
    display: flex;
    align-items: center;
}

/* Categories Dropdown */
/* ============================================
   CATEGORIES TOGGLE - Premium Design
   ============================================ */
.nav-categories {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    z-index: var(--z-header); /* Banner / hero'nun üstünde */
}

.categories-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #f3f4f6;
    color: #1f2937;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: all var(--transition-base);
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    height: fit-content;
}

.categories-toggle:hover {
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.categories-toggle [data-lucide] {
    color: var(--color-primary);
}

.categories-toggle [data-lucide] {
    width: 20px;
    height: 20px;
}

.categories-toggle .arrow {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-slow);
}

.nav-categories:hover .categories-toggle .arrow,
.nav-categories.is-locked .categories-toggle .arrow {
    transform: rotate(180deg);
}

/* Categories Dropdown - Premium Design */
.categories-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
    transition-delay: 0.15s; /* Kapanma gecikmesi */
    z-index: var(--z-header); /* Banner / hero'nun üstünde */
    margin-top: 8px;
}

/* Hover ve tıklamada JS ile position:fixed kullanılıyor; görünürlük JS ile */
.nav-categories:hover .categories-dropdown:not(.is-fixed),
.nav-categories.is-locked .categories-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Fixed konumda (JS) – her zaman banner'ın üstünde */
.categories-dropdown.is-fixed {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    z-index: var(--z-header) !important;
    transition-delay: 0s !important;
}

.categories-list {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.categories-empty-msg {
    padding: 1rem;
    color: var(--color-gray-600);
    font-size: 0.875rem;
    text-align: center;
}

.categories-empty-msg p {
    margin: 0 0 0.5rem 0;
}

.categories-empty-msg p.small {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.categories-list .category-item {
    position: relative;
}

.categories-list .category-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 10px;
    height: 47px;
    color: #1f2937;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    transition: all var(--transition-base);
    border-radius: 10px;
    box-sizing: border-box;
}

.categories-list .category-item > a [data-lucide]:first-child {
    width: 36px;
    height: 36px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-radius: 8px;
    color: var(--color-primary-hover);
    flex-shrink: 0;
    stroke-width: 2;
}

.categories-list .category-item > a span {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
}

.categories-list .category-item > a .arrow {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.categories-list .category-item:hover > a {
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    color: #111827;
}

.categories-list .category-item:hover > a .arrow {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* ============================================
   SUBMENU PANEL - YENİDEN TASARIM
   Tüm kategoriler için tutarlı boyut ve düzen
   ============================================ */

/* Ana Submenu Container */
.category-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: all var(--transition-slow);
    z-index: var(--z-fixed);
    margin-left: 8px;
    min-width: 280px;
}

/* Hover'da görünür */
.categories-list .category-item:hover .category-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Yukarı açılma - ekranın altındaki kategoriler için */
/* Submenu ekranın altına yakın sabitlenir, kategori hizasından bağımsız */
.category-submenu.open-up {
    top: auto;
    position: fixed;
    bottom: 2px;
    left: var(--sidebar-width, 322px); /* Kategori dropdown genişliği + 2px boşluk */
    margin-left: 0;
    transform: none;
}

/* Submenu İç Container */
.submenu-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 28px 32px;
}

/* Kolon Yapısı - Tüm kolonlar aynı boyutta */
.submenu-column {
    min-width: 200px;
    flex: 1;
}

/* Kolon Başlığı */
.submenu-column h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Birden fazla h4 varsa (aynı kolonda) */
.submenu-column h4 + ul + h4 {
    margin-top: 20px;
}

/* Liste */
.submenu-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu-column ul li {
    margin-bottom: 3px;
}

/* Liste Öğesi Link */
.submenu-column ul li a {
    display: block;
    padding: 10px 14px;
    color: #374151;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--transition-base);
    border-radius: 8px;
    line-height: 1.4;
    text-align: center;
}

.submenu-column ul li a:hover {
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    color: var(--color-primary-hover);
    padding-left: 18px;
}

/* Link Title */
.submenu-column ul li a .link-title {
    font-weight: 600;
    color: inherit;
}

/* Link Sub Text (açıklama) */
.submenu-column ul li a .link-sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    margin-top: 3px;
}

.submenu-column ul li a:hover .link-sub {
    color: var(--color-primary-light);
}

/* ============================================
   SUBMENU BOYUT SINIFLARI
   ============================================ */

/* Küçük Submenu (1 kolon) - varsayılan */
.category-submenu {
    min-width: 300px;
    max-width: 340px;
}

/* 2 Kolon Submenu */
.category-submenu.submenu-2col {
    min-width: 480px;
    max-width: 580px;
}

.category-submenu.submenu-2col .submenu-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 28px 32px 16px 32px;
}

.category-submenu.submenu-2col .submenu-column {
    min-width: 0;
}

/* 3 Kolon Submenu */
.category-submenu.submenu-3col {
    min-width: 680px;
    max-width: 820px;
}

.category-submenu.submenu-3col .submenu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 28px 32px 16px 32px;
}

.category-submenu.submenu-3col .submenu-column {
    min-width: 0;
}

/* Submenu Footer - Tam genişlik info box */
.submenu-footer {
    padding: 0 32px 28px 32px;
}

.submenu-footer .submenu-info {
    margin-top: 0;
}

/* Geniş Submenu (4+ kolon) */
.category-submenu.submenu-wide {
    min-width: 900px;
    max-width: 1150px;
}

.category-submenu.submenu-wide .submenu-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

/* Bağlantı Kabloları - 4 kolon grid */
.category-submenu.submenu-cables {
    min-width: 950px;
    max-width: 1200px;
}

.category-submenu.submenu-cables .submenu-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 28px 32px;
}

/* Teşhis Yazılımları - 3 kolon grid */
.category-submenu.submenu-software {
    min-width: 780px;
    max-width: 950px;
}

.category-submenu.submenu-software .submenu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    padding: 28px 32px;
}

/* Submenu Info Box - Yeni Tasarım */
/* Grid içinde tam genişlik için submenu-footer kullan */
.submenu-info {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}


.submenu-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

.submenu-info p {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #f3f4f6;
    line-height: 1.5;
    margin: 0;
    padding-left: 4px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.submenu-info i {
    color: var(--color-primary);
    margin-right: 0;
    font-size: 12px;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
}

/* Wide Submenu için Info Box - Alt kısımda tam genişlik */
.category-submenu.submenu-wide .submenu-info-full {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-submenu.submenu-wide .submenu-info-full::before {
    display: none;
}

.category-submenu.submenu-wide .submenu-info-full i {
    font-size: 20px;
    color: var(--color-primary);
}

.category-submenu.submenu-wide .submenu-info-full p {
    font-size: 12px;
    padding-left: 0;
}

/* Submenu Footer - Alt bilgi kartı için container */
.submenu-footer {
    padding: 0 24px 20px 24px;
}

.submenu-footer .submenu-info {
    margin-top: 0;
}

/* Brand Icons for Gizli Özellik */
.submenu-column ul li a i.brand-icon {
    font-size: 15px;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    color: #fff;
}

.submenu-column ul li a i.brand-vw {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
}

.submenu-column ul li a i.brand-fiat {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);
}

.submenu-column ul li a i.brand-ford {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

.submenu-column ul li a i.brand-bmw {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
}

.submenu-column ul li a i.brand-renault {
    background: linear-gradient(135deg, #eab308 0%, #facc15 100%);
    color: #1f2937;
}



/* ============================================
   MAIN MENU - Premium Design
   ============================================ */

.main-menu > li {
    position: relative;
}

.main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
    border-radius: 3px 3px 0 0;
    transition: all var(--transition-slow);
    transform: translateX(-50%);
}

.main-menu > li > a:hover::after {
    width: 80%;
}

.main-menu > li > a:hover {
    color: var(--color-primary-hover);
}

/* Hot link (Fırsatlar) */
.main-menu > li > a.hot {
    color: #dc2626;
}

.main-menu > li > a.hot [data-lucide] {
    color: #dc2626;
}

.main-menu > li > a.hot::after {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* Menu Badge - Premium */

.main-menu .menu-badge.green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* ============================================
   NAV RIGHT - Google & Kampanyalar Buttons
   ============================================ */

/* Google Yorumlar Badge */
.nav-google {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
    font-family: 'Montserrat', sans-serif;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-slow);
    text-decoration: none;
    line-height: 1;
    position: relative;
}

.nav-google:hover {
    border-color: #cbd5e1;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.nav-google-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-google-icon svg {
    display: block;
}

.nav-google-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-google-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-google-rating {
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.3px;
    line-height: 1;
}

.nav-google-stars {
    display: flex;
    align-items: center;
    line-height: 0;
}

.nav-google-stars svg {
    display: block;
}

.nav-google-bottom {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    line-height: 1;
}

.nav-google-count {
    font-weight: 700;
    color: #475569;
}

.nav-google:hover .nav-google-rating {
    color: #1a56db;
}

.nav-google:hover .nav-google-bottom {
    color: #4b5563;
}

/* Kampanyalar Button */
.nav-promo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    transition: all var(--transition-base);
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3);
}

.nav-promo:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, #c2410c 100%);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.nav-promo [data-lucide] {
    width: 18px;
    height: 18px;
}

/* ========================================
   MOBILE MENU — Hidden on desktop (drawer only exists on mobile)
   ======================================== */
.mobile-menu { display: none; }

/* Coming Soon (devre dışı modüller) */
.nav-coming-soon { opacity: 0.4; cursor: default !important; }
.nav-coming-soon:hover { opacity: 0.5; }
.main-menu > li > a.nav-coming-soon::after { display: none; }
.main-menu > li > a.nav-coming-soon:hover { color: inherit; }
.nav-promo.nav-coming-soon { opacity: 0.4; }
.nav-promo.nav-coming-soon:hover { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3); opacity: 0.5; }
.mobile-nav a.nav-coming-soon { opacity: 0.4; }
.footer-col a.nav-coming-soon { opacity: 0.4; }

/* ========================================
   HOME SHARED
   ======================================== */

/* Reset & base kuralları: header.css (header.php'de ilk yüklenir) */

/* ========================================
   UTILITIES (Paylaşılan)
   ======================================== */
/* site-main: Header fixed, padding-top JS tarafından ayarlanır */
.site-main {
    min-height: 60vh;
    position: relative;
    z-index: 0; /* Header (--z-header) ve dropdown'un altında kalsın */
    max-width: 100%;
    overflow-x: hidden; /* Banner/ürün alanı taşmasın */
    padding-top: var(--header-total-height, 0px);
}

/* Container genişliği: variables.css içinde tek merkezi kural (1600px) */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Swiper: container genişliğinde kalsın (Paylaşılan) */
.hero-slider.swiper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.hero-slider .swiper-slide {
    max-width: 100%;
}

.hero-slider .swiper-wrapper {
    position: relative;
}

.hero-slider .swiper-slide {
    width: 100% !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slider .swiper-slide-active {
    opacity: 1;
    visibility: visible;
}

/* Paylaşılan */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.92) 0%, rgba(234, 88, 12, 0.85) 100%);
}

/* Badge icon — Paylaşılan */
.hero-badge [data-lucide] {
    width: 16px;
    height: 16px;
}

/* Badge renkleri — Paylaşılan */
.hero-badge.sale {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
}

.hero-badge.new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
}

.hero-badge.hot {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    border: none;
}

/* Paylaşılan */
.hero-title span {
    display: block;
    color: #fff;
}

/* Hero Buttons — Paylaşılan */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Paylaşılan */
.btn [data-lucide] {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: #fff;
    color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: #f9fafb;
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Paylaşılan */
.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary-hover);
}

/* Paylaşılan */
.swiper-progress-bar {
    height: 100%;
    background: #fff;
    width: 0;
    transition: width 0.1s linear;
}

/* Paylaşılan */
.hero-banner:hover {
    box-shadow: var(--shadow-xl);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
}

/* Badge renkleri — Paylaşılan */
.hero-banner-badge.sale { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.hero-banner-badge.new { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.hero-banner-badge.hot { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); }

/* ========================================
   FEATURES (maintenance.php) — Paylaşılan
   ======================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.feature-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary-light) 0%, #fed7aa 100%);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    color: var(--color-primary-hover);
    flex-shrink: 0;
}

/* Section Header — Paylaşılan */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--color-gray-900);
}

.section-subtitle {
    margin-top: var(--space-2);
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

.section-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: gap var(--transition-fast);
}

.section-link:hover {
    gap: var(--space-3);
}

/* Paylaşılan */
.promo-card:hover {
    transform: scale(1.02);
}

.promo-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* Badge renkleri — Paylaşılan */
.promo-badge.sale { background: var(--color-primary); }
.promo-badge.new { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.promo-badge.hot { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); }

/* Paylaşılan */
.promo-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ========================================
   BRANDS SECTION — Paylaşılan
   ======================================== */
.brands-slider {
    padding: var(--space-4) 0;
}

/* ========================================
   SWIPER CUSTOMIZATION — Paylaşılan
   ======================================== */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--color-white);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-white);
    width: 24px;
    border-radius: var(--radius-full);
}

/* Product Card V2 — Base Styles (Paylaşılan — tüm sayfalarda geçerli) */
.product-card-v2 {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-card-v2:hover {
    border-color: var(--color-primary);
    box-shadow: 0 12px 32px rgba(249, 115, 22, 0.15);
    transform: translateY(-4px);
}


.product-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    z-index: 2;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #fff;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    line-height: 1.3;
}

.product-info {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    font-family: 'Montserrat', sans-serif;
}

.product-sku {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    min-height: calc(2 * 1.4em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    transition: color var(--transition-slow);
    width: 100%;
}

.old-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: line-through;
    white-space: nowrap;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

.rating-stars {
    display: flex;
    gap: 2px;
}

.rating-stars svg {
    width: 14px;
    height: 14px;
}

.rating-count {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.pi-top > .product-sku {
    margin-left: 10px;
    margin-top: 4px;
    padding-left: 10px;
    border-left: 1px solid #e5e7eb;
}

.product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.current-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* Paylaşılan */
.product-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Paylaşılan */
.product-card-v2:hover::before {
    opacity: 1;
}

/* Product Image — Paylaşılan base */
.product-image-wrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

/* Paylaşılan */
.product-badge i { font-size: 10px; }

/* Badge Colors — Paylaşılan */
.product-badge.sale { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.product-badge.new { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.product-badge.b-sok-fiyat { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.product-badge.b-orijinal { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.product-badge.b-dijital { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }
.product-badge.b-uzak-baglanti { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
.product-badge.b-yeni { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.product-badge.b-cok-satan { background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%); }
.product-badge.b-premium { background: linear-gradient(135deg, #b45309 0%, #92400e 100%); }
.product-badge.b-garantili { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.product-badge.b-sinirli-stok { background: linear-gradient(135deg, #92400e 0%, #78350f 100%); }
.product-badge.b-ucretsiz-kargo { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }
.product-badge.b-kampanya { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.product-badge.b-el-yapimi { background: linear-gradient(135deg, #a16207 0%, #854d0e 100%); }
.product-badge.b-eko { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.product-badge.b-hizli-teslimat { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); }

/* Üst kısım: isim + rating + SKU — Paylaşılan */
.pi-top {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* Alt kısım: fiyat + butonlar — Paylaşılan */
.pi-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: auto;
}

/* Paylaşılan */
.sku-val { color: var(--color-primary); }

/* Paylaşılan */
.product-name:hover {
    color: var(--color-primary);
}

/* Paylaşılan */
.price-old-row {
    display: contents;
}

.discount-rate {
    display: none;
}

/* Paylaşılan */
.rc-val { color: var(--color-primary); }

/* Sepete eklerken spinner — Paylaşılan */
.add-to-cart-btn .sf-loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #1f2937;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ── Chip-style butonlar (ol-chip tarzı) ── */
.product-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 0;
    align-items: center;
}

.quick-view-btn,
.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: none;
}

/* ol-chip--orange: Gözat */
.quick-view-btn {
    flex: 1;
    border: 1px solid #fdba74;
    color: #c2410c;
    background: #fff7ed;
    order: -1;
}
.quick-view-btn:hover { background: #ffedd5; color: #c2410c; box-shadow: none; transform: none; }
.quick-view-btn i,
.quick-view-btn svg,
.quick-view-btn [data-lucide] { color: var(--color-primary-hover); width: 15px !important; height: 15px !important; }

/* ol-chip--green: Sepete Ekle */
.add-to-cart-btn {
    flex: 3;
    border: 1px solid #86efac;
    color: #15803d;
    background: #f0fdf4;
}
.add-to-cart-btn span { display: inline; font-size: 12px; }
.add-to-cart-btn:hover:not(:disabled) { background: #dcfce7; color: #15803d; box-shadow: none; transform: none; }
.add-to-cart-btn:disabled { border-color: #e5e7eb; color: #9ca3af; background: #f9fafb; cursor: not-allowed; }
.add-to-cart-btn i,
.add-to-cart-btn svg,
.add-to-cart-btn [data-lucide] { color: #16a34a; width: 15px !important; height: 15px !important; }
.add-to-cart-btn:disabled i,
.add-to-cart-btn:disabled svg,
.add-to-cart-btn:disabled [data-lucide] { color: #9ca3af; }

/* Sepete eklendi — buton aynı boyutta kalır */
.add-to-cart-btn.cart-btn-added {
    background: #dcfce7;
    color: #15803d;
    border-color: #4ade80;
    animation: cart-added-flash 0.5s ease;
}
.add-to-cart-btn.cart-btn-added span { display: inline; }
.add-to-cart-btn.cart-btn-added [data-lucide],
.add-to-cart-btn.cart-btn-added svg { color: #15803d; }

@keyframes cart-added-flash {
    0% { transform: scale(1); }
    20% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.35); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); box-shadow: none; }
}

/* ========================================
   LOADING & EMPTY STATES — Paylaşılan
   ======================================== */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-state {
    text-align: center;
    padding: var(--space-16);
}

.empty-state i {
    font-size: 64px;
    color: var(--color-gray-300);
    margin-bottom: var(--space-5);
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-700);
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--color-gray-500);
}


/* ========================================
   OUT OF STOCK OVERLAY
   ======================================== */
.out-of-stock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.out-of-stock-overlay span {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: #dc2626;
    padding: 5px 14px;
    border-radius: 20px;
}

/* Product Card V2 - Disabled State */
.product-card-v2.out-of-stock {
    opacity: 0.4;
}

/* ========================================
   PRODUCT IMAGE FALLBACK — Paylaşılan
   ======================================== */
.product-image-wrapper img[src$="no-image.svg"],
.product-image img[src$="no-image.svg"] {
    padding: 32px;
    opacity: 0.5;
}


/* Paylaşılan */
.product-card-v2:hover .image-dots {
    opacity: 1;
}

/* Paylaşılan */
.image-dots .dot.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.2);
}

.image-dots .dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Image transition effect — Paylaşılan */
.product-image-wrapper img {
    transition: opacity var(--transition-slow), transform 0.4s ease;
}

.product-image-wrapper img.fade-out {
    opacity: 0;
}



/* ========================================
   QUICK VIEW MODAL — Paylaşılan
   ======================================== */
.quick-view-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow);
}

.quick-view-modal.active {
    opacity: 1;
    visibility: visible;
}

.quick-view-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.quick-view-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--transition-slow);
}

.quick-view-modal.active .quick-view-content {
    transform: scale(1) translateY(0);
}

.quick-view-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-base);
}

.quick-view-close:hover {
    background: #ef4444;
    color: #fff;
}

.quick-view-close [data-lucide] {
    width: 20px;
    height: 20px;
}

.quick-view-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-height: 90vh;
    overflow-y: auto;
}


/* Quick View Image */
.quick-view-image {
    position: relative;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    min-height: 400px;
}

.quick-view-image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.quick-view-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

/* Quick View Details */
.quick-view-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: 'Montserrat', sans-serif;
}

.quick-view-sku {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
}

.quick-view-title {
    font-size: 22px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.3;
}

.quick-view-price {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-view-price .old-price {
    font-size: 18px;
    font-weight: 600;
    color: #9ca3af;
    text-decoration: line-through;
}

.quick-view-price .current-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-primary);
}

.quick-view-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

.quick-view-stock.in-stock {
    color: #10b981;
}

.quick-view-stock.out-of-stock {
    color: #ef4444;
}

.quick-view-stock [data-lucide] {
    width: 18px;
    height: 18px;
}

.quick-view-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    max-height: 100px;
    overflow-y: auto;
}

.quick-view-actions {
    display: flex;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.quick-view-actions .add-to-cart-btn {
    flex: 1;
    padding: 14px 20px;
    font-size: 14px;
}

.quick-view-actions .view-details-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: #1f2937;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.quick-view-actions .view-details-btn:hover {
    background: #374151;
}

.quick-view-actions .view-details-btn [data-lucide] {
    width: 16px;
    height: 16px;
}

/* Quick View Loading */
.quick-view-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.quick-view-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ========================================
   FOOTER SHARED
   ======================================== */
/* Design tokens: variables.css (header.php'de ilk yüklenir) */

/* ========================================
   FOOTER - Premium Light Theme (Shared)
   ======================================== */

/* Footer container = home.css'teki merkezi tanımı kullanır */

/* Footer Banner */
.footer-banner-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #fef3e2 0%, #fef9f3 100%);
    border: 1px solid rgba(251, 146, 60, 0.15);
    border-radius: var(--radius-full);
    padding: 8px var(--space-5);
}

.footer-banner-content span {
    color: var(--color-primary);
    font-family: 'Montserrat', sans-serif;
    font-size: var(--font-size-base);
    font-weight: 800;
    letter-spacing: 0.5px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.footer-social-icons a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Footer Columns */
.footer-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.footer-col h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    width: 100%;
}

.footer-col h4 [data-lucide] {
    width: 18px;
    height: 18px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    margin-top: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.footer-col ul li {
    width: 100%;
    display: flex;
    justify-content: center;
}

.footer-col ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    text-decoration: none;
    transition: all var(--transition-base);
    line-height: 1.6;
}

.footer-col ul li a i {
    font-size: 8px;
    color: #9ca3af;
    transition: all var(--transition-base);
}

.footer-col ul li a:hover {
    color: var(--color-primary);
}

.footer-col ul li a:hover i {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* Footer Support */
.support-card:hover {
    transform: translateY(-3px);
}

.support-whatsapp:hover {
    border-color: #25D366;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
}

.support-phone:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(251, 146, 60, 0.25);
}

.support-card:hover .support-icon {
    transform: scale(1.1);
}

.whatsapp-icon {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.phone-icon {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

.phone-icon [data-lucide] {
    width: 22px;
    height: 22px;
}

.support-whatsapp:hover .support-text {
    color: #128C7E;
}

.support-phone:hover .support-phone-number {
    color: var(--color-primary-dark);
}

.support-card:hover .support-arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

.support-whatsapp:hover .support-arrow {
    color: #25D366;
}

.support-divider::before,
.support-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
}

.support-divider span {
    padding: 0 14px;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: #ffffff;
    position: relative;
}

/* Footer Bottom Box (Payment + Copyright) */
.trust-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
    border-color: #fed7aa;
}

/* Copyright */
.footer-copyright {
    text-align: center;
}


/* ========================================
   SCROLL TO TOP (Shared)
   ======================================== */
.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
}

body:has(.cart-page) .scroll-top,
body:has(.checkout-page) .scroll-top {
    display: none !important;
}

/* ============================================ */
/* SKELETON SHIMMER + IMAGE FADE-IN            */
/* ============================================ */
.skeleton { background: #e2e8f0; border-radius: var(--radius-md); position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skeleton-card { aspect-ratio: 1; border-radius: 16px; }
.skeleton-text { height: 14px; border-radius: 4px; margin-top: 10px; }
.skeleton-text--short { width: 60%; }
.skeleton-price { height: 20px; width: 45%; border-radius: 4px; margin-top: 12px; }
.skeleton-grid { gap: var(--space-4); }
.skeleton-item { padding: 10px; }

/* Lazy-loaded product fade-in — infinite scroll ile gelen ürünler */
@keyframes productFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.product-card-v2.lazy-loaded { animation: productFadeIn 2s ease forwards; }

/* Lucide filled state — stars, hearts */
.lucide-star.filled, .lucide-heart.filled, svg.filled { fill: currentColor; }
.star-half { position: relative; overflow: hidden; }
.star-half svg, .star-half.lucide-star { clip-path: inset(0 50% 0 0); }
.animate-spin { animation: lucide-spin 1s linear infinite; }
@keyframes lucide-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ========================================
   BRAND ICONS (SVG mask-image)
   ======================================== */
.brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; }
.brand-icon::before { content: ''; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
[data-brand="whatsapp"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E"); }
[data-brand="facebook"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.09.044 1.613.115V7.93c-.403-.045-.688-.064-.975-.064-1.384 0-1.932.524-1.932 1.884v2.294h3.321l-.569 3.667h-2.752v8.245A12.05 12.05 0 0024 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.628 3.874 10.35 9.101 11.691z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.09.044 1.613.115V7.93c-.403-.045-.688-.064-.975-.064-1.384 0-1.932.524-1.932 1.884v2.294h3.321l-.569 3.667h-2.752v8.245A12.05 12.05 0 0024 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.628 3.874 10.35 9.101 11.691z'/%3E%3C/svg%3E"); }
[data-brand="instagram"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.03.084c-1.277.06-2.149.264-2.913.558a5.884 5.884 0 00-2.126 1.384A5.855 5.855 0 00.607 4.14c-.294.764-.498 1.636-.558 2.913C-.011 8.33-.015 8.822-.015 12s.004 3.67.064 4.947c.06 1.277.264 2.149.558 2.913a5.884 5.884 0 001.384 2.126 5.868 5.868 0 002.114 1.384c.764.294 1.636.498 2.913.558C8.33 23.996 8.822 24 12 24s3.67-.004 4.947-.064c1.277-.06 2.149-.264 2.913-.558a5.884 5.884 0 002.126-1.384 5.868 5.868 0 001.384-2.126c.294-.764.498-1.636.558-2.913.06-1.277.064-1.769.064-4.947s-.004-3.67-.064-4.947c-.06-1.277-.264-2.149-.558-2.913a5.884 5.884 0 00-1.384-2.126A5.855 5.855 0 0019.86.642c-.764-.294-1.636-.498-2.913-.558C15.67-.016 15.178-.02 12-.02s-3.67.004-4.97.104zm.098 21.716c-1.17-.054-1.805-.249-2.228-.413a3.713 3.713 0 01-1.382-.895 3.713 3.713 0 01-.895-1.382c-.164-.423-.36-1.058-.413-2.228-.057-1.265-.067-1.644-.067-4.882s.01-3.617.067-4.882c.054-1.17.249-1.805.413-2.228a3.713 3.713 0 01.895-1.382 3.713 3.713 0 011.382-.895c.423-.164 1.058-.36 2.228-.413 1.265-.057 1.644-.067 4.882-.067s3.617.01 4.882.067c1.17.054 1.805.249 2.228.413a3.713 3.713 0 011.382.895 3.713 3.713 0 01.895 1.382c.164.423.36 1.058.413 2.228.057 1.265.067 1.644.067 4.882s-.01 3.617-.067 4.882c-.054 1.17-.249 1.805-.413 2.228a3.972 3.972 0 01-2.277 2.277c-.423.164-1.058.36-2.228.413-1.265.057-1.644.067-4.882.067s-3.617-.01-4.882-.067zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.03.084c-1.277.06-2.149.264-2.913.558a5.884 5.884 0 00-2.126 1.384A5.855 5.855 0 00.607 4.14c-.294.764-.498 1.636-.558 2.913C-.011 8.33-.015 8.822-.015 12s.004 3.67.064 4.947c.06 1.277.264 2.149.558 2.913a5.884 5.884 0 001.384 2.126 5.868 5.868 0 002.114 1.384c.764.294 1.636.498 2.913.558C8.33 23.996 8.822 24 12 24s3.67-.004 4.947-.064c1.277-.06 2.149-.264 2.913-.558a5.884 5.884 0 002.126-1.384 5.868 5.868 0 001.384-2.126c.294-.764.498-1.636.558-2.913.06-1.277.064-1.769.064-4.947s-.004-3.67-.064-4.947c-.06-1.277-.264-2.149-.558-2.913a5.884 5.884 0 00-1.384-2.126A5.855 5.855 0 0019.86.642c-.764-.294-1.636-.498-2.913-.558C15.67-.016 15.178-.02 12-.02s-3.67.004-4.97.104zm.098 21.716c-1.17-.054-1.805-.249-2.228-.413a3.713 3.713 0 01-1.382-.895 3.713 3.713 0 01-.895-1.382c-.164-.423-.36-1.058-.413-2.228-.057-1.265-.067-1.644-.067-4.882s.01-3.617.067-4.882c.054-1.17.249-1.805.413-2.228a3.713 3.713 0 01.895-1.382 3.713 3.713 0 011.382-.895c.423-.164 1.058-.36 2.228-.413 1.265-.057 1.644-.067 4.882-.067s3.617.01 4.882.067c1.17.054 1.805.249 2.228.413a3.713 3.713 0 011.382.895 3.713 3.713 0 01.895 1.382c.164.423.36 1.058.413 2.228.057 1.265.067 1.644.067 4.882s-.01 3.617-.067 4.882c-.054 1.17-.249 1.805-.413 2.228a3.972 3.972 0 01-2.277 2.277c-.423.164-1.058.36-2.228.413-1.265.057-1.644.067-4.882.067s-3.617-.01-4.882-.067zM12 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z'/%3E%3C/svg%3E"); }
[data-brand="x"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z'/%3E%3C/svg%3E"); }
[data-brand="youtube"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12z'/%3E%3C/svg%3E"); }
[data-brand="telegram"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E"); }

/* Desktop responsive visibility — sadece desktop breakpoint'leri */
.d-xl-show { display: none !important; }

@media (min-width: 1024px) {
    .d-xl-none { display: none !important; }
    .d-xl-show { display: initial !important; }
}

/* ========================================
   PRODUCTS GRID — 5 column (shared)
   ======================================== */
.products-grid-5col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 640px) {
    .products-grid-5col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .products-grid-5col {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .products-grid-5col {
        grid-template-columns: repeat(5, 1fr);
    }
}