:root {
    --accent-blue: var(--primary-blue);
    --accent-blue-hover: #0076e4;
    --accent-red: #e21b4d;
    --accent-red-hover: #c41842;
    
    /* Default Light Mode for Client */
    --client-bg: #f8fafc;
    --client-sidebar-bg: #ffffff;
    --client-card-bg: #ffffff;
    --client-inner-card: #f8fafc;
    --client-text-main: #1e293b;
    --client-text-muted: #64748b;
    --client-border: #e2e8f0;
    --client-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --client-bg: #08090a;
    --client-sidebar-bg: #111111;
    --client-card-bg: #151515;
    --client-inner-card: #1a1a1a;
    --client-text-main: #f1f5f9;
    --client-text-muted: #94a3b8;
    --client-border: rgba(255, 255, 255, 0.05);
    --client-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.client-section {
    padding: 40px 0;
    min-height: 800px;
    background-color: var(--client-bg);
    transition: all 0.3s ease;
}

.client-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 25px;
    align-items: start;
}

.client-sidebar-overlay {
    display: none;
}

/* Sidebar Adjustment */
.client-sidebar {
    background-color: var(--client-sidebar-bg);
    border: 1px solid var(--client-border);
    box-shadow: var(--client-shadow);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    z-index: 100;
}

.sidebar-user-card {
    background: var(--accent-blue);
    padding: 30px 20px;
    text-align: center;
    color: white;
}

.profile-avatar-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.sidebar-user-card h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.sidebar-user-card p {
    margin: 5px 0 0;
    font-size: 12px;
    opacity: 0.7;
}

.mobile-sidebar-close {
    /* Yalnızca mobil çekmecede gösterilir. Masaüstünde kenar çubuğu sabit
       olduğu için kapatma butonu anlamsız; kuralı olmadığı için stilsiz
       bir blok olarak görünüyordu. */
    display: none;
}

.sidebar-balance-box {
    background: rgba(0, 0, 0, 0.2);
    margin: 20px -20px -30px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-balance-box span {
    font-size: 13px;
    opacity: 0.8;
}

.sidebar-balance-box strong {
    font-size: 15px;
    font-weight: 800;
}

.sidebar-menu-wrapper {
    padding: 20px;
}

.sidebar-group-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--client-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 10px 10px;
}

.sidebar-group-title:first-child {
    margin-top: 10px;
}

.client-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.client-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 8px;
    color: var(--client-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.client-nav-item i {
    font-size: 16px;
    width: 24px;
    text-align: center;
    opacity: 0.6;
}

.client-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-blue);
}

.client-nav-item.active {
    background: var(--accent-blue);
    color: white;
}

.client-nav-item.active i {
    opacity: 1;
}

.client-nav-item.logout {
    color: #f43f5e; /* Keep logout rose/red as standard */
    margin-top: 15px;
}

/* Main Content Adjustment */
.dashboard-header {
    margin-bottom: 30px;
}

.dashboard-header h1 {
    font-size: 28px;
    font-weight: 900;
    margin: 0;
    color: var(--client-text-main);
}

.dashboard-header p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--client-text-muted);
}

/* Top Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--client-card-bg);
    border: 1px solid var(--client-border);
    box-shadow: var(--client-shadow);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.stat-icon {
    width: 45px;
    height: 45px;
    background: rgba(var(--primary-blue-rgb), 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--accent-blue);
}

.stat-inner-icon-box {
    background: rgba(var(--primary-blue-rgb), 0.1);
    color: var(--accent-blue);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.stat-info span {
    display: block;
    font-size: 12px;
    color: var(--client-text-muted);
    margin-bottom: 5px;
}

.stat-info strong {
    font-size: 22px;
    font-weight: 900;
    color: var(--client-text-main);
}

.stat-add-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    background: var(--accent-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    cursor: pointer;
}

/* Quick Actions Grid */
.section-box {
    background: var(--client-card-bg);
    border: 1px solid var(--client-border);
    box-shadow: var(--client-shadow);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.section-box-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--client-text-main);
}

.section-box-title i {
    color: var(--accent-blue);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.quick-card {
    background: var(--client-inner-card);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--client-text-main);
    transition: all 0.2s ease;
}

.quick-card:hover {
    background: var(--client-bg);
    border-color: var(--accent-blue);
    transform: translateX(5px);
}

.quick-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quick-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(var(--primary-blue-rgb), 0.1);
    color: var(--accent-blue);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.quick-card-info span {
    font-weight: 700;
    font-size: 15px;
}

.quick-card i.fa-chevron-right {
    font-size: 12px;
    opacity: 0.3;
}

/* Recent Orders Placeholder */
.recent-orders-empty {
    text-align: center;
    padding: 60px 20px;
}

.recent-orders-empty i {
    font-size: 40px;
    opacity: 0.1;
    margin-bottom: 20px;
}

.recent-orders-empty p {
    font-size: 14px;
    color: var(--client-text-muted);
    margin-bottom: 25px;
}

.btn-primary-blue {
    background: var(--accent-blue);
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

.btn-primary-blue:hover {
    background: var(--accent-blue-hover);
}

/* Dashboard Menu Button (Mobile) */
.dashboard-menu-btn {
    display: none;
    align-items: center;
    gap: 12px;
    background: var(--client-card-bg);
    border: 1px solid var(--client-border);
    padding: 12px 20px;
    border-radius: 12px;
    color: var(--client-text-main);
    font-weight: 700;
    margin-bottom: 25px;
    cursor: pointer;
}

.dashboard-menu-btn i {
    color: var(--accent-blue);
}

/* ==========================================================================
   CLIENT MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 1024px) {
    .client-grid { 
        grid-template-columns: 1fr; 
    }
    
    .client-sidebar {
        position: fixed;
        top: 0;
        left: -320px;
        width: 300px;
        height: 100vh;
        z-index: 100001;
        border-radius: 0 30px 30px 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
        border: none;
    }
    
    .client-sidebar.active {
        left: 0;
    }

    .mobile-sidebar-close {
        display: flex !important;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        cursor: pointer;
        z-index: 100;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .mobile-sidebar-close:active {
        transform: scale(0.8) rotate(90deg);
        background: rgba(255, 255, 255, 0.2);
    }

    .sidebar-user-card {
        padding: 45px 25px 35px;
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 100%);
        position: relative;
        overflow: hidden;
    }

    .sidebar-user-card::before {
        content: '';
        position: absolute;
        top: -50px;
        right: -50px;
        width: 150px;
        height: 150px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .profile-avatar-circle {
        width: 75px;
        height: 75px;
        background: rgba(255, 255, 255, 0.15);
        border: 4px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }

    .sidebar-user-card h4 { font-size: 18px; }
    .sidebar-user-card p { font-size: 13px; margin-top: 4px; }

    .sidebar-balance-box {
        margin: 25px -25px -35px;
        padding: 18px 25px;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sidebar-balance-box span { font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 11px; }
    .sidebar-balance-box strong { font-size: 17px; }
    
    .client-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(10px);
        z-index: 100000;
        display: none;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    
    .client-sidebar-overlay.active {
        display: block;
    }

    .stats-grid { grid-template-columns: 1fr; }
    .quick-actions-grid { grid-template-columns: 1fr; }
    
    .dashboard-menu-btn {
        display: flex;
    }
}

/* ==========================================================================
   TABS & SETTINGS STYLES
   ========================================================================== */

.settings-tab-nav {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--client-border);
    margin-bottom: 40px;
    padding-bottom: 2px;
}

.settings-tab-btn {
    background: none;
    border: none;
    padding: 15px 5px;
    color: var(--client-text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-tab-btn:hover {
    color: var(--client-text-main);
}

.settings-tab-btn.active {
    color: var(--accent-blue);
}

.settings-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(var(--primary-blue-rgb), 0.4);
}

.settings-pane {
    display: none;
    animation: slideIn 0.4s ease-out;
}

.settings-pane.active {
    display: block;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Forms in Settings */
.settings-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 800px;
}

.settings-input-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-input-group label {
    font-size: 11px;
    font-weight: 800;
    color: var(--client-text-muted);
    text-transform: uppercase;
}

.settings-input {
    background: var(--client-inner-card);
    border: 1px solid var(--client-border);
    padding: 14px 18px;
    border-radius: 10px;
    color: var(--client-text-main);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
}

.settings-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(var(--primary-blue-rgb), 0.05);
    outline: none;
}

/* Notification Toggles */
.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    background: var(--client-inner-card);
    border: 1px solid var(--client-border);
    border-radius: 15px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.notification-info h5 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
    color: var(--client-text-main);
}

.notification-info p {
    font-size: 12px;
    color: var(--client-text-muted);
}

/* Switch UI */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.05);
    transition: .4s;
    border-radius: 34px;
    border: 1px solid var(--client-border);
}

.slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* ==========================================================================
   NOTIFICATION SYSTEM
   ========================================================================== */

.notification-wrapper {
    position: relative;
    cursor: pointer;
}

.notif-badge {
    position: absolute;
    top: -5px;
    right: 0px;
    background: #f43f5e;
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--header-bg, #000);
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
    z-index: 10;
}

.notif-dropdown {
    position: fixed;
    top: 75px;
    right: max(20px, calc((100% - 1600px) / 2 + 60px)); /* Sitenin container'ına göre hizalama */
    width: 380px;
    background: var(--client-card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--client-border);
    border-radius: 20px;
    box-shadow: var(--client-shadow);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 5px;
}

.notif-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notif-dropdown-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--client-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-dropdown-header h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--client-text-main);
    margin: 0;
}

.notif-mark-all {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-blue);
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notif-mark-all:hover {
    text-shadow: 0 0 8px rgba(var(--primary-blue-rgb), 0.5);
}

.notif-list-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.notif-item {
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 5px;
    transition: 0.2s;
    display: flex;
    gap: 15px;
    border: 1px solid transparent;
}

.notif-item:hover {
    background: rgba(var(--primary-blue-rgb), 0.03);
    border-color: rgba(var(--primary-blue-rgb), 0.1);
}

.notif-item.unread {
    background: rgba(var(--primary-blue-rgb), 0.05);
}

.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.notif-icon.info { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.notif-icon.success { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.notif-icon.warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.notif-icon.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.notif-content {
    flex: 1;
}

.notif-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--client-text-main);
    margin-bottom: 4px;
}

.notif-msg {
    font-size: 12px;
    color: var(--client-text-muted);
    line-height: 1.5;
}

.notif-time {
    display: block;
    font-size: 10px;
    color: var(--client-text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.6;
}

.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--client-text-muted);
}

.notif-empty i {
    font-size: 32px;
    opacity: 0.2;
    margin-bottom: 15px;
}



/* ===== Dual Slider Section ===== */
.dual-slider-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.dual-slider-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}

.dual-slide-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 12 / 5;
    border-radius: 14px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;
    text-decoration: none;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* Showcase kartlarında aspect-ratio override edilir, width 100% korunur */
.sc-side, .sc-center { width: 100%; }

.dual-slide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}

.dual-slide-overlay {
    position: absolute;
    inset: 0;
    /* İstenildiği üzere karartma/gradient kaldırıldı */
    background: none;
    border-radius: inherit;
    pointer-events: none;
}

.dual-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 20px;
    /* Buton ile çakışmasını önlemek için sağ tarafta boşluk bırak */
    padding-right: 140px;
}

.dual-slide-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

.dual-slide-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dual-slide-btn {
    position: absolute;
    bottom: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    border-radius: 50px;
    text-shadow: none;
    transition: background 0.2s, transform 0.2s;
    pointer-events: none;
}

.dual-slide-card:hover .dual-slide-btn {
    background: rgba(255,255,255,0.28);
    transform: translateX(3px);
}

/* ===== Showcase (5-card) layout =====
 * Desktop:            Tablet/Mobil (≤900):
 * [TL][CENTER][TR]    [TL]  [TR]
 * [BL][      ][BR]    [CENTER  ]
 *                     [BL]  [BR]
 *
 * Görsel: 1200×500 = 12:5 oranı
 ======================================= */

.sc-side, .sc-center {
    aspect-ratio: unset !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Desktop grid */
.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 2.7fr 1fr; /* Matematiksel mükemmellik: Yanlar 16:9 iken merkezin 12:5 kalmasını sağlar */
    grid-template-rows: auto auto;
    gap: 12px;
}

/* Grid pozisyonları */
.sc-tl     { grid-column: 1; grid-row: 1; border-radius: 12px; }
.sc-bl     { grid-column: 1; grid-row: 2; border-radius: 12px; }
.sc-center { grid-column: 2; grid-row: 1 / 3; border-radius: 16px; }
.sc-tr     { grid-column: 3; grid-row: 1; border-radius: 12px; }
.sc-br     { grid-column: 3; grid-row: 2; border-radius: 12px; }

/* Yan yükseklik: mobildeki gibi tam 16:9 referans ölçüsü */
.sc-side {
    height: calc((min(100vw, 1600px) - 68px) / 4.7 * 101.53 / 180.5) !important;
    min-height: 120px;
}

/* Merkez yükseklik: Tam olarak iki yan kart + boşluk yüksekliği (Doğal olarak 12:5 oranını korur) */
.sc-center {
    height: calc(((min(100vw, 1600px) - 68px) / 4.7 * 101.53 / 180.5) * 2 + 12px) !important;
    min-height: 252px;
}

/* Tipografi */
.sc-center .dual-slide-title   { font-size: clamp(14px, 1.8vw, 26px); }
.sc-center .dual-slide-btn     { font-size: 13px; padding: 9px 18px; }
.sc-side   .dual-slide-title   { font-size: clamp(12px, 1.1vw, 16px); -webkit-line-clamp: 2 !important; white-space: normal !important; }
.sc-side   .dual-slide-subtitle{ font-size: 10px; margin-bottom: 2px; -webkit-line-clamp: 2 !important; white-space: normal !important; }
.sc-side   .dual-slide-content { padding: 10px 14px; padding-right: 20px; bottom: 0; }
.sc-side   .dual-slide-btn     { font-size: 11px; padding: 5px 11px; bottom: 10px; right: 10px; }

/* Desktop: section'ın yan padding'ini biraz azalt → side cards büyüsün */
@media (min-width: 901px) {
    .dual-slider-section.container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .showcase-grid { gap: 10px; }
}

/* Yan kart: tam görünür net görsel + inline background-image'ı gizle.
   Kart yüksekliği görselin 12:5 oranına eşit → kırpılma yok, boşluk yok, net görsel. */
.sc-side {
    position: relative;
    background-image: none !important;  /* inline bg'yi devre dışı bırak — sadece <img> görünsün */
    background-color: #0b0e1a;
}
.sc-side-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* kart 12:5 olduğu için 12:5 görsel tam oturur, kırpılma yok */
    object-position: center;
    z-index: 1;
    pointer-events: none;
    display: block;
}
.sc-side > .dual-slide-overlay,
.sc-side > .dual-slide-content,
.sc-side > .dual-slide-btn { position: absolute; z-index: 2; }

/* ── Tablet + Mobil (≤900px): [TL][TR] / [CENTER] / [BL][BR] ── */
@media (max-width: 900px) {
    /* Section'ı edge-to-edge yap — yan padding'i kaldır, kartlar maksimum genişliğe ulaşsın */
    .dual-slider-section.container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .showcase-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 6px;
    }
    .sc-tl     { grid-column: 1; grid-row: 1; }
    .sc-tr     { grid-column: 2; grid-row: 1; }
    .sc-center { grid-column: 1 / -1; grid-row: 2; border-radius: 14px; }
    .sc-bl     { grid-column: 1; grid-row: 3; }
    .sc-br     { grid-column: 2; grid-row: 3; }

    /* Merkez: Eski oran korunur (kullanıcı talebi) */
    .sc-center {
        height: calc((100vw - 12px) * 5 / 12);
        min-height: 150px;
    }
    /* Yan: Mobildeki aynı referans oranı (180.5 x 101.53) */
    .sc-side {
        height: auto;
        aspect-ratio: 180.5 / 101.53;
        min-height: 120px;
        border-radius: 12px;
    }

    .sc-center .dual-slide-title { font-size: clamp(13px, 3.5vw, 22px); }
    .sc-side   .dual-slide-title { font-size: clamp(12px, 3vw, 16px); -webkit-line-clamp: 2 !important; }
    .sc-side   .dual-slide-subtitle { -webkit-line-clamp: 2 !important; }
    .sc-side   .dual-slide-content { padding: 10px 12px; }
    .sc-side   .dual-slide-btn   { font-size: 11px; padding: 6px 12px; bottom: 10px; right: 10px; }
    .sc-center .dual-slide-btn   { font-size: 12px; }
}

/* ── Mobil (≤520px): 2'li yan yana KORUNDU, edge-to-edge maks. genişlik ── */
@media (max-width: 520px) {
    .dual-slider-row {
        grid-template-columns: 1fr;
    }
    .dual-slider-section.container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .showcase-grid { gap: 6px !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto auto !important; }
    .sc-tl     { grid-column: 1 !important; grid-row: 1 !important; }
    .sc-tr     { grid-column: 2 !important; grid-row: 1 !important; }
    .sc-center { grid-column: 1 / -1 !important; grid-row: 2 !important; border-radius: 12px !important; }
    .sc-bl     { grid-column: 1 !important; grid-row: 3 !important; }
    .sc-br     { grid-column: 2 !important; grid-row: 3 !important; }

    .sc-center {
        height: calc((100vw - 8px) * 5 / 12) !important;
        aspect-ratio: unset !important;
        min-height: 130px !important;
    }
    .sc-side {
        height: auto !important;
        aspect-ratio: 180.5 / 101.53 !important; /* Tam olarak kullanıcının gönderdiği ekran görüntüsündeki oran (yaklaşık 16:9) */
        min-height: 0 !important;
        border-radius: 10px !important;
    }

    .sc-side   .dual-slide-title   { font-size: 10px !important; margin-bottom: 2px !important; -webkit-line-clamp: 2 !important; }
    .sc-side   .dual-slide-subtitle{ font-size: 9px !important; -webkit-line-clamp: 2 !important; }
    .sc-side   .dual-slide-content { padding: 8px !important; padding-right: 12px !important; }
    .sc-side   .dual-slide-btn     { font-size: 9px !important; padding: 4px 7px !important; bottom: 8px !important; right: 8px !important; }
    .sc-center .dual-slide-title   { font-size: 13px !important; }
    .sc-center .dual-slide-btn     { font-size: 11px; padding: 6px 10px; }
}


/* ── Side Banner (Kalıcı Yan Banner) İçerik ── */
.side-banner-content {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    pointer-events: none;
}
.side-banner-subtitle {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.side-banner-title {
    font-size: clamp(11px, 1vw, 15px);
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
.side-banner-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 4px 12px;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 50px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    width: fit-content;
    backdrop-filter: blur(6px);
    text-shadow: none;
}

a.hero-card.side-card {
    display: block;
    text-decoration: none;
}

/* ── Kalıcı Yan Banner — tam görsel kapsaması ── */
.hero-card.side-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1476 / 450 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.hero-grid {
    align-items: stretch !important;
}

.hero-side {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

@media (max-width: 1024px) {
    .hero-grid  {
        grid-template-columns: 1fr !important;
        gap: 2px !important; /* Slider ile bannerlar arası boşluğu minimuma indir */
    }
    .hero-side  {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Tabletlerde yan yana 2 tane */
        grid-template-rows: auto !important;
        height: auto !important;
        gap: 12px !important;
        margin-top: -8px !important; /* Slider ile banner arası küçük boşluk bırak */
    }
    .side-banner-wrap {
        aspect-ratio: 1476 / 450 !important; /* Tablet için orijinal yatay oran */
        height: auto !important;
    }
    .side-banner-wrap,
    .side-banner-wrap .side-banner-img,
    .side-banner-wrap::after {
        border-radius: 4px !important; /* Daha sert köşe — tüm katmanlar */
    }
}

/* Yan banner butonunu sağ alta sabitleme (Genel kural) */
.side-banner-btn {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    z-index: 20 !important;
}

@media (max-width: 600px) {
    .hero-grid {
        margin-left: -8px !important;
        margin-right: -8px !important;
        width: calc(100% + 16px) !important; /* Slider ve bannerları büyüt — kenarda ~7px minimal boşluk kalır */
        gap: 6px !important; /* Slider ile bannerlar arası boşluğu azalt */
    }
    .hero-side {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important; /* Ortadaki boşluğu 4px'e indirip resimlere en yüksek alanı verdik */
    }
    .side-banner-wrap,
    .side-banner-wrap .side-banner-img,
    .side-banner-wrap::after {
        border-radius: 4px !important; /* Daha sert köşe — tüm katmanlar */
    }
    .side-banner-wrap {
        aspect-ratio: auto !important;
        height: auto !important;
    }
    .side-banner-wrap .side-banner-img {
        height: auto !important;
        object-fit: contain !important;
    }
    .side-banner-content {
        padding: 10px !important;
    }
    .side-banner-btn {
        bottom: 8px !important;
        right: 8px !important;
        padding: 5px 10px !important;
        font-size: 10px !important;
    }
}


/* ── Side Banner — img tag ile tam görsel ── */
.side-banner-wrap {
    flex: 1;
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: visible;
    text-decoration: none;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    line-height: 0;
    min-height: 0 !important;
}
.side-banner-wrap .side-banner-img {
    border-radius: 20px;
    overflow: hidden;
}
.side-banner-wrap::after {
    display: none;
}
.side-banner-wrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.side-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.side-banner-content {
    z-index: 2;
}

/* ── Hero Slider Görsel Optimizasyonları (Temadan Bağımsız) ── */
.hero-grid {
    height: auto !important;
    align-items: stretch !important;
}
.hero-main {
    aspect-ratio: 12 / 5 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important; /* Yan banner'lara taşmayı (overlap) kesinlikle engeller */
    min-width: 0 !important;
}

/* PC: Yan bannerlar varken slider'ı banner kolonuyla aynı yüksekliğe getir */
@media (min-width: 1025px) {
    .hero-grid:has(.hero-side) .hero-main {
        aspect-ratio: auto !important;
        height: auto !important;
        align-self: stretch !important;
    }
}
.slide-bg-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important; /* Görselin sağındaki karakteri korumak için */
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ── İç İçe Geçme / Optimizasyon Düzeltmeleri ── */

/* Sayaç Yuvarlağını sağ alt köşeye alıyoruz (Soldaki yazılarla çakışmaması için) */
.slider-progress-wrapper {
    left: auto !important;
    right: 40px !important;
    bottom: 40px !important;
}

/* Ana slider üzerindeki karartma efektini tamamen kaldırıyoruz */
.hero-main .card-overlay {
    background: none !important;
}

/* Slide kenarındaki parlama (glow/box-shadow) efektini kaldır */
.hero-main .main-slide {
    box-shadow: none !important;
}

/* Yan banner overlay kaldırıldı */
.side-banner-wrap::after {
    display: none !important;
}

/* ══ Öne Çıkan Kategoriler — Bütünleşik Tab Başlığı ══ */
.popular-cats-section .showcase-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
}

.popular-cats-section .showcase-header .showcase-title-wrapper {
    flex-shrink: 0 !important;
    order: 0 !important; /* Başlık solda */
}

/* Başlık ile oklar arasını dolduran ince soluk çizgi */
.popular-cats-section .showcase-header .popular-slider-arrows {
    flex-shrink: 0 !important;
    order: 2 !important; /* Oklar sağda */
    margin-left: 0 !important;
}

.popular-cats-section .showcase-header::before {
    content: "" !important;
    display: block !important;
    order: 1 !important; /* Çizgi başlık ile okların ortasında */
    flex: 1 !important;
    height: 1px !important;
    margin: 0 16px !important;
    background: linear-gradient(
        90deg,
        rgba(var(--primary-blue-rgb), 0.40) 0%,
        rgba(var(--primary-blue-rgb), 0.10) 100%
    ) !important;
    /* ::before konumlandırma overridelarını sıfırla */
    position: static !important;
    width: auto !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Alev ikonunu mavi tema gradyanıyla vurgula */
.popular-cats-section .showcase-header .showcase-title-icon {
    background: var(--accent-gradient) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(var(--primary-blue-rgb), 0.35) !important;
}
.popular-cats-section .showcase-header .showcase-title-icon i {
    color: #fff !important;
}

/* ════════════════════ FIRSATLAR ALANI ════════════════════ */
.firsatlar-section {
    position: relative;
    margin: 30px auto;
    padding: 28px 26px 30px;
    border-radius: 16px;
    overflow: hidden;
    /* Sade kurumsal: tek tonlu koyu lacivert, doygunluk düşük */
    background: #0e1424;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    isolation: isolate;
}
/* Çok hafif üst ışık vurgusu */
.firsatlar-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 35%);
    pointer-events: none;
    z-index: 0;
}

/* Arka plan filigran yazısı — gizlendi */
.firsatlar-watermark {
    display: none !important;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(46px, 11vw, 150px);
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(255,255,255,0.16);
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.28);
    text-shadow: 0 2px 18px rgba(0,0,0,0.25);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    text-transform: uppercase;
    max-width: 100%;
    overflow: hidden;
    line-height: 1;
}

/* Sağdaki karakter görseli — arka planla harmanlanır (sade kurumsal) */
.firsatlar-char {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 42%;
    object-fit: cover;
    object-position: center right;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 95%);
            mask-image: linear-gradient(to left, #000 25%, transparent 95%);
}

/* Dikkat çekici bölüm başlığı (ikon + bölüm adı) */
.firsatlar-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-align: center;
}
.firsatlar-header-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: #cbd5e1;
    font-size: 22px;
}
.firsatlar-header-title {
    margin: 0;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #f1f5f9 !important;
    text-transform: none;
}
.firsatlar-tab { color: rgba(255,255,255,0.70) !important; }
.firsatlar-tab.active, .firsatlar-tab:hover { color: #fff !important; }
.firsatlar-tab span { color: inherit; }

/* Sekmeler */
.firsatlar-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 26px;
}
.firsatlar-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.70);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.firsatlar-tab img { height: 22px; width: auto; object-fit: contain; }
.firsatlar-tab:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.firsatlar-tab.active {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

/* İçerik / sekme panelleri */
.firsatlar-content { position: relative; z-index: 2; }
.firsatlar-pane { display: none; }
.firsatlar-pane.active { display: block; animation: firsatlarFade 0.35s ease; }
@keyframes firsatlarFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.firsatlar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

/* ── Slider modu: yatay kaydırılabilir satır ── */
/* PC slider (768px üstü) */
@media (min-width: 769px) {
    .firsatlar-grid.firsatlar-slider-pc {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: 8px;
    }
    .firsatlar-grid.firsatlar-slider-pc .firsatlar-card {
        flex: 0 0 calc((100% - 5 * 14px) / 6);
        scroll-snap-align: start;
    }
}
/* Mobil slider (768px altı) */
@media (max-width: 768px) {
    .firsatlar-grid.firsatlar-slider-mobile {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .firsatlar-grid.firsatlar-slider-mobile .firsatlar-card {
        flex: 0 0 46%;
        scroll-snap-align: start;
    }
}
.firsatlar-grid.firsatlar-slider-pc::-webkit-scrollbar,
.firsatlar-grid.firsatlar-slider-mobile::-webkit-scrollbar { height: 6px; }
.firsatlar-grid.firsatlar-slider-pc::-webkit-scrollbar-thumb,
.firsatlar-grid.firsatlar-slider-mobile::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25); border-radius: 10px;
}

/* ── "Daha Fazla" — collapsed (slider) / expanded (grid) ── */
.firsatlar-grid.fp-collapsed {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.firsatlar-grid.fp-collapsed .firsatlar-card {
    flex: 0 0 calc((100% - 5 * 14px) / 6);
    scroll-snap-align: start;
}
.firsatlar-grid.fp-collapsed::-webkit-scrollbar { height: 6px; }
.firsatlar-grid.fp-collapsed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 10px; }
.firsatlar-grid.fp-expanded {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
}
@media (max-width: 1100px) {
    .firsatlar-grid.fp-expanded { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 768px) {
    .firsatlar-grid.fp-collapsed .firsatlar-card { flex: 0 0 46%; }
    .firsatlar-grid.fp-expanded { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
    .firsatlar-grid.fp-expanded { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Daha Fazla butonu */
.firsatlar-more-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.firsatlar-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 30px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(8px);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.firsatlar-more-btn:hover {
    background: linear-gradient(135deg, rgba(255,153,0,0.25), rgba(255,255,255,0.10));
    border-color: var(--primary-orange, #FF9900);
    transform: translateY(-2px);
}
.firsatlar-more-btn.fp-disabled {
    opacity: 0.55;
    cursor: default;
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    transform: none;
}
.firsatlar-more-btn.fp-disabled:hover { transform: none; }

/* Ürün kartı — sade kurumsal */
.firsatlar-card {
    display: flex;
    flex-direction: column;
    background: #131a2d;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: #f1f5f9 !important; /* Açık/koyu modda da koyu lacivertte beyaz */
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.firsatlar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.18);
    color: #f1f5f9 !important;
}
.firsatlar-card * { color: inherit; }
.firsatlar-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
}
.firsatlar-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}
.firsatlar-card:hover .firsatlar-card-img img { transform: scale(1.07); }
/* Kart görsel overlay kaldırıldı */
.firsatlar-card-img::after {
    display: none !important;
}
.firsatlar-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 11px;
    border-radius: 7px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.firsatlar-card-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.firsatlar-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9 !important;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}
.firsatlar-card-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.firsatlar-card-price .fp-now {
    color: #34d399 !important;
    font-weight: 800;
    font-size: 16px;
}
.firsatlar-card-price .fp-old { color: rgba(255,255,255,0.40) !important; text-decoration: line-through; font-size: 12px; }
/* İncele oku kaldırıldı — sade görünüm */
.firsatlar-card-body::after {
    display: none !important;
    content: '';
}
.firsatlar-card:hover .firsatlar-card-body::after { display: none; }
.firsatlar-empty { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,0.6); padding: 30px; }

/* Responsive */
@media (max-width: 1100px) { .firsatlar-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) {
    .firsatlar-section { padding: 22px 16px 26px; border-radius: 16px; }
    .firsatlar-char { display: none; }
    .firsatlar-watermark {
        font-size: 54px;
        letter-spacing: 4px;
        color: rgba(255,255,255,0.18);
        -webkit-text-stroke: 1px rgba(255,255,255,0.30);
    }
    .firsatlar-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .firsatlar-tab { padding: 9px 16px; font-size: 12px; }
    .firsatlar-tab img { height: 20px; }
}
@media (max-width: 480px) {
    .firsatlar-grid { grid-template-columns: repeat(2, 1fr); }
    .firsatlar-card-title { font-size: 12px; min-height: 30px; }
}

/* ════════════════ Sosyal Medya Hizmetleri ════════════════ */
.social-media-section {
    margin: 40px auto 30px;
    /* padding'i ezme — .container'ın yan boşlukları korunsun */
}
.sm-header { text-align: center; margin-bottom: 22px; }
.sm-title {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    color: var(--text-color, #0f172a);
    margin: 0 0 6px;
}
.sm-subtitle {
    color: var(--text-muted, #64748b);
    font-size: 14px;
    margin: 0;
}
.sm-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Az kart varken ortalanır */
    gap: 14px;
}
.sm-card {
    flex: 0 0 calc((100% - 8 * 14px) / 9); /* PC: 9'lık tek satır, büyümez */
    max-width: 180px;
    min-width: 90px;
}
.sm-card {
    --sm-color: #5865F2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 14px 18px;
    background: var(--sm-color);
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    aspect-ratio: 1 / 1;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease;
    overflow: hidden;
    isolation: isolate;
}
.sm-card::before {
    /* hafif parlama */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 60%);
    z-index: 0;
    pointer-events: none;
}
.sm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--sm-color) 50%, transparent);
}
.sm-card-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(0,0,0,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.sm-card-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}
.sm-card-name {
    position: relative;
    z-index: 1;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 13px;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* Responsive */
@media (max-width: 1280px) {
    .sm-card { flex: 0 0 calc((100% - 6 * 14px) / 7); max-width: 160px; } /* 7'li satır */
}
@media (max-width: 1100px) {
    .sm-card { flex: 0 0 calc((100% - 5 * 14px) / 6); max-width: 170px; }
}
@media (max-width: 768px) {
    .sm-grid { gap: 10px; }
    .sm-card { flex: 0 0 calc((100% - 3 * 10px) / 4); max-width: 140px; padding: 16px 10px 14px; border-radius: 14px; }
    .sm-card-icon { width: 50px; height: 50px; border-radius: 12px; }
    .sm-card-name { font-size: 11px; letter-spacing: 1px; }
}
@media (max-width: 480px) {
    .sm-card { flex: 0 0 calc((100% - 2 * 10px) / 3); max-width: 130px; }
}

/* ════════════════ UCUZ OYUNLAR ════════════════ */
.cheap-games-section {
    margin: 36px auto 30px;
}
.cg-header { text-align: center; margin-bottom: 24px; }
.cg-title {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    color: var(--text-color, #0f172a);
    margin: 0 0 6px;
}
.cg-subtitle {
    color: var(--text-muted, #64748b);
    font-size: 14px;
    margin: 0;
}
.cg-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.cg-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #0f172a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.cg-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--primary-blue-rgb), 0.45);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.cg-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(0,0,0,0.06);
}
.cg-card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.45s ease;
}
.cg-card:hover .cg-card-img img { transform: scale(1.05); }
.cg-card-body {
    padding: 12px 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cg-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color, #0f172a);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}
.cg-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
.cg-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-color, #0f172a);
}
.cg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(52, 211, 153, 0.15);
    color: #10b981;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.cg-badge i { font-size: 12px; }

@media (max-width: 1100px) { .cg-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .cg-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .cg-card-title { font-size: 12px; min-height: 30px; } .cg-price { font-size: 13px; } }
@media (max-width: 480px)  { .cg-grid { grid-template-columns: repeat(2, 1fr); } }

/* Ucuz Oyunlar — Slider modu */
@media (min-width: 769px) {
    .cg-grid.cg-slider-pc {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: 8px;
    }
    .cg-grid.cg-slider-pc .cg-card {
        flex: 0 0 calc((100% - 5 * 16px) / 6);
        scroll-snap-align: start;
    }
}
@media (max-width: 768px) {
    .cg-grid.cg-slider-mobile {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .cg-grid.cg-slider-mobile .cg-card {
        flex: 0 0 46%;
        scroll-snap-align: start;
    }
}
.cg-grid.cg-slider-pc::-webkit-scrollbar,
.cg-grid.cg-slider-mobile::-webkit-scrollbar { height: 6px; }
.cg-grid.cg-slider-pc::-webkit-scrollbar-thumb,
.cg-grid.cg-slider-mobile::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18); border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════════
   VITRIN KATEGORİLERİ — Küp/Grid stiline çevrildi (tüm temalarda)
   ══════════════════════════════════════════════════════════════════ */
.showcase-cards-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
    flex-wrap: unset !important;
    overflow: visible !important;
}
@media (max-width: 1400px) { .showcase-cards-row { grid-template-columns: repeat(5, 1fr) !important; } }
@media (max-width: 1200px) { .showcase-cards-row { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 992px)  { .showcase-cards-row { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .showcase-cards-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } }

.showcase-pill-card {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;
    aspect-ratio: 1 / 1 !important;
    padding: 18px 14px !important;
    gap: 10px !important;
    border-radius: 18px !important;
}

.showcase-pill-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 14px !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
}
.showcase-pill-icon svg { width: 28px !important; height: 28px !important; }

.showcase-pill-info {
    flex: unset !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.showcase-pill-name {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    max-width: 100% !important;
}

.showcase-pill-badge {
    font-size: 10px !important;
    padding: 3px 8px !important;
    align-self: center !important;
}

.showcase-pill-meta {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
    gap: 6px !important;
}
.showcase-pill-count { font-size: 11px !important; }
.showcase-pill-arrow { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   ÜRÜN KARTI — Daha Sıkışık ("küp") Görünüm
   Ana sayfa & kategori grid'leri için fazla boşlukları kıs
   ══════════════════════════════════════════════════════════════════ */
.product-card-modern .product-info-area {
    padding: 10px 12px 10px !important;
    gap: 6px !important;
}
.product-card-modern .product-name-small {
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}
.product-card-modern .product-info-row-v2 {
    margin-bottom: 6px !important;
    min-height: 0 !important;
    gap: 4px 4px !important;
}
.product-card-modern .old-price-v2 {
    margin-bottom: 0 !important;
}
.product-card-modern .price-side-v2 {
    line-height: 1.05 !important;
}
.product-card-modern .btn-buy-modern {
    padding: 8px 10px !important;
    font-size: 14px !important;
}

/* Mobil için de aynı sıkışıklık */
@media (max-width: 768px) {
    .product-card-modern .product-info-area {
        padding: 7px 8px 7px !important;
    }
    .product-card-modern .product-info-row-v2 {
        margin-bottom: 4px !important;
    }
    .product-card-modern .btn-buy-modern {
        padding: 6px 8px !important;
    }
}

/* Grid aralıklarını da hafif daralt — kartlar birbirine yakın olsun */
.product-grid-modern {
    gap: 12px !important;
}
@media (max-width: 768px) {
    .product-grid-modern { gap: 8px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   KATEGORİ SAYFASI — Listing kartlarındaki boşlukları da sıkıştır
   ══════════════════════════════════════════════════════════════════ */
.listing-product-card .listing-card-info {
    padding: 8px 10px 8px !important;
    gap: 4px !important;
}
.listing-product-card .listing-product-title {
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}
.listing-product-card .product-info-row-v2 {
    margin-bottom: 6px !important;
    min-height: 0 !important;
    gap: 4px !important;
}
.listing-product-card .listing-card-prices {
    margin-bottom: 6px !important;
}
.listing-product-card .listing-buy-btn {
    padding: 8px 10px !important;
    font-size: 14px !important;
}

/* Kategori grid aralığı */
.listing-product-grid {
    gap: 12px !important;
}
@media (max-width: 768px) {
    .listing-product-card .listing-card-info { padding: 6px 8px 6px !important; }
    .listing-product-card .listing-buy-btn { padding: 6px 8px !important; }
    .listing-product-grid { gap: 8px !important; }
}

/* Dynamic Image Watermark */
.dynamic-image-watermark {
    position: absolute;
    bottom: 5%; /* Adjust depending on logo location */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 10;
    letter-spacing: 1px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    /* Attempt to mask exactly the Nexoyun logo */
    min-width: 85px;
    text-align: center;
}
/* Ensure the parent containers have position: relative */
.product-image-area, .view-img-box, .list-card-image-wrap, .listing-card-image-wrap {
    position: relative;
}

@media (max-width: 768px) {
    .dynamic-image-watermark {
        font-size: 10px;
        padding: 3px 8px;
        min-width: 70px;
        letter-spacing: 1px;
        bottom: 3%;
        border-radius: 4px;
    }
}

/* Spin Animation for Tracker Gear */
@-webkit-keyframes customSpin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes customSpin {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.spin-anim {
  -webkit-animation: customSpin 2s linear infinite !important;
  animation: customSpin 2s linear infinite !important;
  display: inline-block !important;
  transform-origin: center center !important;
  -webkit-transform-origin: center center !important;
}

/* ── Nav Dropdown ── */
.nav-item-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.nav-dd-caret {
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    margin-left: 1px;
}
.nav-item-wrap.is-open .nav-dd-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.nav-item-wrap.is-open > .nav-item-modern {
    background: var(--glass-bg, rgba(255,255,255,0.06));
}
.nav-item-wrap.is-open > .nav-item-modern .nav-text-modern {
    opacity: 1;
    color: var(--primary-blue);
}
.nav-item-wrap.is-open > .nav-item-modern .nav-dd-caret {
    stroke: var(--primary-blue);
}

/* Dropdown panel — fixed so overflow-x:auto on nav-links doesn't clip it */
.nav-dd-panel {
    position: fixed;
    z-index: 9999;
    background: var(--card-bg, #0d1220);
    border: 1px solid var(--border-color, rgba(255,255,255,0.09));
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.38), 0 4px 16px rgba(0,0,0,0.18);
    padding: 14px;
    min-width: 300px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}
.nav-dd-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Subcategory cards grid */
.nav-dd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 9px;
    margin-bottom: 10px;
}
.nav-dd-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    border-radius: 11px;
    padding: 9px 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    cursor: pointer;
    overflow: hidden;
}
.nav-dd-card:hover {
    background: rgba(var(--primary-blue-rgb), 0.10);
    border-color: rgba(var(--primary-blue-rgb), 0.30);
    transform: translateY(-2px);
}
.nav-dd-img-wrap {
    width: 100%;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    line-height: 0;
}
.nav-dd-img-wrap img {
    width: 100%;
    height: auto;            /* görselin kendi oranına göre şekil al (kırpma yok) */
    display: block;
    object-fit: contain;
    transition: transform .3s ease;
}
.nav-dd-card:hover .nav-dd-img-wrap img {
    transform: scale(1.06);
}
.nav-dd-name {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-color, #e2e8f0);
    text-align: center;
    line-height: 1.3;
    opacity: 0.82;
    transition: color .18s ease, opacity .18s ease;
}
.nav-dd-card:hover .nav-dd-name {
    opacity: 1;
    color: var(--primary-blue);
}
.nav-dd-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-blue);
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid rgba(var(--primary-blue-rgb), 0.22);
    background: rgba(var(--primary-blue-rgb), 0.06);
    transition: background .18s ease, border-color .18s ease;
    letter-spacing: 0.2px;
}
.nav-dd-all:hover {
    background: rgba(var(--primary-blue-rgb), 0.14);
    border-color: rgba(var(--primary-blue-rgb), 0.45);
}

/* Light theme */
[data-theme="light"] .nav-dd-panel {
    background: #ffffff;
    border-color: rgba(15,35,95,.10);
    box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.07);
}
[data-theme="light"] .nav-dd-card {
    background: #f5f7fa;
    border-color: rgba(15,35,95,.08);
}
[data-theme="light"] .nav-dd-card:hover {
    background: rgba(var(--primary-blue-rgb), 0.07);
}
[data-theme="light"] .nav-dd-name { color: #1e293b; }
[data-theme="light"] .nav-dd-img-wrap { background: #e8ecf0; }

/* ============================================================
   MENÜ GÖRÜNÜMÜ V2 — minimal: beyaz bar, öğeler arası dikey ayraç,
   her öğenin altında ince mavi çizgi (sekme hissi)
   ============================================================ */
.header-nav.menu-v2 {
    background: #ffffff;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.07));
    padding-bottom: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
[data-theme="dark"] .header-nav.menu-v2 { background: var(--card-bg, #0f172a); }
.header-nav.menu-v2 .nav-links {
    width: 100%;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
}
/* Öğeler kompakt, doğal genişlik, sola yaslı (gerilmez) */
.header-nav.menu-v2 .nav-item-wrap {
    display: flex;
    flex: 0 0 auto;
}
.header-nav.menu-v2 .nav-item-wrap .nav-item-modern { width: 100%; }
.header-nav.menu-v2 .nav-links > .nav-item-modern { flex: 0 0 auto; }
/* Özel öğeler (ŞANS ÇARKI/KASALAR/ÇEKİLİŞLER) sağ gruba it */
.header-nav.menu-v2 .nav-extra-item { margin-left: auto; }
.header-nav.menu-v2 .nav-extra-item ~ .nav-extra-item { margin-left: 0; }
.header-nav.menu-v2 .nav-item-modern {
    justify-content: center;
    gap: 6px;
    border-radius: 0;
    padding: 9px 8px;
    margin: 0;
    border-bottom: 2px solid var(--primary-blue);
    white-space: nowrap;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
}
/* Dikey ayraç kaldırıldı (kullanıcı isteği) */
.header-nav.menu-v2 .nav-item-modern::before { display: none; }
/* Eski glow alt-çizgiyi v2'de kapat (çift çizgi olmasın) */
.header-nav.menu-v2 .nav-item-modern::after { display: none !important; }
.header-nav.menu-v2 .nav-item-modern:hover {
    transform: none;
    background: transparent;
}
.header-nav.menu-v2 .nav-item-modern:hover .nav-icon-modern { transform: none; }
.header-nav.menu-v2 .nav-text-modern {
    opacity: 1;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-color);
}
/* Kategori yazıları KOYU (inline theme_color mavisini ez); özel öğeler kendi rengini korur */
.header-nav.menu-v2 .nav-item-modern:not(.nav-extra-item) .nav-text-modern {
    color: var(--text-color) !important;
}
.header-nav.menu-v2 .nav-item-modern:hover .nav-text-modern { color: var(--primary-blue) !important; }
.header-nav.menu-v2 .nav-icon-modern { height: 19px; }
.header-nav.menu-v2 .nav-dd-caret { opacity: 0.4; margin-left: 2px; }

/* "Tüm Kategoriler" — ilk hücre, sol ayraç yok */
.header-nav.menu-v2 .btn-categories {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-color) !important;
    box-shadow: none;
    border-radius: 0;
    margin-right: 0;
    padding: 11px 16px 11px 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 19px;
    border-bottom: 2px solid var(--primary-blue);
}
.header-nav.menu-v2 .btn-categories svg { stroke: var(--text-color); }
.header-nav.menu-v2 .btn-categories:hover {
    transform: none;
    filter: none;
    box-shadow: none;
    background: transparent;
}
@media (max-width: 992px) {
    .header-nav.menu-v2 .nav-text-modern { font-size: 12.5px; }
    .header-nav.menu-v2 .nav-item-modern { padding: 12px 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   SOSYAL MEDYA SERVİSLERİ
   Platform kartları + kart içi sekmeler + sekme başına ürün listesi.
   Renkler tema değişkenlerinden gelir; gece/gündüz ayrımı gerektirmez.
   ══════════════════════════════════════════════════════════════════════ */
.ss-section { margin: 36px auto 30px; }
.ss-head { margin-bottom: 20px; text-align: center; }
.ss-title {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    color: var(--text-color, #0f172a);
    margin: 0 0 6px;
}
.ss-subtitle { color: var(--text-muted, #64748b); font-size: 14px; margin: 0; }

.ss-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.ss-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #0f172a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 16px;
    overflow: hidden;
}

/* Kart başlığı */
.ss-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}
.ss-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-brand-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    overflow: hidden;
    flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--input-bg, rgba(255,255,255,0.05));
}
.ss-brand-icon img { width: 100%; height: 100%; object-fit: cover; }
.ss-brand-name {
    font-weight: 700; font-size: 15px;
    color: var(--text-color, #0f172a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-all {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-muted, #64748b);
    text-decoration: none; white-space: nowrap;
    transition: color .2s ease;
}
.ss-all:hover { color: rgb(var(--primary-blue-rgb, 4 51 255)); }

/* Sekmeler */
.ss-tabs {
    display: flex; gap: 4px;
    padding: 10px 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.ss-tabs::-webkit-scrollbar { display: none; }
.ss-tab {
    appearance: none; background: none; border: 0;
    padding: 8px 12px 10px;
    font-size: 13.5px; font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.ss-tab:hover { color: var(--text-color, #0f172a); }
.ss-tab.is-active {
    color: var(--text-color, #0f172a);
    border-bottom-color: rgb(var(--primary-blue-rgb, 4 51 255));
}

/* Ürün listesi */
.ss-panels { padding: 10px 12px 14px; }
.ss-panel { display: none; flex-direction: column; gap: 8px; }
.ss-panel.is-active { display: flex; }

.ss-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.ss-item:hover {
    border-color: rgba(var(--primary-blue-rgb, 4 51 255), 0.45);
    background: var(--input-bg, rgba(255,255,255,0.03));
}
.ss-item-img {
    width: 52px; height: 52px; flex: 0 0 52px;
    border-radius: 9px; overflow: hidden;
    background: var(--input-bg, rgba(255,255,255,0.05));
}
.ss-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ss-item-name {
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    color: var(--text-color, #0f172a);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss-item-price {
    font-size: 14px; font-weight: 800;
    color: #22c55e;
    display: flex; align-items: baseline; gap: 6px;
}
.ss-item-old {
    font-size: 11px; font-weight: 600;
    color: var(--text-muted, #64748b);
    text-decoration: line-through;
}
.ss-cart {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 10px;
    background: #16a34a; color: #fff;
    font-size: 17px; cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.ss-cart:hover { background: #15803d; transform: translateY(-1px); }

@media (max-width: 1100px) {
    .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .ss-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ss-item-img { width: 46px; height: 46px; flex-basis: 46px; }
    .ss-cart { flex-basis: 38px; width: 38px; height: 38px; font-size: 15px; }
}

/* ── Sosyal Medya Servisleri: ana kategori ikon şeridi ─────────────────
   Etiketi olan öğe ikon+yazı, etiketi boş olan yalnız ikon görünür
   (.ss-nav-yalin). Referanstaki gibi yuvarlak köşeli, hafif zeminli. */
.ss-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 22px;
}
.ss-nav-item {
    /* Hem <a> hem <button> olabiliyor — buton varsayılanları sıfırlanır */
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px 9px 10px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 13px;
    background: var(--card-bg, #0f172a);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.ss-nav-item:hover {
    border-color: rgba(var(--primary-blue-rgb, 4 51 255), 0.5);
    transform: translateY(-2px);
}
.ss-nav-item.is-active {
    border-color: rgb(var(--primary-blue-rgb, 4 51 255));
    background: rgba(var(--primary-blue-rgb, 4 51 255), 0.10);
}
/* Yazısız öğe kare orantıda dursun */
.ss-nav-item.ss-nav-yalin { padding: 9px; }

.ss-nav-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--input-bg, rgba(255,255,255,0.05));
    color: var(--text-muted, #64748b);
    font-size: 17px;
}
.ss-nav-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-nav-label {
    font-size: 13.5px; font-weight: 600;
    color: var(--text-color, #0f172a);
    white-space: nowrap;
}

/* Kaydırma sonrası kısa vurgu — hangi karta gidildiği anlaşılsın */
@keyframes ssVurgu {
    0%   { box-shadow: 0 0 0 0 rgba(var(--primary-blue-rgb, 4 51 255), 0.55); }
    100% { box-shadow: 0 0 0 12px rgba(var(--primary-blue-rgb, 4 51 255), 0); }
}
.ss-card.ss-vurgu { animation: ssVurgu 1s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
    .ss-card.ss-vurgu { animation: none; }
}

@media (max-width: 700px) {
    .ss-nav { gap: 8px; }
    .ss-nav-item { padding: 7px 11px 7px 8px; border-radius: 11px; }
    .ss-nav-item.ss-nav-yalin { padding: 7px; }
    .ss-nav-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: 15px; }
    .ss-nav-label { font-size: 12.5px; }
}

/* ── Sosyal Medya Servisleri: kaydırmalı (slider) görünüm ──────────────
   Panelden "Bilgisayarda slider" / "Mobilde slider" olarak ayrı ayrı
   açılır. Açıkken ızgara tek sıraya döner ve yatay kaydırılır. */
@media (min-width: 701px) {
    .ss-grid.ss-slider-pc {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        padding-bottom: 10px;
    }
    .ss-grid.ss-slider-pc .ss-card {
        /* Tam 3'e bölseydik 3 kartta hiç taşma olmaz ve slider iş görmezdi.
           2,6'ya bölünce sonraki kart kenardan görünür; hem kaydırılabilir
           olduğu anlaşılır hem 3 kartta bile çalışır. */
        flex: 0 0 calc((100% - 2 * 18px) / 2.6);
        scroll-snap-align: start;
    }
}
@media (max-width: 700px) {
    .ss-grid.ss-slider-mobile {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .ss-grid.ss-slider-mobile .ss-card {
        flex: 0 0 88%;                            /* sonraki kart kenardan görünsün */
        scroll-snap-align: start;
    }
}
/* Sürüklerken metin seçilmesin, imleç tutma eline dönsün */
.ss-grid.ss-suruklu { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.ss-grid.ss-suruklu * { pointer-events: none; }

.ss-grid.ss-slider-pc::-webkit-scrollbar,
.ss-grid.ss-slider-mobile::-webkit-scrollbar { height: 6px; }
.ss-grid.ss-slider-pc::-webkit-scrollbar-track,
.ss-grid.ss-slider-mobile::-webkit-scrollbar-track { background: transparent; }
.ss-grid.ss-slider-pc::-webkit-scrollbar-thumb,
.ss-grid.ss-slider-mobile::-webkit-scrollbar-thumb {
    background: var(--border-color, rgba(255,255,255,.14));
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   VİTRİN SERVİSLERİ — 2. GÖRÜNÜM (Varsayılan 2)
   Tüm sınıflar ss2- ön ekli. 1. görünümün (.ss-) hiçbir kuralına
   dokunulmaz; iki görünüm birbirinden tamamen bağımsızdır.
   ══════════════════════════════════════════════════════════════════════ */
.ss2-section {
    position: relative;
    margin: 36px 0 30px;
    padding: 34px 0 38px;
    background-color: var(--card-bg, #0f172a);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* Arka plan görseli varken metin okunabilirliği için karartma */
.ss2-perde {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
                rgba(0,0,0,.62) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.82) 100%);
}
.ss2-section:not(.ss2-gorselli) .ss2-perde { background: transparent; }
.ss2-ic { position: relative; }

.ss2-head { text-align: center; margin-bottom: 18px; }
.ss2-title {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800;
    margin: 0 0 6px;
    color: #fff;
}
.ss2-section:not(.ss2-gorselli) .ss2-title { color: var(--text-color, #0f172a); }
.ss2-subtitle { margin: 0; font-size: 14px; color: rgba(255,255,255,.72); }
.ss2-section:not(.ss2-gorselli) .ss2-subtitle { color: var(--text-muted, #64748b); }

/* İkon şeridi — camsı yüzey */
.ss2-nav {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px; margin-bottom: 22px;
}
.ss2-nav-item {
    appearance: none; -webkit-appearance: none;
    font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    color: #fff;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.ss2-nav-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.34); }
.ss2-nav-item.is-active {
    border-color: rgba(var(--primary-blue-rgb, 4 51 255), .9);
    background: rgba(var(--primary-blue-rgb, 4 51 255), .22);
}
.ss2-nav-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.ss2-nav-icon img { width: 100%; height: 100%; object-fit: contain; }
.ss2-nav-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.ss2-section:not(.ss2-gorselli) .ss2-nav-item { color: var(--text-color, #0f172a); background: var(--card-bg, #0f172a); border-color: var(--border-color, rgba(255,255,255,.1)); }

/* Paneller */
.ss2-panel { display: none; }
.ss2-panel.is-active { display: block; }

.ss2-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; justify-content: center; }
.ss2-tab {
    appearance: none; background: none; border: 0; font: inherit;
    padding: 7px 14px; border-radius: 9px; cursor: pointer;
    font-size: 13.5px; font-weight: 600;
    color: rgba(255,255,255,.62);
    transition: color .18s ease, background-color .18s ease;
}
.ss2-tab:hover { color: #fff; }
.ss2-tab.is-active { color: #fff; background: rgba(255,255,255,.12); }
.ss2-section:not(.ss2-gorselli) .ss2-tab { color: var(--text-muted, #64748b); }
.ss2-section:not(.ss2-gorselli) .ss2-tab.is-active { color: var(--text-color, #0f172a); background: var(--input-bg, rgba(0,0,0,.05)); }

/* Ürün listesi — iki sütun */
.ss2-list { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ss2-list.is-active { display: grid; }

.ss2-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(10, 12, 16, .82);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
}
.ss2-section:not(.ss2-gorselli) .ss2-row { background: var(--card-bg, #0f172a); border-color: var(--border-color, rgba(255,255,255,.08)); }

.ss2-row-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.ss2-thumb {
    width: 54px; height: 54px; flex: 0 0 54px;
    border-radius: 11px; overflow: hidden; background: rgba(255,255,255,.05);
}
.ss2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss2-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ss2-name {
    font-size: 14.5px; font-weight: 700; line-height: 1.25; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ss2-section:not(.ss2-gorselli) .ss2-name { color: var(--text-color, #0f172a); }
.ss2-price { font-size: 14px; font-weight: 800; color: #22c55e; display: flex; align-items: baseline; gap: 7px; }
.ss2-old { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.45); text-decoration: line-through; }
.ss2-section:not(.ss2-gorselli) .ss2-old { color: var(--text-muted, #64748b); }

/* Adet seçici */
.ss2-adet {
    display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 3px;
}
.ss2-section:not(.ss2-gorselli) .ss2-adet { border-color: var(--border-color, rgba(0,0,0,.12)); }
.ss2-adet-btn {
    appearance: none; border: 0; background: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px;
    font-size: 17px; line-height: 1; color: rgba(255,255,255,.78);
    transition: background-color .15s ease;
}
.ss2-adet-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.ss2-section:not(.ss2-gorselli) .ss2-adet-btn { color: var(--text-color, #0f172a); }
.ss2-adet-deger {
    width: 34px; border: 0; background: none; text-align: center;
    font-size: 14px; font-weight: 700; color: #fff; pointer-events: none;
}
.ss2-section:not(.ss2-gorselli) .ss2-adet-deger { color: var(--text-color, #0f172a); }

.ss2-cart {
    flex: 0 0 44px; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 11px; background: #16a34a; color: #fff;
    font-size: 18px; cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.ss2-cart:hover { background: #15803d; transform: translateY(-1px); }

/* "Tüm Ürünleri Gör" kutusu */
.ss2-more {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 12px 14px; min-height: 80px;
    border: 1px dashed rgba(255,255,255,.30);
    border-radius: 16px; text-decoration: none;
    font-size: 15px; font-weight: 700; color: #fff;
    transition: border-color .2s ease, background-color .2s ease;
}
.ss2-more:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); }
.ss2-section:not(.ss2-gorselli) .ss2-more { color: var(--text-color, #0f172a); border-color: var(--border-color, rgba(0,0,0,.2)); }
.ss2-more-ok {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid currentColor; border-radius: 50%; font-size: 16px;
}

@media (max-width: 820px) {
    .ss2-list, .ss2-list.is-active { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    /* Mobilde satırlar tek satırda kalır: kaydırma alanı sekmeler ve ürünler
       arasında bölünmesin diye yükseklik olabildiğince kısa tutuluyor.
       Önceki sürümde adet+sepet alt satıra düşüyor ve kart neredeyse iki
       katı yüksekliğe çıkıyordu. */
    .ss2-section { padding: 24px 0 26px; }
    .ss2-nav { gap: 8px; margin-bottom: 16px; }
    .ss2-nav-item { padding: 7px 11px; gap: 7px; border-radius: 12px; }
    .ss2-nav-icon { width: 26px; height: 26px; flex-basis: 26px; font-size: 14px; }
    .ss2-nav-label { font-size: 12.5px; }

    .ss2-list, .ss2-list.is-active { gap: 9px; }
    .ss2-row { gap: 9px; padding: 9px 10px; border-radius: 13px; flex-wrap: nowrap; }
    .ss2-row-main { gap: 9px; }
    .ss2-thumb { width: 44px; height: 44px; flex-basis: 44px; border-radius: 9px; }
    .ss2-name { font-size: 13px; -webkit-line-clamp: 2; }
    .ss2-price { font-size: 13px; gap: 5px; }
    .ss2-old { font-size: 10.5px; }

    .ss2-adet { padding: 2px; border-radius: 9px; gap: 0; }
    .ss2-adet-btn { width: 25px; height: 25px; font-size: 15px; border-radius: 7px; }
    .ss2-adet-deger { width: 24px; font-size: 13px; }

    .ss2-cart { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; border-radius: 9px; }
    .ss2-more { min-height: 62px; font-size: 14px; }
    .ss2-more-ok { width: 30px; height: 30px; flex-basis: 30px; font-size: 14px; }
}

/* Çok dar ekranlarda (≈360px altı) ad iki yerine tek satıra iner ki
   satır yüksekliği daha da artmasın. */
@media (max-width: 360px) {
    .ss2-name { -webkit-line-clamp: 1; }
    .ss2-thumb { width: 40px; height: 40px; flex-basis: 40px; }
    .ss2-adet-btn { width: 23px; height: 23px; }
    .ss2-cart { flex-basis: 33px; width: 33px; height: 33px; }
}

/* ══════════════════════════════════════════════════════════════════════
   GENİŞLETİLMİŞ KATEGORİ KARTI
   Kategori düzenlemede "Alt Kategorileri Kartta Göster" açıkken çizilir.
   BOYUT normal kartla (.category-item-card) BİREBİR aynıdır: tek sütun,
   aynı en-boy oranı, aynı köşe yarıçapı. Izgara satır yüksekliği bu kart
   yüzünden değişmez. Alt kategori listesi sığmazsa kartın içinde kayar,
   "Tüm Kategoriler" düğmesi altta sabit kalır.
   ══════════════════════════════════════════════════════════════════════ */
.cat-sub-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #0f172a);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px;          /* normal kartla aynı */
    aspect-ratio: 1 / 1.35;       /* normal kartla aynı */
    overflow: hidden;
}

/* Başlık — kategori görseli bulanık zemin olarak kullanılır */
.cat-sub-card-head {
    position: relative;
    flex: 0 0 40%;
    display: flex;
    align-items: flex-end;
    padding: 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
}
.cat-sub-card-bg {
    /* Görsel ALANIN İKİ KATI boyutta çizilip güçlü bulanıklaştırılıyor.
       Küçük alanda az bulanıklık, logonun kendisini "leke" gibi
       gösteriyordu; büyütüp daha çok bulanıklaştırınca düzgün bir
       renk geçişi kalıyor. Doygunluk da leke yapmayacak seviyeye
       çekildi. */
    position: absolute; inset: -50%;
    width: 200%; height: 200%;
    object-fit: cover;
    filter: blur(34px) saturate(190%) brightness(1.06);
    opacity: .92;
    pointer-events: none;
}
/* Karartma yalnız ALTTA yoğun: yazı ve ikon üstte, orası açık kalıyor;
   böylece renk canlı görünürken metin yine okunabiliyor. */
.cat-sub-card-head::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
                rgba(0,0,0,.02) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.58) 100%);
    pointer-events: none;
}
/* Tema rengi olan kategoriler: fotoğraf yerine düz renk geçişi.
   Fotoğraf bulanıklığı küçük alanda leke gibi duruyordu; marka rengi
   hem net hem her kartta tutarlı. */
.cat-sub-card-head-renkli {
    background:
        linear-gradient(158deg,
            rgba(var(--kat-renk), .95) 0%,
            rgba(var(--kat-renk), .62) 52%,
            rgba(0, 0, 0, .38) 100%),
        var(--card-bg, #0f172a);
}
/* Renkli başlıkta ek karartmaya gerek yok; sadece altta ince bir koyulaşma */
.cat-sub-card-head-renkli::after {
    background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
}

.cat-sub-card-brand {
    position: relative;
    display: flex; align-items: center; gap: 8px; min-width: 0;
}
.cat-sub-card-icon {
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px; object-fit: contain;
    /* Koyu yuva: beyaz/şeffaf logolar renkli zemine karışmasın */
    background: rgba(0,0,0,.42);
    padding: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.cat-sub-card-name {
    font-size: 13px; font-weight: 800; color: #fff;
    /* Açık renkli zeminlerde de okunsun diye hafif gölge */
    text-shadow: 0 1px 3px rgba(0,0,0,.65);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Gövde */
.cat-sub-card-body {
    display: flex; flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;                /* taşmanın kaymaya dönüşmesi için şart */
    padding: 10px;
}
.cat-sub-card-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
}

/* Liste — sığmazsa burası kayar */
.cat-sub-card-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.cat-sub-card-list::-webkit-scrollbar { width: 4px; }
.cat-sub-card-list::-webkit-scrollbar-thumb {
    background: var(--border-color, rgba(255,255,255,.16));
    border-radius: 3px;
}
.cat-sub-card-link {
    display: block;
    padding: 5px 0;
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
    color: var(--text-color, #0f172a);
    text-decoration: none;
    transition: color .18s ease;
}
.cat-sub-card-link:hover { color: rgb(var(--primary-blue-rgb, 4 51 255)); }

/* "Tüm Kategoriler" — altta sabit */
.cat-sub-card-all {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 10px; padding: 9px 10px;
    border-radius: 9px;
    /* Zemin --input-bg iken gündüz temasında kart rengiyle neredeyse
       aynıydı (1,02:1) ve düğme kayboluyordu. Artık marka renginin
       şeffaf bir tonu: hem gündüz hem gece kart zemininden ayrışıyor.
       İnce kenarlık da düğme olduğunu belli ediyor. */
    border: 1px solid rgba(var(--primary-blue-rgb, 4, 51, 255), .24);
    background: rgba(var(--primary-blue-rgb, 4, 51, 255), .09);
    font-size: 12px; font-weight: 700;
    /* GÜNDÜZ: ana mavi doygunluğu düşürülerek yumuşatılır (gri ile karışım).
       Metin rengiyle karıştırmak gündüzde koyu laciverte kaçırıyordu. */
    color: #3a55c2;
    color: color-mix(in srgb, rgb(var(--primary-blue-rgb, 4, 51, 255)) 62%, var(--text-muted, #64748b));
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
/* GECE: koyu zeminde saf mavi hem sert hem okunaksız (2,3:1). Açık metin
   rengiyle karıştırılıp lila-maviye çekiliyor.
   Zemin tonu da güçlendiriliyor: koyu kart üzerinde .09 opaklık parlaklık
   olarak neredeyse hiç fark yaratmıyordu (1,03:1). */
[data-theme="dark"] .cat-sub-card-all {
    color: #8f9fd4;
    color: color-mix(in srgb, rgb(var(--primary-blue-rgb, 4, 51, 255)) 42%, var(--text-color, #f1f3f7));
    background: rgba(var(--primary-blue-rgb, 4, 51, 255), .20);
    border-color: rgba(var(--primary-blue-rgb, 4, 51, 255), .38);
}
[data-theme="dark"] .cat-sub-card-all:hover {
    background: rgba(var(--primary-blue-rgb, 4, 51, 255), .30);
    border-color: rgba(var(--primary-blue-rgb, 4, 51, 255), .55);
}

/* Üzerine gelince markanın rengine yaklaşır — tıklanabilir olduğu belli olur */
.cat-sub-card-all:hover {
    background: rgba(var(--primary-blue-rgb, 4, 51, 255), .17);
    border-color: rgba(var(--primary-blue-rgb, 4, 51, 255), .42);
    color: color-mix(in srgb, rgb(var(--primary-blue-rgb, 4, 51, 255)) 80%, var(--text-muted, #64748b));
}
[data-theme="dark"] .cat-sub-card-all:hover {
    color: color-mix(in srgb, rgb(var(--primary-blue-rgb, 4, 51, 255)) 62%, var(--text-color, #f1f3f7));
}
.cat-sub-card-ok { display: flex; align-items: center; font-size: 14px; }

/* Mobilde normal kartın oranı 1/1.25'e düşüyor (style.css); genişletilmiş
   kart da aynı orana inmeli, yoksa satırda 17 px daha uzun kalıyor. */
@media (max-width: 768px) {
    .cat-sub-card { aspect-ratio: 1 / 1.25; }
    .cat-sub-card-head { flex-basis: 32%; padding: 8px; }
    .cat-sub-card-icon { width: 22px; height: 22px; flex-basis: 22px; border-radius: 6px; }
    .cat-sub-card-name { font-size: 12px; }
    .cat-sub-card-body { padding: 8px; }
    .cat-sub-card-label { font-size: 9px; margin-bottom: 5px; }
    .cat-sub-card-link { font-size: 11.5px; padding: 4px 0; }
    .cat-sub-card-all { padding: 7px 9px; font-size: 11px; margin-top: 6px; }
    .cat-sub-card-ok { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════
   GÜVEN KARTLARI (.trust-item) — kutu HER ZAMAN görünür
   Önceden kutu yalnız fareyle üzerine gelince beliriyordu; ayrıca kart
   yukarı kayıyor, ikon büyüyüp dönüyordu. Artık kutu sabit duruyor ve
   fareyle üzerine gelince HİÇBİR ŞEY değişmiyor.
   Bu dosya en son yüklendiği için hem tema base.css'i hem style.css'i
   geçersiz kılar; o dosyalara dokunulmadı.
   NOT: Mobildeki kompakt düzen (style.css'te !important ile kutusuz,
   2 sütun) bilinçli olarak korundu.
   ══════════════════════════════════════════════════════════════════════ */
.trust-item {
    /* ZEMİN: --glass-bg değil --card-bg.
       --glass-bg style.css'te sabit yazılı (gece: rgba(15,23,42,.6) = Slate-900
       lacivert) ve yönetim panelindeki renk ayarlarının KAPSAMI DIŞINDA.
       Sayfa zemini (#131417) nötr gri olduğu için bu lacivert kartların
       içinde mavimsi bir leke olarak görünüyordu.
       --card-bg ise temanın kendi kart zemini: uzun açıklama kutusu
       (.seo-minimal-card) ve SSS kutuları da bunu kullanıyor, panelden
       değiştirilince güven kartları da onlarla birlikte değişir. */
    background: var(--card-bg, #191b1f);
    border: 1px solid var(--border-color);
    /* Gölge de uzun açıklama kutusuyla aynı belirtece bağlandı */
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
    /* 24px fazla yuvarlaktı ve sitedeki diğer kartlardan ayrışıyordu;
       12px sitenin baskın kart yarıçapı (40 kullanım). */
    border-radius: 12px;
    /* Kart içi üst/alt boşluk 30px'ten 20px'e; yanlar 20 → 18. */
    padding: 20px 18px;
    /* Değişen bir şey kalmadığı için geçiş de gereksiz */
    transition: none;
    transform: none;
}

/* İkon yuvası da orantılı olarak sertleştirildi (18px → 10px) */
.trust-item .trust-icon { border-radius: 10px; }

/* Kartlar ile alttaki uzun açıklama arasındaki boşluk azaltıldı.
   Gerçek boşluk = bu bölümün alt dolgusu (60px) + açıklama bölümünün
   üst boşluğu (20px) = 80px. Alt dolgu 28px'e çekildi → 48px.
   Ayrıca contain-intrinsic-size düzeltildi: 300px, gerçek içerik
   yüksekliğinin (≈248px) üstündeydi ve bölüm ekran dışındayken
   sayfa yüksekliğini fazla tahmin ettiriyordu. `auto` ilk çizimden
   sonra gerçek ölçüyü hatırlar. */
.trust-section {
    padding-bottom: 28px;
    contain-intrinsic-size: auto 250px;
}

/* Fare üzerine gelince: hareket yok, büyüme yok, renk değişimi yok */
.trust-item:hover {
    background: var(--card-bg, #191b1f);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
    transform: none;
    /* Kalıcı backdrop-filter 4 kartta boşuna maliyet; zemin zaten yeterli */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.trust-item .trust-icon { transition: none; }
.trust-item:hover .trust-icon {
    transform: none;
    background: rgba(var(--primary-blue-rgb, 0, 133, 255), .1);
    color: var(--primary-blue);
}

/* ── SSS ile Blog arasındaki boşluk ────────────────────────────────────
   Boşluk iki kaynaktan geliyordu: SSS bölümünün alt boşluğu (50px) ve
   Blog bölümünün üst dolgusu (60px) = 110px. İkisi de yarıya indirildi.
   NOT: .faq-section kuralı footer.php içindeki satır içi <style> içinde
   ve bu dosyadan SONRA geliyor; bu yüzden `section.faq-section` ile
   özgüllük yükseltildi (0,1,1 > 0,1,0). footer.php'ye dokunulmadı. */
section.faq-section { margin-bottom: 24px; }
.blog-section { padding-top: 32px; }

/* ── Mobilde de kutu görünsün ──────────────────────────────────────────
   Tema base.css'in 768px altı kuralı kartı bilinçli olarak kutusuz
   yapıyor (background/border/box-shadow/padding hepsi !important).
   Kutuyu geri getirmek için aynı kırılımda ve !important ile eziyoruz.
   Izgara düzeni (2 sütun) ve ikon/metin boyutları olduğu gibi kalıyor. */
@media (max-width: 768px) {
    .trust-item {
        background: var(--card-bg, #191b1f) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05)) !important;
        padding: 16px 12px !important;
        /* Dikey ortalama YOK: metin uzunlukları farklı olduğu için
           ikonlar kartlar arasında farklı yüksekliklere kayıyordu.
           Üstten hizalanınca dört ikon aynı çizgide duruyor. */
        justify-content: flex-start !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   KATEGORİ ÜST AÇIKLAMA KUTUSU (.category-sidebar-card) — SSS ile aynı yüzey
   Panelin "cam efekti" ayarı bu kutuyu header.php'deki satır içi kuralla
   `color-mix(in srgb, var(--card-bg) 62%, transparent)` + `saturate(150%)`
   yapıyordu. %38 saydamlık arkadaki mavi hâle katmanını sızdırıyor,
   saturate(150%) de o maviyi güçlendiriyordu; kutu bu yüzden mavimsi
   görünüyordu. SSS kutuları (.cat-faq-item) o listede olmadığı için opak.
   Burada kutu SSS ile aynı yüzeye çekiliyor: opak --card-bg, filtre yok.
   Özgüllük (0,2,2), header.php'deki `html body .category-sidebar-card`
   (0,1,2) kuralından yüksek — o dosyaya dokunmadan geçersiz kılar.
   Cam efekti ürün kartlarında ve diğer yüzeylerde çalışmaya devam eder.
   Köşe yarıçapı ve iç boşluklar korundu; yalnız renk isteniyordu.
   ══════════════════════════════════════════════════════════════════════ */
html body .category-page .category-sidebar-card {
    background: var(--card-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   KATEGORİ ÜST AÇIKLAMA — GÜNDÜZ MODU OKUNABİLİRLİĞİ
   kategori.php içindeki kurallar metin renklerini gece moduna göre sabit
   yazıyor (gövde #94a3b8, başlık/kalın #e2e8f0) ve !important taşıyor.
   Gündüz zemininde (--card-bg = #f5f6ff) bu renklerin kontrastı
   sırasıyla 2.38:1 ve 1.15:1'e düşüyordu; okunabilirlik alt sınırı 4.5:1,
   yani başlıklar pratikte görünmüyordu.
   Burada YALNIZ gündüz modunda renkler temanın kendi değişkenlerine
   bağlanıyor — panelden metin rengi değiştirilince bu kutu da uyar.
   Özgüllük (0,3,0) > kategori.php'nin (0,2,0); o dosyaya dokunulmadı.
   GECE MODU KAPSAM DIŞI: [data-theme="light"] seçicisi nedeniyle gece
   modundaki mevcut görünüm bit düzeyinde aynı kalır.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .category-card-info .cat-desc-text,
[data-theme="light"] .category-card-info .cat-desc-text p,
[data-theme="light"] .category-card-info .cat-desc-text span,
[data-theme="light"] .category-card-info .cat-desc-text li {
    color: var(--text-muted) !important;
}
[data-theme="light"] .category-card-info .cat-desc-text h1,
[data-theme="light"] .category-card-info .cat-desc-text h2,
[data-theme="light"] .category-card-info .cat-desc-text h3,
[data-theme="light"] .category-card-info .cat-desc-text h4,
[data-theme="light"] .category-card-info .cat-desc-text strong,
[data-theme="light"] .category-card-info .cat-desc-text b {
    color: var(--text-color) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   KATEGORİ ALT SEO KUTUSU (.category-bottom-description .seo-card)
   "Devamını Oku" düğmeli, sayfanın altındaki uzun açıklama kutusu.
   İki ayrı sorun vardı:

   1) ZEMİN — header.php'deki cam efekti listesinde (`html body .seo-card`)
      olduğu için %62 saydam + saturate(150%) idi; arkadaki mavi hâle
      sızıp kutuyu mavimsi gösteriyordu. SSS kutuları o listede değil.

   2) METİN RENKLERİ — header.php gövdeyi #94a3b8, başlıkları #e2e8f0
      olarak SABİT yazıyor ve !important taşıyor. footer.php'deki gündüz
      düzeltmeleri ise `SCRIPT_NAME === '/index.php'` koşuluna kilitli,
      yani KATEGORİ SAYFASINDA HİÇ YÜKLENMİYOR. Sonuç: gündüz modunda
      başlıklar #e2e8f0 ile #f5f6ff üzerinde 1.15:1 kontrastta kalıyor,
      pratikte görünmüyordu (alt sınır 4.5:1).

   Kapsam bilinçli olarak .category-bottom-description ile sınırlandı:
   ana sayfadaki SEO kutusunun kendi gündüz kuralları zaten var, oraya
   dokunulmuyor. Gece modu metin renkleri de olduğu gibi bırakıldı
   (6.72 ve 13.99 — zaten sağlam).
   ══════════════════════════════════════════════════════════════════════ */
html body .category-bottom-description .seo-card {
    background: var(--card-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

[data-theme="light"] .category-bottom-description .seo-card,
[data-theme="light"] .category-bottom-description .seo-card p,
[data-theme="light"] .category-bottom-description .seo-card span,
[data-theme="light"] .category-bottom-description .seo-card li {
    color: var(--text-muted) !important;
}
[data-theme="light"] .category-bottom-description .seo-card h1,
[data-theme="light"] .category-bottom-description .seo-card h2,
[data-theme="light"] .category-bottom-description .seo-card h3,
[data-theme="light"] .category-bottom-description .seo-card h4,
[data-theme="light"] .category-bottom-description .seo-card strong,
[data-theme="light"] .category-bottom-description .seo-card b {
    color: var(--text-color) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   ÜRÜN SAYFASI SERVİS KUTULARI (.m-service-item) — GÜNDÜZ MODU
   base.css'te kutunun zemini ve çerçevesi BEYAZ tabanlı:
       background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01))
       border:     1px solid rgba(255,255,255,.05)
   Gece modunda koyu zeminde ince bir hat olarak görünüyor; gündüzde
   beyaz üstüne beyaz düştüğü için kutular tamamen kayboluyordu.
   base.css komşu öğelere gündüz karşılığı yazmış (.action-price-box,
   .action-qty-selector) ama servis kutuları atlanmış.
   Burada aynı yapının gündüz karşılığı veriliyor: aynı gradyan açısı,
   aynı incelik, yalnız renkler ters çevrildi. Çerçeve şeffaflığı
   base.css'in kendi gündüz kuralıyla (rgba(0,0,0,.08)) aynı tutuldu.
   GECE MODU KAPSAM DIŞI — [data-theme="light"] seçicisi nedeniyle.
   Boyut, iç boşluk, köşe, ikon ve hover hareketi değişmiyor.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .m-service-item {
    background: linear-gradient(135deg, rgba(0, 0, 0, .022) 0%, rgba(0, 0, 0, .008) 100%);
    border-color: rgba(0, 0, 0, .08);
}
/* Hover'da base.css yine beyaz zemin veriyor (rgba(255,255,255,.05));
   gündüzde kutu tekrar kaybolmasın diye aynı etki koyu tarafa çevrildi.
   Çerçevenin hover'da --primary-blue olması base.css'ten aynen geliyor. */
[data-theme="light"] .m-service-item:hover {
    background: rgba(0, 0, 0, .04);
}

/* ═══════════════════════════════════════════════════════════════════
   Kategori "alt alta" (liste) görünümü — SADECE PC
   ───────────────────────────────────────────────────────────────────
   Sorun: base.css:7322'deki .list-card-price kuralı kutuya arka plan +
   çerçeve verip içeriği ortalıyor. Kutu .list-card-info (flex:1) içinde
   tek başına durduğu için satırın tamamına yayılıyor ve kart bozuk
   görünüyordu.

   Çözüm: bilgi alanını yatay satıra çeviriyoruz — başlık soldan yer
   kaplıyor, fiyat kutusu sağ uca, yani Satın Al butonunun hemen soluna
   oturuyor ve küçülüyor.

   Kapsam güvenliği:
   • @media (min-width: 541px) → base.css'teki mobil kırılım
     (max-width: 540px) ile hiç örtüşmüyor, mobil görünüm aynen kalıyor.
   • .listing-product-list öneki → ızgara ("yan yana") görünüm
     .listing-product-grid olduğu için ondan hiç etkilenmiyor.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 541px) {
    .listing-product-list .list-card-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Başlık boşluğu yutsun ki fiyat sağa yaslansın */
    .listing-product-list .list-card-title {
        flex: 1;
        min-width: 0;
        margin-bottom: 0;
    }

    .listing-product-list .list-bogo-pill {
        flex-shrink: 0;
    }

    /* Fiyat kutusu: yayılmayı bırak, kendi içeriği kadar yer kapla.
       (Arka plan şeffaflığı aşağıda, medya sorgusunun DIŞINDA tanımlı —
       mobilde de geçerli olsun diye.) */
    .listing-product-list .list-card-price {
        flex-shrink: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-top: 0;
        padding: 5px 10px;
        gap: 6px;
    }

    /* Kutu küçüldüğü için yazılar da bir tık küçülüyor */
    .listing-product-list .list-card-price .old-price-v2 {
        font-size: 10px;
        margin-bottom: 0;
    }
    /* Sadece PC'de küçültülüyor; rengi aşağıda, medya sorgusunun dışında. */
    .listing-product-list .list-card-price .current-price-v2 {
        font-size: 15px;
    }
    .listing-product-list .list-card-price .currency-v2 {
        font-size: 10px;
    }
    .listing-product-list .list-card-price .discount-badge-v2 {
        font-size: 8px;
        padding: 2px 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Fiyat kutusu arka planı — TÜM EKRANLAR (mobil dahil)
   ───────────────────────────────────────────────────────────────────
   base.css:7322 kutuya var(--glass-bg) veriyordu; koyu temada bu
   rgba(15,23,42,.6) oluyor ve kartın üstünde açık bir dikdörtgen gibi
   duruyordu. Şeffaf yapınca kutu arkasındaki kartın rengini alıyor,
   böylece hem koyu hem açık temada zeminle aynı tonda kalıyor.
   Çerçeve var(--border-color) olarak kalıyor; kutu belli olmaya devam
   ediyor, sadece dolgusu kayboluyor.

   Kapsam: .listing-product-list → yalnızca kategori liste ("alt alta")
   görünümü. Izgara ("yan yana") görünüm .listing-product-grid
   kullandığı için etkilenmiyor.
   ═══════════════════════════════════════════════════════════════════ */
.listing-product-list .list-card-price {
    background: transparent;
}

/* Fiyat rengi — TÜM EKRANLAR (mobil dahil)
   base.css'te yeşil (#10b981 !important) tanımlı, onu eziyoruz. Sabit #fff
   yerine var(--text-color): koyu temada #f1f5f9 (beyaz), açık temada #0f172a
   (koyu). Sabit beyaz yazsaydık açık temada beyaz zeminde görünmez olurdu.
   İndirim rozeti ve üstü çizili eski fiyat kasıtlı olarak eski renginde. */
.listing-product-list .list-card-price .current-price-v2 {
    color: var(--text-color) !important;
}