/* ==============================================================================
   OFFICEPLUS B2B E-TİCARET PLATFORMU - MOBİL HEADER, UI, Z-INDEX & KATMAN MOTORU
   ============================================================================== */

/* ==============================================================================
   1. KESİN KATMAN DÜZENİ VE Z-INDEX HİYERARŞİSİ (STACKING CONTEXT ISOLATION)
   ==============================================================================
   Hiyerarşi Sıralaması:
   1. Normal Sayfa İçeriği:         z-index: 1 - 999
   2. Header & Navigasyon:          z-index: 10000
   3. Sabit Alt Sepet Barı:         z-index: 99990
   4. Katalog Overlay (#katalog-page): z-index: 100000
   5. Sepet ve Auth Modalları:      z-index: 100010
   6. Hızlı Bakış (#quickview-modal): z-index: 100020 (Kataloğun ve Sepetin Üstünde)
   7. Toast Bildirimleri:           z-index: 100030
   ============================================================================== */

/* 1.1 KATALOG OVERLAY (TAM EKRAN VE ARKA PLAN İZOLASYONU) */
#katalog-page,
.katalog-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 1000000 !important; /* Header'ın (999990) kesinlikle üstünde */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

#katalog-page.active,
.katalog-overlay.active {
    opacity: 1 !important;
    transform: none !important; /* Chromium/Safari sticky context izolasyon kilidi */
}

/* 1.2 SEPET VE AUTH MODALLARI */
#cart-modal,
.cart-modal,
#auth-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1000020 !important; /* Sabit alt sepet barının (1000005) her zaman önünde */
    box-sizing: border-box !important;
}

/* 1.3 HIZLI BAKIŞ (QUICKVIEW) MODALI - KESİN KATMAN ÜSTÜNLÜĞÜ (KATALOĞUN ÜSTÜNDE) */
#quickview-modal,
.qv-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 3000000 !important; /* Katalog (1000000) ve Sepetin kesinlikle üzerinde! */
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    animation: opModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 1.4 [PROBLEM 1 & 2 ÇÖZÜMÜ]: İYZİCO ÖDEME PORTALI & CHECKOUT MODALI - DİREKT TAM SAYFA EN ÜST KATMAN */
#checkout.active,
.iyzico-modal.active,
#iyzico-payment-modal.active,
.checkout-modal.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; /* Tüm katalog, modal ve overlay'lerin EN ÜSTÜNDE */
    background: #ffffff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#checkout.active .checkout-wrapper {
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1000000 !important;
    border: none !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
}

/* İyzico iframe katmanı üstünlüğü */
.iyzico-iframe,
iframe[src*="iyzipay"],
iframe[src*="iyzico"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    border: none !important;
}


.qv-content {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 820px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    padding: 30px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35) !important;
    position: relative !important;
    z-index: 3000001 !important;
    transform: scale(1) !important;
}

@media (max-width: 768px) {
    .qv-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        padding: 16px 12px 20px 12px !important;
        gap: 10px !important;
        max-height: 88vh !important;
        box-sizing: border-box !important;
    }
}

.close-qv {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    background: #f1f5f9 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 100025 !important;
}

.close-qv:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

@keyframes opModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==============================================================================
   2. [PROBLEM 2 & 3 ÇÖZÜMÜ]: SABİT ALT SEPET BARI (GLOBAL FLOATING BOTTOM CART BAR)
   ============================================================================== */
#floating-cart-bar,
.floating-cart-bar,
#floating-cart,
.sepet-bar {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 129, 201, 0.3) !important;
    border-radius: 20px !important;
    padding: 12px 18px !important;
    z-index: 1000005 !important; /* Katalog overlay (100000) ve Checkout (999999) üzerinde EN ÜSTTE */
    box-sizing: border-box !important;
    display: none; /* JS tarafından sepet > 0 olduğunda display: flex yapılır */
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: fcbSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes fcbSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 40px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.fcb-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.fcb-icon-wrap {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    background: #0081C9 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 18px !important;
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.4) !important;
}

.fcb-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #1e293b !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

.fcb-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.fcb-title {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.fcb-total {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.fcb-right {
    display: flex !important;
    align-items: center !important;
}

.fcb-btn {
    background: linear-gradient(135deg, #0081C9, #005f94) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.fcb-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 129, 201, 0.45) !important;
}

.fcb-btn:active {
    transform: translateY(1px) !important;
}

/* [PROBLEM 1, 2 & 3 ÇÖZÜMÜ]: Sepet Modalı Açıkken Alt Sepet Barını Tamamen Gizle ve Arka Plana (z-index: 10) Düşür */
#cart-modal.active ~ #floating-cart-bar,
body.cart-modal-open #floating-cart-bar,
body.cart-open #floating-cart-bar,
body.cart-modal-open .floating-cart-bar,
body.cart-modal-open #sepet-floating,
body.cart-open #sepet-floating,
body:has(#cart-modal.active) #floating-cart-bar,
body:has(#cart-modal.active) #sepet-floating {
    z-index: 10 !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==============================================================================
   3. TOAST BİLDİRİM MOTORU (ERROR BOUNDARY)
   ============================================================================== */
#op-toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000050 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    pointer-events: none !important;
    max-width: 90vw !important;
    width: 380px !important;
}

.op-toast {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2), 0 6px 10px -5px rgba(0, 0, 0, 0.1) !important;
    pointer-events: auto !important;
    border-left: 5px solid #0081C9 !important;
    animation: opToastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    transition: all 0.3s ease !important;
}

.op-toast.op-toast-error {
    border-left-color: #ef4444 !important;
    background: #fff5f5 !important;
    color: #991b1b !important;
}

.op-toast.op-toast-success {
    border-left-color: #10b981 !important;
    background: #f0fdf4 !important;
    color: #065f46 !important;
}

.op-toast.op-toast-warning {
    border-left-color: #f59e0b !important;
    background: #fffbeb !important;
    color: #92400e !important;
}

@keyframes opToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ==============================================================================
   4. MOBİL HEADER VE PROFİL GÖRÜNÜRLÜK DÜZELTMELERİ
   ============================================================================== */
header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

@media (max-width: 768px) {
    /* Mobilde eski masaüstü buton grupları, giriş yap kutucuğu ve sepet tamamen gizlidir */
    .header-buttons,
    header .header-buttons,
    .desktop-only-buttons,
    #guest-view,
    #user-view,
    .nav-auth-btn,
    .nav-cart-btn,
    .premium-cart-trigger,
    #user-dropdown {
        display: none !important;
    }
}

/* ==============================================================================
   5. B2B KARGO VE KDV MATRAH TABLOSU
   ============================================================================== */
.op-shipping-bar-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 12px 0 18px 0;
}

.op-shipping-bar-text {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.op-shipping-bar-text.free {
    color: #16a34a;
}

.op-progress-track {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.op-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0081C9, #10b981);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.op-tax-breakdown-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-top: 15px;
    font-size: 13px;
}

.op-tax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    color: #475569;
}

.op-tax-row.highlight {
    font-weight: 700;
    color: #1e293b;
    border-top: 1px dashed #cbd5e1;
    margin-top: 6px;
    padding-top: 8px;
}

.op-tax-row.grand-total {
    font-size: 16px;
    font-weight: 800;
    color: #0081C9;
    border-top: 2px solid #0081C9;
    margin-top: 8px;
    padding-top: 10px;
}

/* ==============================================================================
   6. STOK VE TEDARİKÇİ ROZETLERİ
   ============================================================================== */
.op-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.op-stock-badge.in-stock {
    background: #dcfce7;
    color: #15803d;
}

.op-stock-badge.low-stock {
    background: #fef3c7;
    color: #b45309;
}

.op-stock-badge.out-of-stock {
    background: #fee2e2;
    color: #b91c1c;
}

.op-supplier-badge {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}

.btn-disabled-stock {
    background: #94a3b8 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* ==============================================================================
   7. [BAŞLIK 1 & 5 ÇÖZÜMÜ]: "SEÇİLMİŞ OKUL & KIRTASİYE ÜRÜNLERİ" KARMA VİTRİN & FERAH APPLE DÜZENİ
   ============================================================================== */
.school-products-showcase {
    padding: 48px 24px 56px 24px !important;
    max-width: 1280px !important;
    margin: 28px auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
}

/* Ortalanmış, Alt Alta Zarif Apple Tipografisiyle Bölüm Başlığı */
.school-showcase-minimal-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin: 0 auto 36px auto !important;
    max-width: 680px !important;
    padding: 0 12px !important;
}

.school-showcase-minimal-header .showcase-eyebrow {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
    color: #0081C9 !important;
    background: #f0f9ff !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    border: 1px solid #e0f2fe !important;
}

.school-showcase-minimal-header h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.school-showcase-minimal-header .showcase-subtitle {
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

/* Görsel Ağırlıklı Resimli Kategori Vitrin Kartları (Ferah Boşluklu) */
.school-visual-showcase-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    margin-bottom: 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.school-visual-card {
    position: relative !important;
    height: 190px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background: #0f172a !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

.school-visual-card img {
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    display: block !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.school-visual-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.76) 100%) !important;
    pointer-events: none !important;
    border-radius: 14px !important;
}

.school-visual-card:hover img {
    transform: scale(1.06) !important;
}

.school-visual-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14) !important;
}

.school-visual-title {
    position: absolute !important;
    bottom: 14px !important;
    left: 16px !important;
    right: 16px !important;
    z-index: 2 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.school-visual-title i {
    font-size: 12.5px !important;
    opacity: 0.85 !important;
    transition: transform 0.25s ease !important;
}

.school-visual-card:hover .school-visual-title i {
    transform: translateX(4px) !important;
}

@media (max-width: 992px) {
    .school-visual-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 576px) {
    .school-products-showcase {
        padding: 32px 14px 36px 14px !important;
        margin: 16px auto !important;
    }
    .school-showcase-minimal-header h2 {
        font-size: 22px !important;
    }
    .school-visual-showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .school-visual-card,
    .school-visual-card img {
        height: 145px !important;
    }
    .school-visual-title {
        font-size: 13.5px !important;
        bottom: 10px !important;
        left: 12px !important;
    }
}

/* Kompakt ve Ferah Karma Ürün Vitrini (Tam 10 Ürün: 5x2 Masaüstü Grid, Responsive Mobil) */
.school-products-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1180px) {
    .school-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

@media (max-width: 920px) {
    .school-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .school-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

.school-product-card {
    cursor: pointer !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.035) !important;
}

@media (max-width: 480px) {
    .school-product-card {
        min-width: 0 !important;
        padding: 10px !important;
    }
}

.school-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
    border-color: #bae6fd !important;
}

.school-product-card .prod-img-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    border: 1px solid #f1f5f9 !important;
}

.school-product-card .prod-img-wrapper img {
    width: 100% !important;
    height: 140px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.school-product-card:hover .prod-img-wrapper img {
    transform: scale(1.06) !important;
}

.school-product-card .showcase-qv-badge {
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22) !important;
    z-index: 3 !important;
}

.school-product-card:hover .showcase-qv-badge {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

.school-product-card .prod-tag {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    background: #f0f9ff !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    margin-bottom: 6px !important;
    width: fit-content !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
}

.school-product-card .prod-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.school-product-card .prod-info h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
    height: 36px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.school-product-card .prod-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-top: auto !important;
    box-sizing: border-box !important;
}

.school-product-card .prod-price {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: left !important;
    white-space: nowrap !important;
    letter-spacing: -0.2px !important;
}

.school-card-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.add-to-cart-school-btn {
    width: 100% !important;
    height: 34px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    white-space: nowrap !important;
}

.add-to-cart-school-btn:hover {
    background: #0081C9 !important;
    transform: translateY(-1px) !important;
}

.school-qty-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    background: #f0f7ff !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
    border: 1.5px solid #0081C9 !important;
    width: 100% !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

.school-qty-selector button {
    width: 26px !important;
    height: 26px !important;
    border: none !important;
    background: #ffffff !important;
    color: #0081C9 !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.school-qty-selector button:last-child {
    background: #0081C9 !important;
    color: #ffffff !important;
}

.school-qty-selector span {
    font-weight: 800 !important;
    color: #0081C9 !important;
    min-width: 20px !important;
    text-align: center !important;
    font-size: 13px !important;
}

/* ==============================================================================
   8. KARGO BARI & MİNİMUM SİPARİŞ STİLLERİ
   ============================================================================== */

/* 8.1 2.000 TL Üstü Kargo Barı Canlı Yeşil Renk Geçişi */
.shipping-banner-container.free-shipping-active,
#home-shipping-banner.free-shipping-active {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35) !important;
}

/* 8.2 Minimum Sipariş Tutarı (1.000 TL) Uyarı Kutuları & Sepeti Temizle Güvenlik Kilidi */
.min-order-warning-box {
    background: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-top: 14px !important;
    font-size: 13px !important;
    color: #e11d48 !important;
    display: flex;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08) !important;
}

.min-order-success-box {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-top: 14px !important;
    font-size: 13px !important;
    color: #16a34a !important;
    display: flex;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important;
}

.min-order-hidden,
#cart-min-order-alert.min-order-hidden,
#checkout-min-order-alert.min-order-hidden {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

button:disabled.btn-min-order-disabled,
.btn-min-order-disabled,
button:disabled.btn-clear-minimal,
.btn-clear-minimal.btn-clear-disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(0.7) !important;
}

/* 8.3 Ödeme Portalı İçi Ürün Çıkarma ve Satır Düzeni */
.checkout-item-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    gap: 12px !important;
}

.checkout-item-remove-btn {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.checkout-item-remove-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

.school-showcase-hero {
    display: none !important;
}

/* ==============================================================================
   11. AKILLI ÜRÜN GRUPLARI & KATEGORİ TAXONOMY MİMARİSİ
   ============================================================================== */
.category-hub-header {
    text-align: center;
    margin-bottom: 35px;
}

.category-hub-title {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.category-hub-subtitle {
    font-size: 14.5px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto 25px auto;
    line-height: 1.5;
}

.category-quick-filters-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.cat-filter-pill-btn {
    background: #ffffff;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.cat-filter-pill-btn:hover,
.cat-filter-pill-btn.active {
    background: #0081C9;
    color: #ffffff;
    border-color: #0081C9;
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.25);
    transform: translateY(-1px);
}

.smart-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    margin-bottom: 45px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1200px) {
    .smart-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}


.smart-category-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.smart-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px rgba(0, 129, 201, 0.13), 0 4px 12px rgba(15, 23, 42, 0.04);
    border-color: #0081C9;
}

.smart-category-cover {
    height: 165px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px;
    overflow: hidden;
}

.smart-category-card:hover .smart-category-cover {
    filter: brightness(1.03);
}

.smart-category-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.72) 100%);
    pointer-events: none;
}

.smart-category-badge {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.smart-category-icon-wrap {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #0081C9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-category-card:hover .smart-category-icon-wrap {
    background: #0081C9;
    color: #ffffff;
    transform: rotate(5deg) scale(1.08);
}

.smart-category-body {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.smart-category-title {
    font-size: 17.5px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.35;
    letter-spacing: -0.3px;
}

.smart-category-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px 0;
    line-height: 1.48;
    min-height: 38px;
}

.smart-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.smart-subcat-chip {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.smart-subcat-chip:hover {
    background: #0081C9;
    color: #ffffff;
    border-color: #0081C9;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 129, 201, 0.25);
}

.smart-subcat-chip:hover i {
    color: #ffffff !important;
}

.smart-category-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smart-category-count {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
}

.smart-category-btn {
    background: #0081C9;
    color: #ffffff;
    border: none;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 8px rgba(0, 129, 201, 0.25);
}

.smart-category-btn:hover {
    background: #006da8;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.35);
}

/* Modernize Catalog Cards (k-card) */
.k-card {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 370px !important;
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.k-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(0, 129, 201, 0.12) !important;
    border-color: #0081C9 !important;
}

.k-product-price {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0081C9 !important;
    letter-spacing: -0.3px;
}

@media (max-width: 640px) {
    .smart-category-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .k-card {
        min-height: 330px !important;
        padding: 12px !important;
    }
}

/* ==============================================================================
   12. KATALOG İÇİ AKILLI ROZETLER, ALT KATEGORİ VE SIRALAMA TOOLBAR'I
   ============================================================================== */
/* ==============================================================================
   12. SADELEŞTİRİLMİŞ MİNİMALİST KATALOG BAŞLIĞI VE FULL-HEIGHT SIDEBAR DÜZENİ
   ============================================================================== */
/* Üstteki gereksiz sekmeleri ve akıllı rozet barını tamamen kaldır */
#katalog-smart-badges-bar,
.katalog-smart-badges-bar,
#katalog-subcategories-bar,
.katalog-subcat-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
}

.katalog-container {
    max-width: 1520px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 16px 24px 80px 24px !important;
    box-sizing: border-box !important;
}

.katalog-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px 0 16px 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 150 !important;
}

.header-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.katalog-toolbar-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    border-top: 1px dashed #f1f5f9 !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.katalog-results-info {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

.katalog-sort-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.katalog-sort-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.katalog-sort-select {
    padding: 7px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background: #ffffff !important;
    cursor: pointer !important;
    outline: none !important;
}

.katalog-sort-select:focus {
    border-color: #0081C9 !important;
}

.b2b-bulk-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    color: #0369a1;
    background: #e0f2fe;
    padding: 3px 7px;
    border-radius: 5px;
    margin-top: 4px;
}

/* ==============================================================================
   12.1. FULL-HEIGHT SOL ALT GRUP MENÜSÜ & FERAH GRID DÜZENİ
   ============================================================================== */
.katalog-layout-row {
    display: flex !important;
    gap: 28px !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: calc(100vh - 180px) !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
    position: relative !important;
}

.katalog-sidebar {
    width: 290px !important;
    min-width: 290px !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 14px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--katalog-header-height, 160px) !important;
    max-height: calc(100vh - var(--katalog-header-height, 160px) - 20px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
    z-index: 50 !important;
}

.katalog-sidebar::-webkit-scrollbar {
    width: 5px;
}
.katalog-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.katalog-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #64748b;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}

.katalog-sidebar-header i {
    color: #0081C9;
    font-size: 14px;
}

.katalog-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.katalog-sidebar-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.katalog-sidebar-item:hover {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
    transform: translateX(3px);
}

.katalog-sidebar-item.active {
    background: #0081C9;
    color: #ffffff;
    border-color: #0081C9;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.25);
}

.katalog-sidebar-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.katalog-sidebar-item-left i {
    width: 18px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
}

.katalog-sidebar-item.active .katalog-sidebar-item-left i {
    color: #ffffff;
}

.katalog-sidebar-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.katalog-sidebar-item-count {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
    background: #e2e8f0;
    color: #475569;
    flex-shrink: 0;
}

.katalog-sidebar-item.active .katalog-sidebar-item-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.katalog-main-panel {
    flex: 1;
    min-width: 0;
}

/* ==============================================================================
   MOBİL VE OFF-CANVAS KATALOG MENÜSÜ & RESPONSIVE GRID
   ============================================================================== */
.katalog-mobile-filter-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.km-filter-toggle-btn {
    background: #0081C9;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s ease, transform 0.15s ease;
}

.km-filter-toggle-btn:hover {
    background: #006da8;
    transform: translateY(-1px);
}

.km-results-count {
    font-size: 12.5px;
    font-weight: 700;
    color: #64748b;
}

.katalog-sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100008;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.katalog-sidebar-backdrop.active {
    display: block !important;
    opacity: 1 !important;
}

@media (max-width: 992px) {
    .katalog-mobile-filter-bar {
        display: flex !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--katalog-mobile-header-height, 108px) !important;
        z-index: 995 !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 9px 12px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    }

    .katalog-layout-row {
        flex-direction: column !important;
    }

    .katalog-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 300px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 100010 !important;
        padding: 20px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.2) !important;
        transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        margin: 0 !important;
        border-radius: 0 18px 18px 0 !important;
        border: none !important;
        border-right: 1px solid #e2e8f0 !important;
    }

    .katalog-sidebar.mobile-open {
        left: 0 !important;
    }

    .katalog-sidebar-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
}

/* 2 SÜTUNLU RESPONSIVE ÜRÜN GRİD'İ (MOBİL) */
@media (max-width: 768px) {
    .katalog-container {
        padding: 12px 10px !important;
    }

    .katalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .k-card {
        min-height: auto !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
    }

    .k-card-img-wrapper img {
        height: 120px !important;
        padding: 4px !important;
    }

    .quick-view-trigger {
        display: none !important;
    }

    .k-card-info {
        padding: 6px 2px 2px 2px !important;
    }

    .k-card-info h3 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        height: 32px !important;
        margin-bottom: 4px !important;
        -webkit-line-clamp: 2 !important;
    }

    .k-product-price {
        font-size: 14px !important;
    }

    .b2b-bulk-tag {
        font-size: 9px !important;
        padding: 1px 4px !important;
        margin-top: 2px !important;
    }

    .k-controls {
        min-height: 34px !important;
        margin-top: 6px !important;
    }

    .k-controls button.k-buy-btn {
        height: 32px !important;
        font-size: 11.5px !important;
        border-radius: 6px !important;
    }

    .quantity-selector {
        padding: 2px 4px !important;
    }

    .quantity-selector .q-btn {
        width: 24px !important;
        height: 24px !important;
        font-size: 13px !important;
    }

    .quantity-selector span {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .katalog-grid {
        gap: 8px !important;
    }
    .k-card {
        padding: 8px 6px !important;
    }
    .k-card-img-wrapper img {
        height: 110px !important;
    }
    .k-card-info h3 {
        font-size: 11.5px !important;
    }
    .k-product-price {
        font-size: 13px !important;
    }
}

/* MOBİL AUTH MODAL OPTİMİZASYONU */
#auth-modal .auth-input,
.auth-input {
    font-size: 16px !important; /* iOS Safari auto-zoom engelleme */
}

#auth-modal .cart-modal-content {
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 576px) {
    #auth-modal {
        padding: 16px 12px !important;
    }
    #auth-modal .cart-modal-content {
        width: 95% !important;
        max-width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
    .auth-submit-btn {
        height: 44px !important;
        font-size: 13.5px !important;
    }
}

/* SABİT ALT SEPET BARI MOBİL SAFE-AREA */
@media (max-width: 768px) {
    #floating-cart-bar,
    .floating-cart-bar,
    #floating-cart,
    .sepet-bar {
        bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
        width: calc(100% - 20px) !important;
        padding: 8px 12px !important;
        border-radius: 16px !important;
    }
    .fcb-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }
    .fcb-title {
        font-size: 10.5px !important;
    }
    .fcb-total {
        font-size: 13.5px !important;
    }
    .fcb-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
}

/* ==============================================================================
   13. SUPABASE `siparisler` KART VE LİSTELEME TASARIMI
   ============================================================================== */
.op-order-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.op-order-card:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.op-order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 10px;
}

.op-order-no {
    font-size: 14.5px;
    font-weight: 800;
    color: #0081C9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.op-order-date {
    font-size: 12px;
    color: #64748b;
    margin-left: 8px;
}

.op-order-status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.op-status-hazirlaniyor {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.op-status-kargoda {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.op-status-teslim {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.op-order-corporate-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    background: #f8fafc;
    padding: 12px 14px;
    border-radius: 10px;
    margin: 14px 0;
    border: 1px solid #e2e8f0;
}

.op-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.op-detail-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
}

.op-detail-val {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-order-items-container {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 14px;
    max-height: 180px;
    overflow-y: auto;
}

.op-order-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 12px;
}

.op-order-item-row:last-child {
    border-bottom: none;
}

.op-order-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.op-order-item-img {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.op-order-item-title {
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-order-item-qty {
    color: #64748b;
    font-size: 11px;
}

.op-order-item-price {
    font-weight: 800;
    color: #0f172a;
    margin-left: 10px;
    white-space: nowrap;
}

.op-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
}

.op-order-totals {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
}

.op-order-grand-total {
    font-size: 15.5px;
    font-weight: 800;
    color: #0f172a;
}

.op-order-grand-total strong {
    color: #0081C9;
}

.op-reorder-btn {
    background: #f1f5f9;
    color: #0081C9;
    border: 1px solid #cbd5e1;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.op-reorder-btn:hover {
    background: #0081C9;
    color: #ffffff;
    border-color: #0081C9;
}

/* ==============================================================================
   14. [BAŞLIK 2 ÇÖZÜMÜ]: MÜKERRER ARAMA ÇUBUKLARININ KALDIRILMASI & TEK İNTERAKTİF ARAMA
   ============================================================================== */
.b2b-corporate-showcase-banner,
.b2b-trending-searches-bar,
.b2b-products-search-header {
    display: none !important; /* Mükerrer arama tetikleyicisi ve kalabalık barlar tamamen kaldırıldı */
}

.products-search-action-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
    transition: all 0.2s ease !important;
    z-index: 5 !important;
}

.products-search-action-btn:hover {
    background: #0081C9 !important;
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.28) !important;
}

/* ==============================================================================
   15. SOL ALT KÖŞE YUKARI ÇIKMA (SCROLL-TO-TOP) & SAĞ ALT WHATSAPP BUTONU
   ============================================================================== */
.wp-float {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 52px !important;
    height: 52px !important;
    background-color: #25d366 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 26px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.wp-float:hover {
    transform: translateY(-3px) scale(1.06) !important;
    background-color: #128c7e !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4) !important;
}

#backToTop,
.up-btn-left {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #0f172a 0%, #0081C9 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(14px) scale(0.9) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

#backToTop span,
.up-btn-left span {
    display: none !important;
}

#backToTop i,
.up-btn-left i {
    font-size: 19px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

#backToTop.active-scroll-btn,
.up-btn-left.active-scroll-btn {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

#backToTop.active-scroll-btn:hover,
.up-btn-left.active-scroll-btn:hover {
    transform: translateY(-4px) scale(1.06) !important;
    background: linear-gradient(135deg, #0081C9 0%, #0284c7 100%) !important;
    box-shadow: 0 12px 28px rgba(0, 129, 201, 0.4) !important;
}

body.cart-modal-open #backToTop,
body.cart-open #backToTop,
body.cart-modal-open .wp-float,
body.cart-open .wp-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .wp-float {
        bottom: 20px !important;
        right: 16px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 23px !important;
    }

    #backToTop,
    .up-btn-left {
        bottom: 20px !important;
        left: 16px !important;
        right: auto !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }

    #backToTop i,
    .up-btn-left i {
        font-size: 17px !important;
        margin: 0 !important;
    }
}

/* ==============================================================================
   16. [BAŞLIK 2 & 3 ÇÖZÜMÜ]: TEK İNTERAKTİF ARAMA ÇUBUĞU (SCALE & GENİŞLEYEN DROPDOWN)
   ============================================================================== */
.main-search-section {
    overflow: visible !important;
    position: relative !important;
    z-index: 60 !important;
    text-align: center !important;
    padding: 32px 16px 22px 16px !important;
}

.main-search-container {
    max-width: 720px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.main-search-section .main-search-wrapper,
.products-search-area .search-wrapper {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.products-search-area {
    padding: 12px 0 8px 0 !important;
    margin: 0 auto 24px auto !important;
    width: 100% !important;
    max-width: 650px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 60 !important;
}

.main-search-icon,
.search-icon {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: #64748b !important;
    pointer-events: none !important;
    z-index: 4 !important;
    transition: color 0.25s ease !important;
}

.main-search-wrapper:focus-within .main-search-icon,
.search-wrapper:focus-within .main-search-icon {
    color: #0081C9 !important;
}

/* Odaklanıldığında (Focus) Akıcı Büyüme (transform: scale(1.02); box-shadow: 0 8px 25px rgba(0,0,0,0.1)) */
#global-search,
#products-page-search {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 650px !important;
    padding: 14px 22px 14px 48px !important;
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    outline: none !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}

#products-page-search {
    padding-right: 130px !important;
}

#global-search::placeholder,
#products-page-search::placeholder {
    color: #64748b !important;
    font-weight: 400 !important;
}

#global-search:focus,
#products-page-search:focus {
    transform: scale(1.02) !important;
    border-color: #0081C9 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

#katalog-search {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 22px 12px 44px !important;
    height: 46px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50px !important;
    outline: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

#katalog-search:focus {
    transform: none !important;
    border-color: #0081C9 !important;
    box-shadow: 0 0 0 3px rgba(0, 129, 201, 0.18), 0 8px 20px rgba(0, 129, 201, 0.08) !important;
}

/* Genişleyen ve Kaydırılabilir Apple Tarzı Arama Sonuç Dropdown'ı */
.search-dropdown,
#global-search-results,
#products-search-results {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14) !important;
    z-index: 99999 !important;
    padding: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    animation: opDropdownSlide 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes opDropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.search-result-item:last-child {
    border-bottom: none !important;
}

.search-result-item:hover {
    background: #f8fafc !important;
    transform: translateX(2px) !important;
}

.search-result-item img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    padding: 3px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.search-result-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.search-result-info h4 {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* [BAŞLIK 3]: Sayfa Arası Hedef Ürün Odaklanma (Cross-Page Scroll & Jump Highlight) */
.smooth-focused-item,
.highlighted-product {
    outline: 2.5px solid #0081C9 !important;
    box-shadow: 0 0 0 8px rgba(0, 129, 201, 0.16), 0 18px 36px rgba(15, 23, 42, 0.14) !important;
    transform: translateY(-4px) scale(1.01) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 5 !important;
}

/* ==============================================================================
   17. ÖDEME SAYFASINDA ALT BARI GİZLEME & MOBİL UYUMLULUK
   ============================================================================== */
body.checkout-active #floating-cart-bar,
body.checkout-active .floating-cart-bar,
body.checkout-active #sepet-floating,
body.checkout-active .sepet-floating,
body:has(#checkout.active) #floating-cart-bar,
body:has(#checkout.active) #sepet-floating,
#checkout.active ~ #floating-cart-bar,
#checkout.active ~ #sepet-floating {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

@media (max-width: 768px) {
    #checkout.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        background: #f8fafc !important;
    }

    #checkout.active .checkout-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px 90px 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: #f8fafc !important;
    }

    .checkout-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout-row-2 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .checkout-card-box,
    .checkout-sticky-summary {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    .checkout-input-group input,
    .checkout-input-group textarea,
    .checkout-input-group select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    #iyzico-odemeyi-tamamla-btn {
        width: 100% !important;
        min-height: 54px !important;
        padding: 16px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 20px rgba(0, 129, 201, 0.3) !important;
    }
}

/* ==============================================================================
   18. [BAŞLIK 4 ÇÖZÜMÜ]: APPLE WALLET / APPLE CARD TARZI ELİT TİTANYUM KREDİ KARTI
   ============================================================================== */
.apple-wallet-card,
.standard-credit-card,
.virtual-credit-card {
    width: 100% !important;
    max-width: 400px !important;
    min-height: 215px !important;
    margin: 0 auto 26px auto !important;
    padding: 26px 28px !important;
    border-radius: 18px !important;
    /* Mat Titanyum / Dark Antrasit Apple Card Gradient */
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 55%, #111113 100%) !important;
    color: #f5f5f7 !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transform: none !important;
}

/* Hafif mat titanyum ışık yansıması */
.apple-wallet-card::before,
.standard-credit-card::before {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.07) 0%, transparent 55%) !important;
    pointer-events: none !important;
}

/* Sol üstte zarif mat metalik çip */
.cc-standard-top,
.apple-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

.cc-standard-chip,
.apple-card-chip {
    width: 42px !important;
    height: 30px !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #e5e5ea 0%, #aeaeb2 50%, #8e8e93 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    position: relative !important;
}

.cc-standard-chip::after,
.apple-card-chip::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px 8px !important;
    border: 1px solid rgba(28, 28, 30, 0.22) !important;
    border-radius: 3px !important;
}

/* Ortada Apple SF Pro / Inter standardında aralıklı ve son derece net kart numarası */
.cc-standard-number,
#card-preview-number {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', sans-serif !important;
    font-size: 21px !important;
    font-weight: 600 !important;
    letter-spacing: 3.4px !important;
    color: #ffffff !important;
    text-shadow: none !important;
    text-align: center !important;
    margin: 24px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Sol altta minimalist kart sahibi adı, sağ altta son kullanma tarihi */
.cc-standard-bottom,
.apple-card-bottom {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
}

.cc-standard-label,
.cc-standard-field-label {
    display: block !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #a1a1a6 !important;
    margin-bottom: 4px !important;
}

.cc-standard-val,
.cc-standard-field-value,
#card-preview-name,
#card-preview-exp {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: #f5f5f7 !important;
    text-shadow: none !important;
}

.cc-standard-expiry {
    text-align: right !important;
}

@media (max-width: 480px) {
    .apple-wallet-card,
    .standard-credit-card,
    .virtual-credit-card {
        padding: 14px 16px !important;
        min-height: 0 !important;
    }
    .cc-standard-number,
    #card-preview-number {
        font-size: 15px !important;
        letter-spacing: 1.8px !important;
    }
}

/* ==============================================================================
   20. [BAŞLIK 5 ÇÖZÜMÜ]: SAYFA KALABALIĞININ GİDERİLMESİ (APPLE / STRIPE MİNİMALİST LAYOUT)
   ============================================================================== */
body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

.content-wrap {
    max-width: 1560px !important;
    width: 94% !important;
    margin: 0 auto !important;
    padding: 32px 20px 56px 20px !important;
    box-sizing: border-box !important;
}

#products .content-wrap {
    max-width: 1760px !important;
    width: 97% !important;
    padding: 24px 12px 48px 12px !important;
}

/* ==============================================================================
   20. [BAŞLIK 2 ÇÖZÜMÜ]: "LİSTENİ GÖNDER, FİYAT TEKLİFİ AL!" WEB & MOBİL RESPONSIVE MİMARİSİ
   ============================================================================== */
.school-quote-section {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 32px auto 48px auto !important;
    padding: 0 24px !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.school-quote-section .quote-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    box-sizing: border-box !important;
}

.school-quote-section .quote-content-wrapper {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 24px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px 30px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.school-quote-section .quote-info-side h2 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin: 12px 0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

.school-quote-section .quote-info-side p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 20px !important;
}

.school-quote-section .quote-benefits-list {
    gap: 10px !important;
}

.school-quote-section .quote-benefits-list li {
    font-size: 14px !important;
}

.school-quote-section .quote-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    padding: 5px !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    box-sizing: border-box !important;
}

.school-quote-section .quote-tab-btn {
    flex: 1 1 0% !important;
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.school-quote-section .submit-quote-btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 16px !important;
    box-sizing: border-box !important;
}

/* Ürün Grupları (#products) İçerisindeki Yatay / Mobil Simetrik Kurumsal Teklif Kartı */
.b2b-quote-banner-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
    border: 1px solid #bae6fd !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin: 12px 0 36px 0 !important;
    box-shadow: 0 8px 26px rgba(2, 132, 199, 0.06) !important;
    box-sizing: border-box !important;
}

.b2b-quote-banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.b2b-quote-banner-icon {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0081C9 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.22) !important;
}

.b2b-quote-banner-texts {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.b2b-quote-banner-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: fit-content !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #0284c7 !important;
    background: #e0f2fe !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}

.b2b-quote-banner-texts h3 {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 2px 0 !important;
    line-height: 1.25 !important;
}

.b2b-quote-banner-texts h3 span {
    color: #0081C9 !important;
}

.b2b-quote-banner-texts p {
    font-size: 13.5px !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.b2b-quote-banner-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.b2b-quote-banner-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #25d366 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 22px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.b2b-quote-banner-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.36) !important;
}

/* Mobil Responsive (@media (max-width: 768px)): Alt Alta Dikey, Simetrik ve %100 Buton Genişliği */
@media (max-width: 768px) {
    .school-quote-section {
        margin: 20px auto 32px auto !important;
        padding: 0 14px !important;
    }

    .school-quote-section .quote-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .school-quote-section .quote-info-side {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .school-quote-section .quote-info-side h2 {
        font-size: 22px !important;
    }

    .school-quote-section .quote-info-side p {
        font-size: 13.5px !important;
        margin-bottom: 16px !important;
    }

    .school-quote-section .quote-benefits-list {
        width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .school-quote-section .quote-tabs {
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .school-quote-section .quote-tab-btn,
    .school-quote-section .submit-quote-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .b2b-quote-banner-card {
        flex-direction: column !important;
        align-items: stretch !important;
        text-align: center !important;
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    .b2b-quote-banner-left {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .b2b-quote-banner-texts {
        align-items: center !important;
    }

    .b2b-quote-banner-texts h3 {
        font-size: 19px !important;
    }

    .b2b-quote-banner-actions,
    .b2b-quote-banner-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.smart-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 28px 0 45px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1200px) {
    .smart-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .smart-category-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.smart-category-card {
    cursor: pointer !important;
    user-select: none !important;
    border-radius: 16px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.smart-category-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(0, 129, 201, 0.12), 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    border-color: #0081C9 !important;
}

.smart-category-card .smart-category-cover {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
}

/* [BAŞLIK 1 ÇÖZÜMÜ]: Ürün Grubu Kart İçerikleri (Sol üst rozet kaldırıldı, ikon sağ üstte korundu) */
.smart-category-badge {
    display: none !important;
}

.smart-category-cover {
    height: 165px !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 16px !important;
    overflow: hidden !important;
}

.smart-category-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.48 !important;
    margin: 0 0 14px 0 !important;
    min-height: 38px !important;
}

.smart-category-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
}

.smart-subcat-chip {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.smart-subcat-chip:hover {
    background: #0081C9 !important;
    color: #ffffff !important;
    border-color: #0081C9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 129, 201, 0.25) !important;
}

.smart-subcat-chip:hover i {
    color: #ffffff !important;
}

.smart-category-btn {
    background: #0081C9 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 9px 18px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 8px rgba(0, 129, 201, 0.25) !important;
}

.smart-category-btn:hover {
    background: #006da8 !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.35) !important;
}

.smart-category-card .smart-category-body {
    padding: 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
}

.smart-category-card .smart-category-title {
    margin: 0 0 12px 0 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    transition: color 0.22s ease !important;
}

.smart-category-card:hover .smart-category-title {
    color: #0081C9 !important;
}

.smart-category-arrow-hint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #0081C9 !important;
    background: #f0f9ff !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.smart-category-card:hover .smart-category-arrow-hint {
    background: #0081C9 !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

.k-card {
    border-radius: 14px !important;
    border: 1px solid #f1f5f9 !important;
    padding: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.035) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.k-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
    border-color: #bae6fd !important;
}

.checkout-card-box,
.checkout-sticky-summary {
    border-radius: 16px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045) !important;
    padding: 28px !important;
    background: #ffffff !important;
}

/* ==============================================================================
   19. [BAŞLIK 6 ÇÖZÜMÜ]: "SEPETİ TEMİZLE" ÖZEL ONAY MODALİ (CUSTOM CONFIRM MODAL)
   ============================================================================== */
.op-custom-confirm-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 10000090 !important; /* Sepet modalının (10000000) da üzerinde */
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.op-custom-confirm-overlay.active {
    display: flex !important;
    animation: opModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.op-custom-confirm-card {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 400px !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    text-align: center !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35) !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

.op-confirm-icon-circle {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    margin: 0 auto 16px auto !important;
    border: 2px solid #fecdd3 !important;
}

.op-confirm-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35 !important;
}

.op-confirm-desc {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 0 22px 0 !important;
    line-height: 1.5 !important;
}

.op-confirm-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.op-btn-cancel {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.op-btn-cancel:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.op-btn-confirm-danger {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.3) !important;
    transition: all 0.2s ease !important;
}

.op-btn-confirm-danger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.4) !important;
}

/* ==============================================================================
   [BAŞLIK 3 ÇÖZÜMÜ]: HIZLI BAKIŞ (QUICKVIEW) GÖRSEL BOYUTLANDIRMA VE MOBİL FİT
   ============================================================================== */
.qv-modal,
#quickview-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3000000 !important; /* Katalog (1000000) ve Sepet üstünde */
    padding: 20px !important;
    box-sizing: border-box !important;
}

.qv-content,
#quickview-modal .qv-content {
    background: #ffffff !important;
    border-radius: 20px !important;
    max-width: 840px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    padding: 30px !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35) !important;
    position: relative !important;
    z-index: 3000001 !important;
    box-sizing: border-box !important;
}

/* Resim Kapsayıcısı ve Kesin Sınırlamalar */
.qv-image-side,
#qv-zoom-area,
.quickview-img-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 350px !important;
    max-height: 350px !important;
    min-height: 260px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: crosshair !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* Görsel Etiketi: Asla Taşmaz, Orantılı Contain Olur */
#qv-img,
.qv-image-side img,
.quickview-img-container img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 350px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.15s ease-out !important;
}

/* Çoklu Görsel Galeri Küçük Resimleri (Thumbnails) */
.qv-image-side-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.qv-thumbnails {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.qv-thumb-pill {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    border: 2px solid #e2e8f0 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.qv-thumb-pill:hover,
.qv-thumb-pill.active {
    border-color: #0081C9 !important;
    box-shadow: 0 0 0 2px rgba(0, 129, 201, 0.25) !important;
    transform: translateY(-1px) !important;
}

.qv-thumb-pill img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Mobilde (<= 768px) Tam Ekran Oranına Sabitleme ve Taşma Önleme */
@media (max-width: 768px) {
    .qv-modal,
    #quickview-modal {
        padding: 10px !important;
        z-index: 3000000 !important;
    }

    .qv-content,
    #quickview-modal .qv-content {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 95% !important;
        max-width: 95% !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 16px 12px 20px 12px !important;
        gap: 10px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .qv-image-side-col {
        width: 100% !important;
        align-items: center !important;
    }

    .qv-image-side,
    #qv-zoom-area,
    .quickview-img-container {
        width: 100% !important;
        height: 165px !important;
        max-height: 165px !important;
        min-height: 130px !important;
        padding: 6px !important;
        border-radius: 12px !important;
        cursor: default !important;
    }

    #qv-img,
    .qv-image-side img,
    .quickview-img-container img {
        max-height: 155px !important;
        max-width: 95% !important;
        object-fit: contain !important;
    }

    .qv-thumbnails {
        gap: 6px !important;
        margin-top: 6px !important;
    }

    .qv-thumb-pill {
        width: 42px !important;
        height: 42px !important;
        border-radius: 7px !important;
        padding: 2px !important;
    }

    .qv-info-side {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #qv-title {
        font-size: 16px !important;
        line-height: 1.32 !important;
        margin-bottom: 6px !important;
        text-align: center !important;
        width: 100% !important;
    }

    #qv-price {
        font-size: 20px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    #qv-desc {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    #qv-action-area {
        width: 100% !important;
    }

    .close-qv {
        top: 8px !important;
        right: 8px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        z-index: 100 !important;
    }
}

/* ==========================================================================
   ELITE & LUXURY İLETİŞİM SAYFASI & RESMİ HESAPLAR TASARIMI
   ========================================================================== */
#contact.page {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding: 60px 0 80px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
}

.p-header-elite {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.p-header-elite-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(0, 129, 201, 0.08) !important;
    color: #0081C9 !important;
    font-weight: 800 !important;
    letter-spacing: 2.5px !important;
    font-size: 11.5px !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0, 129, 201, 0.2) !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
}

.p-header-elite h2 {
    font-size: 40px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
}

.p-elite-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 32px !important;
    align-items: stretch !important;
    margin-bottom: 45px !important;
}

.p-cards-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
}

.p-elite-card {
    background: #ffffff !important;
    padding: 34px 28px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04) !important;
    text-align: center !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.p-elite-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0081C9, #38bdf8) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.p-elite-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 22px 45px rgba(0, 129, 201, 0.12) !important;
    border-color: rgba(0, 129, 201, 0.3) !important;
}

.p-elite-card:hover::before {
    opacity: 1 !important;
}

.p-icon-elite {
    width: 68px !important;
    height: 68px !important;
    background: linear-gradient(135deg, #0081C9 0%, #005686 100%) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    margin: 0 auto 16px !important;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 8px 20px rgba(0, 129, 201, 0.3) !important;
}

.p-icon-elite::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
    background: #0081C9 !important;
    opacity: 0.3 !important;
    z-index: -1 !important;
    animation: pulse-blue 2.2s infinite !important;
}

@keyframes pulse-blue {
    0% { transform: scale(1); opacity: 0.35; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}

.p-tag-elite {
    display: inline-block !important;
    color: #0081C9 !important;
    background: #f0f9ff !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
}

.p-elite-card h3 {
    font-size: 23px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.3px !important;
}

.p-elite-card p {
    color: #475569 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 0 18px 0 !important;
}

.p-tel-link {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 6px !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

.p-tel-link:hover {
    color: #0081C9 !important;
}

.p-mail-link {
    font-size: 15px !important;
    color: #64748b !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}

.p-mail-link:hover {
    color: #0081C9 !important;
}

.btn-elite {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    padding: 13px 26px !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
}

.btn-elite:hover {
    background: #0081C9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 129, 201, 0.3) !important;
}

.btn-elite.btn-whatsapp {
    background: #25D366 !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
}

.btn-elite.btn-whatsapp:hover {
    background: #1eb857 !important;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45) !important;
}

.map-elite-wrapper {
    border-radius: 28px !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 480px !important;
    border: 8px solid #ffffff !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07) !important;
    background: #ffffff !important;
}

/* --- YENİLENMİŞ & ULTRA ŞIK RESMİ HESAPLAR BÖLÜMÜ --- */
.p-social-showcase {
    margin-top: 20px !important;
    background: #ffffff !important;
    border-radius: 30px !important;
    padding: 38px 32px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.04) !important;
    text-align: center !important;
}

.p-social-header {
    margin-bottom: 28px !important;
}

.p-social-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
}

.p-social-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
    margin: 0 0 8px 0 !important;
}

.p-social-subtitle {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 auto !important;
    max-width: 580px !important;
    line-height: 1.5 !important;
}

.p-social-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 24px !important;
}

.p-social-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
    position: relative !important;
    overflow: hidden !important;
}

.p-soc-icon-box {
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

.p-soc-meta {
    text-align: left !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.p-soc-name {
    display: block !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}

.p-soc-handle {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.p-soc-action {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

/* Özel Marka Renkleri ve Hover Efektleri */
.p-soc-instagram .p-soc-icon-box {
    background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) !important;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3) !important;
}
.p-soc-instagram:hover {
    border-color: #dc2743 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(220, 39, 67, 0.15) !important;
}
.p-soc-instagram:hover .p-soc-action {
    color: #dc2743 !important;
    transform: translate(2px, -2px) !important;
}
.p-soc-instagram:hover .p-soc-icon-box {
    transform: scale(1.08) !important;
}

.p-soc-facebook .p-soc-icon-box {
    background: #1877F2 !important;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3) !important;
}
.p-soc-facebook:hover {
    border-color: #1877F2 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(24, 119, 242, 0.15) !important;
}
.p-soc-facebook:hover .p-soc-action {
    color: #1877F2 !important;
    transform: translate(2px, -2px) !important;
}
.p-soc-facebook:hover .p-soc-icon-box {
    transform: scale(1.08) !important;
}

.p-soc-tiktok .p-soc-icon-box {
    background: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.p-soc-tiktok:hover {
    border-color: #000000 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}
.p-soc-tiktok:hover .p-soc-action {
    color: #000000 !important;
    transform: translate(2px, -2px) !important;
}
.p-soc-tiktok:hover .p-soc-icon-box {
    transform: scale(1.08) !important;
}

.p-soc-x .p-soc-icon-box {
    background: #0f172a !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
}
.p-soc-x:hover {
    border-color: #0f172a !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15) !important;
}
.p-soc-x:hover .p-soc-action {
    color: #0f172a !important;
    transform: translate(2px, -2px) !important;
}
.p-soc-x:hover .p-soc-icon-box {
    transform: scale(1.08) !important;
}

@media (max-width: 992px) {
    .p-elite-grid {
        grid-template-columns: 1fr !important;
    }
    .map-elite-wrapper {
        min-height: 360px !important;
    }
    .p-social-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 580px) {
    .p-social-grid {
        grid-template-columns: 1fr !important;
    }
    .p-header-elite h2 {
        font-size: 28px !important;
    }
    .p-elite-card {
        padding: 26px 20px !important;
    }
    .p-social-showcase {
        padding: 28px 18px !important;
    }
}






/* ==============================================================================
   İLETİŞİM SAYFASI: SOSYAL MEDYA İKON BUTONLARI (WP BUTONSUZ, ŞIK İKON DÜZENİ)
   ============================================================================== */
.soc-elite-item {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 24px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

.soc-elite-item:hover {
    transform: translateY(-4px) scale(1.08) !important;
}

.soc-instagram {
    background: linear-gradient(45deg, #f09433 0%, #dc2743 50%, #bc1888 100%) !important;
    box-shadow: 0 8px 20px rgba(220, 39, 67, 0.28) !important;
}

.soc-instagram:hover {
    box-shadow: 0 14px 28px rgba(220, 39, 67, 0.45) !important;
}

.soc-facebook {
    background: #1877F2 !important;
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.28) !important;
}

.soc-facebook:hover {
    box-shadow: 0 14px 28px rgba(24, 119, 242, 0.45) !important;
}

.soc-tiktok {
    background: #0f172a !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25) !important;
}

.soc-tiktok:hover {
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.4) !important;
}

.soc-x {
    background: #000000 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.soc-x:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4) !important;
}


/* ==============================================================================
   ÜRÜN GRUPLARI: SPOTLIGHT ARAMA MOTORU (TIKLANDIĞINDA BÜYÜYEN DİNAMİK ARAMA ÇUBUĞU)
   ============================================================================== */
.products-spotlight-area {
    margin: 20px auto 35px auto !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.products-spotlight-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 720px !important;
    height: 60px !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 8px 5px 22px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ARAMAYA TIKLANDIĞINDA / ODAKLANILDIĞINDA BÜYÜME (KONTROLLÜ VE ASLA TAŞMA YAPMAZ) */
.products-spotlight-wrapper:focus-within,
.products-spotlight-wrapper.is-focused {
    max-width: min(840px, 100%) !important;
    height: 62px !important;
    border-color: #0081C9 !important;
    box-shadow: 0 12px 32px rgba(0, 129, 201, 0.18), 0 0 0 3.5px rgba(0, 129, 201, 0.12) !important;
    transform: translateY(-1px) !important;
}

.products-spotlight-icon {
    font-size: 22px !important;
    color: #0081C9 !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

.products-spotlight-wrapper:focus-within .products-spotlight-icon,
.products-spotlight-wrapper.is-focused .products-spotlight-icon {
    transform: scale(1.15) rotate(-6deg) !important;
}

.products-spotlight-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    padding: 0 12px 0 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

.products-spotlight-input::placeholder {
    color: #94a3b8 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

.products-search-clear {
    background: #f1f5f9 !important;
    border: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.products-search-clear:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(1.1) !important;
}

.products-spotlight-btn {
    background: linear-gradient(135deg, #0081C9 0%, #006da8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.35) !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.products-spotlight-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(0, 129, 201, 0.45) !important;
}

/* Hızlı Popüler Arama Önerileri */
.products-quick-tags {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 15px !important;
}

.quick-tags-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-right: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.quick-tag-chip {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.quick-tag-chip:hover {
    background: #f0f9ff !important;
    border-color: #0081C9 !important;
    color: #0081C9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 129, 201, 0.12) !important;
}

/* ==============================================================================
   CANLI ARAMA SONUÇLARI: BÜYÜK GÖRSEL KARTLAR IZGARASI (ÜRÜN GRUPLARI GİBİ)
   ============================================================================== */
.products-search-results-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 24px !important;
}

.search-results-meta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.search-results-meta h3 {
    font-size: 18.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

.search-results-count-badge {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
}

.btn-clear-search-view {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    padding: 9px 18px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

.btn-clear-search-view:hover {
    background: #0081C9 !important;
    border-color: #0081C9 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.28) !important;
}

.smart-search-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1200px) {
    .smart-search-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 640px) {
    .smart-search-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* BÜYÜK GÖRSEL ARAMA KARTI (ÜRÜN GRUPLARINDAKİ GİBİ BÜYÜK & PRESTİJLİ) */
.search-visual-card {
    background: #ffffff !important;
    border-radius: 22px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 440px !important;
}

.search-visual-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 36px rgba(0, 129, 201, 0.14), 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    border-color: #0081C9 !important;
}

.search-card-img-wrap {
    height: 200px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    overflow: hidden !important;
}

.search-card-img-wrap img {
    max-height: 160px !important;
    max-width: 88% !important;
    object-fit: contain !important;
    transition: transform 0.35s ease !important;
}

.search-visual-card:hover .search-card-img-wrap img {
    transform: scale(1.08) !important;
}

.search-card-cat-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: rgba(0, 129, 201, 0.1) !important;
    color: #0081C9 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    backdrop-filter: blur(4px) !important;
}

.search-card-stock-badge {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 11px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.search-card-body {
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    text-align: left !important;
}

.search-card-title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
    min-height: 46px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.search-card-meta {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-bottom: 16px !important;
}

.search-card-price {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #0081C9 !important;
}

.search-card-kdv {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.search-card-actions {
    display: flex !important;
    gap: 8px !important;
}

.btn-search-card-qv {
    flex: 1 !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-search-card-qv:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.btn-search-card-view {
    flex: 1.25 !important;
    background: linear-gradient(135deg, #0081C9 0%, #006da8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 129, 201, 0.25) !important;
}

.btn-search-card-view:hover {
    background: #006da8 !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* SIFIR SONUÇ (ZERO STATE) KARTI */
.search-zero-state {
    grid-column: 1 / -1 !important;
    background: #ffffff !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 24px !important;
    padding: 48px 24px !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.03) !important;
}

.search-zero-state i.zero-icon {
    font-size: 48px !important;
    color: #94a3b8 !important;
    margin-bottom: 16px !important;
    display: inline-block !important;
}

.search-zero-state h4 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
}

.search-zero-state p {
    font-size: 14.5px !important;
    color: #64748b !important;
    margin: 0 0 24px 0 !important;
}

/* ==============================================================================
   ÜRÜN GRUPLARI KARTLARI: ENİNE GENİŞ, SADECE BAŞLIK ORTALI, FERAH MİMARİ
   ============================================================================== */
#products .content-wrap {
    max-width: 1760px !important;
    width: 97% !important;
    padding: 24px 14px 50px 14px !important;
}

.smart-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
    margin: 24px 0 40px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1280px) {
    .smart-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 640px) {
    .smart-category-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.smart-category-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    user-select: none !important;
    min-height: 385px !important;
    height: auto !important;
}

.smart-category-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 36px rgba(0, 129, 201, 0.14), 0 4px 12px rgba(15, 23, 42, 0.05) !important;
    border-color: #0081C9 !important;
}

.smart-category-cover {
    height: 150px !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 14px 16px !important;
    overflow: hidden !important;
}

.smart-category-cover::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.6) 100%) !important;
    pointer-events: none !important;
}

.smart-category-icon-wrap {
    position: relative !important;
    z-index: 2 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0081C9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 19px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    transition: all 0.28s ease !important;
}

.smart-category-card:hover .smart-category-icon-wrap {
    background: #0081C9 !important;
    color: #ffffff !important;
    transform: rotate(5deg) scale(1.08) !important;
}

.smart-category-card .smart-category-body {
    padding: 20px 22px 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: space-between !important;
    text-align: left !important;
}

/* SADECE BAŞLIK ORTALI OLSUN */
.smart-category-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* YAZILAR İÇ İÇE OLMASIN, FERAH VE OKUNAKLI */
.smart-category-desc {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.smart-category-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    align-content: flex-start !important;
    margin: 0 0 16px 0 !important;
}

.smart-subcat-chip {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.smart-subcat-chip:hover {
    background: #0081C9 !important;
    color: #ffffff !important;
    border-color: #0081C9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 129, 201, 0.2) !important;
}

.smart-subcat-chip:hover i {
    color: #ffffff !important;
}

.smart-category-footer {
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.smart-category-count {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.smart-category-btn {
    background: linear-gradient(135deg, #0081C9 0%, #006da8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-shadow: 0 2px 7px rgba(0, 129, 201, 0.25) !important;
}

.smart-category-btn:hover {
    background: #006da8 !important;
    transform: translateX(2px) !important;
    box-shadow: 0 4px 12px rgba(0, 129, 201, 0.35) !important;
}


/* ==============================================================================
   22. [MASTER GÜNCELLEME]: GÜVENLİ ÖDEME PORTALI MOBİL RESPONSIVE & KATEGORİ ARAMA KARTLARI
   ============================================================================== */

/* ------------------------------------------------------------------------------
   1) KATEGORİ VE SPOTLIGHT ARAMA SONUÇLARI KART DÜZENİ (YAZI KARIŞMASI KESİN ÇÖZÜMÜ)
   ------------------------------------------------------------------------------ */

/* ============================================================================== */
/* ESKİ PRESTİJLİ & BÜYÜK GÖRSEL ARAMA KARTLARI VE GELİŞTİRİLMİŞ KATALOG KARTLARI  */
/* ============================================================================== */

/* 1. Spotlight Arama Sonuçları Kartları Izgarası */
.smart-search-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Prestijli ve Büyük Görsel Arama Kartı (search-visual-card) */
.search-visual-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 380px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.search-visual-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px rgba(0, 129, 201, 0.14), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    border-color: #0081C9 !important;
}

/* Kart Görsel Alanı & Üst Rozet Barı (Eski Prestijli & Büyük Görseller) */
.search-card-img-wrap {
    height: 185px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.search-card-img-wrap img {
    max-height: 155px !important;
    max-width: 88% !important;
    object-fit: contain !important;
    transition: transform 0.35s ease !important;
}

.search-visual-card:hover .search-card-img-wrap img {
    transform: scale(1.05) !important;
}

.search-card-top-badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

.search-card-cat-badge {
    position: static !important;
    background: rgba(0, 129, 201, 0.08) !important;
    color: #0081C9 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 129, 201, 0.18) !important;
    max-width: 65% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.search-card-stock-badge {
    position: static !important;
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

/* Kart Gövde ve Tipografi (Ortalanmış Başlık ve Fiyat Arası Sıfırlanmış Boşluk) */
.search-card-body {
    padding: 12px 14px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.search-card-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.36 !important;
    min-height: 38px !important;
    max-height: 38px !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    transition: color 0.2s ease !important;
    width: 100% !important;
}

.search-visual-card:hover .search-card-title {
    color: #0081C9 !important;
}

/* Ürün Adı ve Fiyat Arasındaki Boşluk Kapatıldı */
.search-card-meta {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.search-card-price {
    font-size: 18.5px !important;
    font-weight: 800 !important;
    color: #0081C9 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

.search-card-kdv {
    font-size: 10.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
}

.search-card-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
}

.btn-search-card-qv {
    flex: 1 !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 36px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.btn-search-card-qv:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}

.btn-search-card-view {
    flex: 1.25 !important;
    background: linear-gradient(135deg, #0081C9 0%, #006da8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 36px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 129, 201, 0.22) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.btn-search-card-view:hover {
    background: #006da8 !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.32) !important;
    transform: translateY(-1px) !important;
}

/* 3. Geliştirilmiş Katalog / Kategori Ürün Kartları (k-card) */
.katalog-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.k-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 355px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.k-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 28px rgba(0, 129, 201, 0.12), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    border-color: #0081C9 !important;
}

.k-card:hover .k-card-title {
    color: #0081C9 !important;
}

.k-card-img-wrapper {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 175px !important;
    padding: 10px !important;
    border-bottom: 1px solid #f8fafc !important;
    box-sizing: border-box !important;
}

.k-card-img-wrapper img {
    max-height: 160px !important;
    max-width: 92% !important;
    object-fit: contain !important;
    transition: transform 0.35s ease !important;
}

.k-card:hover .k-card-img-wrapper img {
    transform: scale(1.06) !important;
}

/* Hızlı Bakış Hover Butonu */
.k-card .quick-view-trigger {
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(15px) !important;
    width: auto !important;
    height: 34px !important;
    padding: 0 16px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0081C9 !important;
    border: 1.5px solid rgba(0, 129, 201, 0.25) !important;
    border-radius: 18px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.18) !important;
    backdrop-filter: blur(6px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}

.k-card:hover .quick-view-trigger {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

.k-card .quick-view-trigger:hover {
    background: #0081C9 !important;
    color: #ffffff !important;
    border-color: #0081C9 !important;
    box-shadow: 0 6px 18px rgba(0, 129, 201, 0.35) !important;
}

.k-card-info {
    padding: 10px 2px 6px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.k-card-price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.k-product-price {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0081C9 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

.k-card-kdv-label {
    font-size: 10.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
}

.k-card-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
}

.b2b-bulk-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    background: #e0f2fe !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(2, 132, 199, 0.2) !important;
    margin: 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.b2b-bulk-tag.b2b-standard-tag {
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.k-card-info h3,
.k-card-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.38 !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 0 8px 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: break-word !important;
    transition: color 0.2s ease !important;
    width: 100% !important;
}

.k-controls {
    margin-top: auto !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.k-buy-btn,
.k-controls .blue-btn {
    width: 100% !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #0081C9 0%, #006da8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(0, 129, 201, 0.22) !important;
    transition: all 0.2s ease !important;
}

.k-buy-btn:hover,
.k-controls .blue-btn:hover {
    background: #006da8 !important;
    box-shadow: 0 6px 16px rgba(0, 129, 201, 0.35) !important;
    transform: translateY(-1px) !important;
}

.quantity-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f0f7ff !important;
    border: 1.5px solid #0081C9 !important;
    border-radius: 10px !important;
    height: 38px !important;
    padding: 3px 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.quantity-selector .q-btn {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    border-radius: 7px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.quantity-selector .q-btn:first-child {
    background: #ffffff !important;
    color: #0081C9 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.quantity-selector .q-btn:last-child {
    background: #0081C9 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 129, 201, 0.3) !important;
}

.quantity-selector .q-btn:active {
    transform: scale(0.92) !important;
}

.quantity-selector span {
    font-weight: 800 !important;
    color: #0081C9 !important;
    min-width: 24px !important;
    text-align: center !important;
    font-size: 15px !important;
}

/* ------------------------------------------------------------------------------
   2) GÜVENLİ ÖDEME PORTALI MASAÜSTÜ & GENEL STİLLERİ
   ------------------------------------------------------------------------------ */
.checkout-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
    padding: 12px 18px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

.checkout-back-btn {
    background: none !important;
    border: none !important;
    color: #0081C9 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.checkout-back-btn:hover {
    background: #f0f7ff !important;
    transform: translateX(-2px) !important;
}

.checkout-top-secure-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
}

.checkout-header-hero {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.checkout-header-logo {
    height: 38px !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
}

.checkout-header-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
}

.checkout-header-desc {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------------------------
   3) MOBİL UYUMLULUK MASTER KURAL GRUBU (@media max-width: 768px)
   ------------------------------------------------------------------------------ */
@media (max-width: 768px) {

    /* --- GÜVENLİ ÖDEME PORTALI MOBİL TAM SAYFA MODU --- */
    #checkout.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        background: #f8fafc !important;
        z-index: 999999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #checkout.active .checkout-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 10px 110px 10px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        background: transparent !important;
        overflow-x: hidden !important;
    }

    .checkout-top-bar {
        padding: 8px 12px !important;
        margin-bottom: 14px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .checkout-back-btn {
        font-size: 13px !important;
        gap: 6px !important;
    }

    .checkout-top-secure-badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .checkout-header-hero {
        margin-bottom: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout-header-logo {
        height: 28px !important;
        margin-bottom: 6px !important;
    }

    .checkout-header-title {
        font-size: 19px !important;
        margin: 0 0 4px 0 !important;
    }

    .checkout-header-desc {
        font-size: 12px !important;
    }

    .checkout-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout-card-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .checkout-card-box h3 {
        font-size: 15.5px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        color: #0f172a !important;
    }

    .checkout-step-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
        border-bottom: 1.5px solid #f1f5f9 !important;
        padding-bottom: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .checkout-brand-logos,
    .checkout-card-box img[src*="logo_band"] {
        max-width: 105px !important;
        height: auto !important;
        max-height: 15px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    /* Mobilde Form Alanları Dikey Hizalı ve %100 Fitleme (Kayma/Taşma Kesin Engellendi) */
    .checkout-row-2 {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Kredi Kartı Son Kullanma & CVC Mobilde 2 Eşit Sütun Olarak Korunur */
    .checkout-row-card-exp-cvc,
    .checkout-card-box .checkout-row-2.checkout-row-card-exp-cvc,
    .checkout-card-box .checkout-row-2:has(#cc-exp) {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        box-sizing: border-box !important;
    }

    .checkout-input-group {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .checkout-row-card-exp-cvc .checkout-input-group,
    .checkout-row-2:has(#cc-exp) .checkout-input-group {
        margin-bottom: 0 !important;
    }

    .checkout-input-group label {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        color: #334155 !important;
        margin: 0 0 5px 0 !important;
        display: block !important;
        text-align: left !important;
        letter-spacing: 0.1px !important;
    }

    .checkout-input-group input,
    .checkout-input-group textarea,
    .checkout-input-group select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important; /* iOS Safari otomatik zoom ve ekran kaymasını engelleme */
        line-height: 1.3 !important;
        padding: 11px 13px !important;
        border-radius: 10px !important;
        border: 1.5px solid #cbd5e1 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        box-sizing: border-box !important;
        outline: none !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .checkout-input-group input:focus,
    .checkout-input-group textarea:focus,
    .checkout-input-group select:focus {
        border-color: #0081C9 !important;
        box-shadow: 0 0 0 3px rgba(0, 129, 201, 0.15) !important;
    }

    /* SADECE MOBİLDE: Apple Wallet Kredi Kartı Önizlemesi Ekrandan Taşmayacak Şekilde Fitlendi */
    .apple-wallet-card,
    .standard-credit-card,
    .virtual-credit-card {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1.586 !important;
        padding: 14px 16px !important;
        border-radius: 14px !important;
        margin: 0 auto 16px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .cc-standard-chip,
    .apple-card-chip {
        width: 32px !important;
        height: 22px !important;
        border-radius: 4px !important;
    }

    .cc-standard-chip::after,
    .apple-card-chip::after {
        inset: 4px 6px !important;
    }

    .cc-standard-number,
    #card-preview-number {
        font-size: 15px !important;
        letter-spacing: 1.8px !important;
        margin: 8px 0 !important;
        width: 100% !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-variant-numeric: tabular-nums !important;
    }

    .cc-standard-bottom,
    .apple-card-bottom {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .cc-standard-label,
    .cc-standard-field-label {
        font-size: 8.5px !important;
        letter-spacing: 0.8px !important;
        margin-bottom: 2px !important;
    }

    .cc-standard-val,
    .cc-standard-field-value,
    #card-preview-name,
    #card-preview-exp {
        font-size: 11px !important;
        letter-spacing: 0.6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #card-preview-name {
        max-width: 160px !important;
    }

    /* Sağ Kolon Sipariş Özeti */
    .checkout-sticky-summary {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .checkout-sticky-summary h3 {
        font-size: 15.5px !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1.5px solid #f1f5f9 !important;
    }

    #checkout-cart-items-list {
        max-height: 220px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
    }

    .checkout-item-row {
        padding: 8px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 12.5px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    #iyzico-odemeyi-tamamla-btn {
        width: 100% !important;
        min-height: 52px !important;
        padding: 14px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        background: #0081C9 !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-shadow: 0 6px 20px rgba(0, 129, 201, 0.35) !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
    }

    #iyzico-odemeyi-tamamla-btn:active {
        transform: scale(0.98) !important;
    }

    /* Checkout aktifken tüm yüzen butonları gizle */
    body.checkout-active #floating-cart-bar,
    body.checkout-active .floating-cart-bar,
    body.checkout-active #sepet-floating,
    body.checkout-active .sepet-floating,
    body.checkout-active #backToTop,
    body.checkout-active .wp-float,
    body.checkout-active .up-btn-left,
    body:has(#checkout.active) #floating-cart-bar,
    body:has(#checkout.active) #sepet-floating,
    body:has(#checkout.active) #backToTop,
    body:has(#checkout.active) .wp-float,
    #checkout.active ~ #floating-cart-bar,
    #checkout.active ~ #sepet-floating,
    #checkout.active ~ #backToTop,
    #checkout.active ~ .wp-float {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    /* --- MOBİL KATEGORİ & SPOTLIGHT ARAMA SONUÇLARI KARTLARI (BÜYÜK GÖRSEL, ORTALI BAŞLIK, SIFIR BOŞLUK) --- */
    .smart-search-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .search-visual-card {
        min-height: 285px !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
        border: 1px solid #e2e8f0 !important;
    }

    .search-card-img-wrap {
        height: 138px !important;
        padding: 8px !important;
    }

    .search-card-img-wrap img {
        max-height: 118px !important;
        max-width: 90% !important;
    }

    .search-card-top-badges {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
        gap: 3px !important;
    }

    .search-card-cat-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
        max-width: 60% !important;
        border-radius: 8px !important;
    }

    .search-card-stock-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
        border-radius: 8px !important;
    }

    .search-card-body {
        padding: 8px 8px 10px 8px !important;
        align-items: center !important;
        text-align: center !important;
    }

    .search-card-title {
        font-size: 11.5px !important;
        line-height: 1.28 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 0 3px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Mobilde Başlık & Fiyat Arası Boşluk Kapatıldı */
    .search-card-meta {
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        margin-top: 3px !important;
        margin-bottom: 8px !important;
        padding-top: 4px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .search-card-price {
        font-size: 14.5px !important;
        font-weight: 800 !important;
    }

    .search-card-kdv {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }

    .search-card-actions {
        gap: 5px !important;
        margin-top: auto !important;
        width: 100% !important;
    }

    .btn-search-card-qv {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        padding: 0 !important;
    }

    .btn-search-card-view {
        flex: 1 !important;
        height: 32px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    .btn-text-qv {
        display: none !important;
    }

    .btn-text-view {
        display: inline !important;
    }

    /* Katalog İçi Mobilde 2 Sütun & Geliştirilmiş Kart Tasarımı */
    .katalog-toolbar-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding-top: 8px !important;
    }

    .katalog-results-info {
        font-size: 12px !important;
        line-height: 1.4 !important;
        width: 100% !important;
    }

    .katalog-sort-wrap {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .katalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .k-card {
        padding: 8px 8px 10px 8px !important;
        border-radius: 14px !important;
        min-height: 275px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }

    .k-card-img-wrapper {
        height: 115px !important;
        border-radius: 10px !important;
        padding: 4px !important;
    }

    .k-card-img-wrapper img {
        max-height: 102px !important;
    }

    .k-card-price-row {
        margin-top: 0 !important;
        margin-bottom: 3px !important;
        justify-content: center !important;
    }

    .k-product-price {
        font-size: 13.5px !important;
        font-weight: 800 !important;
    }

    .k-card-kdv-label {
        font-size: 8.5px !important;
        padding: 1px 4px !important;
    }

    .k-card-badge-row {
        min-height: 18px !important;
        margin-bottom: 4px !important;
        justify-content: center !important;
    }

    .b2b-bulk-tag {
        font-size: 8.5px !important;
        padding: 1.5px 5px !important;
        border-radius: 5px !important;
    }

    .k-card-title,
    .k-card-info h3 {
        font-size: 11px !important;
        line-height: 1.28 !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .k-controls {
        min-height: 32px !important;
        margin-top: auto !important;
    }

    .k-buy-btn,
    .k-controls .blue-btn {
        height: 32px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
        gap: 4px !important;
    }

    .quantity-selector {
        height: 34px !important;
        border-radius: 8px !important;
        padding: 2px 5px !important;
    }

    .quantity-selector .q-btn {
        width: 25px !important;
        height: 25px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }

    .quantity-selector span {
        font-size: 13.5px !important;
    }

    /* --- SEPET MODALI MOBİL UYUMU --- */
    #cart-modal {
        z-index: 1000020 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        display: none;
        align-items: stretch !important;
        justify-content: flex-end !important;
    }

    #cart-modal.active {
        display: flex !important;
    }

    .cart-modal-content {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #cart-modal.active .cart-modal-content {
        transform: translateX(0) !important;
    }

    .cart-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 18px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
        min-height: 58px !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    .cart-header h3 {
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .close-cart {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        border: none !important;
    }

    .close-cart:active {
        background: #e2e8f0 !important;
        transform: scale(0.92) !important;
    }

    .cart-items-wrapper {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 14px !important;
        margin: 0 !important;
        background: #f8fafc !important;
        box-sizing: border-box !important;
    }

    .cart-modal-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        box-sizing: border-box !important;
    }

    .cart-item-left {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .cart-item-thumb {
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
        border: 1px solid #e2e8f0 !important;
        object-fit: contain !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }

    .cart-item-details {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .cart-item-name {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cart-item-price {
        font-size: 12px !important;
        color: #64748b !important;
        margin-top: 3px !important;
        font-weight: 600 !important;
    }

    .cart-item-right {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-top: 8px !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    .quantity-selector-box {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: #f0f7ff !important;
        padding: 3px 6px !important;
        border-radius: 8px !important;
        border: 1px solid #bae6fd !important;
    }

    .qty-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 6px !important;
        border: none !important;
        background: #ffffff !important;
        color: #0081C9 !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }

    .qty-btn:active {
        transform: scale(0.92) !important;
    }

    .qty-btn-plus {
        background: #0081C9 !important;
        color: #ffffff !important;
    }

    .qty-val {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0081C9 !important;
        min-width: 22px !important;
        text-align: center !important;
    }

    .cart-item-subtotal {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0081C9 !important;
        text-align: right !important;
        flex: 1 !important;
        margin-right: 12px !important;
    }

    .cart-item-delete {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: #fef2f2 !important;
        color: #ef4444 !important;
        border: 1px solid #fee2e2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }

    .cart-item-delete:active {
        transform: scale(0.92) !important;
    }

    .cart-footer {
        padding: 14px 16px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 20px)) !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08) !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    .cart-footer .total-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        font-size: 13.5px !important;
    }

    .btn-complete-order {
        width: 100% !important;
        min-height: 50px !important;
        padding: 13px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        background: #0081C9 !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        box-shadow: 0 4px 14px rgba(0, 129, 201, 0.3) !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }

    .btn-clear-minimal {
        width: 100% !important;
        min-height: 40px !important;
        padding: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        border: 1px solid #ff4757 !important;
        color: #ff4757 !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- SPOTLIGHT ARAMA ÇUBUĞU MOBİL UYUMU --- */
    .products-spotlight-area {
        margin: 14px auto 20px auto !important;
        padding: 0 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .products-spotlight-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
        border-radius: 25px !important;
        padding: 4px 5px 4px 14px !important;
        border: 1.5px solid #cbd5e1 !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
        box-sizing: border-box !important;
        transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .products-spotlight-wrapper:focus-within,
    .products-spotlight-wrapper.is-focused {
        max-width: 100% !important;
        height: 48px !important;
        border-color: #0081C9 !important;
        box-shadow: 0 4px 16px rgba(0, 129, 201, 0.2), 0 0 0 2.5px rgba(0, 129, 201, 0.12) !important;
        transform: none !important;
    }

    .products-spotlight-icon {
        font-size: 16px !important;
        color: #0081C9 !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
    }

    .products-spotlight-input {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #0f172a !important;
        padding: 0 6px 0 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
    }

    .products-spotlight-input::placeholder {
        font-size: 13px !important;
        color: #94a3b8 !important;
    }

    .products-search-clear {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        font-size: 12px !important;
        margin-right: 4px !important;
        flex-shrink: 0 !important;
    }

    .products-spotlight-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 129, 201, 0.3) !important;
    }

    .products-quick-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        margin-top: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .quick-tags-label {
        font-size: 12px !important;
        margin-right: 2px !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin-bottom: 2px !important;
    }

    .quick-tag-chip {
        font-size: 12px !important;
        padding: 5px 11px !important;
        border-radius: 16px !important;
    }

    #katalog-search {
        font-size: 16px !important;
    }
    #katalog-search:focus {
        transform: none !important;
    }
}

/* Ekstra Küçük Ekranlar (<= 380px) */
@media (max-width: 380px) {
    .smart-search-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .checkout-row-card-exp-cvc {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .apple-wallet-card,
    .standard-credit-card,
    .virtual-credit-card {
        max-width: 275px !important;
        padding: 11px 13px !important;
        border-radius: 12px !important;
    }

    .cc-standard-chip,
    .apple-card-chip {
        width: 28px !important;
        height: 20px !important;
    }

    .cc-standard-number,
    #card-preview-number {
        font-size: 13.5px !important;
        letter-spacing: 1.2px !important;
        margin: 6px 0 !important;
    }

    .cc-standard-label {
        font-size: 8px !important;
    }

    .cc-standard-val,
    #card-preview-name,
    #card-preview-exp {
        font-size: 10px !important;
    }

    #card-preview-name {
        max-width: 130px !important;
    }
}

/* ==============================================================================
   23. SADECE MOBİL SÜRÜM: SOL AÇILIR KULLANICI ÇEKMECESİ, ORTALANMIŞ LOGO VE BİLDİRİM TOAST
   ============================================================================== */

/* MASAÜSTÜ KORUMASI (Masaüstünde bu bileşenler kesinlikle gizlidir) */
@media (min-width: 769px) {
    .mobile-user-btn,
    .mobile-user-backdrop,
    .mobile-user-drawer {
        display: none !important;
    }
}

/* SADECE MOBİL AYARLARI (<= 768px) */
@media (max-width: 768px) {
    /* Eski masaüstü giriş kutucuğu (#guest-view), profil kutucuğu ve sepet mobilde KESİNLİKLE GİZLİDİR */
    .header-buttons,
    header .header-buttons,
    .desktop-only-buttons,
    #guest-view,
    #user-view,
    .nav-auth-btn,
    .nav-cart-btn,
    .premium-cart-trigger,
    #user-dropdown {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 1. MOBİL HEADER DÜZENİ: SOLDA KULLANICI, ORTADA LOGO, SAĞDA HAMBURGER */
    header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08) !important;
        z-index: 999990 !important;
        box-sizing: border-box !important;
    }

    /* Sol Kullanıcı Butonu */
    .mobile-user-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #0081C9 !important;
        font-size: 18px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-user-btn:active {
        transform: scale(0.92) !important;
        background: #e0f2fe !important;
        border-color: #0081C9 !important;
    }

    .mobile-user-btn.logged-in {
        background: #eff6ff !important;
        border-color: #0081C9 !important;
        color: #0081C9 !important;
    }

    .mobile-user-badge-dot {
        position: absolute !important;
        top: 3px !important;
        right: 3px !important;
        width: 9px !important;
        height: 9px !important;
        background: #10b981 !important;
        border: 2px solid #ffffff !important;
        border-radius: 50% !important;
    }

    /* OfficePlus+ Logosu Kesinlikle Ortalanır */
    header .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 23px !important;
        font-weight: 800 !important;
        letter-spacing: -0.4px !important;
        white-space: nowrap !important;
        z-index: 5 !important;
        cursor: pointer !important;
    }

    /* Sağ Hamburger Menü Butonu */
    .menu-toggle {
        display: flex !important;
        margin-left: auto !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* ==============================================================================
       MOBİLDE KATALOG İÇİNDEYKEN ANA SİTE HEADER'I GÖZÜKMESİN, BAŞLIK KALSIN
       ============================================================================== */
    /* 1. Mobilde katalog açıkken ana site header'ı KESİNLİKLE GİZLENSİN */
    body.katalog-open header,
    body:has(#katalog-page.active) header {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 2. BAŞLIK KALSIN: Kategori Başlığı (#katalog-title) mobilde okunaklı, net ve ortalı görünsün */
    #katalog-title {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 4px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        text-align: center !important;
        flex: 1 !important;
        line-height: 1.3 !important;
    }

    /* Mobilde katalog içi gereksiz büyük logo gizlensin (başlık kalır) */
    .katalog-logo-area {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Üst başlık satırı: Sol Geri Butonu, Orta Başlık, Sağ 42px dengeleyici */
    .katalog-header {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 0 12px 0 !important;
        margin-bottom: 12px !important;
        position: sticky !important;
        top: 0 !important;
        background: #ffffff !important;
        z-index: 1000 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .katalog-header .header-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        gap: 8px !important;
    }

    .header-top > div:last-child {
        display: block !important;
        width: 42px !important;
        flex-shrink: 0 !important;
    }

    .katalog-header .search-wrapper {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .katalog-header .katalog-back {
        width: 42px !important;
        height: 42px !important;
        background: #f1f5f9 !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #0081C9 !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .katalog-header .katalog-back:active {
        background: #e0f2fe !important;
        transform: scale(0.92) !important;
    }

    #katalog-search {
        height: 42px !important;
        padding: 8px 14px 8px 38px !important;
        font-size: 14.5px !important;
        border-radius: 12px !important;
    }

    .search-icon {
        left: 13px !important;
        font-size: 15px !important;
    }

    .katalog-mobile-filter-bar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--katalog-mobile-header-height, 106px) !important;
        z-index: 995 !important;
    }
}

/* ==============================================================================
   SOL AÇILIR KULLANICI ÇEKMECESİ (DRAWER) VE BACKDROP
   ============================================================================== */
.mobile-user-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 9999990 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mobile-user-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.user-drawer-open {
    overflow: hidden !important;
}

.mobile-user-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 88vw !important;
    max-width: 360px !important;
    height: 100dvh !important;
    background: #ffffff !important;
    z-index: 9999995 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.mobile-user-drawer.active {
    transform: translateX(0) !important;
}

/* Çekmece Başlığı */
.mobile-drawer-header {
    background: linear-gradient(135deg, #0081C9 0%, #005f94 100%) !important;
    color: #ffffff !important;
    padding: 20px 18px 18px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 129, 201, 0.2) !important;
    position: relative !important;
}

.drawer-header-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.drawer-avatar-circle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

.drawer-header-info {
    min-width: 0 !important;
}

.drawer-header-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drawer-header-subtitle {
    font-size: 11.5px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drawer-close-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 17px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-close-btn:active {
    background: rgba(255, 255, 255, 0.32) !important;
    transform: scale(0.92) !important;
}

/* Çekmece Gövdesi */
.mobile-drawer-body {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 16px 24px 16px !important;
    box-sizing: border-box !important;
}

/* Sekme Değiştirici (Giriş Yap / Kayıt Ol) */
.drawer-tab-switcher {
    display: flex !important;
    background: #f1f5f9 !important;
    padding: 4px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    border: 1px solid #e2e8f0 !important;
}

.drawer-tab-btn {
    flex: 1 !important;
    padding: 10px 8px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-tab-btn.active {
    background: #ffffff !important;
    color: #0081C9 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Bilgi Kutusu */
.drawer-info-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    color: #0369a1 !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
}

.drawer-info-box i {
    font-size: 14px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* Form Elemanları ve Mobil Fit Girişler */
.drawer-input-group {
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.drawer-input-group label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}

.drawer-input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.drawer-input-icon {
    position: absolute !important;
    left: 14px !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.drawer-input-wrapper input {
    width: 100% !important;
    height: 46px !important;
    padding: 10px 40px 10px 42px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    -webkit-appearance: none !important;
}

.drawer-input-wrapper input:focus {
    border-color: #0081C9 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0, 129, 201, 0.15) !important;
}

.drawer-input-wrapper input::placeholder {
    color: #94a3b8 !important;
    font-size: 14px !important;
}

.drawer-eye-btn {
    position: absolute !important;
    right: 8px !important;
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-eye-btn:hover {
    color: #0081C9 !important;
}

.drawer-form-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    font-size: 12.5px !important;
    padding: 0 2px !important;
}

.drawer-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    user-select: none !important;
}

.drawer-checkbox-label input {
    accent-color: #0081C9 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

.drawer-forgot-link {
    color: #0081C9 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Ana Aksiyon Butonu */
.drawer-action-btn {
    width: 100% !important;
    height: 48px !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0081C9 0%, #005f94 100%) !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 129, 201, 0.28) !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-action-btn:active {
    transform: scale(0.98) !important;
    opacity: 0.95 !important;
}

.drawer-switch-text {
    text-align: center !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-top: 14px !important;
}

.drawer-switch-text a {
    color: #0081C9 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
}

/* Bireysel / Kurumsal Seçici (Kayıt Ol) */
.drawer-type-switcher {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.drawer-type-btn {
    flex: 1 !important;
    padding: 10px 6px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-type-btn.active {
    border-color: #0081C9 !important;
    background: #eff6ff !important;
    color: #0081C9 !important;
    font-weight: 700 !important;
}

/* Giriş Yapılmış Kullanıcı Kartı */
.drawer-profile-card {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
    border: 1.5px solid #dbeafe !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
}

.drawer-profile-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.drawer-profile-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #0081C9 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 129, 201, 0.25) !important;
}

.drawer-profile-details {
    min-width: 0 !important;
    flex: 1 !important;
}

.drawer-profile-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.drawer-profile-email {
    font-size: 12px !important;
    color: #64748b !important;
    margin-top: 2px !important;
    word-break: break-all !important;
}

.drawer-profile-company {
    font-size: 12px !important;
    color: #0081C9 !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
}

.drawer-profile-badge-row {
    margin-top: 10px !important;
}

.drawer-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #0081C9 !important;
    color: #ffffff !important;
}

/* Kullanıcı Menü Öğeleri */
.drawer-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
}

.drawer-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-menu-item:active {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    transform: scale(0.99) !important;
}

.drawer-menu-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.drawer-menu-icon.icon-blue {
    background: #eff6ff !important;
    color: #0081C9 !important;
}

.drawer-menu-icon.icon-emerald {
    background: #ecfdf5 !important;
    color: #10b981 !important;
}

.drawer-menu-icon.icon-amber {
    background: #fffbeb !important;
    color: #d97706 !important;
}

.drawer-menu-icon.icon-green {
    background: #f0fdf4 !important;
    color: #22c55e !important;
}

.drawer-menu-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.drawer-menu-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.drawer-menu-desc {
    font-size: 11px !important;
    color: #64748b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 1px !important;
}

.drawer-item-badge {
    padding: 3px 8px !important;
    border-radius: 12px !important;
    background: #0081C9 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
}

.drawer-menu-arrow {
    font-size: 12px !important;
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
}

/* Güvenli Çıkış Butonu */
.drawer-logout-btn {
    width: 100% !important;
    height: 44px !important;
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1.5px solid #ffe4e6 !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.drawer-logout-btn:active {
    background: #ffe4e6 !important;
    transform: scale(0.98) !important;
}

/* Çekmece Alt Bilgi */
.mobile-drawer-footer {
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.mobile-drawer-footer span {
    font-weight: 800 !important;
    color: #0081C9 !important;
}

/* ==============================================================================
   MODERN GLASSMORPHIC AUTH TOAST BİLDİRİMİ (ZARİF & PREMİUM)
   ============================================================================== */
.modern-auth-toast {
    position: fixed !important;
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    margin: 0 auto !important;
    max-width: 380px !important;
    z-index: 10000020 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid #10b981 !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transform: translateY(-120px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.modern-auth-toast.active {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modern-auth-toast.toast-error {
    border-color: #ef4444 !important;
}

.modern-auth-toast.toast-info {
    border-color: #0081C9 !important;
}

.modern-auth-toast.toast-warning {
    border-color: #f59e0b !important;
}

.modern-toast-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    color: #10b981 !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.modern-auth-toast.toast-error .modern-toast-icon-wrap {
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

.modern-auth-toast.toast-info .modern-toast-icon-wrap {
    background: #eff6ff !important;
    color: #0081C9 !important;
}

.modern-toast-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.modern-toast-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
}

.modern-toast-msg {
    font-size: 12.5px !important;
    color: #475569 !important;
    margin-top: 2px !important;
    line-height: 1.35 !important;
}

.modern-toast-close {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.modern-toast-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 3px !important;
    background: #10b981 !important;
    width: 100% !important;
}

.modern-auth-toast.toast-error .modern-toast-bar {
    background: #ef4444 !important;
}

.modern-auth-toast.toast-info .modern-toast-bar {
    background: #0081C9 !important;
}