/* =============================================
   PERFORMANS OPTİMİZELİ MOBILE SECONDARY ACTION BAR
   ============================================= */

/* Hide by default (desktop/emulator) */
.mobile-secondary-bar {
    display: none !important;
}

/* Show only on mobile (768px and below) */
@media (max-width: 768px) {
    /* Secondary Action Bar Container */
    .mobile-secondary-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 16px !important;
        background: #2a2a3e !important;
        border-bottom: 1px solid #404040 !important;
        position: relative !important;
        z-index: 45 !important;
        gap: 8px !important;
        /* Performans optimizasyonu */
        will-change: auto !important;
        transform: translateZ(0) !important;
    }
    
    /* Base Button Style - Performans Optimizeli */
    .mobile-secondary-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        text-decoration: none !important;
        transition: transform 0.2s ease !important; /* Sadece transform animasyonu */
        color: rgba(255, 255, 255, 0.8) !important;
        will-change: transform !important;
    }
    
    .mobile-secondary-btn:active {
        transform: translateZ(0) scale(0.98) !important; /* GPU hızlandırması */
    }
    
    /* İlan Pazarı (Sol) - İkon + Yazı */
    .mobile-secondary-market {
        gap: 6px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    
    .mobile-secondary-market i {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    .mobile-secondary-market span {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Tema Toggle - Modern Switch */
    .mobile-theme-toggle {
        width: 60px !important;
        height: 30px !important;
        background: #1a1a2e !important;
        border: 2px solid #404040 !important;
        border-radius: 20px !important;
        position: relative !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        outline: none !important;
    }
    
    .theme-toggle-track {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        border-radius: 18px !important;
        background: linear-gradient(90deg, #1a1a2e 0%, #2a2a3e 100%) !important;
    }
    
    .theme-toggle-thumb {
        width: 24px !important;
        height: 24px !important;
        background: white !important;
        border-radius: 50% !important;
        position: absolute !important;
        left: 2px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    
    .mobile-theme-icon-dark,
    .mobile-theme-icon-light {
        font-size: 10px !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-theme-icon-dark {
        color: #fbbf24 !important;
        display: inline-block !important;
    }
    
    .mobile-theme-icon-light {
        color: #60a5fa !important;
        display: none !important;
    }
    
    /* Cüzdan + Bakiye (Birleşik) - Modern Tasarım */
    .wallet-section-combined {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        height: 38px !important;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 212, 255, 0.12) 100%) !important;
        border: 1px solid rgba(0, 212, 255, 0.25) !important;
        border-radius: 12px !important;
        padding: 0 12px !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        min-width: 85px !important;
        max-width: 120px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    
    .wallet-section-combined::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
        transition: left 0.6s ease !important;
    }
    
    .wallet-section-combined:hover::before {
        left: 100% !important;
    }
    
    .wallet-section-combined:hover {
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 212, 255, 0.18) 100%) !important;
        border-color: rgba(0, 212, 255, 0.4) !important;
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15) !important;
    }
    
    .wallet-section-combined:active {
        transform: translateY(0) scale(0.98) !important;
        transition: all 0.1s ease !important;
    }
    
    .wallet-section-combined .wallet-svg {
        width: 14px !important;
        height: 14px !important;
        color: #00d4ff !important;
        stroke: currentColor !important;
        flex-shrink: 0 !important;
        filter: drop-shadow(0 1px 2px rgba(0, 212, 255, 0.3)) !important;
        transition: all 0.3s ease !important;
    }
    
    .wallet-section-combined:hover .wallet-svg {
        transform: scale(1.1) !important;
        filter: drop-shadow(0 2px 4px rgba(0, 212, 255, 0.4)) !important;
    }
    
    .wallet-balance-text {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #00d4ff !important;
        white-space: nowrap !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'SF Pro Display', sans-serif !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important;
        flex: 1 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }
    
    /* Sepet İkonu - Modern Tasarım */
    .mobile-secondary-cart {
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 10px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .mobile-secondary-cart::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
        transition: left 0.6s ease !important;
    }
    
    .mobile-secondary-cart:hover::before {
        left: 100% !important;
    }
    
    .mobile-secondary-cart i {
        font-size: 15px !important;
        color: rgba(255, 255, 255, 0.85) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-secondary-cart:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-1px) scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .mobile-secondary-cart:hover i {
        color: rgba(255, 255, 255, 1) !important;
        transform: scale(1.1) !important;
    }
    
    .mobile-secondary-cart:active {
        transform: translateY(0) scale(0.95) !important;
        transition: all 0.1s ease !important;
    }
    
    /* Avatar (Sağ) - Modern Tasarım */
    .mobile-secondary-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        border: 2px solid rgba(0, 212, 255, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1) !important;
    }
    
    .mobile-secondary-avatar::before {
        content: '' !important;
        position: absolute !important;
        top: -2px !important;
        left: -2px !important;
        right: -2px !important;
        bottom: -2px !important;
        border-radius: 50% !important;
        background: linear-gradient(45deg, rgba(0, 212, 255, 0.3), rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.3)) !important;
        z-index: -1 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .mobile-secondary-avatar:hover::before {
        opacity: 1 !important;
    }
    
    .avatar-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        transition: transform 0.3s ease !important;
    }
    
    .avatar-placeholder {
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 212, 255, 0.2) 100%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
    
    .avatar-placeholder i {
        font-size: 16px !important;
        color: #00d4ff !important;
        filter: drop-shadow(0 1px 2px rgba(0, 212, 255, 0.3)) !important;
    }
    
    .mobile-secondary-avatar:hover {
        border-color: rgba(0, 212, 255, 0.5) !important;
        transform: scale(1.08) !important;
        box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2) !important;
    }
    
    .mobile-secondary-avatar:hover .avatar-img {
        transform: scale(1.05) !important;
    }
    
    .mobile-secondary-avatar:active {
        transform: scale(0.95) !important;
        transition: all 0.1s ease !important;
    }
    
    /* Light theme için mobile secondary bar */
    body.light-theme .mobile-secondary-bar {
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    body.light-theme .mobile-secondary-market span,
    body.light-theme .mobile-secondary-market i {
        color: rgba(30, 41, 59, 0.8) !important;
    }
    
    body.light-theme .mobile-secondary-cart {
        background: rgba(30, 41, 59, 0.08) !important;
        border-color: rgba(30, 41, 59, 0.12) !important;
    }
    
    body.light-theme .mobile-secondary-cart::before {
        background: linear-gradient(90deg, transparent, rgba(30, 41, 59, 0.1), transparent) !important;
    }
    
    body.light-theme .mobile-secondary-cart i {
        color: rgba(30, 41, 59, 0.85) !important;
    }
    
    body.light-theme .mobile-secondary-cart:hover {
        background: rgba(30, 41, 59, 0.12) !important;
        border-color: rgba(30, 41, 59, 0.2) !important;
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.1) !important;
    }
    
    body.light-theme .mobile-secondary-cart:hover i {
        color: rgba(30, 41, 59, 1) !important;
    }
    
    body.light-theme .wallet-section-combined {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0.12) 100%) !important;
        border-color: rgba(14, 165, 233, 0.25) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    
    body.light-theme .wallet-section-combined::before {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
    }
    
    body.light-theme .wallet-section-combined:hover {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0.18) 100%) !important;
        border-color: rgba(14, 165, 233, 0.4) !important;
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
    }
    
    body.light-theme .wallet-section-combined .wallet-svg {
        color: #0ea5e9 !important;
        filter: drop-shadow(0 1px 2px rgba(14, 165, 233, 0.3)) !important;
    }
    
    body.light-theme .wallet-section-combined:hover .wallet-svg {
        filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.4)) !important;
    }
    
    body.light-theme .wallet-balance-text {
        color: #0ea5e9 !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    }
    
    body.light-theme .mobile-secondary-avatar {
        border-color: rgba(14, 165, 233, 0.3) !important;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1) !important;
    }
    
    body.light-theme .mobile-secondary-avatar::before {
        background: linear-gradient(45deg, rgba(14, 165, 233, 0.3), rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.3)) !important;
    }
    
    body.light-theme .mobile-secondary-avatar:hover {
        border-color: rgba(14, 165, 233, 0.5) !important;
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.2) !important;
    }
    
    body.light-theme .avatar-placeholder {
        background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.2) 100%) !important;
    }
    
    body.light-theme .avatar-placeholder i {
        color: #0ea5e9 !important;
        filter: drop-shadow(0 1px 2px rgba(14, 165, 233, 0.3)) !important;
    }
    
    body.light-theme .mobile-theme-toggle {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
    }
    
    body.light-theme .theme-toggle-track {
        background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    }
    
    body.light-theme .theme-toggle-thumb {
        left: calc(100% - 26px) !important;
    }
    
    body.light-theme .mobile-theme-icon-dark {
        display: none !important;
    }
    
    body.light-theme .mobile-theme-icon-light {
        display: inline-block !important;
    }
}