:root {
    --v4-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --v4-bg-body: #F3F4F6;
    --v4-bg-content: #FFFFFF;
    --v4-bg-alt: #F9FAFB;
    --v4-bg-input: #F3F4F6;

    --v4-border-color: #E5E7EB;
    --v4-border-color-dark: #D1D5DB;
    
    --v4-text-primary: #111827;
    --v4-text-secondary: #4B5563;
    --v4-text-muted: #9CA3AF;
    --v4-text-white: #FFFFFF;

    --v4-accent-orange: #F97316;
    --v4-accent-orange-hover: #EA580C;
    
    --v4-accent-green: #10B981;
    --v4-accent-green-dark: #059669;

    --v4-accent-red: #EF4444;
    --v4-accent-blue: #3B82F6;
    
    --v4-header-height-main: 70px;
    --v4-header-height-top: 50px;
    --v4-header-height-nav: 50px;
    
    --v4-container-width: 1400px;
    --v4-container-padding: 0rem;
    
    --v4-border-radius: 8px;
    --v4-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --v4-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --v4-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}


body {
    font-family: var(--v4-font-family);
    background-color: var(--v4-bg-body);
    color: var(--v4-text-secondary);
    margin: 0px;
}

.v4new-page-wrapper {
    
    background-color: #f4f5fb;
    max-width: 100%; /* Tam enli edildi */
    margin: 0; /* Kənar boşluqlar silindi */
    border-radius: 0; /* Radius silindi */
    box-shadow: none; /* Kölgə silindi */
    overflow: hidden;
}

.v4new-container {
    width: 100%;
    max-width: var(--v4-container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--v4-container-padding);
    padding-right: var(--v4-container-padding);
    /*margin-bottom: 12px;*/
}

.v4new-desktop-only { display: none !important; }
.v4new-mobile-only { display: block !important; }

@media (min-width: 1024px) {
    .v4new-desktop-only { display: flex !important; }
    .v4new-mobile-only { display: none !important; }
}


html.oy-balance-hidden .v4new-balance-amount {
    filter: blur(5px);
    opacity: 0.7;
}

/* 3. KOMPONENTLƏR: BUTTON, BADGE, AVATAR */
.v4new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--v4-border-radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.v4new-btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}
.v4new-btn-primary {
    background-color: var(--v4-accent-orange);
    color: var(--v4-text-white);
}
.v4new-btn-primary:hover {
    background-color: var(--v4-accent-orange-hover);
    color: var(--v4-text-white);
}
.v4new-btn-secondary {
    background-color: var(--v4-bg-alt);
    color: var(--v4-text-primary);
    border-color: var(--v4-border-color);
}
.v4new-btn-secondary:hover {
    background-color: var(--v4-bg-input);
    color: var(--v4-text-primary);
}
.v4new-btn-ghost {
    background-color: transparent;
    color: var(--v4-text-secondary);
    border-color: var(--v4-border-color-dark);
}
.v4new-btn-ghost:hover {
    background-color: var(--v4-bg-alt);
    color: var(--v4-text-primary);
}

.v4new-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--v4-bg-alt);
    color: var(--v4-text-secondary);
    border: 1px solid var(--v4-border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    font-size: 1.1rem;
}
.v4new-icon-btn:hover {
    color: var(--v4-text-primary);
    background-color: var(--v4-bg-input);
    border-color: var(--v4-border-color-dark);
}

.v4new-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--v4-accent-red);
    color: var(--v4-text-white);
    font-size: 0.75rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    padding: 2px;
    border: 2px solid var(--v4-bg-content);
}
.v4new-cart .v4new-badge {
    background-color: var(--v4-accent-orange);
}

.v4new-avatar {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}
.v4new-avatar-lg { width: 40px; height: 40px; }
.v4new-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v4new-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--v4-accent-orange);
    color: var(--v4-text-white);
    font-weight: 600;
}

/* 4. DROPDOWN (ÜMUMİ) */
.v4new-dropdown { position: relative; }
.v4new-dropdown-toggle {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}
.v4new-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 250px;
    background-color: var(--v4-bg-content);
    border-radius: var(--v4-border-radius);
    box-shadow: var(--v4-shadow-lg);
    border: 1px solid var(--v4-border-color);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}
.v4new-dropdown.is-open .v4new-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.v4new-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--v4-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}
.v4new-dropdown-item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    color: var(--v4-text-muted);
}
.v4new-dropdown-item:hover {
    background-color: var(--v4-accent-orange);
    color: var(--v4-text-white);
}
.v4new-dropdown-item:hover i {
    color: var(--v4-text-white);
}
.v4new-dropdown-item-danger { color: var(--v4-accent-red); }
.v4new-dropdown-item-danger:hover { background-color: var(--v4-accent-red); color: var(--v4-text-white); }
.v4new-dropdown-divider {
    height: 1px;
    background-color: var(--v4-border-color);
    margin: 0.5rem 0;
}

/* 5. HEADER: ÜMUMİ */
.v4new-header {
    background-color: var(--v4-bg-content);
    position: sticky;
    top: 0;
    z-index: 990;
    border-radius: var(--v4-border-radius) var(--v4-border-radius) 0 0;
}

/* 6. HEADER: TOPBAR */
.v4new-topbar {
    height: var(--v4-header-height-top);
    background-color: var(--v4-bg-alt);
    border-bottom: 1px solid var(--v4-border-color);
    font-size: 0.8rem;
    display: block;
  
}
.v4new-topbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.v4new-topbar-left, .v4new-topbar-right {
    display: flex;
    align-items: center;
}
.v4new-inline-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 5;
    padding: 0;
    gap: 0.5rem;
}
.v4new-inline-links li { padding: 0; margin: 0; }
.v4new-inline-links a {
    color: var(--v4-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.v4new-inline-links a:hover { color: var(--v4-text-primary); }
.v4new-inline-links a i { margin-right: 0.3rem; }

/* 7. HEADER: TOPBAR - DİL/VALYUTA (PREF) */
.v4new-pref { position: relative; }
.v4new-pref-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--v4-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.5rem;
}
.v4new-pref-trigger:hover { color: var(--v4-text-primary); }
.v4new-pref-arrow { font-size: 0.6rem; transition: transform 0.2s ease; }
.v4new-pref.is-open .v4new-pref-arrow { transform: rotate(180deg); }
.v4new-pref-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 300px;
    background-color: var(--v4-bg-content);
    border: 1px solid var(--v4-border-color);
    border-radius: var(--v4-border-radius);
    box-shadow: var(--v4-shadow-lg);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}
.v4new-pref.is-open .v4new-pref-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.v4new-pref-body { padding: 1rem; }
.v4new-pref-title { font-size: 1.1rem; font-weight: 600; color: var(--v4-text-primary); display: block; margin-bottom: 0.25rem; }
.v4new-pref-desc { font-size: 0.85rem; margin-bottom: 1rem; }
.v4new-pref-group { margin-bottom: 1rem; }
.v4new-pref-label { display: block; font-weight: 500; margin-bottom: 0.5rem; font-size: 0.9rem; }
.v4new-pref-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--v4-bg-input);
    border: 1px solid var(--v4-border-color);
    border-radius: var(--v4-border-radius);
    color: var(--v4-text-primary);
    font-size: 0.9rem;
}
.v4new-pref-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--v4-border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* 8. HEADER: MAINBAR */
.v4new-mainbar {
    height: var(--v4-header-height-main);
    background-color: var(--v4-bg-content);
    border-bottom: 1px solid var(--v4-border-color);
}
.v4new-mainbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}
.v4new-mainbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.v4new-brand-img {
    height: 36px;
    max-width: 150px;
    object-fit: contain;
}
.v4new-mainbar-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    padding: 0 1rem;
}
.v4new-mainbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 9. HEADER: MAINBAR - AXTARIŞ (Desktop) */
.v4new-search {
    position: relative;
    width: 100%;
    max-width: 600px;
}
.v4new-search-input {
    width: 100%;
    height: 44px;
    border-radius: var(--v4-border-radius);
    background-color: var(--v4-bg-input);
    border: 1px solid var(--v4-border-color);
    padding-left: 1rem;
    padding-right: 3.5rem;
    font-size: 0.9rem;
    color: var(--v4-text-primary);
    transition: all 0.2s ease;
}
.v4new-search-input:focus {
    background-color: var(--v4-bg-content);
    border-color: var(--v4-accent-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
    outline: none;
}
.v4new-search-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 34px;
    width: 34px;
    border-radius: 6px;
    background-color: var(--v4-accent-orange);
    color: var(--v4-text-white);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}
.v4new-search-btn:hover { background-color: var(--v4-accent-orange-hover); }

.v4new-balance {
    align-items: center;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    padding: 4px 4px 4px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    margin-left: 10px;
    gap: 6px;
    transition: all 0.3s 
ease;
}

.v4new-balance:hover {
    border-color: #b2bec3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

/* Məbləğ və Valyuta Linki */
.v4new-balance-value {
    text-decoration: none !important;
    color: #2d3436;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 5px;
    transition: 0.3s;
}

.v4new-balance-value:hover {
    color: #00b894; /* Üzərinə gələndə yaşıl olsun */
}

.v4new-balance-currency {
    font-size: 0.85rem;
    color: #b2bec3;
    font-weight: 600;
}

/* Artır (+) Düyməsi */
.v4new-balance-add {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00b894; /* Canlı Yaşıl */
    color: #fff;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.v4new-balance-add:hover {
    background: #00a884;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 184, 148, 0.3);
    color: #fff;
}

/* Gizlət/Göstər (Göz) Düyməsi */
.v4new-balance-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f2f6;
    color: #636e72;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    outline: none;
}

.v4new-balance-toggle:hover {
    background: #dfe6e9;
    color: #2d3436;
}

/* Blur Effekti (JS ilə işləyəcək) */
.blur-active {
    filter: blur(5px);
    user-select: none;
    cursor: default;
}


.v4new-user-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--v4-text-primary);
    text-decoration: none;
    padding: 0.25rem;
}
.v4new-user-name {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.3;
}
.v4new-user-name span { font-size: 0.9rem; font-weight: 600; }
.v4new-user-name small { font-size: 0.75rem; color: var(--v4-text-secondary); }
.v4new-user-trigger i { font-size: 0.7rem; color: var(--v4-text-muted); }

/* 11. HEADER: MAINBAR - POPUP MENYU (Mesajlar) */
.v4new-pop-menu {
    width: 360px;
    padding: 0;
}
.v4new-pop-header {
    padding: 1rem;
    border-bottom: 1px solid var(--v4-border-color);
}
.v4new-pop-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--v4-text-primary);
}
.v4new-pop-list {
    max-height: 400px;
    overflow-y: auto;
}
.v4new-pop-item {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--v4-border-color);
}
.v4new-pop-item:last-child { border-bottom: none; }
.v4new-pop-item:hover { background-color: var(--v4-bg-alt); }
.v4new-pop-item.is-new { background-color: rgba(249, 115, 22, 0.05); }
.v4new-pop-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.v4new-pop-content { flex-grow: 1; }
.v4new-pop-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.25rem;
}
.v4new-pop-sender {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--v4-text-primary);
}
.v4new-pop-time {
    font-size: 0.75rem;
    color: var(--v4-text-muted);
}
.v4new-pop-text {
    font-size: 0.85rem;
    color: var(--v4-text-secondary);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.v4new-pop-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--v4-text-muted);
}
.v4new-pop-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--v4-border-color);
    text-align: center;
}
.v4new-pop-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--v4-accent-orange);
    text-decoration: none;
}
.v4new-pop-link:hover { text-decoration: underline; }

/* =========================================
   12. HEADER: NAVBAR (Modern Style)
   ========================================= */
.v4new-navbar {
    height: 60px; /* Hündürlük sabitlendi */
    background-color: #ffffff;
    border-bottom: 1px solid #f3f4f6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02); /* Çox yüngül kölgə */
    position: relative;
    z-index: 99;
}

/* Container tənzimləməsi */
.v4new-navbar .v4new-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.v4new-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    gap: 5px; /* Elementlər arası məsafə */
}

/* Normal Menyu Linkləri */
.v4new-menu-item {
    display: flex;
    align-items: center;
    gap: 8px; /* İkonla yazı arası */
    padding: 8px 16px;
    height: 40px; /* Link hündürlüyü */
    color: #4b5563; /* Tünd boz */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px; /* Yuvarlaq künclər */
    transition: all 0.2s ease;
}

/* Menyu Linki İkonu */
.v4new-menu-item i {
    font-size: 16px;
    color: #9ca3af; /* İkon rəngi (boz) */
    transition: color 0.2s ease;
}

/* Hover Effekti */
.v4new-menu-item:hover {
    background-color: #fff7ed; /* Çox açıq narıncı fon */
    color: #f97316; /* Narıncı yazı */
}

.v4new-menu-item:hover i {
    color: #f97316; /* Hoverdə ikon da narıncı olsun */
}

/* Aktiv Link */
.v4new-menu-item.active {
    background-color: #fff7ed;
    color: #ea580c;
}

/* "Bütün Kateqoriyalar" Düyməsi - Yenilənmiş Dizayn */
.v4new-menu-item-all {
    /* Rəngi saxlayırıq, amma bir az daha canlı edirik */
    background: linear-gradient(135deg, #ff7e21, #ea580c);
    color: #ffffff !important;
    
    /* Ölçülər: Hündürlüyü azaldıb "button" formasına salırıq */
    height: 42px; /* 100% yerinə 40-45px arası idealdır */
    padding: 0 20px; /* Daxili boşluq */
    
    /* Flexbox ilə mərkəzləmə */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* Dizayn elementləri */
    font-weight: 600; /* 700 çox qalın ola bilər, 600 daha zərifdir */
    font-size: 14px; /* Şrifti bir az kiçiltdik */
    border-radius: 8px; /* Küncləri yumşaldırıq (kobudluğu aradan qaldırır) */
    
    /* Mövqe */
    align-self: center; /* Əgər navbar flex-dirsə, düyməni mərkəzləyər */
    border: none; /* Kənar xətti ləğv edirik */
    
    /* İncə kölgə - dərinlik qatır */
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
    
    transition: all 0.3s ease;
}

/* İkon tənzimləməsi */
.v4new-menu-item-all i {
    color: #ffffff !important;
    font-size: 16px; /* İkonu da yazı ilə mütənasib edirik */
}

/* Hover effekti - Üzərinə gələndə */
.v4new-menu-item-all:hover {
    transform: translateY(-1px); /* Bir az yuxarı qalxır */
    box-shadow: 0 6px 15px rgba(234, 88, 12, 0.35); /* Kölgə artır */
    filter: brightness(1.05);
}

/* Aktiv olanda (Məsələn kliklənəndə) */
.v4new-menu-item-all:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(234, 88, 12, 0.2);
}
/* Dropdown (Açılan Menyu) */
.v4new-menu-item-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.v4new-mega-menu {
    position: absolute;
    top: 100%; /* Tam aşağıda */
    left: 0;
    min-width: 220px;
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

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

/* Dropdown Linkləri */
.v4new-mega-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
}

.v4new-mega-link:hover {
    background-color: #fff7ed;
    color: #f97316;
    padding-left: 18px; /* Yüngül sağa sürüşmə effekti */
}

/* Mobil Uyğunluq */
@media (max-width: 992px) {
    .v4new-navbar {
        height: auto;
        padding: 10px 0;
        overflow-x: auto; /* Mobildə yana sürüşdürmə */
        white-space: nowrap;
    }
    
    .v4new-menu {
        padding: 0 15px;
    }
    
    /* Scroll çubuğunu gizlət */
    .v4new-navbar::-webkit-scrollbar {
        display: none;
    }
}

/* 13. HEADER: ELAN ZOLAĞI */
.v4new-annbar {
    background-color: var(--v4-bg-alt);
    border-bottom: 1px solid var(--v4-border-color);
    padding: 0.5rem 0;
    font-size: 0.85rem;
}
.v4new-annbar .v4new-container {
    display: flex;
    align-items: center;
}

/* 14. MOBİL AXTARIŞ EKRANI */
.v4new-mobile-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--v4-bg-content);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.v4new-mobile-search.is-open {
    transform: translateY(0);
}
.v4new-mobile-search-container {
    padding: 0.75rem var(--v4-container-padding);
    background-color: var(--v4-accent-orange);
    flex-shrink: 0;
}
.v4new-mobile-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.v4new-mobile-search-input {
    flex-grow: 1;
    height: 44px;
    border-radius: var(--v4-border-radius);
    background-color: var(--v4-bg-content);
    border: none;
    padding: 0 1rem;
    font-size: 1rem;
    color: var(--v4-text-primary);
}
.v4new-mobile-search-close {
    background: transparent;
    border: none;
    color: var(--v4-text-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}
.v4new-mobile-search-results {
    flex-grow: 1;
    overflow-y: auto;
}
.v4new-search-tabs {
    display: flex;
    border-bottom: 1px solid var(--v4-border-color);
}
.v4new-search-tab {
    flex: 1;
    padding: 1rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--v4-text-muted);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.v4new-search-tab.active {
    color: var(--v4-accent-orange);
    border-bottom-color: var(--v4-accent-orange);
}
.v4new-search-pane { display: none; }
.v4new-search-pane.active { display: block; }
.v4new-search-placeholder {
    padding-top: 4rem;
    text-align: center;
    color: var(--v4-text-muted);
}
.v4new-search-placeholder i {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

/* 15. MOBİL MENYU (DRAWER) */
.v4new-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
    visibility: hidden;
}
.v4new-drawer.is-open { visibility: visible; }
.v4new-drawer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.v4new-drawer-panel {
    position: relative;
    z-index: 1;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background-color: var(--v4-bg-content);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}
.v4new-drawer.is-open .v4new-drawer-backdrop { opacity: 1; }
.v4new-drawer.is-open .v4new-drawer-panel { transform: translateX(0); }
body.v4new-drawer-open { overflow: hidden; }

.v4new-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--v4-border-color);
    flex-shrink: 0;
}
.v4new-drawer-brand img { height: 30px; }
.v4new-drawer-close { background-color: transparent; border: none; }

.v4new-drawer-auth {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--v4-border-color);
}
.v4new-drawer-auth .v4new-btn { flex: 1; }

.v4new-drawer-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--v4-border-color);
}
.v4new-drawer-user-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--v4-text-primary);
}

.v4new-drawer-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--v4-bg-alt);
}
.v4new-balance-label {
    font-size: 0.9rem;
    color: var(--v4-text-secondary);
}
.v4new-drawer-balance .v4new-balance-amount {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--v4-text-primary);
    margin: 0 0.25rem;
}
.v4new-drawer-balance .v4new-balance-add {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background-color: var(--v4-accent-green);
    color: var(--v4-text-white);
    text-decoration: none;
    font-size: 1rem;
}

.v4new-drawer-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem 0;
}
.v4new-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
.v4new-drawer-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    color: var(--v4-text-secondary);
    text-decoration: none;
    font-size: 1rem;
}
.v4new-drawer-nav a:hover {
    background-color: var(--v4-bg-alt);
    color: var(--v4-text-primary);
}
.v4new-drawer-nav a i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    color: var(--v4-text-muted);
}
.v4new-drawer-nav a:hover i { color: var(--v4-accent-orange); }

.v4new-drawer-footer {
    padding: 1rem;
    border-top: 1px solid var(--v4-border-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.v4new-drawer-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--v4-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.v4new-drawer-footer a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    color: var(--v4-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 6px;
}
.v4new-drawer-footer a:hover {
    background-color: var(--v4-bg-alt);
    color: var(--v4-text-primary);
}
.v4new-drawer-footer a i { width: 20px; text-align: center; }
.v4new-drawer-logout { color: var(--v4-accent-red) !important; }
.v4new-drawer-logout:hover { background-color: rgba(239, 68, 68, 0.1) !important; }


@media (max-width: 1023px) {
    .v4new-topbar, .v4new-navbar {
        display: none;
    }
    .v4new-mainbar-container {
        gap: 0.5rem;
    }
    .v4new-mainbar-right {
        gap: 0.5rem;
    }
    .v4new-desktop-only { display: none !important; }
    .v4new-mobile-only { display: inline-flex !important; }
}
@media (max-width: 767px) {
    .v4new-brand-img {
        height: 28px;
        max-width: 100px;
    }
    .v4new-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    .v4new-cart .v4new-badge {
        min-width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
}

.skeleton-wrapper {
    position: relative !important;
    overflow: hidden !important
}

.skeleton-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #313543;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.5s ease
}

.skeleton-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    background-image: linear-gradient( 90deg,rgba(50,50,50,0) 0,rgba(255,255,255,0.08) 30%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.08) 70%,rgba(50,50,50,0) 100% );
    z-index: 3;
    animation: shimmer 1.5s infinite
}

@keyframes shimmer {
    100% {
        transform: translateX(100%)
    }
}

.skeleton-wrapper .lazyload,.skeleton-wrapper .lazyloaded {
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit: cover;*/
    /*position: relative;*/
    /*z-index: 1*/
}

.skeleton-wrapper .lazyload {
    opacity: 0
}

.skeleton-wrapper .lazyloaded {
    opacity: 1;
    transition: opacity 0.5s ease
}

.skeleton-wrapper:has(img.lazyloaded)::before,.skeleton-wrapper:has(img.lazyloaded)::after {
    opacity: 0;
    pointer-events: none;
    animation: none
}

/* Arxa fon varsa */
.back-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    opacity: 0.1;
    z-index: -1;
}

.container-fluid.for-story {
    background-color: var(--v4-bg-alt);
    border-bottom: 1px solid var(--v4-border-color);
    margin-top: 1.5rem;
    padding: 0 !important;
    overflow: visible; /* hoverdə kəsilməsin */
}

.ui-stories {
    max-width: var(--v4-container-width);
    margin: 0 auto;
    padding-left: var(--v4-container-padding);
    padding-right: var(--v4-container-padding);
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: visible;
}

/* ===== LIST / CAROUSEL DÜZƏLİŞİ ===== */
.ui-stories__list {
    display: flex;
    justify-content: center;   /* ortada dursun */
    align-items: flex-start;
    gap: 1.5rem;               /* aralıq */
    overflow: visible;         /* hoverdə yuxarı qalxanda kəsilməsin */
}

/* Owl-carousel istifadə olunursa */
.ui-stories__list.owl-carousel {
    display: block;
}

.ui-stories__list.owl-carousel .owl-stage-outer {
    padding: 0.75rem 0 1rem;
    overflow: visible !important; /* MÜTLƏQ */
}

.ui-stories__list.owl-carousel .owl-item {
    display: flex;
    justify-content: center;
}

/* ===== STORY KONTEYNERİ (Yenilənmiş) ===== */
.ui-stories__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;          /* Mobildə scroll aktiv olsun */
    gap: 12px;                 /* Aralıq məsafəsi */
    padding: 10px 15px;
    
    /* MOBİL ÜÇÜN STANDART: Sola yasla ki, sürüşdürmək olsun */
    justify-content: flex-start; 
    
    /* Scroll hamarlığı */
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;

    /* Scroll çubuğunu gizlət */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

/* Chrome üçün scroll gizlətmə */
.ui-stories__list::-webkit-scrollbar {
    display: none;
}

/* ===== PC (DESKTOP) AYARI ===== */
/* Ekran genişliyi 992px-dən böyük olanda işə düşəcək */
@media (min-width: 992px) {
    .ui-stories__list {
        justify-content: center; /* PC-də elementləri MƏRKƏZLƏŞDİR */
        overflow-x: hidden;      /* PC-də scroll çubuğunu tam ləğv et (əgər sığırsa) */
    }
}

/* ===== STORY KARTI ===== */
.ui-story {
    flex: 0 0 auto; /* Elementin sıxılmasının qarşısını alır (Vacib!) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 88px; /* Genişliyi qutuya uyğunlaşdırdıq */
    gap: 0.5rem;
    cursor: pointer;
}

/* Kartın öz qutusu – Kvadrat forma qorunur */
.ui-story__ring {
    width: 80px;  /* Mobildə bir az daha kompakt olsun deyə ölçünü 88-dən 80-ə saldım */
    height: 80px;
    border-radius: 22px; /* Sizin istədiyiniz kvadrat (squircle) forması */
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06); /* Kölgəni biraz yumşaltdım */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 2px solid transparent; /* Border üçün yer ayırırıq */
}

/* Daxili icon sahəsi */
.ui-story__img {
    width: 58px;
    height: 58px;
    border-radius: 18px; /* Daxili kvadrat */
    overflow: hidden;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-story__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

/* Başlıq */
.ui-story__title {
    font-size: 0.75rem;
    color: #374151;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    white-space: nowrap;       /* Yazı qırılmasın */
    overflow: hidden;          /* Daşan hissə gizlənsin */
    text-overflow: ellipsis;   /* Uzun yazı '...' olsun */
    transition: color 0.25s ease;
}

/* ===== HOVER & ACTIVE EFFECT ===== */
.ui-story:hover .ui-story__ring {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.15); /* Narıncı kölgə */
    border-color: #f97316; /* Narıncı çərçivə */
}

.ui-story:hover .ui-story__title {
    color: #f97316;
}
/* Skeleton / lazyload fix */
.skeleton-wrapper.is-loaded::before {
    display: none;
    animation: none;
}

/*===============================================
  V4 WELCOME - 2. ƏSAS SLAYDER (Mövcud klaslarla)
=================================================*/
.v4new-slider-area {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.slider-container-row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.slider-container-row > .col-md-12,
.slider-container-row > .col-md-9,
.slider-container-row > .col-md-3,
.slider-wrapper-custom {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.swiper-sld {
    position: relative;
    width: 100%;
    border-radius: var(--v4-border-radius);
    overflow: hidden;
    background-color: var(--v4-bg-input);
}

/* Tip 1: Hero Slider */
.oy-hero { 
    height: 380px; 
}
.oy-hero .swiper-sld {
    height: 100%;
}
.oy-hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}
.oy-hero__visual { 
    position: absolute;
    inset: 0;
    z-index: 1;
}
.oy-hero__visual img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.oy-hero__content {
    position: relative;
    z-index: 2;
    padding: 2rem 3rem;
    max-width: 50%;
    color: var(--v4-text-primary); 
}
.oy-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: inherit;
}
.oy-hero__desc {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: var(--v4-text-secondary);
    opacity: 0.9;
}
.oy-hero__actions { display: flex; gap: 0.5rem; }
.oy-hero__actions .oy-btn {
    border-radius: var(--v4-border-radius);
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.oy-hero__actions .oy-btn--primary {
    background: var(--v4-accent-orange);
    color: var(--v4-text-white);
}
.oy-hero__actions .oy-btn--primary:hover { background: var(--v4-accent-orange-hover); }
.oy-hero__actions .oy-btn:not(.oy-btn--primary) {
    background: var(--v4-bg-input);
    color: var(--v4-text-primary);
}
.oy-hero__actions .oy-btn:not(.oy-btn--primary):hover { 
    background: var(--v4-border-color); 
}
.oy-hero__glow { display: none; }

/* Slayder Naviqasiya/Pagination */
.swiper-pagination {
    bottom: 10px !important;
}
.swiper-pagination-bullet {
    background: var(--v4-text-white);
    opacity: 0.7;
}
.swiper-pagination-bullet-active {
    background: var(--v4-accent-orange);
    opacity: 1;
}
/* Gizli Swiper düymələri üçün wrapper */
.swiper-button { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* Klikləri qəbul etmir */
}
.swiper-button-prev, .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--v4-text-white);
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 10;
    cursor: pointer;
    display: grid;
    place-items: center;
    pointer-events: auto; /* Düymələr klikləri qəbul edir */
}
.swiper-button-prev { left: 1rem; }
.swiper-button-next { right: 1rem; }
.swiper-button-prev:after, .swiper-button-next:after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1rem;
}
.swiper-button-prev:after { content: '\f053'; }
.swiper-button-next:after { content: '\f054'; }

.swiper-sld:hover .swiper-button-prev,
.swiper-sld:hover .swiper-button-next {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Tip 2, 3, 4 Sliderlər */
.slider-wrapper-custom, .slider-v2-wrapper, .v4new-slider-layout-3 {
    display: flex;
    gap: 1rem;
    height: 380px;
}
.slider-left-banner, .slider-right-banner, .slider-right-banners, .slider-v2-left-stack {
    flex-shrink: 0;
    width: 280px;
    border-radius: var(--v4-border-radius);
}
.slider-left-banner a, .slider-right-banner a { display: block; height: 100%; }
.slider-left-banner img, .slider-right-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--v4-border-radius);
    transition: transform 0.3s ease;
}
.slider-left-banner a:hover img, .slider-right-banner a:hover img {
    transform: scale(1.05);
}
.slider-center-area, .slider-v2-center, .col-md-9 {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--v4-border-radius);
    padding: 0;
}
.slider-center-area .img, .slider-v2-center .img, .col-md-9 .img {
    display: block;
    width: 100%;
    height: 100%;
}
.slider-center-area img, .slider-v2-center img, .col-md-9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.background-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px);
    opacity: 0.2;
    z-index: 0;
}
.slider-right-banners, .slider-v2-left-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.slider-right-banners .banner-box, .slider-v2-left-stack a {
    flex: 1;
    border-radius: var(--v4-border-radius);
    overflow: hidden;
}
.slider-right-banners img, .slider-v2-left-stack img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.slider-right-banners a:hover img, .slider-v2-left-stack a:hover img {
    transform: scale(1.05);
}

/* Mobil Slayder Bannerləri */
.v4new-mobile-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.v4new-mobile-banners .banner-box,
.v4new-mobile-banners .skeleton-wrapper {
    border-radius: var(--v4-border-radius);
    overflow: hidden;
}
.v4new-mobile-banners img {
    width: 100%;
    display: block;
}

/* Responsivlik */
@media (max-width: 1023px) {
    .oy-hero, .slider-wrapper-custom, .slider-v2-wrapper, .v4new-slider-layout-3 {
        height: 300px;
    }
    .oy-hero__content {
        left: 1.5rem;
        padding: 1.5rem;
        max-width: 60%;
    }
    .oy-hero__title { font-size: 1.5rem; }
    .oy-hero__desc { font-size: 0.9rem; margin-bottom: 1rem; }
}
@media (max-width: 767px) {
    .oy-hero, .slider-wrapper-custom, .slider-v2-wrapper, .v4new-slider-layout-3 {
        height: 250px;
    }
    .oy-hero__content {
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        max-width: calc(100% - 2rem);
        background: rgba(0,0,0,0.3);
        color: #fff;
    }
    .oy-hero__actions { flex-direction: column; }
    .oy-hero__actions .oy-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/*===============================================
  V4 WELCOME - 2. ƏSAS SLAYDER (4 Tip)
=================================================*/
.v4new-slider-area {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.v4new-slider-row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.v4new-slider-row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.v4new-hero-slider, .v4new-main-swiper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--v4-border-radius);
    overflow: hidden;
    background-color: var(--v4-bg-input);
}
.v4new-hero-slider .swiper-slide, .v4new-main-swiper .swiper-slide {
    background-color: var(--v4-bg-alt);
}
.v4new-hero-slider .swiper-pagination-bullet, 
.v4new-main-swiper .swiper-pagination-bullet {
    background: var(--v4-text-white);
    opacity: 0.7;
}
.v4new-hero-slider .swiper-pagination-bullet-active,
.v4new-main-swiper .swiper-pagination-bullet-active {
    background: var(--v4-accent-orange);
    opacity: 1;
}
.v4new-hero-slider .swiper-button-prev, .v4new-hero-slider .swiper-button-next,
.v4new-main-swiper .swiper-button-prev, .v4new-main-swiper .swiper-button-next {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--v4-text-white);
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0;
}
.v4new-hero-slider .swiper-button-prev:after, .v4new-hero-slider .swiper-button-next:after,
.v4new-main-swiper .swiper-button-prev:after, .v4new-main-swiper .swiper-button-next:after {
    font-size: 1rem;
    font-weight: bold;
}
.v4new-hero-slider:hover .swiper-button-prev, .v4new-hero-slider:hover .swiper-button-next,
.v4new-main-swiper:hover .swiper-button-prev, .v4new-main-swiper:hover .swiper-button-next {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}
.swiper-button-prev { left: 1rem; }
.swiper-button-next { right: 1rem; }

/* Tip 1: Hero Slider (PUBG Nümunəsi) */
.v4new-hero-slider { height: 380px; }
.v4new-hero-slide {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}
.v4new-hero-visual { position: absolute; inset: 0; z-index: 1; }
.v4new-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.v4new-hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem 3rem;
    max-width: 50%;
    color: var(--v4-text-primary); 
}
.v4new-hero-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: inherit;
}
.v4new-hero-desc {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: var(--v4-text-secondary);
    opacity: 0.9;
}
.v4new-hero-actions { display: flex; gap: 0.5rem; }
.v4new-hero-actions .v4new-btn {
    border-radius: var(--v4-border-radius);
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.v4new-hero-actions .v4new-btn-primary {
    background: var(--v4-accent-orange);
    color: var(--v4-text-white);
}
.v4new-hero-actions .v4new-btn-primary:hover { background: var(--v4-accent-orange-hover); }
.v4new-hero-actions .v4new-btn-secondary {
    background: var(--v4-bg-input);
    color: var(--v4-text-primary);
}
.v4new-hero-actions .v4new-btn-secondary:hover { 
    background: var(--v4-border-color); 
}
.oy-hero__glow { display: none; }

/* Tip 2, 3, 4 Sliderlər (Qaranlıq Nümunə) */
.v4new-slider-wrapper-layout {
    display: flex;
    gap: 1rem;
    height: 380px;
}
.v4new-slider-side-banner, .v4new-slider-side-stack {
    flex-shrink: 0;
    width: 280px;
    border-radius: var(--v4-border-radius);
}
.v4new-slider-side-banner a, .v4new-slider-side-stack a { 
    display: block; 
    height: 100%; 
    border-radius: var(--v4-border-radius);
    overflow: hidden;
}
.v4new-slider-side-banner img, .v4new-slider-side-stack img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.v4new-slider-side-banner a:hover img, .v4new-slider-side-stack a:hover img {
    transform: scale(1.05);
}
.v4new-slider-main {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--v4-border-radius);
}
.v4new-slider-main .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.v4new-slider-main .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.v4new-slider-bg-overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(30px);
    opacity: 0.2;
    z-index: 0;
}
.v4new-slider-side-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.v4new-slider-side-stack a {
    flex: 1;
}

/* Mobil Slayder Bannerləri */
.v4new-mobile-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}
.v4new-mobile-banners .skeleton-wrapper {
    border-radius: var(--v4-border-radius);
    overflow: hidden;
}
.v4new-mobile-banners img {
    width: 100%;
    display: block;
}

/*===============================================
  V4 WELCOME - 10. RESPONSIVE (Slayder üçün)
=================================================*/
@media (max-width: 1023px) {
    /* (Bu media sorğusunu `v4/style.css`-ə yalnız bir dəfə əlavə edin) */
    .v4new-desktop-only { display: none !important; }
}
@media (max-width: 767px) {
    /* (Bu media sorğusunu `v4/style.css`-ə yalnız bir dəfə əlavə edin) */
    .v4new-hero-content {
        left: 1rem;
        right: 1rem;
        padding: 1rem;
        max-width: calc(100% - 2rem);
        background: rgba(0,0,0,0.3);
        color: #fff;
    }
    .v4new-hero-title { font-size: 1.5rem; }
    .v4new-hero-desc { font-size: 0.9rem; margin-bottom: 1rem; }
    .v4new-hero-actions { flex-direction: column; }
    .v4new-hero-actions .v4new-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .v4new-slider-wrapper-layout, .v4new-hero-slider {
        height: 250px;
    }
}


/*===============================================
  V4 WELCOME - 3. ALT PROMO KARUSELİ (Slayder altı)
=================================================*/

/* Nümunəyə uyğun olaraq bu zolağa qaranlıq fon veririk */
.v4new-promo-carousel-area {
    padding: 1rem 0;
    background-color: var(--v4-bg-footer); /* Qaranlıq fon (footer-dən) */
    border-radius: var(--v4-border-radius);
    margin-top: 1.5rem;
    border: 1px solid var(--v4-footer-border);
}

.v4new-promo-carousel .item {
    padding: 0.5rem;
}

.v4new-promo-carousel a {
    display: block;
    border-radius: var(--v4-border-radius);
    overflow: hidden;
    border: 1px solid var(--v4-footer-border);
    transition: all 0.2s ease;
    background: var(--v4-bg-footer-card);
    padding: 0.5rem;
}

.v4new-promo-carousel a:hover {
    border-color: var(--v4-accent-blue); /* Footer-in hover rəngi */
    background-color: var(--v4-bg-footer-input);
    transform: translateY(-3px);
}

.v4new-promo-carousel img {
    width: 100%;
    display: block;
    object-fit: contain; /* Loqoların əzilməməsi üçün */
    aspect-ratio: 2 / 1; /* Brend loqoları üçün enli format */
}


/*===============================================
  V4 WELCOME - 4. BAZAR (PAZAR) BÖLMƏSİ (Şəkil f5a069)
=================================================*/
.v4new-marketplace-section {
    padding: 1.5rem var(--v4-container-padding);
    background-color: var(--v4-bg-footer); /* Qaranlıq fon (nümunəyə uyğun) */
    border-top: 1px solid var(--v4-footer-border);
    border-bottom: 1px solid var(--v4-footer-border);
}

/* Başlıq və Tablar */
.v4new-marketplace-section .v4new-section-header {
    border-bottom-color: var(--v4-footer-border);
}
.v4new-marketplace-section .v4new-section-title {
    color: var(--v4-text-footer-primary); /* Ağ başlıq */
}
.v4new-marketplace-section .v4new-section-title i {
    color: var(--v4-accent-blue); /* Mavi ikon */
}
.v4new-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.v4new-tab-item {
    padding: 0.5rem 1rem;
    border-radius: var(--v4-border-radius);
    background-color: var(--v4-bg-footer-input);
    color: var(--v4-text-footer-secondary);
    border: 1px solid var(--v4-footer-border);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.v4new-tab-item i {
    margin-right: 0.5rem;
}
.v4new-tab-item:hover {
    background-color: var(--v4-bg-footer-card);
    color: var(--v4-text-footer-primary);
}
.v4new-tab-item.active {
    background-color: var(--v4-accent-blue);
    color: var(--v4-text-white);
    border-color: var(--v4-accent-blue);
}

/* Tab Məzmunu */
.v4new-tab-content { margin-top: 1.5rem; }
.v4new-tab-pane { display: none; }
.v4new-tab-pane.active { display: block; }
.v4new-market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Bazar Kartı */
.v4new-market-card-wrapper {
    padding: 2px; /* Çərçivə effekti üçün boşluq */
}
.v4new-market-card {
    background-color: var(--v4-bg-footer-card);
    border-radius: var(--v4-border-radius);
    border: 1px solid var(--v4-footer-border);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.v4new-market-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-3px);
    border-color: var(--v4-accent-blue);
}

/* Çərçivə Stili */
.v4new-market-card-wrapper.v4new-frame-k .v4new-market-card {
    border-color: #FFD700;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.v4new-market-card-wrapper.v4new-frame-r .v4new-market-card {
    border-color: #EF4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.v4new-market-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--v4-bg-footer-input);
}
.v4new-market-card-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.v4new-market-card-body { 
    padding: 1rem; 
    flex-grow: 1; 
    border-bottom: 1px solid var(--v4-footer-border);
}
.v4new-market-card-title { 
    margin: 0 0 0.5rem 0; 
    font-size: 1.1rem; 
}
.v4new-market-card-title a { 
    color: var(--v4-text-footer-primary); 
    text-decoration: none; 
    font-weight: 600;
}
.v4new-market-card-title a:hover { 
    color: var(--v4-accent-blue); 
}
/* Başlıq Rəngləri */
.v4new-market-card-title .v4new-title-r { color: #EF4444; }
.v4new-market-card-title .v4new-title-k { color: #FFD700; }
.v4new-market-card-desc {
    font-size: 0.9rem;
    color: var(--v4-text-footer-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Kartın Alt Hissəsi (Footer) */
.v4new-market-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(0,0,0,0.1);
}
.v4new-market-card-seller { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    overflow: hidden;
}
.v4new-market-card-seller img { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    flex-shrink: 0;
}
.v4new-seller-info { 
    flex-grow: 1; 
    overflow: hidden;
    white-space: nowrap;
}
.v4new-seller-name { 
    color: var(--v4-text-footer-primary); 
    font-weight: 500; 
    text-decoration: none; 
    font-size: 0.9rem; 
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
}
.v4new-seller-name:hover {
    color: var(--v4-accent-blue);
}
.v4new-seller-status { 
    display: flex; 
    align-items: center; 
    gap: 0.25rem; 
    font-size: 0.8rem; 
    color: var(--v4-text-footer-muted); 
}
.v4new-seller-status span {
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background-color: var(--v4-text-footer-muted);
}
.v4new-seller-status.is-online span { 
    background-color: var(--v4-accent-green); 
}
.v4new-market-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--v4-accent-orange);
    flex-shrink: 0;
    text-align: right;
}
.v4new-market-card-price span { 
    font-size: 0.9rem; 
    color: var(--v4-text-footer-secondary);
}

/* Responsivlik */
@media (max-width: 767px) {
    .v4new-section-header, .kenarlialanmav { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 1rem; 
    }
    .v4new-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }
    .v4new-tab-item { flex-shrink: 0; }
    .v4new-market-grid {
        grid-template-columns: 1fr;
    }
}

/* Köhnə Pazar klasları üçün uyğunluq (ehtiyat üçün) */
.gl-tab .shop__control {
    border-bottom: none;
    margin-bottom: 1.5rem !important;
}
.shop__nav2 ul {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    border-bottom: 0 !important;
}
.GLTabOne_span_1 {
    padding: 0.5rem 1rem;
    border-radius: var(--v4-border-radius);
    background-color: var(--v4-bg-footer-input);
    color: var(--v4-text-footer-secondary);
    border: 1px solid var(--v4-footer-border);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    text-decoration: none;
}
.GLTabOne_span_1 span { color: inherit !important; }
.GLTabOne_span_1 i { margin-right: 0.5rem; }
.GLTabOne_span_1:hover {
    background-color: var(--v4-bg-footer-card);
    color: var(--v4-text-footer-primary);
}
.GLTabOne_span_1.active {
    background-color: var(--v4-accent-blue);
    color: var(--v4-text-white);
    border-color: var(--v4-accent-blue);
}
.kenarlialanmav-banner { display: none; }
.pazarcontent .shop__tab { display: none; }
.pazarcontent .shop__tab.active { display: block; }

.listing-card-wrapper {
    padding: 2px;
    height: 100%;
}
.listing-item {
    background-color: var(--v4-bg-footer-card);
    border-radius: var(--v4-border-radius);
    border: 1px solid var(--v4-footer-border);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.listing-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transform: translateY(-3px);
    border-color: var(--v4-accent-blue);
}
.listing-card-wrapper.kcerceve .listing-item { border-color: gold; box-shadow: 0 0 10px gold; }
.listing-card-wrapper.rcerceve .listing-item { border-color: red; box-shadow: 0 0 10px red; }
.listing-preview {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.listing-core { height: 100%; }
.listing-icon { width: 100%; height: 100%; background-color: var(--v4-bg-footer-input); }
.listing-icon img { width: 100%; height: 100%; object-fit: cover; }
.listing-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--v4-accent-orange);
    padding: 0 1rem;
    margin-top: 1rem;
}
.listing-price small { font-size: 0.9rem; color: var(--v4-text-footer-secondary); }
.listing-text { padding: 1rem; flex-grow: 1; border-bottom: 1px solid var(--v4-footer-border); }
.listing-text .title { margin: 0 0 0.5rem 0; font-size: 1.1rem; }
.listing-text .title a { color: var(--v4-text-footer-primary); text-decoration: none; font-weight: 600; }
.listing-text .title a:hover { color: var(--v4-accent-blue); }
.listing-text .title .rbaslik { color: red; }
.listing-text .title .kbaslik { color: gold; }
.listing-text .description {
    font-size: 0.9rem;
    color: var(--v4-text-footer-secondary);
    margin: 0;
    line-height: 1.5;
}
.listing-seller {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(0,0,0,0.1);
}
.seller-box { display: flex; align-items: center; gap: 0.5rem; overflow: hidden; }
.seller-box img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.seller-info { flex-grow: 1; overflow: hidden; white-space: nowrap; }
.seller-name { color: var(--v4-text-footer-primary); font-weight: 500; text-decoration: none; font-size: 0.9rem; display: block; text-overflow: ellipsis; overflow: hidden; }
.seller-name:hover { color: var(--v4-accent-blue); }
.seller-status { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--v4-text-footer-muted); }
.seller-status .status-dot {
    width: 8px; height: 8px; border-radius: 50%; background-color: var(--v4-text-footer-muted);
}
.seller-status.online .status-dot { background-color: var(--v4-accent-green); }


/*===============================================
  V4 WELCOME - 5. ARA BANNERLƏR (DÜZƏLİŞ)
=================================================*/
.v4new-promo-grid-area {
    /*padding: 1.5rem 0;*/
}
.v4new-promo-grid {
    display: grid;
    /* Düzgün sütun tənzimləməsi: kiçik, böyük, kiçik */
    grid-template-columns: 1fr 2fr 1fr; 
    gap: 1rem;
}
.v4new-promo-col {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* İki kiçik banner arasındakı məsafə */
}
.v4new-promo-banner {
    display: block;
    border-radius: var(--v4-border-radius);
    overflow: hidden;
    box-shadow: var(--v4-shadow-sm);
    transition: all 0.2s ease;
    border: 1px solid var(--v4-border-color);
    position: relative;
}
.v4new-promo-banner:hover {
    transform: scale(1.02); /* Effekti yüngülləşdirdim */
    box-shadow: var(--v4-shadow-lg);
    z-index: 2;
}

/* === DÜZƏLİŞ BURADADIR === */

/* Kiçik bannerlər (Nümunəyə uyğun enli format) */
.v4new-promo-small {
    aspect-ratio: 16 / 9; /* DƏYİŞDİ: Kvadrat (1/1) yerinə enli (16/9) format */
}

/* Böyük banner (Ortadakı) */
.v4new-promo-big {
    height: 100%; /* DƏYİŞDİ: Avtomatik olaraq 2 kiçik banner + gap hündürlüyünü götürür */
}

/* === DÜZƏLİŞ BİTDİ === */

.v4new-promo-banner .skeleton-wrapper { 
    border-radius: inherit;
    position: absolute; /* Şəklin arxasında qalması üçün */
    inset: 0;
}
.v4new-promo-banner img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
    position: relative; /* Skeleton-un üzərinə çıxması üçün */
    z-index: 1;
}

/* Mobil görünüş */
@media (max-width: 767px) {
    .v4new-promo-grid { 
        grid-template-columns: 1fr; 
    }
    .v4new-promo-small, .v4new-promo-big {
        /* Mobildə hamısı eyni formatda */
        aspect-ratio: 16 / 9;
        height: auto; /* Yüz faizi ləğv et */
    }
}

/* POPULYAR OYUNLAR BÖLMƏSİ
   — Xarici section: sadəcə margin, padding
   — Daxili .v4new-container: gradient + radius + shadow  */

.oy-popular-section {
    margin-top: 32px;
    margin-bottom: 24px;
    padding: 0; /* gradient artıq burda deyil */
}

/* Bu hissə pp-section-ın stilinə bənzəyir */
.oy-popular-section .v4new-container {
    border-radius: 24px;
    padding: 22px 24px 26px;
    background:
        radial-gradient(circle at 0 0, rgba(251, 113, 133, 0.18), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, 0.20), transparent 55%),
        linear-gradient(135deg, #fff7f5 0%, #f4f7ff 45%, #eef6ff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    overflow: hidden; /* gradient künclərdən daşmasın */
}

/* HEADER */

.oy-popular-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.oy-popular-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.oy-popular-title i {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    background: conic-gradient(from 210deg, #f97316, #ec4899, #f97316, #f97316);
    box-shadow: 0 10px 26px rgba(236, 72, 153, 0.4);
}

/* sağdakı “Bütün Oyunlar” linki */

.oy-popular-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #f97316;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 26px rgba(248, 113, 113, 0.35);
    transition: background 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
}

.oy-popular-all i {
    font-size: 12px;
}

.oy-popular-all:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff;
    box-shadow: 0 14px 32px rgba(248, 113, 113, 0.55);
    transform: translateY(-1px);
}

/* GRID – kartların düzülüşü */
/* POPULYAR OYUNLAR GRID */
.oy-popular-grid {
    display: grid;
    /* PC üçün standart */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
    /* IPHONE FIX: Bu kod kartların aşağıya doğru lazımsız uzanmasının qarşısını alır */
    align-items: start; 
}

/* KARTLAR */
.oy-popular-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border-radius: 26px;
    padding: 10px 12px 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    transform-origin: center bottom;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
    will-change: transform, box-shadow;
    
    /* IPHONE FIX: Kartın hündürlüyü içindəkilərə görə olsun */
    height: auto;
    width: 100%; 
    box-sizing: border-box;
}

/* Hover zamanı arxa parıltı */
.oy-popular-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0 0, rgba(248, 113, 113, 0.45), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.5), transparent 55%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.28s ease;
}

.oy-popular-card__image {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #020617;
    /* Şəkil nisbətini qorumaq üçün */
    position: relative;
}

.oy-popular-card__image img {
    width: 100%;
    height: 170px; /* PC üçün standart hündürlük */
    object-fit: cover;
    display: block;
    transform-origin: center center;
    transition: transform 0.32s ease;
}

.oy-popular-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    text-align: center;
    line-height: 1.35;
    margin-top: 2px;
}

/* hover effekti */
.oy-popular-card:hover {
    transform: translateY(-8px) scale(1.02) rotate3d(1, -1, 0, 4deg);
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.22);
}

.oy-popular-card:hover::before {
    opacity: 1;
}

.oy-popular-card:hover .oy-popular-card__image img {
    transform: scale(1.06) translateY(-2px);
}

/* RESPONSIVE (MOBİL və TABLET) */

@media (max-width: 992px) {
    .oy-popular-section .v4new-container {
        border-radius: 20px;
        padding: 18px 18px 22px;
    }
    
    .oy-popular-card__image img {
        height: 150px;
    }
}

/* MOBİL DÜZƏLİŞLƏR (iPhone Problemi burada həll olunur) */
@media (max-width: 768px) {
    .oy-popular-section {
        padding-left: 0;
        padding-right: 0;
    }

    .oy-popular-section .v4new-container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* IPHONE FIX: Mobildə Grid 2 sütun olsun */
    .oy-popular-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .oy-popular-card {
        padding: 8px 8px 12px;
        border-radius: 20px;
    }

    /* IPHONE FIX: Şəklin hündürlüyünü fix etmək əvəzinə aspect-ratio veririk */
    /* Bu şəkilin həmişə kvadrat qalmasını təmin edir, uzanmır */
    .oy-popular-card__image img {
        height: auto !important;
        aspect-ratio: 1 / 1; 
    }
    
    .oy-popular-title {
        font-size: 13px; /* Mobildə yazı biraz kiçilsin ki daşmasın */
    }
}

@media (max-width: 640px) {
    .oy-popular-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .oy-popular-title {
        font-size: 18px;
    }
}
/*----------------------------------------------*/
/* =========================================
   POPULYAR MƏHSULLAR (iPhone Fix)
   ========================================= */

.pp-section {
    position: relative;
    margin-top: 32px;
    margin-bottom: 32px;
    border-radius: 24px;
    padding: 18px 22px 64px; /* Naviqasiya üçün yer */
    /* Gündüz Modu Fonu */
    background: linear-gradient(90deg, #ffe7f6 0%, #e7f0ff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
}

.pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.pp-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 800;
    color: #111827;
}

.pp-title i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ec4899);
    box-shadow: 0 10px 25px rgba(236, 72, 153, .35);
}

/* NAVİQASİYA DÜYMƏLƏRİ (Aşağıda) */
.pp-nav {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
}

.pp-carousel-nav {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff; /* Ağ düymə */
    color: #111827; /* Qara ox */
    box-shadow: 0 10px 26px rgba(2, 6, 23, .1);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.pp-carousel-nav:hover {
    background: #f97316; /* Narıncı hover */
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(249, 115, 22, 0.3);
}

.pp-carousel-nav.is-disabled {
    opacity: .45;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* KARUSEL SETUP */
.pp-carousel {
    display: flex;
    align-items: flex-start; /* iOS Fix: Stretch problemini həll edir */
    gap: 10px;
}

.pp-carousel-viewport {
    flex: 1;
    overflow-x: hidden;
    overflow-y: visible !important;
    padding-top: 8px;
    margin-top: -8px;
}

.pp-carousel-track {
    display: flex;
    gap: 15px;
    will-change: transform;
    cursor: grab;
    /* iOS Fix: Elementləri yuxarıdan hizala ki, uzanmasın */
    align-items: flex-start; 
}

.pp-carousel-track.is-grabbing {
    cursor: grabbing;
}

/* KART STİLİ */
.pp-card {
    background: #fff;
    border-radius: 20px;
    padding: 10px 10px 15px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, z-index 0s;
    flex: 0 0 190px; /* PC ölçüsü */
    position: relative;
    z-index: 1;
    border: 1px solid #f1f5f9;
    height: auto; /* Hündürlük avtomatik olsun */
}

.pp-card:hover {
    z-index: 3;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .15);
    border-color: #f97316;
}

.pp-card a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ŞƏKİL SAHƏSİ (iPhone Fix) */
.pp-card__img {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
    background: #f8fafc;
    
    /* iOS-da border-radius-un itməməsi üçün */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

.pp-card__img img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    display: block;
    border-radius: inherit;
}

/* KART MƏTNLƏRİ */
.pp-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.pp-card__name {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    height: 40px; /* 2 sətirlik yer */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pp-card__price {
    font-size: 15px;
    font-weight: 800;
    color: #f97316; /* Qiymət rəngi */
    margin-top: auto;
}

.pp-card__price--old {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 6px;
    text-decoration: line-through;
    font-weight: 500;
}

/* RESPONSIVE (MOBİL) */
@media (max-width: 768px) {
    .pp-section {
        padding: 15px 15px 60px;
        border-radius: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .pp-title {
        font-size: 16px;
    }

    .pp-card {
        flex: 0 0 150px; /* Mobil kart eni */
    }

    /* IPHONE ŞƏKİL FIX */
    .pp-card__img img {
        height: auto !important; /* Hündürlüyü sərbəst burax */
        aspect-ratio: 1 / 1; /* Şəkli kvadrat et (Əzilməsin) */
    }

    .pp-card__name {
        font-size: 13px;
        height: 36px; /* Mobildə biraz kiçik */
    }

    .pp-card__price {
        font-size: 14px;
    }

    .pp-carousel-nav {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
}

/*------------------------------------------*/


/*===============================================
  V4 WELCOME - 8. ŞƏRHLƏR BÖLMƏSİ (DÜZƏLİŞLİ)
=================================================*/

.oy-reviews {
    position: relative;
    isolation: isolate;
    padding: 3rem 0; /* Üst və alt boşluq */
    overflow: hidden;
    
    /* === ƏSAS DÜZƏLİŞ: Tam eni tutmaq üçün === */
    /* Mənfi marginlər bloku konteynerdən kənara çıxarır */
    margin-left: calc(var(--v4-container-padding) * -1);
    margin-right: calc(var(--v4-container-padding) * -1);
    /* Kontenerin daxili boşluğunu kompensasiya edirik */
    padding-left: var(--v4-container-padding);
    padding-right: var(--v4-container-padding);
    
    background-color: var(--v4-bg-alt); /* Açıq boz fon */
    border-top: 1px solid var(--v4-border-color);
    border-bottom: 1px solid var(--v4-border-color);
    --oy-gutter: var(--v4-container-padding);
}

/* Arxa fon effektlərini söndürürük */
.oy-reviews__bg,
.oy-reviews::before,
.oy-reviews__cursor {
    display: none;
}

/* ================= Head ================= */
.oy-reviews__head {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
    /* Məzmunu mərkəzləşdiririk */
    max-width: var(--v4-container-width);
    margin-left: auto;
    margin-right: auto;
}
.oy-reviews__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    color: var(--v4-text-white);
    background: var(--v4-accent-orange);
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    font-size: 13px;
}
.oy-reviews__title {
    margin: 12px 0 10px;
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(28px, 4.2vw, 44px);
    color: var(--v4-text-primary);
}
.oy-reviews__title-grad {
    color: var(--v4-accent-orange);
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
}
.oy-reviews__sub {
    color: var(--v4-text-secondary);
    max-width: 720px;
    margin: 0 auto;
}

/* ================= Viewport & track ================= */
.oy-reviews__viewport {
    position: relative;
    /* Məzmunu mərkəzləşdiririk */
    max-width: var(--v4-container-width);
    margin-left: auto;
    margin-right: auto;
}
.oy-reviews__track {
    display: flex;
    gap: 1.5rem;
    padding: 8px 0 14px;
    will-change: transform;
}

/* ================= Cards ================= */
.oy-card {
    flex-shrink: 0;
    width: 32%; /* 3 kart + gap üçün təxmini en */
}
/* Media Query Dəyişiklikləri */
@media (max-width: 1399.98px) { .oy-card { width: 32%; } }
@media (max-width: 1199.98px) { .oy-card { width: 48%; } } /* Planşetdə 2 kart */
@media (max-width: 767.98px) { .oy-card { width: 95%; } } /* Mobildə 1 kart */


.oy-card__inner {
    position: relative;
    height: 100%;
    background: var(--v4-bg-content);
    border: 1px solid var(--v4-border-color);
    border-radius: 12px;
    padding: 26px;
    transition: all .28s ease;
    overflow: hidden;
}
.oy-card__bar,
.oy-card__inner::after,
.oy-card__glow {
    display: none;
}
.oy-card__inner:hover {
    transform: translateY(-8px);
    border-color: var(--v4-border-color-dark);
    box-shadow: var(--v4-shadow-lg);
}
.oy-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.oy-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.oy-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--v4-bg-content);
    display: block;
}
.oy-avatar::after { display: none; }
.oy-avatar__tick { display: none; }
.oy-user__name {
    color: var(--v4-text-primary);
    font-weight: 800;
    font-size: 15px;
    margin: 0 0 4px;
    line-height: 1.2;
}
.oy-user__time {
    color: var(--v4-text-muted);
    font-size: 12px;
}
.oy-card__body {
    position: relative;
    padding: 1rem 0 0;
    z-index: 1;
}
.oy-quote {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--v4-border-color);
}
.oy-text {
    color: var(--v4-text-secondary);
    line-height: 1.6;
    margin: 0;
    padding-left: 36px;
}
.oy-card__foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--v4-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.oy-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--v4-accent-orange);
    font-size: 14px;
}
.oy-star--off {
    color: var(--v4-border-color-dark);
    opacity: 1;
}
.oy-rate {
    color: var(--v4-text-primary);
    font-weight: 700;
    margin-left: 8px;
    font-size: 14px;
}
.oy-actions { display: flex; gap: 8px; }
.oy-action {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--v4-text-secondary);
    background: var(--v4-bg-alt);
    border: 1px solid var(--v4-border-color);
    transition: all .2s ease;
}
.oy-action:hover {
    transform: translateY(-1px) scale(1.06);
    background: var(--v4-bg-input);
    border-color: var(--v4-border-color-dark);
    color: var(--v4-text-primary);
}

/* ================= Nav ================= */
.oy-nav__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--v4-text-primary);
    background: var(--v4-bg-content);
    border: 1px solid var(--v4-border-color);
    box-shadow: var(--v4-shadow-md);
    transition: all .2s ease;
    z-index: 3;
}
.oy-nav__btn:hover {
    transform: translateY(-50%) scale(1.06);
    background: var(--v4-accent-orange);
    border-color: var(--v4-accent-orange);
    color: var(--v4-text-white);
}
.oy-nav__btn--prev { left: -22px; }
.oy-nav__btn--next { right: -22px; }
.oy-nav__btn.is-disabled {
    opacity: .35;
    pointer-events: none;
    transform: translateY(-50%) scale(.95);
}

/* ================= Dots ================= */
.oy-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    position: relative;
    z-index: 2;
    /* Konteynerin içində olduğu üçün mərkəzdə qalacaq */
    max-width: var(--v4-container-width);
    margin-left: auto;
    margin-right: auto;
}
.oy-dots button {
    width: 42px;
    height: 6px;
    border-radius: 3px;
    background: var(--v4-border-color-dark);
    border: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.oy-dots button .fill {
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--v4-accent-orange);
    transition: inset .3s ease;
}
.oy-dots button.active .fill {
    inset: 0 0 0 0;
}

/* ================= Drag UX ================= */
.oy-reviews.is-grabbing .oy-reviews__track { cursor: grabbing; }
.oy-reviews.is-grabbing .oy-card { user-select: none; pointer-events: none; }

/* ================= Mobile tweaks ================= */
@media (max-width: 991.98px) {
    .oy-nav__btn { display: none; }
    .oy-reviews__track {
        /* Mobildə kənarlardan boşluq yoxdur */
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 767.98px) {
    .oy-reviews { padding: 2.5rem 0; }
}

/* ===========================
   XƏBƏRLƏR / BLOG BÖLMƏSİ (iPhone Fix)
   =========================== */

.v4new-section.v4new-blog-area {
    margin-top: 32px;
    margin-bottom: 32px;
}

/* İç konteyner */
.v4new-blog-area .v4new-container {
    border-radius: 24px;
    padding: 22px 24px 26px;
    /* Gündüz Modu Fonu */
    background: radial-gradient(circle at 0 0, rgba(251, 113, 133, 0.14), transparent 55%),
                radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16), transparent 55%),
                linear-gradient(135deg, #fff7f5 0%, #f4f7ff 45%, #eef6ff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

/* Header */
.v4new-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.v4new-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.v4new-section-title i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    background: conic-gradient(from 210deg, #3b82f6, #06b6d4, #a855f7, #3b82f6);
    box-shadow: 0 10px 26px rgba(59, 130, 246, 0.45);
}

/* Sağdakı "Bütün xəbərlər" linki */
.v4new-section-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(148, 163, 184, 0.45);
    transition: background 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.18s ease;
}

.v4new-section-all-link i {
    font-size: 12px;
}

.v4new-section-all-link:hover {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.55);
    transform: translateY(-1px);
}

/* GRID (Masaüstü) */
.v4new-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    align-items: start; /* iOS Fix: Stretch problemini həll edir */
}

/* KART */
.v4new-blog-card {
    position: relative;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    transform-origin: center bottom;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    will-change: transform, box-shadow;
    display: flex;
    flex-direction: column;
    height: auto; /* iOS Fix */
}

.v4new-blog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.45), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.45), transparent 55%);
    opacity: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.v4new-blog-card-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* ŞƏKİL HİSSƏSİ (iPhone Fix) */
.v4new-blog-card-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: #f1f5f9;
    /* iOS Fix: Aspect Ratio */
    aspect-ratio: 16 / 9;
}

.v4new-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Şəkli tam oturdur */
    display: block;
    transition: transform 0.32s ease;
    transform-origin: center center;
}

/* Məzmun hissəsi */
.v4new-blog-card-content {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v4new-blog-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    margin: 0;
}

.v4new-blog-card-desc {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    margin: 0;
    max-height: 3.1em;
    overflow: hidden;
}

.v4new-blog-card-time {
    margin-top: 4px;
    font-size: 12px;
    color: #9ca3af;
}

/* Hover effektləri */
.v4new-blog-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.22);
}

.v4new-blog-card:hover::before {
    opacity: 1;
}

.v4new-blog-card:hover .v4new-blog-card-image img {
    transform: scale(1.06) translateY(-2px);
}

/* ===========================================
   RESPONSIVE (MOBİL - Slider kimi)
   =========================================== */

@media (max-width: 992px) {
    .v4new-blog-area .v4new-container {
        border-radius: 20px;
        padding: 18px 18px 22px;
    }
}

@media (max-width: 640px) {
    .v4new-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .v4new-section-title {
        font-size: 18px;
    }

    /* GRID deyil – horizontal slider kimi */
    .v4new-blog-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        
        /* iOS Fix: Sola yasla */
        justify-content: flex-start;
        align-items: flex-start;
    }

    /* Kartların eni – slider item */
    .v4new-blog-card {
        flex: 0 0 80%; /* Ekranın 80%-i */
        max-width: 80%;
        scroll-snap-align: start;
        border-radius: 20px;
        height: auto;
    }

    /* Şəklin hündürlüyü auto, amma nisbəti qoruyur */
    .v4new-blog-card-image {
        aspect-ratio: 16 / 9;
    }
    .v4new-blog-card-image img {
        height: 100%;
    }

    /* Scrollbarı gizlətmək */
    .v4new-blog-grid::-webkit-scrollbar {
        display: none;
    }
    .v4new-blog-grid {
        -ms-overflow-style: none;  /* IE/Edge */
        scrollbar-width: none;     /* Firefox */
    }
}
/* ===========================
   FOOTER ÜSTÜ INFO STRIP
   =========================== */

.oy-info-wrap {
    padding: 32px 0 28px;
    background:
        radial-gradient(circle at 0 0, rgba(248, 113, 113, 0.22), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, 0.22), transparent 55%),
        linear-gradient(135deg, #050816 0%, #020617 60%, #020617 100%);
}

.oy-info {
    max-width: 1320px;
    margin: 0 auto;
}

.oy-info__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* KARTIN ƏSAS STİLİ */
.oy-info__card {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 20px;
    background: radial-gradient(circle at 0 0, rgba(248, 113, 113, 0.15), transparent 60%)
                rgba(15, 23, 42, 0.95);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.12);
    overflow: hidden;

    /* hover üçün hazırıq */
    transform: translateY(0) rotate3d(1, 0, 0, 0deg);
    transform-origin: center;
    will-change: transform, box-shadow;
    transition:
        opacity 0.25s ease-in-out,
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* HOVER – yumşaq qalxma + yüngül əyilmə */
.oy-info__card:hover {
    transform: translateY(-8px) scale(1.02) rotate3d(1, 1, 0, 3deg);
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.85);
}

/* `::before` glow qatının animasiyası */
.oy-info__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 0 0, rgba(248, 113, 113, 0.35), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.5), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

.oy-info__card:hover::before {
    opacity: 1;
}


.oy-info__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fef2f2;
    background: conic-gradient(from 200deg, #f97316, #ec4899, #f97316, #f97316);
    box-shadow: 0 12px 30px rgba(236, 72, 153, 0.6);
}

.oy-info__text h4 {
    font-size: 15px;
    font-weight: 600;
    color: #f9fafb;
    margin: 0 0 4px;
}

.oy-info__text p {
    margin: 0;
    font-size: 13px;
    color: #cbd5f5;
}

/* hover effect */

.oy-info__card:hover::before {
    opacity: 1;
}

.oy-info__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.9);
}

/* ===========================
   ANA FOOTER BLOKU
   =========================== */

.oyf-footer {
    position: relative;
    background:
        radial-gradient(circle at 0 0, rgba(59, 130, 246, 0.35), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.3), transparent 55%),
        #020617;
    color: #e5e7eb;
    padding-top: 32px;
}

/* Gündüz (light) mod */
body.is-light .oyf-footer,
body[data-theme="light"] .oyf-footer {
    background: #f9fafb;
    color: #0f172a;
}

.oyf-footer__container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

.oyf-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 210px) repeat(3, minmax(0, 1fr)) minmax(260px, 1.1fr);
    gap: 28px 40px;
}

.oyf-footer__brand {
    display: flex;
    align-items: flex-start;
}

.oyf-footer__logo-wrap {
    max-width: 180px;
}

.oyf-footer__logo {
    max-width: 170px;
    width: 100%;
    height: auto;
    display: block;
}

/* ümumi sütun / qrup stil */

.oyf-footer__col {
    font-size: 13px;
}

.oyf-footer__item,
.oyf-footer__sublink {
    display: block;
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    margin-bottom: 6px;
    transition: color 0.18s ease, transform 0.18s ease;
}

.oyf-footer__item:hover,
.oyf-footer__sublink:hover {
    color: #f97316;
    transform: translateX(2px);
}

/* light modda linklər bir az tünd olsun */
body.is-light .oyf-footer__item,
body.is-light .oyf-footer__sublink,
body[data-theme="light"] .oyf-footer__item,
body[data-theme="light"] .oyf-footer__sublink {
    color: #4b5563;
}

.oyf-footer__group {
    margin-bottom: 8px;
}

.oyf-footer__groupHead {
    margin-bottom: 6px;
}

.oyf-footer__groupTitle {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #e5e7eb;
}

.oyf-footer__group.is-active .oyf-footer__groupTitle {
    color: #f97316;
}

/* light modda başlıqlar */
body.is-light .oyf-footer__groupTitle,
body[data-theme="light"] .oyf-footer__groupTitle {
    color: #0f172a;
}

.oyf-footer__sublinks {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Kontakt sütunu */

.oyf-footer__contact {
    justify-self: flex-end;
}

.oyf-contact__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #f9fafb;
}

body.is-light .oyf-contact__title,
body[data-theme="light"] .oyf-contact__title {
    color: #0f172a;
}

.oyf-contact__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.oyf-contact__item a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.18s ease, transform 0.18s ease;
}

.oyf-contact__item a:hover {
    color: #f97316;
    transform: translateX(2px);
}

body.is-light .oyf-contact__item a,
body[data-theme="light"] .oyf-contact__item a {
    color: #4b5563;
}

.oyf-contact__item i {
    font-size: 14px;
}

.oyf-contact__social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.oyf-contact__social .footersosyal {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #e5e7eb;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.oyf-contact__social .footersosyal:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #f9fafb;
    transform: translateY(-2px);
}

body.is-light .oyf-contact__social .footersosyal,
body[data-theme="light"] .oyf-contact__social .footersosyal {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.45);
    color: #0f172a;
}

/* Quick contacts pill */

.oyf-quickcontacts {
    border-top: 1px solid rgba(30, 64, 175, 0.45);
    border-bottom: 1px solid rgba(15, 23, 42, 0.8);
    background: radial-gradient(circle at 50% 0, rgba(59, 130, 246, 0.25), transparent 60%);
}

body.is-light .oyf-quickcontacts,
body[data-theme="light"] .oyf-quickcontacts {
    border-top: 1px solid rgba(209, 213, 219, 0.6);
    border-bottom: 1px solid rgba(148, 163, 184, 0.7);
    background: #eef2ff;
}

.oyf-quickcontacts__menu {
    max-width: 1320px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oyf-quickcontacts__menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.oyf-quickcontacts__menu a i {
    font-size: 16px;
}

.oyf-quickcontacts__menu a:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-color: transparent;
    transform: translateY(-1px);
}

body.is-light .oyf-quickcontacts__menu a,
body[data-theme="light"] .oyf-quickcontacts__menu a {
    background: #ffffff;
    color: #0f172a;
}

.oyf-quickcontacts__text {
    white-space: nowrap;
}

/* Copyright */

.oyf-footer__copy {
    text-align: center;
    padding: 14px 16px 18px;
    font-size: 12px;
    color: #6b7280;
    background: #020617;
    border-top: 1px solid rgba(15, 23, 42, 0.9);
}

body.is-light .oyf-footer__copy,
body[data-theme="light"] .oyf-footer__copy {
    background: #e5e7eb;
    color: #374151;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}

/* ===========================
   MOBİL ALT NAV
   =========================== */

.oym-bottomNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    padding: 8px 4px 10px;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(15, 23, 42, 0.9);
}

body.is-light .oym-bottomNav,
body[data-theme="light"] .oym-bottomNav {
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(209, 213, 219, 0.9);
}

.oym-bottomNav-spacer {
    height: 56px;
}

/* nav item */

.oym-bottomNav__item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #9ca3af;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

body.is-light .oym-bottomNav__item,
body[data-theme="light"] .oym-bottomNav__item {
    color: #6b7280;
}

.oym-bottomNav__icon {
    font-size: 18px;
}

.oym-bottomNav__cart {
    position: relative;
}

.oym-bottomNav__badge {
    position: absolute;
    top: -4px;
    right: -10px;
    min-width: 16px;
    padding: 1px 3px;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

.oym-bottomNav__item.is-active {
    color: #f97316;
}

/* ===========================
   RESPONSIVE FOOTER
   =========================== */

@media (max-width: 992px) {
    .oy-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .oyf-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .oyf-footer__contact {
        grid-column: span 2;
    }

    .oyf-quickcontacts__menu {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .oy-info__grid {
        grid-template-columns: 1fr;
    }

    .oyf-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .oyf-footer__brand {
        grid-column: span 2;
    }

    .oyf-footer__contact {
        grid-column: span 2;
    }

    .oyf-quickcontacts__text {
        white-space: normal;
    }
}

/* Desktop-da alt naviqasiya gizli olsun */
@media (min-width: 992px) {
    .oym-bottomNav,
    .oym-bottomNav-spacer,
    .pcgizle {
        display: none !important;
    }
}

/* ===========================
   DİL / VALYUTA PREFERENSLƏRİ
   =========================== */

.oyf-pref {
    position: relative;
    max-width: 1320px;
    margin: 0 auto 18px;
    padding: 0 16px;
    text-align: right;
}

/* Açılan trigger (Azerbaijan / AZN ▼) */
.oyf-pref__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.45);
    font-size: 13px;
    color: #e5e7eb;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease;
}

/* light mod trigger */
body.is-light .oyf-pref__trigger,
body[data-theme="light"] .oyf-pref__trigger {
    background: #ffffff;
    border-color: rgba(209, 213, 219, 0.9);
    color: #111827;
}

.oyf-pref__trigger:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-color: transparent;
    color: #f9fafb;
    transform: translateY(-1px);
}

.oyf-pref__caret {
    font-size: 11px;
}

/* Alt-sheet backdrop */
.oyf-pref__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 998;
}

/* Alt-sheet menyu */
.oyf-pref__menu {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 480px;
    background: #020617;
    color: #e5e7eb;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 45px rgba(15, 23, 42, 0.75);
    opacity: 0;
    visibility: hidden;
    transition: transform .28s ease-out, opacity .2s ease-out, visibility 0s linear .28s;
    z-index: 999;
    padding: 1rem 1.25rem 1.25rem;
}

/* light mod alt-sheet */
body.is-light .oyf-pref__menu,
body[data-theme="light"] .oyf-pref__menu {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 -20px 40px rgba(15, 23, 42, 0.15);
}

.oyf-pref.is-open .oyf-pref__backdrop {
    opacity: 1;
    visibility: visible;
}

.oyf-pref.is-open .oyf-pref__menu {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* iç styllər */

.oyf-pref__form {
    padding: 0;
}

.oyf-pref__container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oyf-pref__head {
    font-size: 14px;
    font-weight: 600;
    color: #f9fafb;
}

.oyf-pref__desc {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 4px;
}

body.is-light .oyf-pref__head,
body[data-theme="light"] .oyf-pref__head {
    color: #111827;
}

body.is-light .oyf-pref__desc,
body[data-theme="light"] .oyf-pref__desc {
    color: #6b7280;
}

.oyf-pref__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oyf-pref__label {
    font-size: 12px;
    font-weight: 500;
    color: #d1d5db;
}

body.is-light .oyf-pref__label,
body[data-theme="light"] .oyf-pref__label {
    color: #4b5563;
}

/* Select stil */

.oyf-pref__select {
    width: 100%;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: rgba(15, 23, 42, 0.95);
    color: #e5e7eb;
    font-size: 13px;
    outline: none;
}

/* Light mod select */
body.is-light .oyf-pref__select,
body[data-theme="light"] .oyf-pref__select {
    background: #ffffff;
    color: #111827;
    border-color: rgba(209, 213, 219, 0.9);
}


.oyf-pref__select option:disabled {
    color: #9ca3af; /* solğun, amma oxunan */
}

.oyf-pref__select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.5);
}

/* Düymələr */

.oyf-pref__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.oyf-pref__btn {
    min-width: 90px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.18s ease;
}

.oyf-pref__btn--primary {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #f9fafb;
    border-color: transparent;
}

.oyf-pref__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(248, 113, 113, 0.6);
}

.oyf-pref__btn--ghost {
    background: transparent;
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, 0.5);
}

body.is-light .oyf-pref__btn--ghost,
body[data-theme="light"] .oyf-pref__btn--ghost {
    color: #374151;
    border-color: rgba(156, 163, 175, 0.8);
}

.oyf-pref__btn--ghost:hover {
    border-color: #f97316;
    color: #f97316;
}

/* Body lock – alt-sheet açıq olanda */
body.oyf-lock {
    overflow: hidden;
    touch-action: none;
}

/* Desktopda klassik dropdown kimi göstər (sheet yox) */
@media (min-width: 992px) {
    .oyf-pref__backdrop {
        display: none;
    }

    .oyf-pref__menu {
        position: absolute;
        bottom: auto;
        top: 100%;
        right: 16px;
        left: auto;
        transform: translateY(8px);
        border-radius: 16px;
        max-width: 360px;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
    }

    .oyf-pref.is-open .oyf-pref__menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(8px);
    }
}

/* Mobil: panel ekran eninə otursun */
@media (max-width: 640px) {
    .oyf-pref {
        text-align: left;
        padding-inline: 12px;
    }

    .oyf-pref__menu {
        width: calc(100% - 24px);
    }
}


/* --------- Theme tokens --------- */
:root{
  --oyw-bg:#f5f7fb;
  --oyw-card:#ffffff;
  --oyw-text:#0f172a;
  --oyw-muted:#6b7280;
  --oyw-ring:#e5e7eb;
  --oyw-ring-strong:#d1d5db;
  --oyw-brand:#2563eb;
  --oyw-brand-2:#22c55e;
  --oyw-shadow:0 8px 24px rgba(15,23,42,.08);
  --oyw-shadow-hover:0 14px 34px rgba(15,23,42,.10);
}

/* --------- Page & container --------- */
.category_page.nobg_category{background:var(--oyw-bg);padding:24px 0 48px}




/* =========================================================
   TOOLS (search + filter)
   ========================================================= */
.oyw-tools{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  margin:10px 0 18px;
}
.oyw-search{
  --h:48px;
  position:relative;display:flex;align-items:center;gap:8px;
  background:var(--oyw-card);border:1px solid var(--oyw-ring);
  border-radius:999px;padding:0 8px 0 42px;height:var(--h);
  box-shadow:var(--oyw-shadow);flex:1;
}
.oyw-icon--search{
  position:absolute;left:16px;opacity:.85;color:var(--oyw-muted)
}
.oyw-input{
  flex:1;height:calc(var(--h) - 2px);border:0;outline:0;background:transparent;
  font-size:14.5px;color:var(--oyw-text)
}
.oyw-input::placeholder{color:#9ca3af}
.oyw-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--oyw-ring);background:var(--oyw-card);color:var(--oyw-text);cursor:pointer}
.oyw-btn--round{border-radius:999px;width:38px;height:38px;justify-content:center;border:0;background:#f3f4f6}
.oyw-btn--filter{height:48px;padding:0 14px;border-radius:12px;box-shadow:var(--oyw-shadow)}
.oyw-icon--arrow-right:before{content:"➜"}
.oyw-icon--filter:before{content:"⚙"}

/* =========================================================
   GRID
   ========================================================= */
.oyw-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:480px){ .oyw-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:768px){ .oyw-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (min-width:1024px){ .oyw-grid{grid-template-columns:repeat(5,minmax(0,1fr));} }
@media (min-width:1280px){ .oyw-grid{grid-template-columns:repeat(6,minmax(0,1fr));} }

/* =========================================================
   CARD
   ========================================================= */
.oyw-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  background:var(--oyw-card);border:1px solid var(--oyw-ring);
  border-radius:18px;overflow:hidden;text-decoration:none;padding:14px 12px;
  box-shadow:var(--oyw-shadow);isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.oyw-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--oyw-shadow-hover);
  border-color:var(--oyw-ring-strong);
}
.oyw-card:focus-visible{
  outline:3px solid var(--oyw-brand);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(37,99,235,.15), var(--oyw-shadow-hover)
}
.oyw-card:active{transform:translateY(0)}

/* glow that follows mouse (JS sets --gx/--gy) */
.oyw-card__glow{
  position:absolute;inset:auto auto 0 0;width:140px;height:140px;
  translate: var(--gx,50%) var(--gy,50%);
  background:radial-gradient(120px 120px at center, rgba(37,99,235,.16), transparent 60%);
  filter:blur(12px);opacity:0;transition:opacity .2s ease;z-index:0;pointer-events:none;
}
.oyw-card:hover .oyw-card__glow{opacity:1}


/* Thumbnail */
.oyw-thumb{
  width:100%;aspect-ratio:1 / 1;display:grid;place-items:center;background:#f8fafc;
  border-radius:14px;border:1px dashed var(--oyw-ring);margin-bottom:10px;position:relative;z-index:1;overflow:hidden
}

/* Title */
.oyw-card__title{
  display:block;width:100%;text-align:center;color:var(--oyw-text);
  font-weight:700;font-size:14px;line-height:1.25;z-index:1;
  white-space:normal;overflow:hidden;text-overflow:ellipsis
}
.oyw-card:hover .oyw-card__title{color:#0b1220}


/* =========================================================
   MOBILE TWEAKS
   ========================================================= */
@media (max-width:480px){
  .oyw-tools{flex-direction:column;align-items:stretch}
  .oyw-btn--filter{width:100%}
}
@media (max-width:360px){
  .oyw-card{padding:12px 10px;border-radius:16px}
  .oyw-thumb{border-radius:12px}
}




/* ==== HERO (üst banner) ==== */
.oyw-hero{
  position:relative;border-radius:18px;padding:18px;background:#fff;
  border:1px solid #e5e7eb;box-shadow:0 8px 24px rgba(15,23,42,.08);
  margin-bottom:18px;overflow:hidden;
  background-image:var(--hero-bg, none);background-size:cover;background-position:center;
}
.oyw-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.06),rgba(15,23,42,.02));
  pointer-events:none;
}
.oyw-hero__inner{position:relative;display:flex;gap:18px;align-items:center}
.oyw-hero__media{
  width:92px;height:92px;min-width:92px;border-radius:16px;background:#f8fafc;
  border:1px dashed #e5e7eb;display:grid;place-items:center;overflow:hidden
}
.oyw-hero__media img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(2,6,23,.08))}
.oyw-hero__title{margin:0;color:#ffffff;font-size:26px;font-weight:800;line-height:1.2}

/* ==== Body Grid (Sidebar + Content) ==== */
.oyw-body{display:grid;grid-template-columns:320px 1fr;gap:20px}
@media (max-width:992px){.oyw-body{grid-template-columns:1fr}}

/* ==== Sidebar ==== */
.oyw-side{
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);padding:16px
}
.oyw-side__title{margin:0 0 8px;color:#0f172a;font-size:18px;font-weight:800}
.oyw-side__desc{margin:0 0 10px;color:#64748b;font-size:14px}
.oyw-side__content{color:#0f172a;font-size:14.5px;line-height:1.6}

/* ==== Cards Grid ==== */
.oyw-main{display:flex;flex-direction:column;gap:14px}
.oyw-grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:480px){.oyw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.oyw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.oyw-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1280px){.oyw-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}


.oyw-card__glow{
  position:absolute;inset:auto auto 0 0;width:140px;height:140px;translate:var(--gx,50%) var(--gy,50%);
  background:radial-gradient(120px 120px at center,rgba(37,99,235,.16),transparent 60%);
  filter:blur(12px);opacity:0;transition:opacity .2s ease;z-index:0;pointer-events:none
}
.oyw-card:hover .oyw-card__glow{opacity:1}
.oyw-card__overlay{
  position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(37,99,235,.08),rgba(34,197,94,.05));
  mix-blend-mode:overlay;opacity:.65;
}

/* ==== Thumb & Title ==== */
.oyw-thumb{
  width:100%;aspect-ratio:1/1;display:grid;place-items:center;background:#f8fafc;
  border-radius:14px;border:1px dashed #e5e7eb;margin-bottom:10px;position:relative;z-index:1;overflow:hidden
}
.oyw-thumb img{width:86%;height:86%;border-radius:12px;object-fit:contain;display:block;filter:drop-shadow(0 8px 14px rgba(2,6,23,.08))}
.oyw-card__title{
  display:block;width:100%;text-align:center;color:#0f172a;font-weight:700;
  font-size:14px;line-height:1.25;z-index:1;white-space:normal;overflow:hidden;
}



/* Modern Login Genel Kapsayıcı */
.modern-login-wrapper {
    background-color: #f8f9fc;
    /* Yükseklik ortalamayı kaldırdık, üstten boşluk verdik */
    padding: 60px 15px; 
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Üst kısma daha yakın durması için */
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.modern-login-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    width: 100%;
    /* Genişliği artırdık */
    max-width: 1250px; 
    overflow: hidden;
    min-height: 600px;
}

/* Sol Taraf - Bilgi Alanı */
.login-info-side {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    color: white;
    width: 40%; /* Oranı biraz düşürdük */
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-info-side .info-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.login-info-side .info-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 50px;
    line-height: 1.6;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.feature-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 20px;
    flex-shrink: 0;
}

.feature-text h6 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.feature-text p {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
    line-height: 1.5;
}

/* Sağ Taraf - Form Alanı */
.login-form-side {
    width: 60%; /* Form alanını genişlettik */
    padding: 50px 80px; /* İç boşlukları artırdık */
    background: #fff;
    display: flex;
    flex-direction: column;
}

.form-header-tabs {
    display: flex;
    margin-bottom: 40px;
    border-bottom: 2px solid #f1f1f1;
}

.auth-tab {
    padding: 15px 30px;
    font-size: 17px;
    font-weight: 600;
    color: #858796;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}

.auth-tab:hover {
    color: #4e73df;
}

.auth-tab.active {
    color: #4e73df;
    border-bottom-color: #4e73df;
}

/* Form Elemanları */
.input-group {
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    transition: color 0.3s;
}

.input-wrapper input {
    width: 100%;
    padding: 14px 20px 14px 50px;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
    outline: none;
    background: #fdfdfd;
    box-sizing: border-box; /* Taşmaları önler */
}

.input-wrapper input:focus {
    border-color: #4e73df;
    box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.1);
}

.input-wrapper input:focus + i {
    color: #4e73df;
}

/* Butonlar ve Linkler */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 14px;
}

.forgot-link {
    color: #4e73df;
    text-decoration: none;
    font-weight: 500;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(to right, #4e73df, #224abe);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(78, 115, 223, 0.3);
}

/* Checkbox Özel Tasarımı */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.custom-checkbox input {
    display: none;
}
.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d3e2;
    border-radius: 5px;
    margin-right: 10px;
    position: relative;
    transition: all 0.2s;
}
.custom-checkbox input:checked ~ .checkmark {
    background-color: #4e73df;
    border-color: #4e73df;
}
.custom-checkbox input:checked ~ .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Sosyal Girişler */
.social-divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}
.social-divider span {
    background: #fff;
    padding: 0 15px;
    color: #858796;
    font-size: 14px;
    position: relative;
    z-index: 1;
}
.social-divider::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e3e6f0;
    z-index: 0;
}

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: opacity 0.3s;
}
.social-btn.facebook { background: #3b5998; color: white; }
.social-btn.twitter { background: #1da1f2; color: white; }
.social-btn:hover { opacity: 0.9; }
.social-wrapper.google { width: 100%; }

/* Hata ve Başarı Mesajları */
.auth-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 14px;
}
.auth-alert.error { background: #ffebe6; color: #de350b; border: 1px solid #ffbdad; }
.auth-alert.success { background: #e3fcef; color: #006644; border: 1px solid #abf5d1; }
.auth-alert ul { margin: 0; padding-left: 20px; }

/* MOBİL UYUMLULUK (Responsive) DÜZELTMELERİ */
@media (max-width: 992px) {
    .modern-login-container {
        flex-direction: column;
        max-width: 600px; /* Tabletlerde çok geniş olmasın */
        min-height: auto;
    }
    
    /* Üst boşluğu mobilde iyice azaltıyoruz */
    .modern-login-wrapper {
        padding: 30px 15px; 
        align-items: flex-start;
    }

    .login-info-side {
        width: 100%;
        padding: 30px;
        display: none; /* Mobilde sadece form görünsün (İstersen açabilirsin) */
    }

    /* Inputların yapışmasını engellemek için padding ayarı */
    .login-form-side {
        width: 100%;
        padding: 30px 25px; /* Sağdan soldan 25px boşluk bıraktık */
        box-sizing: border-box;
    }

    .auth-tab {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    /* Mobilde başlık fontlarını küçültelim */
    .form-header-tabs {
        margin-bottom: 25px;
    }
}


/* Modern Login & Register Genel Kapsayıcı */
.modern-login-wrapper {
    background-color: #f8f9fc;
    padding: 60px 15px; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.modern-login-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    width: 100%;
    max-width: 1250px; 
    overflow: hidden;
    min-height: 600px;
}

/* Sol Taraf - Bilgi Alanı */
.login-info-side {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    color: white;
    width: 40%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-info-side .info-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.login-info-side .info-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 50px;
    line-height: 1.6;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.feature-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 20px;
    flex-shrink: 0;
}

.feature-text h6 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.feature-text p {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
    line-height: 1.5;
}

/* Sağ Taraf - Form Alanı */
.login-form-side {
    width: 60%;
    padding: 50px 80px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.form-header-tabs {
    display: flex;
    margin-bottom: 40px;
    border-bottom: 2px solid #f1f1f1;
}

.auth-tab {
    padding: 15px 30px;
    font-size: 17px;
    font-weight: 600;
    color: #858796;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
}

.auth-tab:hover {
    color: #4e73df;
}

.auth-tab.active {
    color: #4e73df;
    border-bottom-color: #4e73df;
}

/* Form Elemanları */
/* YENİ EKLENEN: Yan yana inputlar için satır yapısı */
.form-row {
    display: flex;
    gap: 20px;
}
.form-row .input-group {
    flex: 1;
}

.input-group {
    margin-bottom: 25px;
    width: 100%;
}

.input-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    transition: color 0.3s;
}

.input-wrapper input {
    width: 100%;
    padding: 14px 20px 14px 50px;
    border: 1px solid #e3e6f0;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s;
    outline: none;
    background: #fdfdfd;
    box-sizing: border-box;
}

.input-wrapper input:focus {
    border-color: #4e73df;
    box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.1);
}
.input-wrapper input:focus + i {
    color: #4e73df;
}

/* Validation Styling */
.input-wrapper input.invalid {
    border-color: #e74a3b;
}
.input-wrapper input.valid {
    border-color: #1cc88a;
}

/* Butonlar ve Linkler */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 14px;
}

/* YENİ EKLENEN: Kayıt sayfasındaki alt alta checkboxlar için */
.form-options-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.forgot-link {
    color: #4e73df;
    text-decoration: none;
    font-weight: 500;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(to right, #4e73df, #224abe);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(78, 115, 223, 0.3);
}

/* Checkbox Özel Tasarımı */
.custom-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #555;
}
.custom-checkbox input {
    display: none;
}
.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d3e2;
    border-radius: 5px;
    margin-right: 10px;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-top: 2px; /* Metinle hizalama için */
}
.custom-checkbox input:checked ~ .checkmark {
    background-color: #4e73df;
    border-color: #4e73df;
}
.custom-checkbox input:checked ~ .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.checkbox-text a {
    color: #4e73df;
    text-decoration: none;
    font-weight: 600;
}

/* Sosyal Girişler */
.social-divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}
.social-divider span {
    background: #fff;
    padding: 0 15px;
    color: #858796;
    font-size: 14px;
    position: relative;
    z-index: 1;
}
.social-divider::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e3e6f0;
    z-index: 0;
}

.social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: opacity 0.3s;
}
.social-btn.facebook { background: #3b5998; color: white; }
.social-btn.twitter { background: #1da1f2; color: white; }
.social-btn:hover { opacity: 0.9; }
.social-wrapper.google { width: 100%; }

/* Hata ve Başarı Mesajları */
.auth-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 14px;
}
.auth-alert.error { background: #ffebe6; color: #de350b; border: 1px solid #ffbdad; }
.auth-alert.success { background: #e3fcef; color: #006644; border: 1px solid #abf5d1; }
.auth-alert ul { margin: 0; padding-left: 20px; }
.auth-error-text { color: #e74a3b; display: block; margin-top: 5px; font-size: 13px; }

/* MOBİL UYUMLULUK (Responsive) */
@media (max-width: 992px) {
    .modern-login-container {
        flex-direction: column;
        max-width: 600px;
        min-height: auto;
    }
    
    .modern-login-wrapper {
        padding: 30px 15px; 
        align-items: flex-start;
    }

    .login-info-side {
        width: 100%;
        padding: 30px;
        display: none; 
    }

    .login-form-side {
        width: 100%;
        padding: 30px 25px;
        box-sizing: border-box;
    }

    /* YENİ EKLENEN: Mobilde yan yana olan inputları alt alta al */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .auth-tab {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    .form-header-tabs {
        margin-bottom: 25px;
    }
}

/* Şifre Sıfırlama Sayfası Ek Stilleri */

.back-link {
    display: inline-flex;
    align-items: center;
    color: #858796;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.3s;
}

.back-link i {
    margin-right: 8px;
    font-size: 12px;
}

.back-link:hover {
    color: #4e73df;
}

/* Yeni Şifre Sayfası Ek Stiller */

/* Input İkonu Ayarları (Sol ve Sağ Ayrımı) */
.input-wrapper .input-icon-left {
    /* Eski CSS'deki genel i tanımının üzerine yazar */
    left: 18px;
    right: auto;
}

.input-wrapper .toggle-password {
    /* Sağ taraftaki göz ikonu */
    position: absolute;
    right: 15px;
    left: auto !important; /* Soldaki ikon stilini ezer */
    top: 50%;
    transform: translateY(-50%);
    color: #b0b8c4;
    cursor: pointer;
    z-index: 5;
    padding: 5px; /* Tıklama alanını genişletir */
    transition: color 0.3s;
}

.input-wrapper .toggle-password:hover {
    color: #4e73df;
}

/* Şifre Güç Göstergesi (Bars) */
.password-strength-meter {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    height: 4px;
}

.strength-bar {
    flex: 1;
    background-color: #eaecf4;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.strength-bar.weak { background-color: #e74a3b; }   /* Kırmızı */
.strength-bar.medium { background-color: #f6c23e; } /* Sarı/Turuncu */
.strength-bar.strong { background-color: #1cc88a; } /* Yeşil */

/* Text Yardımcıları */
#strength-text {
    font-weight: 500;
    transition: all 0.3s;
}



/* =========================================
   USER PANEL LAYOUT FIX (GRID SİSTEMİ)
   ========================================= */
.v4new-container .row {
    display: flex;
    flex-wrap: wrap;
    /*margin-right: -15px;*/
    /*margin-left: -15px;*/
}

.v4new-container .col-lg-3,
.v4new-container .col-md-4 {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 15px;
    padding-left: 15px;
}

/*.v4new-container .col-lg-9,*/
/*.v4new-container .col-md-8 {*/
/*    flex: 0 0 75%;*/
/*    max-width: 75%;*/
/*    padding-right: 15px;*/
/*    padding-left: 15px;*/
/*}*/

/* Mobil Uyğunluq */
@media (max-width: 991px) {
    .v4new-container .col-lg-3,
    .v4new-container .col-md-4,
    .v4new-container .col-lg-9,
    .v4new-container .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}





/* =========================================
   MODERN GAMING LIGHT THEME (Gündüz Modu)
   ========================================= */

:root {
    --primary-color: #f97316;
    --primary-hover: #f97316;
    --secondary-color: #FF754C; /* Vurğu rəngi (Orange) */
    --bg-body: #F8F9FA; /* Çox açıq boz fon */
    --bg-white: #ffffff;
    --text-dark: #11142D;
    --text-grey: #808191;
    --border-color: #E4E4E4;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 25px rgba(108, 93, 211, 0.1);
    --radius-lg: 20px;
    --radius-md: 12px;
    --transition: all 0.3s ease;
}

body {
    background-color: var(--bg-body);
    color: var(--text-dark);
    font-family: 'Inter', sans-serif; /* Varsa */
}


/* ==== Modern Breadcrumb – Light Mode ==== */

/* Breadcrumb konteyneri */
nav[aria-label="breadcrumb"]{
    display: flex;
    align-items: center;
    padding: 10px 18px;
    background: #ffffff;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, .9);
    box-shadow: 0 14px 28px rgba(15, 23, 42, .06);
    margin: 12px 0 20px;
}

/* UL reset + layout */
.breadcrumb{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Item */
.breadcrumb-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
    position: relative;
}

/* Link */
.breadcrumb-item a{
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    background: rgba(248, 250, 252, .9);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: .2s ease;
}

.breadcrumb-item a:hover{
    background: rgba(239, 246, 255, 1);
    color: #0f172a;
    box-shadow: 0 5px 14px rgba(59, 130, 246, .15);
}

/* Aktiv item */
.breadcrumb-item.active,
.breadcrumb-item[aria-current="page"]{
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(249, 115, 22, .25);
}

/* Separator (>) */
.breadcrumb-item + .breadcrumb-item::before{
    content: "›";
    color: #d1d5db;
    margin: 0 2px;
    font-size: 16px;
}

/* Home icon */
.breadcrumb .fa-home{
    color: #f97316;
    font-size: 15px;
}

/* İlk itemə xüsusi fon */
.breadcrumb-item:first-child a{
    background: rgba(255, 237, 213, .75);
}

/* Mobile */
@media(max-width: 480px){
    nav[aria-label="breadcrumb"]{
        padding: 8px 12px;
        border-radius: 16px;
    }
    .breadcrumb-item{
        font-size: 13px;
    }
}

/* -----------------------------------------
   2. CATCHIPS (Kateqoriya Paneli - Sol tərəf)
   ----------------------------------------- */
.catchips {
    margin-bottom: 30px;
}

/* Kateqoriya düymələri */
.catchips__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
}

.catchips__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Hover effekti - Before istifadə edərək */
.catchips__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--primary-color);
    transition: var(--transition);
    z-index: 0;
    opacity: 0.1;
}

.catchips__btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.catchips__btn:hover::before {
    width: 100%;
}

.catchips__btn.is-active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(108, 93, 211, 0.3);
}

.catchips__btn.is-active:hover {
    background: var(--primary-hover);
    color: #fff;
}

.catchips__btn i {
    z-index: 1;
    font-size: 16px;
}

.catchips__btn span {
    z-index: 1;
}

/* -----------------------------------------
   3. CAT-HERO (Əsas Banner Hissəsi)
   ----------------------------------------- */
.cat-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: var(--shadow-md);
    min-height: 280px; /* Bannerin hündürlüyü */
}

/* Arxa plan şəkli */
.cat-hero__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: transform 0.5s ease;
}

.cat-hero:hover .cat-hero__bg {
    transform: scale(1.03);
}

/* Overlay - Qaranlıqlaşdırma */
.cat-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 4px;
}

.cat-hero__row {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 800px;
}

/* Kiçik loqo (Thumb) */
.cat-hero__thumb {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    flex-shrink: 0;
}

.cat-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mətn hissəsi */
.cat-hero__content {
    color: #fff;
}

.cat-hero__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.cat-hero__desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Statistika (Ulduz, rəy sayı) */
.cat-hero__meta {
    display: flex;
    gap: 15px;
    font-size: 14px;
    font-weight: 500;
}

.cat-hero__meta .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
}

.cat-hero__meta .stat i {
    color: #FFC107; /* Ulduz rəngi */
}

.stat--cat {
    background: var(--primary-color) !important;
    border: none !important;
}

/* -----------------------------------------
   4. TABS (Header-row nav)
   ----------------------------------------- */
.header-row.nav {
    display: flex;
    background: var(--bg-white);
    padding: 10px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
    border: 1px solid var(--border-color);
    overflow-x: auto; /* Mobil üçün */
}

.header-column {
    flex: 1;
    text-align: center;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-grey);
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header-column:hover {
    background: #f0effb;
    color: var(--primary-color);
}

.header-column.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(108, 93, 211, 0.25);
}

.header-column i {
    font-size: 16px;
}
/* -----------------------------------------
   5. FILTERS (Filtr hissəsi - Accordion Style)
   ----------------------------------------- */

/* Əsas Qutu (Wrapper) */
.lt-filter-wrapper {
    background: var(--bg-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
    overflow: hidden; /* Künclərin hamar qalması üçün */
    transition: var(--transition);
}

/* Aç/Bağla Düyməsi (Başlıq) */
.lt-filter-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: var(--bg-white);
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    transition: background 0.3s ease, color 0.3s ease;
    outline: none;
}

.lt-filter-toggle:hover {
    background: #f9f9f9;
    color: var(--primary-color);
}

/* Aktiv (Açıq) olduqda başlıq */
.lt-filter-toggle.active {
    background: #f8f7fc; /* Çox açıq bənövşəyi ton */
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-color);
}

.lt-filter-toggle__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lt-filter-toggle i {
    font-size: 18px;
    color: var(--primary-color);
}

/* Ox işarəsi */
.lt-arrow {
    transition: transform 0.3s ease;
    color: var(--text-grey);
    font-size: 14px;
}

/* Aktiv olduqda ox fırlansın */
.lt-filter-toggle.active .lt-arrow {
    transform: rotate(180deg);
    color: var(--primary-color);
}

/* Gizli Məzmun (Body) */
.filters__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
    background: var(--bg-white);
}

/* JS ilə 'open' klassı əlavə olunanda görünür */
.filters__body.open {
    opacity: 1;
}

/* Daxili Padding (Hamar animasiya üçün padding body-də yox, burda olmalıdır) */
.filters__inner {
    padding: 25px;
}

/* Filtrlərin Üst Hissəsi (Başlıq və Bağla düyməsi - əgər lazımdırsa) */
.filters__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.filters__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-grey);
}

/* Desktopda standart bağlama düyməsini gizlət */
.filters__close {
    display: none; 
}

/* Grid Sistemi - Yan-yana düzülüş */
.filters__group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
}

.filters__item {
    margin-bottom: 5px;
}

.filters__label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- FORM ELEMENTLƏRİ --- */

/* Select Box */
.field__wrap {
    position: relative;
}

.select {
    width: 100%;
    padding: 10px 15px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background-color: #fff;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none; /* Standart oxu gizlət */
    transition: var(--transition);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236C5DD3%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
}

.select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(108, 93, 211, 0.1);
}

/* Checkbox Dizaynı */
.checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    transition: var(--transition);
    user-select: none;
}

.checkbox:hover .checkbox__text {
    color: var(--primary-color);
}

.checkbox__input {
    display: none;
}

.checkbox__inner {
    display: flex;
    align-items: center;
}

.checkbox__tick {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    background: #fff;
}

/* Input seçiləndə */
.checkbox__input:checked + .checkbox__inner .checkbox__tick {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox__input:checked + .checkbox__inner .checkbox__tick::after {
    content: '✔';
    color: #fff;
    font-size: 10px;
    display: block;
    line-height: 1;
}

.checkbox__text {
    font-size: 14px;
    color: var(--text-grey);
    font-weight: 500;
    transition: color 0.2s;
}

.checkbox__input:checked + .checkbox__inner .checkbox__text {
    color: var(--text-dark);
    font-weight: 600;
}

/* Düymələr (Sıfırla və Tətbiq et) */
.filters__btns {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.filters__button {
    padding: 10px 25px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
}

/* Sıfırla */
.button-stroke {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-grey);
}

.button-stroke:hover {
    border-color: var(--text-dark);
    color: var(--text-dark);
}

/* Tətbiq et */
.button {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(108, 93, 211, 0.25);
}

.button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

/* -----------------------------------------
   RESPONSIVE (Mobil Uyğunluq)
   ----------------------------------------- */
@media (max-width: 768px) {
    /* Wrapper */
    .lt-filter-wrapper {
        margin-bottom: 20px;
    }
    
    /* Başlıq */
    .lt-filter-toggle {
        padding: 15px 20px;
        font-size: 15px;
    }

    /* Daxili padding */
    .filters__inner {
        padding: 20px;
    }

    /* Filtrlər alt-alta düzülsün */
    .filters__group {
        grid-template-columns: 1fr; /* Tək sütun */
        gap: 25px;
    }

    /* Düymələr alt-alta və tam en */
    .filters__btns {
        flex-direction: column;
        gap: 10px;
    }

    .filters__button {
        width: 100%;
        text-align: center;
        padding: 12px;
    }

    /* Mobildə close icon (istəyə bağlı, yuxarıdakı HTML-də onclick əlavə etmişik) */
    .filters__close {
        display: block;
        background: none;
        border: none;
        font-size: 18px;
        color: var(--text-grey);
    }
}


@media only screen and (max-width: 991px) {
    .mobgizle {
        display: none !important;
    }
}

/* =========================================
   REVIEWS & TABS SECTION (Gündüz Modu)
   ========================================= */



/* Tab Pane (Məzmunlar) - Gizlət/Göstər */
.tab-pane {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-pane.active.show {
    display: block;
    opacity: 1;
    animation: fadeIn 0.4s ease;
}

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






/* ===========================
   REVIEWS (YORUMLAR) – LIGHT MODE
   =========================== */

/* Kapsayıcı */
.rv-wrap {
    margin-top: 32px;
    padding: 24px 22px;
    border-radius: 18px;
    background: #f973160f;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

/* Başlıq */
.rv-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.rv-head__l,
.rv-head__r {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.rv-head__l i {
    font-size: 18px;
    color: #f59e0b;
}

.rv-head__r i {
    font-size: 16px;
    color: #4b5563;
}

.rv-head h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Alertlər */
.rv-alert {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.rv-alert--info {
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    color: #0c4a6e;
}

.rv-alert--warn {
    background: #fef3c7;
    border: 1px solid #facc15;
    color: #92400e;
}

.rv-alert--danger {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.rv-alert--success {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.rv-alert i {
    margin-top: 2px;
}

/* Empty state */
.rv-empty {
    text-align: center;
    padding: 24px 16px;
    border-radius: 14px;
    background: #e5e7eb;
    margin-bottom: 18px;
}

.rv-empty__icon {
    font-size: 32px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.rv-empty__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #111827;
}

.rv-empty__desc {
    font-size: 13px;
    color: #4b5563;
    margin: 0;
}

/* FORM BLOKU */
.rv-form {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    margin-bottom: 18px;
}

.rv-form__thumb img {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.rv-form__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Form sahələri */
.rv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rv-field label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.rv-select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    background: #ffffff;
    font-size: 13px;
    color: #111827;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rv-select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

.rv-textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    font-size: 13px;
    resize: vertical;
    outline: none;
    background: #ffffff;
    color: #111827;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rv-textarea::placeholder {
    color: #9ca3af;
}

.rv-textarea:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35);
}

/* Form footer + rating + submit */
.rv-form__footer {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Yazılan rating input-ları gizlədək */
.rating2 input[type="radio"] {
    display: none;
}

/* Ulduzlar */
.rv-stars {
    display: inline-flex;
    flex-direction: row-reverse; /* sağdan sola dolsun */
    gap: 4px;
}

.rv-stars label {
    cursor: pointer;
    font-size: 20px;
    transition: transform 0.12s ease;
}

.rv-stars label i {
    color: #e5e7eb;
    transition: color 0.15s ease;
}

/* Hover effekti */
.rv-stars label:hover i,
.rv-stars label:hover ~ label i {
    color: #fbbf24;
}

/* Seçilmiş rating */
.rating2 input[type="radio"]:checked ~ label i {
    color: #f59e0b;
}

/* Hover biraz böyüsün */
.rv-stars label:hover {
    transform: translateY(-1px) scale(1.05);
}

/* Button */
.rv-btn {
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    padding: 9px 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

.rv-btn--send {
    background: linear-gradient(135deg, #f97316, #FF754C);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.35);
}

.rv-btn--send i {
    font-size: 14px;
}

.rv-btn--send:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.45);
}

.rv-btn--send:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.3);
}

/* COMMENT LİSTİNG */
.rv-listing {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Kart */
.rv-card {
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Kart üst hissə */
.rv-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rv-card__thumb {
    flex-shrink: 0;
}

.rv-card__thumb img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.rv-card__titles h5 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
}

.rv-card__titles h5 a {
    color: #111827;
    text-decoration: none;
}

.rv-card__titles h5 a:hover {
    text-decoration: underline;
}

.rv-card__titles h6 {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
}

.rv-card__titles h6 a {
    color: #6b7280;
    text-decoration: none;
}

/* Rating sağ tərəf */
.rv-card__rating {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
    color: #111827;
}

.rv-card__rating strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.rv-stars-read {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 2px;
}

.rv-stars-read i.fas {
    color: #fbbf24;
}

.rv-stars-read i.far {
    color: #e5e7eb;
}

/* Mesaj / content */
.rv-card__content {
    font-size: 13px;
    line-height: 1.55;
    color: #111827;
}

/* Meta (ad, tarix) */
.rv-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #6b7280;
    border-top: 1px dashed #e5e7eb;
    padding-top: 8px;
}

.rv-card__meta span i {
    margin-right: 4px;
}

/* Pagination wrapper */
.pagination-wrapper {
    margin-top: 18px;
}

/* ===========================
   MOBİL RESPONSIVE
   =========================== */

@media (max-width: 768px) {
    .rv-wrap {
        padding: 18px 14px;
        margin-top: 24px;
    }

    .rv-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .rv-form {
        flex-direction: column;
    }

    .rv-form__thumb img {
        width: 56px;
        height: 56px;
    }

    .rv-form__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .rv-stars {
        justify-content: flex-start;
    }

    .rv-btn--send {
        width: 100%;
        justify-content: center;
    }

    .rv-card__top {
        align-items: flex-start;
    }

    .rv-card__rating {
        margin-left: 0;
        text-align: left;
    }

    .rv-card__rating strong {
        font-size: 15px;
    }

    .rv-card__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .rv-head h5 {
        font-size: 16px;
    }

    .rv-card__titles h5 {
        font-size: 13px;
    }

    .rv-card__content {
        font-size: 12.5px;
    }
}





/* =========================================
   VIEW 1: NEO CARD (Modern Product Card)
   ========================================= */

.neo-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.neo-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

/* Şəkil Hissəsi */
.neo-card__media {
    position: relative;
    padding-top: 60%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: #f4f5f7;
}

.neo-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    transition: transform 0.5s ease;
}

.neo-card:hover .neo-card__img {
    transform: scale(1.05);
}

/* Stok Badge */
.neo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    z-index: 2;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 5px;
}

.neo-badge--ok {
    background: rgba(40, 167, 69, 0.85); /* Yaşıl */
}

.neo-badge--no {
    background: rgba(220, 53, 69, 0.85); /* Qırmızı */
}

/* Səbətdə Badge */
.neo-inbasket {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(108, 93, 211, 0.9); /* Primary Color */
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(108, 93, 211, 0.3);
}

/* Puan Badge */
.neo-points {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 5px;
}

.neo-points i {
    color: #FFC107;
}

/* Məzmun Hissəsi */
.neo-card__content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: var(--bg-white);
    position: relative;
    z-index: 3;
}

.neo-card__title {
font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-decoration: none !important;
    line-height: 1.4;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}

.neo-card__title:hover {
    color: var(--primary-color);
}

/* Qiymət */
.neo-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 15px;
}

.neo-price__old {
    font-size: 13px;
    color: var(--text-grey);
    text-decoration: line-through;
}

.neo-price__now {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
}

/* Nəzarət Elementləri (Input & Button) */
.neo-controls {
    margin-top: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Input Qrupu (Mövcud klasslar üzərində yeni dizayn) */
.gamex-table-item.gamex-quantity {
    flex: 1;
}

.gamex-quantity-calc {
    display: flex;
    align-items: center;
    background: #f4f5f7;
    border-radius: 10px;
    padding: 4px;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.gamex-quantity-calc:hover {
    border-color: var(--border-color);
}



.gamex-input-quantity {
    width: 35px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    color: var(--text-dark);
    font-size: 14px;
    padding: 0;
}

.gamex-input-quantity:focus {
    outline: none;
}

/* Səbətə At Düyməsi */
.neo-cart-btn {
    padding: 0 15px;
    height: 38px;
    border-radius: 10px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(108, 93, 211, 0.2);
    flex: 1.5;
}

.neo-cart-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(108, 93, 211, 0.3);
}

.neo-cart-btn.is-disabled {
    background: #e4e4e4;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.neo-cart-btn i {
    font-size: 14px;
}

/* Mobil Uyğunluq (Responsive) */
@media (max-width: 576px) {
    .neo-card__content {
        padding: 15px;
    }

    .neo-controls {
        flex-direction: column; /* Mobildə elementlər alt-alta */
        gap: 10px;
    }

    .gamex-table-item.gamex-quantity, 
    .neo-cart-btn {
        width: 100%; /* Tam en */
        flex: auto;
    }
    
    .gamex-quantity-calc {
        justify-content: space-between;
        padding: 6px;
    }

    .neo-cart-btn {
        height: 42px;
        font-size: 14px;
    }
}


    /* ============================================================
       1. MƏNASIZ BOŞLUQLARIN LƏĞVİ (Whitespace Fix)
       ============================================================ */
    .shop, 
    .shop__control, 
    .products__tab, 
    .tab-content, 
    .tab-pane {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Mövcud paddingləri sıfırla ki, grid yuxarı yapışsın */
    .shop__products {
        padding-top: 10px !important; 
    }

    /* ============================================================
       2. GRID SİSTEMİ (5 Kart Desktop / 2 Kart Mobil)
       ============================================================ */
    
    /* Bootstrap 'row' klassını Grid-ə çeviririk */
    .shop__products .row.newItem {
        display: grid !important;
        /* Desktopda 5 bərabər sütun */
        grid-template-columns: repeat(5, 1fr) !important; 
        gap: 15px !important; /* Kartlar arası məsafə */
        margin: 0 !important; /* Bootstrap marginini sil */
        width: 100% !important;
    }

    /* Bootstrap 'col-md-3' və digər sütunların enini ləğv edirik */
    .shop__products .row.newItem > div {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important; /* Kartın öz paddingi bəs edir */
        margin: 0 !important;
    }

    /* ============================================================
       3. RESPONSIVE (Mobil və Tablet Tənzimləmələri)
       ============================================================ */

    /* Böyük Ekranlar (Laptop) - 1200px - 1400px arası */
    @media (max-width: 1440px) {
        .shop__products .row.newItem {
            grid-template-columns: repeat(4, 1fr) !important; /* Yerləşməsə 4-ə sal */
        }
    }

    /* Planşetlər (Tablet) */
    @media (max-width: 991px) {
        .shop__products .row.newItem {
            grid-template-columns: repeat(3, 1fr) !important; /* 3 kart */
        }
    }

    /* Mobil Telefonlar (Əsas Tələb: 2 Kart) */
    @media (max-width: 767px) {
        .shop__products .row.newItem {
            grid-template-columns: repeat(2, 1fr) !important; /* Yan-yana 2 kart */
            gap: 10px !important; /* Mobildə boşluq biraz az olsun */
        }

        /* Mobildə kartın içindəki elementləri kiçilt ki, sığsın */
        .neo-card__content {
            padding: 10px !important;
        }
        
        .neo-card__title {
            font-size: 13px !important;
            height: 36px !important;
            margin-bottom: 5px !important;
        }

        .neo-price__now {
            font-size: 14px !important;
        }

        /* Butonlar mobildə səliqəli görünsün */
        .neo-controls {
            flex-direction: column;
            gap: 5px;
        }
        
        .neo-cart-btn {
            width: 100% !important;
            padding: 5px !important;
            font-size: 12px !important;
        }
        
        .gamex-quantity-calc {
            width: 100% !important;
        }
    }

    /* Çox kiçik telefonlar (iPhone SE və s.) */
    @media (max-width: 340px) {
        .shop__products .row.newItem {
            grid-template-columns: 1fr !important; /* Çox kiçikdirsə 1 kart */
        }
    }

    /* ============================================================
       4. KART DİZAYN DÜZƏLİŞLƏRİ (Neo Card Fixes)
       ============================================================ */
    .neo-card {
        height: 100%; /* Hündürlüyü bərabərləşdir */
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e4e4e4;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .neo-card__media {
        width: 100%;
        aspect-ratio: 1 / 1; /* Şəkli kvadrat et */
        position: relative;
        padding-top: 0 !important; /* Köhnə paddingi ləğv et */
    }

    .neo-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative !important; /* Absolute yerinə relative */
    }


/* ==============================
   QUICK BUY MODAL – LIGHT MODE
   ============================== */

.qb-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* JS ilə aria-hidden="false" edəndə açıq görünsün */
.qb-modal[aria-hidden="false"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Swup ilə konflikt olmasın deyə backdrop və panel fixed container içindədir */
.qb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(3px);
}

/* Panel (kart) */
.qb-panel {
    position: relative;
    max-width: 820px;
    width: 100%;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Başlıq */
.qb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #eef2ff, #f9fafb);
}

.qb-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.qb-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 4px 8px;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.qb-close:hover {
    background: rgba(148, 163, 184, 0.16);
    color: #111827;
    transform: translateY(-1px);
}

/* Body layout */
.qb-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: 16px;
    padding: 16px 18px 18px;
}

/* Kartlar */
.qb-card {
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 14px 14px 12px;
}

/* Sol tərəf – məhsul və total */
.qb-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Məhsul info */
.qb-prod {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.qb-prod img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    background: #e5e7eb;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
}

.qb-prod-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.qb-meta {
    font-size: 13px;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qb-meta svg {
    vertical-align: text-bottom;
}

/* Ayrıcı xətt */
.qb-separator {
    border: none;
    border-top: 1px dashed #e5e7eb;
    margin: 10px 0;
}

/* Total */
.qb-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.qb-total span:last-child {
    font-size: 16px;
    font-weight: 700;
    color: #16a34a;
}

/* Sağ tərəf – form */
.qb-form {
    background: #ffffff;
}

.qb-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

/* Label */
.qb-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-top: 8px;
    margin-bottom: 4px;
}

/* Input + ikon */
.qb-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 7px 10px;
}

.qb-input-wrap svg {
    width: 18px;
    height: 18px;
    color: #9ca3af;
    flex-shrink: 0;
}

.qb-input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: #111827;
}

.qb-input::placeholder {
    color: #9ca3af;
}

/* Qty */
.qb-qty {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.qb-step {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    background: #eff6ff;
    color: #1d4ed8;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.qb-step:hover {
    background: #dbeafe;
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
}

.qb-step:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(37, 99, 235, 0.18);
}

#qbQtyInput {
    max-width: 70px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 6px 10px;
}

.qb-max {
    font-size: 12px;
    color: #9ca3af;
}

/* Balance seçimi */
.qb-balance {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0 10px;
    padding: 10px 11px;
    border-radius: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.qb-balance-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    flex-shrink: 0;
}

.qb-balance-title {
    font-size: 13px;
    font-weight: 700;
    color: #166534;
}

#qbBalanceText {
    font-size: 12px;
    color: #14532d;
}

/* Ödəmə / login düyməsi */
.qb-badge {
    margin-top: 4px;
    width: 100%;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #8b5cf6);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.45);
    transition: box-shadow 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}

.qb-badge:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(79, 70, 229, 0.55);
}

.qb-badge:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.35);
}

/* Error mesajı */
.qb-err {
    margin-top: 8px;
    font-size: 12px;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 10px;
    padding: 6px 8px;
}

/* Free Fire checker chip-ləri bir az modernləşdirək (istinad: mövcud class-lar) */
.ff-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.ff-chip__icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-chip__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ff-chip__label {
    font-weight: 600;
    font-size: 11px;
}

.ff-chip__name {
    font-size: 11px;
}

.ff-chip__tag {
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
}

/* müsbət */
.ff-chip.is-ok {
    background: #ecfdf5;
    color: #166534;
}

.ff-chip.is-ok .ff-chip__icon {
    background: #bbf7d0;
    color: #166534;
}

/* xəta */
.ff-chip.is-err {
    background: #fef2f2;
    color: #b91c1c;
}

.ff-chip.is-err .ff-chip__icon {
    background: #fecaca;
    color: #b91c1c;
}

/* ==============================
   MOBİL RESPONSIVE
   ============================== */
@media (max-width: 768px) {
    .qb-modal {
        padding: 12px;
        align-items: center;   
    }

    .qb-panel {
        width: 100%;
        max-width: 420px;     
        border-radius: 20px;  
    }

    .qb-body {
        grid-template-columns: 1fr;
        padding: 12px 14px 16px;
    }

    .qb-summary {
        order: 1;
    }

    .qb-form {
        order: 2;
    }

    .qb-prod img {
        width: 56px;
        height: 56px;
    }
}


@media (max-width: 480px) {
    .qb-head {
        padding: 12px 14px;
    }

    .qb-title {
        font-size: 15px;
    }

    .qb-body {
        padding: 10px 12px 14px;
    }

    .qb-card {
        padding: 12px 10px;
    }

    .qb-prod-title {
        font-size: 14px;
    }

    .qb-meta {
        font-size: 12px;
    }

    .qb-total span:last-child {
        font-size: 15px;
    }

    .qb-badge {
        font-size: 12.5px;
    }
}


/* OVERLAY – defaultda gizli */
.video-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, 0.7);
    display: none;                 /* gizli */
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Açmaq üçün JS ilə .is-active class-ı əlavə edəcəksən */
.video-lightbox-overlay.is-active {
    display: flex;
}

/* İç kontent */
.video-lightbox-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* Close düyməsi */
.close-lightbox-button {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
    border: none;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}

.close-lightbox-button:hover {
    background: rgba(15, 23, 42, 0.9);
    transform: translateY(-1px);
}

/* Video nisbəti (16:9) */
.video-iframe-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

.video-iframe-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =======================
   VIDEO TƏQDİMAT BLOKU
   ======================= */

.video-presentation-container{
    margin-top: 32px;
    margin-bottom: 28px;
    padding: 18px 20px 22px;
    border-radius: 28px;
    background: linear-gradient(135deg, #eef2ff, #fdf2ff);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

/* Başlıq */
.video-title{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
}

.video-title i{
    font-size: 18px;
}

/* Video kartı (thumbnail) */
.video-placeholder{
    position: relative;
    width: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.35);
}

/* Hündürlüyü xeyli azaldırıq – panoramik görünüş (təxmini 3.1:1) */
.video-placeholder::before{
    content: "";
    display: block;
    padding-top: 32%;   /* 56.25% (16:9) idi, çox hündür idi */
}

/* Thumbnail-in özü */
.video-thumbnail{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play overlay */
.play-button-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center,
                rgba(255,255,255,0.06),
                rgba(0,0,0,0.55));
    transition: background 0.18s ease, transform 0.18s ease;
}

.play-button-overlay i{
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: linear-gradient(135deg,#f97316,#ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 14px 30px rgba(236,72,153,0.55);
}

/* Hover effekti (PC) */
.video-placeholder:hover .play-button-overlay{
    background: radial-gradient(circle at center,
                rgba(255,255,255,0.02),
                rgba(0,0,0,0.8));
    transform: translateY(-1px);
}

/* Mobil uyğunlaşma */
@media (max-width: 768px){
    .video-presentation-container{
        margin-top: 22px;
        margin-bottom: 22px;
        padding: 14px 12px 16px;
        border-radius: 22px;
    }

    .video-placeholder{
        border-radius: 18px;
        box-shadow: 0 12px 26px rgba(15,23,42,0.25);
    }

    .play-button-overlay i{
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}
/* ==============================
   MARKET CARD (product_card_view == 3)
   ============================== */

.productyataylist{
    position: relative;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15,23,42,0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Sol blok – şəkil */
.productyataylist .product-detail{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.productyataylist .pimg-base{
    width: 82px;
    height: 82px;
    border-radius: 20px;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 10px 20px rgba(15,23,42,0.18);
}

.productyataylist .product-image{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Orta blok – mətn məlumatı */
.productyataylist .product-info{
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.productyataylist .product-name-detailed a{
    text-decoration: none;
}

.productyataylist .product-name{
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

/* Region / platforma və s. */
.productyataylist .text-overlay{
    font-size: 12px;
    line-height: 1.5;
    color: #4b5563;
}

/* Alt blok – qiymət və düymələr */
.productyataylist .bottom-block{
    flex: 1 1 100%;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    border-top: 1px dashed #e5e7eb;
    margin-top: 4px;
}

.productyataylist .market-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    justify-content: space-between;
}

.productyataylist .market-action{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* Qiymət mətni */
.productyataylist .buy-price-span{
    color: #0f172a;
    font-weight: 600;
}

.productyataylist .sell-price-span{
    color: #16a34a;
    font-weight: 700;
}

/* Düymələr – mövcud bootstrap .btn-ləri yüngül redizayn */
.productyataylist .add-purchase-button,
.productyataylist .add-basket-button{
    border-radius: 999px;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}

/* Bize sat düyməsi (secondary) */
.productyataylist .add-purchase-button{
    background: #e5e7eb;
    color: #111827;
}

.productyataylist .add-purchase-button:hover{
    filter: brightness(1.02);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(148,163,184,.45);
}

/* Satın al düyməsi (success/neon) */
.productyataylist .add-basket-button{
    background: linear-gradient(135deg,#22c55e,#16a34a);
    color: #fff;
    box-shadow: 0 10px 24px rgba(34,197,94,.55);
}

.productyataylist .add-basket-button:hover{
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(34,197,94,.65);
}

/* Stok yoxdur düyməsini də yuvarlaq saxlayaq */
.productyataylist .btn-danger{
    border-radius: 999px;
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* ==============================
   MOBİL RESPONSIVE
   ============================== */

@media (max-width: 768px){
    .productyataylist{
        padding: 12px 12px 14px;
        border-radius: 18px;
        gap: 10px;
    }

    .productyataylist .pimg-base{
        width: 70px;
        height: 70px;
        border-radius: 16px;
    }

    .productyataylist .product-name{
        font-size: 14px;
    }

    .productyataylist .text-overlay{
        font-size: 11.5px;
    }

    .productyataylist .bottom-block{
        margin-top: 6px;
        padding-top: 8px !important;
    }

    .productyataylist .market-actions{
        flex-direction: column;
        align-items: flex-start;
    }

    .productyataylist .market-action{
        width: 100%;
        justify-content: space-between;
    }

    .productyataylist .add-purchase-button,
    .productyataylist .add-basket-button{
        padding-inline: 12px !important;
    }
}

/* Daha geniş ekranlarda kartı bir az “yastı” edək */
@media (min-width: 1200px){
    .productyataylist{
        padding-inline: 22px;
    }
}

/* ==============================
   BİZƏ SAT PANELİ (VIEW 3 içindəki modal)
   ============================== */

.productyataylist .modal{
    /* Bootstrap modal kimi overlay olmasın, kartın içində adi blok olsun */
    position: static;
    display: block;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
}

.productyataylist .modal-dialog{
    max-width: 100%;
    margin: 14px 0 0;
}

.productyataylist .modal-content{
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    box-shadow: 0 12px 26px rgba(15,23,42,0.08);
}

.productyataylist .modal-header{
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.productyataylist .modal-title{
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.productyataylist .modal-header .close{
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    opacity: .6;
}

.productyataylist .modal-header .close:hover{
    opacity: 1;
}

.productyataylist .modal-body{
    padding: 14px 14px 16px;
    font-size: 13px;
}

/* Info alert */
.productyataylist .modal-body .alert-info{
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
}

/* Form sahələri */
.productyataylist .modal-body label{
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}

.productyataylist .modal-body .form-control{
    border-radius: 10px;
    font-size: 13px;
    padding: 6px 10px;
}

/* Sifarişi tamamla düyməsi */
.productyataylist .modal-body .btn-primary{
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(59,130,246,.35);
}

/* Qiymət blokları */
.productyataylist .modal-body .unit-price,
.productyataylist .modal-body .total-price{
    font-size: 14px;
    font-weight: 700;
}

/* Separator xətti – yüngül */
.productyataylist .modal-body hr{
    margin-top: 16px;
    margin-bottom: 10px;
    border-color: #e5e7eb;
}

/* ==============================
   MOBİL UYĞUNLAŞMA – BİZƏ SAT PANELİ
   ============================== */

@media (max-width: 768px){
    .productyataylist .modal-dialog{
        margin-top: 10px;
    }

    .productyataylist .modal-content{
        border-radius: 16px;
    }

    .productyataylist .modal-body{
        padding: 12px 12px 14px;
    }

    .productyataylist .modal-body .row > [class*="col-"]{
        margin-bottom: 6px;
    }
}
/* =====================================
   VIEW 2 – LIST PRODUCT CARD (pl-*)
   Gündüz modu / mobil responsive
   ===================================== */

.pl-list{
    width: 100%;
    margin-bottom: 14px;
}

/* Kartın özü */
.pl-row{
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07);
    border: 1px solid rgba(148,163,184,0.16);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* sol tərəfdə yüngül gradient effekt */
.pl-row::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left,
        rgba(249,115,22,0.06),
        transparent 55%);
    pointer-events: none;
}

.pl-row:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15,23,42,0.12);
    border-color: rgba(59,130,246,0.35);
}

/* Şəkil bloku */
.pl-thumb{
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg,#e5e7eb,#cbd5f5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sağ tərəf – əsas məlumatlar */
.pl-main{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Başlıq sıra */
.pl-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pl-title{
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* Stok badge-ləri */
.pl-badge{
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.pl-badge i{
    font-size: 12px;
}

.pl-badge.is-success{
    background: rgba(34,197,94,0.09);
    color: #047857;
}

.pl-badge.is-danger{
    background: rgba(248,113,113,0.12);
    color: #b91c1c;
}

/* Sub text */
.pl-sub{
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

/* Puan + qiymət xətti */
.pl-meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

/* Puan chip */
.gamex-point-content{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(251,191,36,0.16);
    color: #92400e;
    font-size: 11px;
    font-weight: 600;
}

.gamex-point-content i{
    font-size: 12px;
}

/* Qiymət */
.pl-price{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.products-price-old{
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
}

.products-price-current{
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

/* Aşağı hissə – qty + düymələr */
.pl-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

/* Qty controller */
.pl-qty{
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #f3f4f6;
    padding: 4px;
    gap: 4px;
}


.pl-qty-input{
    width: 54px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* Sağdakı düymələr */
.pl-buttons{
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bütün pl düymələrinin bazası */
.pl-btn{
    position: relative;
    border-radius: 999px;
    border: none;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}

.pl-btn i{
    font-size: 14px;
}

/* Sepete ekle */
.pl-btn--cart{
    background: #f3f4ff;
    color: #f97316;
    box-shadow: 0 4px 14px rgba(79,70,229,0.25);
}

.pl-btn--cart:hover{
    background: #eef2ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(79,70,229,0.35);
}

/* İndi al (bolt) */
.pl-btn--buy{
    background: linear-gradient(135deg,#f97316,#ec4899);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(236,72,153,0.4);
}

.pl-btn--buy:hover{
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(236,72,153,0.55);
}

/* Disabled */
.pl-btn--disabled{
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

/* ===========================
   MOBİL RESPONSIVE (max 768)
   =========================== */
@media (max-width: 768px){
    .pl-row{
        flex-direction: column;
        padding: 14px 12px;
        gap: 10px;
    }

    .pl-thumb{
        width: 82px;
        height: 82px;
    }

    .pl-head{
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .pl-meta{
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
    }

    .pl-actions{
        flex-direction: column;
        align-items: stretch;
    }

    .pl-qty{
        align-self: flex-start;
    }

    .pl-buttons{
        width: 100%;
        flex-direction: column;
    }

    .pl-buttons .pl-btn{
        width: 100%;
        justify-content: center;
    }
}



/* ============ CART MODAL OVERLAY ============ */
.cm-modal.modal {
    position: fixed !important;      /* səhifəyə yox, ekrana bağla   */
    inset: 0;                        /* top/right/bottom/left: 0     */
    display: none;                   /* .show olanda flex edəcəyik   */
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55); /* arxanı bir az qaraldır      */
    z-index: 1060;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Modal açıq olanda */
.cm-modal.show {
    display: flex !important;
}

/* Bootstrap backdrop çox tünd olmasın / üst-üstə düşməsin */
.modal-backdrop.show {
    opacity: 0 !important;
}

/* ============ DİALOQ QUTUSU ============ */
.cm-modal .modal-dialog {
    margin: 0;
    max-width: 980px;
    width: 100%;
    pointer-events: auto;
}

.cm-modal .modal-content.cm {
    border-radius: 18px;
    border: none;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    padding: 20px 24px 24px;
}

/* ============ HEAD ============ */
.cm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf1f7;
}

.cm-head__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.cm-head__title svg {
    color: #f97316; /* narıncı ulduz */
}

.cm-close {
    border: none;
    background: #f3f4f6;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.cm-close:hover {
    background: #e5e7eb;
    color: #111827;
    transform: scale(1.03);
}

/* ============ BODY TOP ============ */
.cm-body {
    padding-top: 16px;
}

.cm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.cm-product {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cm-thumb {
    width: 74px;
    height: 74px;
    border-radius: 12px;
    object-fit: cover;
    background: #f3f4f6;
    flex-shrink: 0;
}

.cm-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cm-cat {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cm-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

/* ============ ACTION BUTTONS ============ */
.cm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.cm-btn {
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
        transform 0.08s ease;
    white-space: nowrap;
}

.cm-btn--primary {
    background: #ff7a1a;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.35);
}

.cm-btn--primary:hover {
    background: #fb6410;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.45);
    transform: translateY(-1px);
}

.cm-btn--ghost {
    background: #f3f4f6;
    color: #111827;
}

.cm-btn--ghost:hover {
    background: #e5e7eb;
}

/* Separator */
.cm-sep {
    height: 1px;
    background: #edf1f7;
    margin: 8px 0 14px;
}

/* ============ "MARAQLANA BİLƏRSİNİZ" BLOKU ============ */
.cm-suggest__head {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

/* kart grid */
.cm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* kart */
.cm-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #f9fafb;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(148, 163, 184, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cm-card__media {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.cm-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cm-card__body {
    padding: 10px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cm-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
}

.cm-card__price {
    font-size: 13px;
    font-weight: 700;
    color: #16a34a;
}

/* hover effekti */
.cm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(148, 163, 184, 0.3);
    background: #ffffff;
}

/* ============ MOBİL RESPONSİVE ============ */
@media (max-width: 991.98px) {
    .cm-modal .modal-dialog {
        padding: 12px;
    }

    .cm-modal .modal-content.cm {
        padding: 16px 14px 18px;
        border-radius: 14px;
    }

    .cm-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .cm-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .cm-actions .cm-btn {
        flex: 1 1 auto;
        text-align: center;
    }

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

@media (max-width: 575.98px) {
    .cm-head {
        padding-bottom: 10px;
    }

    .cm-head__title span {
        font-size: 14px;
    }

    .cm-thumb {
        width: 62px;
        height: 62px;
    }

    .cm-card__body {
        padding: 8px 9px 9px;
    }

    .cm-card__title {
        font-size: 12px;
    }

    .cm-card__price {
        font-size: 12px;
    }
}



.lt-game-layout {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    margin-top: 20px;
    position: relative;
}

/* --- Sol Tərəf (Kartlar) --- */
.lt-game-left {
    flex: 1;
}

.lt-game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Sütun */
    gap: 15px;
}

/* Light Mode Kart */
.lt-game-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff; /* Ağ Fon */
    border: 1px solid #e4e4e4; /* Açıq Çərçivə */
    border-radius: 12px;
    padding: 12px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    color: #333; /* Tünd yazı */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.lt-game-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(108, 93, 211, 0.1);
    transform: translateY(-2px);
}

.lt-game-card.active {
    border-color: #00c776; /* Yaşıl Aktiv */
    background: #f0fdf4; /* Çox açıq yaşıl fon */
    box-shadow: 0 0 0 1px #00c776;
}

.lt-game-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f9f9f9;
}

.lt-gc-media {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    margin-right: 15px;
    background: #f4f5f7;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #eee;
}

.lt-gc-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.lt-gc-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lt-gc-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

.lt-gc-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color); /* Bənövşəyi */
}

.lt-gc-price .old {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
    margin-right: 6px;
    font-weight: 500;
}

.lt-gc-arrow {
    color: #ccc;
    font-size: 14px;
    transition: 0.2s;
}

.lt-game-card.active .lt-gc-arrow {
    color: #00c776;
    transform: translateX(3px);
}


/* --- Sağ Tərəf (Sticky Panel - Light) --- */
.lt-game-right {
    width: 340px;
    flex-shrink: 0;
}

.lt-order-panel {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e4e4e4;
    position: sticky;
    top: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.lt-op-head {
    background: #f8f9fa;
    padding: 15px 25px;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #e4e4e4;
}

.lt-op-body {
    padding: 25px;
}

/* Seçilmiş Məhsul */
.lt-op-product {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
}
.lt-op-product img {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}
.lt-op-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

/* Miqdar */
.lt-op-row.align-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lt-op-label {
    font-size: 12px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
}

.lt-op-qty {
    display: flex;
    background: #f1f3f5;
    border-radius: 8px;
    padding: 3px;
    border: 1px solid #e4e4e4;
}

.op-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #fff;
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.op-qty-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

#opQtyInput {
    width: 45px;
    background: transparent;
    border: none;
    text-align: center;
    color: #333;
    font-weight: 700;
    font-size: 15px;
}

.lt-op-divider {
    height: 1px;
    background: #eee;
    margin: 20px 0;
}

/* Toplam */
.lt-op-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lt-op-total span {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.lt-op-total .price {
    font-size: 22px;
    font-weight: 800;
    color: #00c776;
}

/* Actions */
.lt-op-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.lt-op-btn {
    flex: 1;
    padding: 14px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.lt-op-btn.cart {
    background: #28a745;
}
.lt-op-btn.cart:hover { background: #218838; transform: translateY(-2px); }

.lt-op-btn.buy {
    background: var(--primary-color);
}
.lt-op-btn.buy:hover { background: var(--primary-hover); transform: translateY(-2px); }
@media (max-width: 991px) {
    .lt-gc-title {
        font-size: 12px;
        font-weight: 700;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2 Sətir */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}



/* --- RESPONSIVE (Mobil) --- */
@media (max-width: 991px) {
    .lt-game-layout {
        flex-direction: column;
        padding-bottom: 140px; /* Panel üçün yer ayır */
    }
    
    .lt-game-left {
        width: 100%;
    }
    
     .lt-game-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 sütun */
        gap: 10px;
    }
    
    /* Mobildə Panel aşağıya yapışır */
    .lt-game-right {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .lt-order-panel {
        border-radius: 20px 20px 0 0;
        border: none;
        border-top: 1px solid #eee;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    }
    
    .lt-op-head { display: none; }
    .lt-op-divider { display: none; }
    
    .lt-op-body {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 15px;
        padding: 15px 20px;
        align-items: center;
    }
    



    .lt-op-mobile-title {
        display: block;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 5px;
        color: #333;
    }


    .lt-op-row { margin: 0; }
    .lt-op-label { display: none; }
    
    /* Mobildə düzülüş */
    .lt-op-body > .lt-op-row {
        grid-column: 1 / 2;
        justify-self: start;
    }
    
    .lt-op-total {
        grid-column: 2 / 3;
        flex-direction: column;
        align-items: flex-end;
        margin: 0;
    }
    #opTotalPrice { font-size: 18px; }
    
    .lt-op-actions {
        grid-column: 1 / 3;
        width: 100%;
        margin-top: 0;
    }
    .lt-op-btn { padding: 12px; font-size: 12px; }
}
/* BADGE BASE */
.lt-badge {
   position: absolute;
    top: 3px;
    right: 20px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 30px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items:center;
    gap:5px;
    z-index: 25;
    animation: fadeIn 0.4s ease;
}

/* STATUS COLORS */
.lt-badge-ok {
    background: #1cc88a;
}

.lt-badge-out {
    background: #e74a3b;
}

/* NEON STYLE */
.neon-badge {
    box-shadow: 0 0 8px rgba(0,255,180,0.6), 0 0 14px rgba(0,255,180,0.4);
    transition: 0.25s ease;
}

.lt-badge-out.neon-badge {
    box-shadow: 0 0 8px rgba(255,0,0,0.6), 0 0 14px rgba(255,0,0,0.4);
}

/* HOVER EFFECT */
.lt-badge:hover {
    transform: scale(1.06);
    box-shadow: 0 0 14px rgba(0,255,180,0.75), 0 0 20px rgba(0,255,180,0.55);
}

.lt-badge-out:hover {
    box-shadow: 0 0 14px rgba(255,0,0,0.75), 0 0 20px rgba(255,0,0,0.55);
}

/* ANIMATION */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
/* ================================
   TAB-PANE CONTENT — LIGHT MODE
   ================================ */

/* Panel ümumi görünüşü */
#menu1{
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 15px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
#menu2{
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 15px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

/* İç text */
.tab-pane p,
.tab-pane li,
.tab-pane h3 {
    color: #2d2d2d;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Başlıqlar */
.tab-pane h3 {
    font-size: 18px;
    font-weight: 700;
    color: #ff7a00;
    margin-bottom: 12px;
}

/* Siyahılar */
.tab-pane ul {
    margin: 10px 0 10px 22px;
}

.tab-pane li::marker {
    color: #ff7a00;
    font-size: 18px;
}

/* Linklər */
.tab-pane a {
    color: #ff7a00;
    text-decoration: underline;
    font-weight: 600;
}

.tab-pane a:hover {
    color: #e46b00;
}

/* Fade effektini güzəlləşdirək */
.tab-pane.fade {
    opacity: 0;
    transition: opacity .25s ease;
}

.tab-pane.fade.show {
    opacity: 1;
}

/* Mobil optimizasiya */
@media (max-width: 768px) {
    .tab-pane {
        padding: 16px;
        border-radius: 12px;
    }

    .tab-pane p,
    .tab-pane li {
        font-size: 14px;
    }
}
/* Header Row Mobil Scroll */
.header-row.nav {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eee;
    scroll-snap-type: x mandatory;
}

.header-row.nav::-webkit-scrollbar {
    display: none; /* Mobil scroll bar gizlədilir */
}

/* Tab item */
.header-column {
    scroll-snap-align: start;
    flex: 0 0 auto;
    padding: 10px 18px;
    background: #f6f6f6;
    border-radius: 12px;
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    border: 1px solid #e3e3e3;
}

/* Aktiv Tab */
.header-column.active {
    background: #ff7a00;
    color: #fff !important;
    border-color: #ff7a00;
    box-shadow: 0 3px 8px rgba(255, 122, 0, 0.35);
}

.header-column i {
    font-size: 15px;
}





.qb-toast-notification {
    position: fixed;
    right: 20px;
    top: 20px;           
    z-index: 10000;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
    font-size: 13px;
    line-height: 1.4;
    color: #0f172a;
    background: #ffffff;
    animation: qbToastIn 0.3s ease forwards;
}


.qb-ok-note {
    border: 1px solid rgba(22, 163, 74, 0.25);
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.qb-err-note {
    border: 1px solid rgba(220, 38, 38, 0.2);
    background: linear-gradient(135deg, #fef2f2, #ffffff);
}

.toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(15, 23, 42, 0.04);
}

.qb-ok-note .toast-icon {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.08);
}

.qb-err-note .toast-icon {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.toast-message {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast-close {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform .15s ease, color .15s ease;
}

.toast-close:hover {
    transform: scale(1.1);
    color: #0f172a;
}

/* Animasiya */
@keyframes qbToastIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    .qb-toast-notification {
        right: 10px;
        top: 70px; /* header / nav-dan bir az aşağı */
        max-width: 260px;
        font-size: 12px;
    }
}
/* Ümumi qutu */
.auth-alert {
    position: relative;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #111827;
}

/* ikon üçün (i və ya svg varsa) */
.auth-alert i,
.auth-alert svg {
    font-size: 18px;
    margin-top: 2px;
}

/* mətn hissəsi */
.auth-alert p,
.auth-alert ul {
    margin: 0;
    padding: 0;
}

.auth-alert ul li {
    list-style: none;
    margin: 2px 0;
}

/* Uğur mesajı */
.auth-alert.success {
    border-color: #bbf7d0;
    background: #ecfdf5;
    color: #166534;
}

.auth-alert.success i {
    color: #16a34a;
}

/* Xəta mesajı */
.auth-alert.error {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.auth-alert.error i {
    color: #ef4444;
}

/* kiçik ekranlar üçün */
@media (max-width: 576px) {
    .auth-alert {
        border-radius: 10px;
        padding: 9px 12px;
        font-size: 13px;
    }
}

/* ========================================================== */
/* AUTH ALERT (Giriş/Qeydiyyat Bildirişləri)          */
/* ========================================================== */

/* Bildiriş Qutusu - Ümumi Stil */
.auth-alert {
    padding: 16px 20px;
    margin-bottom: 25px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px); /* Şüşə effekti */
    animation: fadeInAlert 0.5s ease-out forwards; /* Açılma animasiyası */
}

/* Uğurlu Mesaj (Success) - Firuzəyi/Yaşıl Neon */
.auth-alert.success {
    background-color: rgba(94, 234, 212, 0.1); /* Çox şəffaf fon */
    border: 1px solid rgba(94, 234, 212, 0.3); /* İncə neon çərçivə */
    color: #5eead4; /* Parlaq mətn rəngi */
    box-shadow: 0 0 15px rgba(94, 234, 212, 0.1); /* Yumşaq parıltı */
}

/* Xəta Mesajı (Error) - Qırmızı/Çəhrayı Neon */
.auth-alert.error {
    background-color: rgba(255, 99, 132, 0.1);
    border: 1px solid rgba(255, 99, 132, 0.3);
    color: #ff6384;
    box-shadow: 0 0 15px rgba(255, 99, 132, 0.1);
}

/* Siyahı və Mətn Təmizləmələri */
.auth-alert ul {
    margin: 0;
    padding: 0;
    list-style: none; /* Nöqtələri ləğv edir */
}

.auth-alert ul li {
    margin-bottom: 4px;
    position: relative;
    padding-left: 15px;
}

/* Siyahı elementlərinin qarşısına kiçik tire qoymaq üçün (Error siyahısı üçün) */
.auth-alert.error ul li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: #ff6384;
}

.auth-alert ul li:last-child {
    margin-bottom: 0;
}

.auth-alert p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* İkon Stili (Success mesajındakı ikon) */
.auth-alert i {
    font-size: 18px;
}

/* Açılma Animasiyası */
@keyframes fadeInAlert {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========================================================== */
/* PREMIUM LIGHT TOAST (Müasir Gündüz Modu)               */
/* ========================================================== */


.modern-toast-popup.swal2-toast {
    background-color: #ffffff !important;
    color: #1e293b !important; /* Tünd boz-göy rəng */
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08), 
                0 8px 10px -5px rgba(0, 0, 0, 0.04) !important; /* Çoxqatlı yumşaq kölgə */
    border-radius: 16px !important; /* Daha yumru künclər */
    border: 1px solid #f1f5f9 !important; /* Çox incə boz çərçivə */
    padding: 16px 24px !important; /* İçəridən geniş məsafə */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}


.modern-toast-popup.toast-success {
    border-left: 6px solid #10b981 !important; /* Zümrüd yaşılı */
}

.modern-toast-popup.toast-error {
    border-left: 6px solid #ef4444 !important; /* Müasir qırmızı */
}

.modern-toast-title {
    font-family: 'Inter', sans-serif !important; /* Varsa modern font */
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}


.modern-toast-popup .swal2-icon {
    border: none !important; /* Standart çərçivəni silirik */
    margin: 0 16px 0 0 !important;
    transform: scale(1.1); /* İkonu biraz böyüdürük */
}


.modern-toast-popup .swal2-icon.swal2-success .swal2-success-ring {
    background-color: rgba(16, 185, 129, 0.1) !important; /* İkon arxası açıq yaşıl */
}
.modern-toast-popup .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #10b981 !important; /* Xətlər tünd yaşıl */
}


.modern-toast-popup .swal2-icon.swal2-error .swal2-x-mark-line-left,
.modern-toast-popup .swal2-icon.swal2-error .swal2-x-mark-line-right {
    background-color: #ef4444 !important;
}


.modern-toast-progress {
    background: rgba(0, 0, 0, 0.06) !important;
    height: 4px !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Modern Light Cart Styles */

/* Layout Grid */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    align-items: start;
}

@media (max-width: 992px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
}

/* Cart Header */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cart-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* SCHEDULE_ROW - Köhnə Klas (JS üçün vacib) amma Yeni Dizayn */
.schedule__row.cart-item-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: auto 100px 1fr auto;
    gap: 20px;
    align-items: start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid #f1f5f9;
    transition: transform 0.2s, box-shadow 0.2s;
}

.schedule__row.cart-item-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Mobile Responsive Item Card */
@media (max-width: 768px) {
    .schedule__row.cart-item-card {
        grid-template-columns: auto 1fr;
        gap: 15px;
    }

    .item-checkbox { grid-row: 1 / 2; }
    .item-image { grid-row: 1 / 2; width: 80px; height: 80px; }
    .item-info { grid-column: 1 / -1; margin-top: 10px; }
    .item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        border-top: 1px solid #f1f5f9;
        padding-top: 15px;
        margin-top: 10px;
    }
}

.item-image {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}
.item-image img { width: 100%; height: 100%; object-fit: cover; }

.item-info { display: flex; flex-direction: column; gap: 8px; }
.item-title { font-size: 16px; font-weight: 600; margin: 0; line-height: 1.4; }
.item-title a { color: #1e293b; text-decoration: none; transition: color 0.2s; }
.item-title a:hover { color: #4f46e5; }

.item-meta { display: flex; flex-wrap: wrap; gap: 15px; font-size: 13px; color: #64748b; }
.item-price-single { font-weight: 600; color: #334155; }

.modern-input {
    width: 100%; padding: 10px 14px; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 13px; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s; background-color: #f8fafc;
}
.modern-input:focus { border-color: #4f46e5; background-color: #fff; }

.item-actions {
    display: flex; flex-direction: column; align-items: flex-end;
    justify-content: space-between; gap: 15px; height: 100%;
}

/* --- ARTIR/AZALT BUTONLARI (JS-in tanıdığı klaslar) --- */

/* Konteyner */
.schedule__quantity_calc.modern-qty-wrapper {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #e2e8f0;
}

/* Wrapper Divs (Minus/Plus) */
.schedule__minus, .schedule__plus {
    display: flex;
    align-items: center;
}

/* Düymələr */
.schedule__minus_btn, .schedule__plus_btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.schedule__minus_btn:hover, .schedule__plus_btn:hover {
    background: #4f46e5;
    color: #fff;
}

/* İnput */
.schedule__quantity.modern-qty-input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    outline: none;
    padding: 0;
}

/* ----------------------------------------------------- */

.item-total-price { font-size: 18px; font-weight: 700; color: #4f46e5; }

.delete-btn {
    background: rgba(239, 68, 68, 0.1); border: none; color: #ef4444;
    cursor: pointer; transition: all 0.2s; padding: 8px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.delete-btn:hover { background: #ef4444; color: #fff; }

.empty-cart-message {
    text-align: center; padding: 60px 20px; background: white;
    border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.cart-actions-bar { margin-top: 20px; display: flex; justify-content: flex-end; }

.clear-cart-btn {
    background: transparent; border: 1px solid #e2e8f0; color: #64748b;
    padding: 10px 20px; border-radius: 8px; cursor: pointer;
    transition: all 0.2s; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.clear-cart-btn:hover { background: #fff1f2; border-color: #fda4af; color: #e11d48; }

/* Summary Card */
.summary-card {
    background: #ffffff; border-radius: 16px; padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #f1f5f9;
    position: sticky; top: 20px;
}
.summary-header h3 {
    font-size: 18px; font-weight: 700; color: #1e293b;
    margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9;
}
.summary-row {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
}
.summary-row.total {
    font-size: 20px; font-weight: 700; color: #1e293b; margin-top: 10px;
}
.summary-row.total .amount { color: #4f46e5; }

.user-balance-info {
    background: #f8fafc; padding: 12px; border-radius: 8px;
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; border: 1px solid #e2e8f0; font-size: 14px;
}
.user-balance-info .balance { font-weight: 700; color: #059669; }

.reseller-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white; padding: 8px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px;
}

.checkout-btn {
    width: 100%; background: #4f46e5; color: white; border: none;
    padding: 14px; border-radius: 10px; font-weight: 600; font-size: 16px;
    cursor: pointer; transition: background 0.2s, transform 0.1s;
    display: block; text-align: center; text-decoration: none;
}
.checkout-btn:hover { background: #4338ca; transform: translateY(-1px); }
.checkout-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Modern Modal / Popup Styles */
.modern-popup .popup__wrap {
    background: #ffffff; border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 600px; width: 90%; padding: 0; overflow: hidden;
}
.modern-popup-header {
    background: #f8fafc; padding: 20px 30px; display: flex;
    justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0;
}
.modern-popup-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: #1e293b; }
.modern-popup-body { padding: 30px; }

.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #475569;
}
.form-control {
    width: 100%; padding: 12px 15px; border: 1px solid #cbd5e1;
    border-radius: 10px; font-size: 14px; transition: all 0.2s;
}
.form-control:focus {
    border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); outline: none;
}
.checkout-summary {
    background: #f1f5f9; padding: 15px; border-radius: 10px; margin-bottom: 20px;
}
.summary-item {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 5px; font-weight: 600;
}
.summary-value {
    background: transparent; border: none; text-align: right; font-weight: 700; color: #1e293b;
}

.modern-alert {
    display: flex; gap: 15px; padding: 15px; border-radius: 10px; margin-bottom: 20px; font-size: 14px;
}
.alert-warning.modern-alert { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.alert-danger.modern-alert { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.checkout-submit-btn {
    width: 100%; background: #10b981; color: white; border: none;
    padding: 14px; border-radius: 10px; font-weight: 700; font-size: 16px;
    cursor: pointer; transition: all 0.2s;
}
.checkout-submit-btn:hover { background: #059669; transform: translateY(-1px); }
.checkout-submit-btn:disabled { background: #cbd5e1; cursor: not-allowed; transform: none; }

.success-icon-large { font-size: 64px; color: #10b981; margin-bottom: 20px; }
.success-title { font-size: 24px; font-weight: 700; color: #1e293b; margin-bottom: 10px; }
.success-desc { color: #64748b; margin-bottom: 30px; }

/* ========================================================== */
/* POPUP / MODAL FIX (Mərkəzləşdirmə)                       */
/* ========================================================== */

/* 1. Popup-un ümumi çərçivəsi (Bütün ekranı tutur) */
.popup {
    position: fixed; /* Ekranla birlikdə hərəkət edir */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999; /* Hər şeyin üstündə olsun */
    display: flex;
    align-items: center; /* Şaquli mərkəzləmə */
    justify-content: center; /* Üfüqi mərkəzləmə */
    visibility: hidden; /* Gizli olsun */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 2. Popup aktiv olanda (JS tərəfindən .visible əlavə edilir) */
.popup.visible {
    visibility: visible;
    opacity: 1;
}

/* 3. Arxa fon (Qara şəffaf pərdə) */
.popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Qara rəng, 60% şəffaf */
    backdrop-filter: blur(5px); /* Arxa fonu bulandırır (Modern effekt) */
    z-index: 1;
}

/* 4. Popup-un özü (Ağ qutu) */
.popup__wrap {
    position: relative;
    z-index: 2; /* Pərdənin üstündə olsun */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 500px;
    width: 90%;
    margin: 0 auto;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* Aktiv olanda yüngül böyümə effekti */
.popup.visible .popup__wrap {
    transform: scale(1);
}

/* 5. Bağlama düyməsi (Sağ yuxarı künc) */
.popup__close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}

.popup__close:hover {
    color: #ef4444;
}

/* Mobil uyğunluq */
@media (max-width: 576px) {
    .popup__wrap {
        width: 95%;
        bottom: 0; /* Mobildə aşağıdan çıxması üçün */
    }
}

/* Boş Səbət Dizaynı - Light Mode */
.empty-cart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    text-align: center;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 20px;
    /* Əgər qutunun ətrafında kölgə istəyirsinizsə aşağıdakı sətri aktiv edin */
    /* box-shadow: 0 5px 20px rgba(0,0,0,0.05); */
}

.empty-cart-icon {
    width: 100px;
    height: 100px;
    background-color: #f0f4ff; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #f97316; 
    font-size: 40px;
}

.empty-cart-title {
    font-size: 22px;
    font-weight: 700;
    color: #2d3748; /* Tünd boz */
    margin-bottom: 10px;
}

.empty-cart-subtitle {
    font-size: 15px;
    color: #718096; /* Orta boz */
    line-height: 1.6;
    margin-bottom: 30px;
}

.empty-cart-btn {
    background-color: #f97316; 
    color: #fff !important;
    padding: 12px 35px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}

.empty-cart-btn:hover {
    background-color: #f29a0a; 
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 103, 216, 0.3);
}

:root {
    --primary: #f97316;
    --secondary: #8b5cf6;
    --bg-light: #f3f4f6;
    --text-dark: #111827;
    --text-grey: #6b7280;
    --radius: 16px;
}


.dash-sidebar {
    background: #fff;
    border-radius: var(--radius);
    padding: 0; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    position: sticky;
    top: 20px;
    overflow: visible;
}


.usermenu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    padding: 14px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    transition: 0.2s;
}

.usermenu__toggle:active {
    transform: scale(0.98);
}


.toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
}


.toggle-icon {
    font-size: 14px;
    transition: transform 0.3s ease; 
}


.dash-sidebar.is-open .toggle-icon {
    transform: rotate(180deg);
}


@media (min-width: 992px) {
    .usermenu__toggle {
        display: none !important;
    }
}

/* --- PROFİL KARTI --- */
.user-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    overflow: visible; /* Kamera üçün vacibdir */
}

/* Avatar Sahəsi */
.user-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px auto;
    overflow: visible; /* Kamera üçün vacibdir */
}

/* Dairəvi Şəkil */
.user-avatar-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden; /* Şəkil dairədən çıxmasın */
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
   
    z-index: 1;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fayl Seçim Inputunu Gizlət */
#avatarInput {
    display: none !important;
}

/* Kamera İkonu */
.avatar-edit-btn {
    position: absolute;
    bottom: 0; /* Dairənin tam küncünə yapışsın */
    right: 0;
    width: 32px;
    height: 32px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    border: 3px solid #fff;
    z-index: 10; /* Ən üstdə olsun */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: 0.2s;
}

.avatar-edit-btn:hover {
    transform: scale(1.1);
    background: #059669;
}

/* İstifadəçi Məlumatları */
.user-info-text {
    text-align: center;
    width: 100%;
}

.user-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
    display: block;
}

.user-email {
    font-size: 14px;
    color: var(--text-grey);
    margin-bottom: 10px;
    display: block;
}

.user-status {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
}
.user-status.verified { color: #10b981; }
.user-status.unverified { color: #f59e0b; text-decoration: none; }

.user-id-badge {
    background: #eff6ff;
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

/* --- NAVİQASİYA (MENYU) --- */
.dash-nav {
    padding: 0 20px 25px 20px;
}

.dash-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dash-nav li {
    margin-bottom: 5px;
}

.nav-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 15px 0 8px 10px;
}

.dash-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 10px;
    color: #4b5563;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Hover Effekti */
.dash-nav a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #f5f3ff, #fff);
    transition: width 0.3s ease;
    z-index: 0;
    border-left: 3px solid var(--primary);
}

.dash-nav a:hover::before,
.dash-nav a.active::before {
    width: 100%;
}

.dash-nav a span,
.dash-nav a i {
    position: relative;
    z-index: 1;
}

.dash-nav a:hover,
.dash-nav a.active {
    color: var(--primary);
    font-weight: 600;
}

.dash-nav a i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Çıxış Düyməsi */
.dash-nav a.logout-link {
    margin-top: 20px;
    color: #ef4444;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    justify-content: center;
}

.dash-nav a.logout-link::before {
    display: none;
}

.dash-nav a.logout-link:hover {
    background: #fee2e2;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .dash-sidebar {
        padding: 15px;
        margin-bottom: 20px;
    }

    /* Mobil Menyu Gizlətmə/Göstərmə */
    .dash-nav {
        display: none;
    }

    .dash-sidebar.is-open .dash-nav {
        display: block;
        margin-top: 15px;
        padding: 0;
    }

    .user-profile-card {
        display: flex;
        align-items: center; /* Yan-yana */
        flex-direction: row; 
        gap: 15px;
        text-align: left;
        padding: 0 0 15px 0;
        margin-bottom: 0;
        border: none;
        background: transparent;
    }

    .user-avatar-wrapper {
        width: 60px;
        height: 60px;
        margin: 0; /* Mərkəzləməni ləğv etdik */
    }

    .user-avatar-circle {
        font-size: 24px;
    }

    /* Mobildə şəkli dəyişmək çətin olduğu üçün kameranı gizlədə bilərsən,
       amma istəsən saxlaya da bilərsən. Aşağıdakı kod ölçünü kiçildir. */
    .avatar-edit-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
        right: -5px;
        bottom: -5px;
    }

    .user-info-text {
        text-align: left; /* Yazıları sola çəkdik */
        width: auto;
    }

    .user-name {
        font-size: 16px;
        margin: 0;
    }
    
    .user-email { margin-bottom: 5px; }

    .nav-label {
        margin-top: 15px;
    }
}


/* --- LAYOUT COLUMNS --- */


    .stats-grid {
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        gap: 25px; 
        margin-bottom: 35px;
    }

    .stat-card {
        background: #fff; 
        padding: 25px; 
        border-radius: 16px; 
        position: relative; 
        border: 1px solid #fff;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); 
        transition: all 0.3s ease; 
        overflow: hidden;
        display: flex; 
        align-items: center; 
        gap: 20px; 
        text-decoration: none;
    }
    .stat-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 20px 40px -5px rgba(99, 102, 241, 0.15); 
        border-color: #e0e7ff; 
    }
    
    .stat-icon {
        width: 60px; 
        height: 60px; 
        border-radius: 18px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-size: 24px; 
        transition: 0.4s; 
        flex-shrink: 0;
    }
    .stat-card:hover .stat-icon { 
        transform: rotate(15deg) scale(1.1); 
    }

    .stat-icon.balance { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #059669; }
    .stat-icon.points { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); color: #ea580c; }
    .stat-icon.ref { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); color: #2563eb; }

    .stat-info { flex-grow: 1; }
    .stat-info h4 { 
        font-size: 13px; 
        text-transform: uppercase; 
        font-weight: 700; 
        color: #9ca3af; 
        margin: 0 0 5px; 
        letter-spacing: 0.5px; 
    }
    .stat-info .value { 
        font-size: 24px; 
        font-weight: 800; 
        color: #111827; 
        margin: 0; 
        line-height: 1.2; 
    }

    /* --- QUICK ACTIONS (Sürətli Keçidlər) --- */
    .actions-grid {
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
        gap: 20px; 
        margin-bottom: 35px;
    }
    .action-card {
        background: #fff; 
        padding: 20px; 
        border-radius: 12px; 
        text-align: center;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03); 
        transition: 0.3s; 
        border: 1px solid #f3f4f6;
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        gap: 10px;
        text-decoration: none !important; 
        color: #4b5563; 
        font-weight: 600; 
        font-size: 14px;
    }
    .action-card:hover {
        transform: translateY(-3px); 
        box-shadow: 0 10px 25px rgba(0,0,0,0.06); 
        color: #f97316; 
        border-color: #e0e7ff;
    }
    .action-icon { 
        font-size: 24px; 
        color: #f97316; 
        margin-bottom: 5px; 
    }

    /* --- TABLE (Cədvəl Dizaynı) --- */
    .content-card {
        background: #fff; 
        border-radius: 16px; 
        box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05); 
        overflow: hidden;
    }
    .card-header {
        padding: 25px 30px; 
        border-bottom: 1px solid #f3f4f6; 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
    }
    .card-title { 
        font-size: 18px; 
        font-weight: 800; 
        color: #111827; 
        display: flex; 
        align-items: center; 
        gap: 10px; 
        margin: 0; 
    }
    .card-title::before { 
        content: ''; 
        display: block; 
        width: 4px; 
        height: 20px; 
        background: #f97316; 
        border-radius: 4px; 
    }

    .view-all-btn { 
        font-size: 13px; 
        color: #f97316; 
        font-weight: 600; 
        text-decoration: none; 
        padding: 8px 16px; 
        background: #eff6ff; 
        border-radius: 8px; 
        transition: 0.2s;
    }
    .view-all-btn:hover { 
        background: #f97316; 
        color: #fff; 
    }

    .custom-table { width: 100%; border-collapse: collapse; }
    .custom-table th { 
        text-align: left; 
        padding: 18px 25px; 
        color: #6b7280; 
        font-size: 12px; 
        font-weight: 700; 
        text-transform: uppercase; 
        background: #f9fafb; 
    }
    .custom-table td { 
        padding: 20px 25px; 
        color: #374151; 
        font-size: 14px; 
        border-bottom: 1px solid #f3f4f6; 
        font-weight: 500; 
        vertical-align: middle; 
    }
    .custom-table tr:last-child td { border-bottom: none; }
    
    .status-badge { 
        padding: 6px 14px; 
        border-radius: 30px; 
        font-size: 11px; 
        font-weight: 800; 
        text-transform: uppercase; 
    }
    .status-completed { background: #ecfdf5; color: #047857; }
    .status-pending { background: #fff7ed; color: #c2410c; }
    .status-cancelled { background: #fef2f2; color: #b91c1c; }

    .btn-action { 
        width: 36px; 
        height: 36px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        background: #fff; 
        border: 1px solid #e5e7eb; 
        color: #4b5563; 
        border-radius: 8px; 
        transition: 0.2s;
    }
    .btn-action:hover { 
         background: #f97316;
    border-color: #f97316;
    color: #fff;
    }

    /* --- MOBILE RESPONSIVE --- */
    @media (max-width: 991px) {
        .dash-left { width: 100%; }
        .dash-right { width: 100%; }
        
        .stats-grid { 
            grid-template-columns: 1fr; 
            gap: 15px; 
        }
        .stat-card { padding: 20px; }
        
        .actions-grid { 
            grid-template-columns: 1fr 1fr; 
            gap: 10px; 
        }
        
        .custom-table { 
            display: block; 
            overflow-x: auto; 
            white-space: nowrap; 
        }
        .card-header { padding: 20px; }
    }




.oyw-page--light {
    background: #f4f5fb;
    margin-bottom: 12px;
   
}



/* Layout: sol menyu + sağ kontent */
.oyw-page--light .account-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
}

.oyw-page--light .account-sidebar,
.oyw-page--light .account-main {
    min-width: 0;
}

/* Bootstrap istifadə olunmadığı üçün sadə utilitilər */
.oyw-page--light .col-lg-12 {
    width: 100%;
}

.oyw-page--light .mt-1 {
    margin-top: 0.25rem;
}

.oyw-page--light .mb-1 {
    margin-bottom: 0.25rem;
}

/* Tablet və mobil üçün layout */
@media (max-width: 991.98px) {
    .oyw-page--light .account-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Ümumi Sifariş Məbləği kartı ---------- */

.oyw-page--light .info-widget {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.03);
    margin-bottom: 18px;
}
@media (min-width: 768px) {
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}
.oyw-page--light .info-widget__icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 0, #ffecc3 0, #ff9b3a 45%, #ff7d1c 100%);
    color: #ffffff;
    font-size: 22px;
    flex-shrink: 0;
}

.oyw-page--light .info-widget__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.oyw-page--light .info-widget__value {
    font-weight: 700;
    font-size: 20px;
    color: #111827;
}

.oyw-page--light .info-widget__label {
    font-size: 13px;
    color: #6b7280;
}

/* ---------- Filtr toolbarı ---------- */

.oyw-page--light .ord-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    background: #ffffff;
    border-radius: 24px;
    padding: 14px 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.15);
    flex-wrap: wrap;
}

.oyw-page--light .ord-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid rgba(148, 163, 184, 0.45);
    min-width: 0;
    flex: 1 1 0;
}

.oyw-page--light .ord-field i {
    font-size: 14px;
    color: #9ca3af;
    flex-shrink: 0;
}

.oyw-page--light .ord-field input,
.oyw-page--light .ord-field select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 13px;
    color: #111827;
    padding: 0;
}

.oyw-page--light .ord-field input::placeholder {
    color: #9ca3af;
}

.oyw-page--light .ord-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 18px;
    cursor: pointer;
}

.oyw-page--light .ord-field select::-ms-expand {
    display: none;
}

/* Filtr düymələri */

.oyw-page--light .ord-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.oyw-page--light .ord-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #ff9b3a, #ff7d1c);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.45);
    white-space: nowrap;
}

.oyw-page--light .ord-btn i {
    font-size: 14px;
}

.oyw-page--light .ord-btn:hover {
    filter: brightness(1.05);
}

.oyw-page--light .ord-reset {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #6b7280;
    background: #ffffff;
}

/* ---------- Orders container ---------- */

.oyw-page--light .orders-page-container {
    margin-top: 18px;
}

.oyw-page--light .orders-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Order card əsas görünüş */

.oyw-page--light .order-card {
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.15);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Sol kənar status xətti */

.oyw-page--light .order-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 24px 0 0 24px;
    background: linear-gradient(180deg, #e5e7eb, #d1d5db);
}

/* Statusa görə rəng */

.oyw-page--light .order-card.status-success::before {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.oyw-page--light .order-card.status-danger::before {
    background: linear-gradient(180deg, #f97373, #ef4444);
}

.oyw-page--light .order-card.status-process::before {
    background: linear-gradient(180deg, #38bdf8, #0ea5e9);
}

.oyw-page--light .order-card.status-half::before {
    background: linear-gradient(180deg, #facc15, #eab308);
}

.oyw-page--light .order-card.status-pending::before {
    background: linear-gradient(180deg, #fed7aa, #fdba74);
}

/* Order head layout */

.oyw-page--light .order-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.oyw-page--light .order-card__thumb {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}

.oyw-page--light .order-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oyw-page--light .order-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.oyw-page--light .order-card__subtitle {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 8px;
}

/* Meta pill-lər */

.oyw-page--light .order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.oyw-page--light .ord-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #f3f4ff;
    color: #4b5563;
    font-size: 12px;
}

.oyw-page--light .ord-chip .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
}

.oyw-page--light .ord-chip b {
    font-weight: 600;
    color: #111827;
}

/* Sağ tərəf – status + Detallar düyməsi */

.oyw-page--light .order-card__action {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* Status badge-lər */

.oyw-page--light .ord-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
}

.oyw-page--light .ord-badge i {
    font-size: 11px;
}

/* rənglər */

.oyw-page--light .ord-badge--green {
    background: rgba(22, 163, 74, 0.09);
    color: #15803d;
}

.oyw-page--light .ord-badge--red {
    background: rgba(239, 68, 68, 0.09);
    color: #b91c1c;
}

.oyw-page--light .ord-badge--blue {
    background: rgba(59, 130, 246, 0.09);
    color: #1d4ed8;
}

.oyw-page--light .ord-badge--yellow {
    background: rgba(234, 179, 8, 0.12);
    color: #92400e;
}

/* Detallar düyməsi */

.oyw-page--light .ord-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #ff9b3a, #ff7d1c);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(249, 115, 22, 0.45);
    white-space: nowrap;
}

.oyw-page--light .ord-primary i {
    font-size: 14px;
}

.oyw-page--light .ord-primary:hover {
    filter: brightness(1.05);
}

/* ---------- Detalları açılan blok ---------- */

.oyw-page--light .order-card__details {
    margin-top: 14px;
    border-radius: 18px;
    background: #f9fafb;
    padding: 12px 14px;
    display: none;
}

.oyw-page--light .order-card__details.is-open {
    display: block;
}

.oyw-page--light .ord-details-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.oyw-page--light .ord-sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(209, 213, 219, 0.7);
    font-size: 13px;
}

.oyw-page--light .ord-sum .s {
    color: #6b7280;
}

.oyw-page--light .ord-sum .v {
    font-weight: 600;
    color: #111827;
}

/* İç məhsul item */

.oyw-page--light .ord-item {
    margin-top: 6px;
    padding: 10px 10px;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.oyw-page--light .ord-item .t {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.oyw-page--light .ord-item .st {
    font-size: 12px;
    color: #6b7280;
}

.oyw-page--light .ord-item small {
    font-weight: 600;
    color: #4b5563;
}

/* E-pin listi */

.oyw-page--light .ord-epin {
    margin-top: 10px;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px 10px;
    border: 1px dashed rgba(148, 163, 184, 0.7);
}

.oyw-page--light .ord-epin__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.oyw-page--light .ord-epin__title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.oyw-page--light .ord-epin__actions {
    display: flex;
    gap: 8px;
}

.oyw-page--light .ord-ghost {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    background: #f9fafb;
    color: #4b5563;
    font-size: 11px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.oyw-page--light .ord-ghost i {
    font-size: 11px;
}

.oyw-page--light .ord-epin-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oyw-page--light .ord-epin-li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px dashed rgba(229, 231, 235, 0.9);
}

.oyw-page--light .ord-epin-li:last-child {
    border-bottom: none;
}

.oyw-page--light .ord-epin-li .idx {
    width: 18px;
    text-align: right;
    color: #9ca3af;
    flex-shrink: 0;
}

.oyw-page--light .ord-code {
    font-family: monospace;
    font-size: 12px;
    color: #111827;
    padding: 2px 6px;
    border-radius: 8px;
    background: #f3f4ff;
}

.oyw-page--light .ord-iconbtn {
    margin-left: auto;
    border-radius: 999px;
    border: none;
    background: #eef2ff;
    color: #4b5563;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---------- Toast (kopyalandı mesajı) ---------- */

.oyw-page--light #ord-toast {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(16px);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #f9fafb;
    font-size: 12px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
}

.oyw-page--light #ord-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Pagination ---------- */

.oyw-page--light .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.oyw-page--light .pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.oyw-page--light .pagination .page-item {
    list-style: none;
}

.oyw-page--light .pagination .page-link {
    border: none;
    background: transparent;
    padding: 4px 9px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    border-radius: 999px;
    min-width: 30px;
    text-align: center;
}

.oyw-page--light .pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #ff9b3a, #ff7d1c);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.5);
}

.oyw-page--light .pagination .page-link:hover {
    background: rgba(249, 115, 22, 0.08);
    text-decoration: none;
}

.oyw-page--light .pagination .page-item.disabled .page-link {
    color: #d1d5db;
    background: transparent;
    box-shadow: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {

    .oyw-page--light .info-widget {
        margin-top: 6px;
        border-radius: 18px;
    }

    .oyw-page--light .ord-toolbar {
        flex-direction: column;
        align-items: stretch;
        border-radius: 24px;
    }

    .oyw-page--light .ord-field {
        border-radius: 14px;
        background: rgba(249, 250, 251, 0.96);
    }

    .oyw-page--light .ord-actions {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        margin-top: 4px;
    }

    .oyw-page--light .ord-btn {
        flex: 1 1 auto;
        justify-content: center;
        border-radius: 14px;
    }

    .oyw-page--light .ord-reset {
        border-radius: 14px;
    }

    .oyw-page--light .order-card__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .oyw-page--light .order-card__action {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }

    .oyw-page--light .ord-primary {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {

    .oyw-page--light .info-widget {
        padding: 14px 16px;
    }

    .oyw-page--light .info-widget__value {
        font-size: 18px;
    }

    .oyw-page--light .ord-toolbar {
        padding: 14px 14px;
    }

    .oyw-page--light .order-card {
        padding: 14px 14px;
        border-radius: 20px;
    }

    .oyw-page--light .pagination {
        padding-inline: 8px;
    }

    .oyw-page--light .pagination .page-link {
        min-width: 28px;
        padding-inline: 7px;
        font-size: 12px;
    }
}

.last-orders-card{
    margin-top: 24px;
}

.last-orders-header-row{
    display:grid;
    grid-template-columns: 90px 3fr 160px 120px 140px 80px;
    padding: 0 20px 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:#9ca3af;
}

.last-orders-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.last-order-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 20px;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
}

.last-order-left{
    display:flex;
    align-items:center;
    gap:20px;
    flex:1 1 auto;
    min-width:0;
}

.last-order-id{
    font-weight:600;
    color:#111827;
    font-size:14px;
    min-width:70px;
}

.last-order-product{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1 1 auto;
    min-width:0;
}

.prod-thumb-wrap{
    width:90px;
    height:90px;
    border-radius:18px;
    overflow:hidden;
    flex-shrink:0;
}

.prod-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.prod-text{
    min-width:0;
}

.prod-title{
    font-size:15px;
    font-weight:600;
    color:#111827;
    margin-bottom:4px;
}

.prod-meta{
    font-size:13px;
    color:#6b7280;
}

.last-order-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.status-badge{
    font-size:12px;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
    white-space:nowrap;
}

.status-completed{
    background:#ecfdf3;
    color:#16a34a;
}

.status-cancelled{
    background:#fef2f2;
    color:#dc2626;
}

.status-process{
    background:#eff6ff;
    color:#2563eb;
}

.status-partial{
    background:#fefce8;
    color:#ca8a04;
}

.status-pending{
    background:#f3f4f6;
    color:#4b5563;
}

.btn-action{
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid #e5e7eb;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    color:#6b7280;
    transition:.15s;
}



/* mobil */
@media (max-width: 768px){
    .last-orders-header-row{
        display:none;
    }

    .last-order-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .last-order-right{
        width:100%;
        justify-content:space-between;
    }

    .prod-thumb-wrap{
        width:72px;
        height:72px;
    }
}

/* ==== BALANCE PAGE WRAP ==== */
.balance__wrap{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==== SUMMARY CARD (üst blok) ==== */
.balance__summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 22px;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 14px 40px rgba(15,23,42,0.06);
}

/* Sol tərəf – balans info */
.balance__chip{
    width:44px;
    height:44px;
    border-radius:14px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0;
}

.balance__sum-texts{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.balance__sum-value{
    font-size:24px;
    font-weight:700;
    color:#0f172a;
    margin:0;
}

.balance__sum-value .oy-balance-blur{
    letter-spacing:0.02em;
}

.balance__sum-sub{
    margin:0;
    font-size:13px;
    color:#6b7280;
}

/* Sağ tərəf – səhifə ölçüsü seçimi */
.balance__tools{
    margin-left:auto;
    display:flex;
    align-items:center;
}

.balance__page-size{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    font-size:13px;
}

.balance__page-size label{
    color:#6b7280;
    font-weight:500;
}

.balance__page-size select{
    min-width:90px;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    color:#111827;
    font-size:13px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.balance__page-size select:focus{
    border-color:#f97316;
    box-shadow:0 0 0 1px rgba(99,102,241,0.25);
    background:#ffffff;
}

/* ==== EMPTY STATE ==== */
.balance__empty{
    margin-top:4px;
    padding:34px 20px 28px;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 10px 30px rgba(15,23,42,0.04);
    text-align:center;
}

.balance__empty-art{
    margin-bottom:8px;
}

.balance__empty-title{
    margin:0 0 4px;
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.balance__empty-sub{
    margin:0 0 12px;
    font-size:13px;
    color:#6b7280;
}

.balance__cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:999px;
    background:linear-gradient(135deg,#f97316,#fb923c);
    color:#ffffff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(249,115,22,0.35);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.balance__cta i{
    font-size:13px;
}

.balance__cta:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(249,115,22,0.4);
    opacity:.96;
}

/* ==== TABLE WRAP ==== */
.balance__table-scroll{
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 16px 40px rgba(15,23,42,0.05);
    overflow-x:auto;
}

/* ==== TABLE ==== */
.balance__table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
}

.balance__table thead{
    background:#f9fafb;
}

.balance__table th,
.balance__table td{
    padding:12px 18px;
    font-size:13px;
    text-align:left;
    white-space:nowrap;
}

.balance__table th{
    font-weight:600;
    color:#6b7280;
    border-bottom:1px solid #e5e7eb;
}

.balance__table tbody tr{
    border-bottom:1px solid #f1f5f9;
    transition:background .12s ease;
}

.balance__table tbody tr:hover{
    background:#f9fafb;
}

.balance__table tbody td{
    color:#111827;
}

/* ==== BADGES ==== */
.balance__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.03em;
    text-transform:uppercase;
}

.balance__badge--success{
    background:rgba(34,197,94,0.10);
    color:#16a34a;
}

.balance__badge--warning{
    background:rgba(251,191,36,0.12);
    color:#d97706;
}

.balance__badge--danger{
    background:rgba(248,113,113,0.12);
    color:#dc2626;
}

.balance__badge--info{
    background:rgba(96,165,250,0.12);
    color:#2563eb;
}

/* ==== ACTION BUTTON ==== */
.balance__btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(99,102,241,0.25);
    background:#f5f3ff;
    color:#4f46e5;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    transition:background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.balance__btn i{
    font-size:12px;
}

.balance__btn:hover{
    background:#4f46e5;
    color:#ffffff;
    box-shadow:0 8px 22px rgba(79,70,229,0.35);
    transform:translateY(-1px);
}

/* ==== PAGINATION ==== */
.balance-pager{
    margin-top:14px;
    display:flex;
    justify-content:flex-end;
}

.balance-pager .pagination{
    margin-bottom:0;
}

.balance-pager .page-link{
    border-radius:999px !important;
    border:1px solid #e5e7eb;
    color:#6b7280;
    font-size:13px;
    padding:4px 9px;
}

.balance-pager .page-item.active .page-link{
    background:#4f46e5;
    border-color:#4f46e5;
    color:#ffffff;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 992px){
    .balance__summary{
        flex-direction:column;
        align-items:flex-start;
    }

    .balance__tools{
        width:100%;
        justify-content:flex-start;
    }

    .balance__page-size{
        align-items:flex-start;
    }
}

@media (max-width: 640px){
    .balance__summary{
        padding:14px 16px;
    }

    .balance__sum-value{
        font-size:21px;
    }

    .balance__table{
        min-width:640px;
    }
}


/* ===== PAYMENT SUMMARY CARD (DAY MODE) ===== */

.payment-summary {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px 22px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
    border: 1px solid #eef2ff;
    margin-bottom: 24px;
}

/* header */

.summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.summary-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.summary-chip {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f97316, #fb923c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 25px rgba(248, 148, 69, 0.45);
    flex-shrink: 0;
}

.summary-chip i {
    font-size: 18px;
}

.summary-header-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.summary-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.summary-sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* status badge */

.summary-status {
    display: flex;
    align-items: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.status-badge i {
    font-size: 13px;
}

.status-success {
    background: #dcfce7;
    color: #16a34a;
}

.status-danger {
    background: #fee2e2;
    color: #dc2626;
}

.status-pending {
    background: #fef9c3;
    color: #eab308;
}

/* body */

.summary-body {
    border-top: 1px solid #eef2ff;
    padding-top: 16px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 32px;
}

.summary-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.summary-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.summary-label i {
    font-size: 12px;
}

.summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

.summary-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
}

/* footer – mesaj */

.summary-footer {
    margin-top: 14px;
}

.summary-alert {
    border-radius: 12px;
    padding: 10px 12px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
    border: 1px solid #fde68a;
}

/* Bank / kripto əlavə blok */

.payment-extra {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed #e5e7eb;
}

.payment-extra-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.payment-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
}

.payment-extra-item {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.payment-extra-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin-bottom: 3px;
}

.payment-extra-value {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

/* ===== Responsive ===== */

@media (max-width: 991px) {
    .payment-summary {
        padding: 16px 14px;
        margin-top: 16px;
    }

    .summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .summary-status {
        align-self: stretch;
        justify-content: flex-start;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

@media (max-width: 575px) { 
    .summary-title {
        font-size: 16px;
    }

    .summary-sub {
        font-size: 12px;
    }

    .payment-extra-grid {
        grid-template-columns: 1fr;
    }
}

/* Ödəniş səhifəsi layout */
.account-layout{
    display:flex;
    gap:24px;
}
.account-sidebar{
    flex:0 0 260px;
}
.account-main{
    flex:1 1 auto;
    min-width:0;
}

/* Cari balans kartı */
.odeme-movcud-balans-kart{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 22px;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 16px 40px rgba(15,35,95,0.08);
    margin-bottom:20px;
}
.odeme-balans-ikon{
    width:40px;
    height:40px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#3ac278,#1f9bff);
    color:#fff;
    font-size:20px;
}
.odeme-balans-yazi h6{
    margin:0;
    font-weight:600;
}
.odeme-balans-altbasliq{
    font-size:13px;
    color:#7b8699;
}

/* Tabs sol menyu */
.odeme-tab-konteyner{
    display:flex;
    gap:22px;
}
.odeme-tab-sidebar{
    flex:0 0 240px;
}
.odeme-tab-menu{
    display:flex;
    flex-direction:column;
    gap:8px;
}
/* Əsas link stili */
.odeme-tab-link {
    display: block;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #4c5a73;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 35, 95, 0.04);
    /* Border əvvəlcədən təyin olunur amma rəngsiz olur ki, seçiləndə ölçü dəyişməsin */
    border: 2px solid transparent; 
    transition: all .18s ease;
    text-decoration: none !important;
    cursor: pointer;
}

/* Hover effekti */
.odeme-tab-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(15, 35, 95, 0.09);
    color: #1f2a55;
}

.odeme-tab-link.selected {
    background: #f3f4ff !important;
       color: #f97316 !important;
    border-color: #f97316 !important;
       box-shadow: 0 14px 40px rgb(255 87 34 / 16%) !important;
}
/* Sağ kontent */
.odeme-tab-icerik-wrapper{
    flex:1 1 auto;
    min-width:0;
}
.odeme-tab-icerik{
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 18px 45px rgba(15,35,95,0.10);
    padding:20px 22px 24px;
}

/* Bank accordion */
.odeme-banka-accordion{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.odeme-banka-item {
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 14px 40px rgba(15,35,95,0.06);
    margin-bottom:18px;
    overflow:hidden;
}

.odeme-banka-header {
    margin:0;
}

.odeme-banka-button {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px;
    border:0;
    background:transparent;
    cursor:pointer;
    font-size:15px;
    font-weight:600;
    color:#1f2933;
}
.odeme-banka-logo{
    width:42px;
    height:42px;
    border-radius:12px;
    object-fit:contain;
    flex-shrink:0;
}
.odeme-banka-button span{
    flex:1 1 auto;
    text-align:left;
    font-weight:600;
    font-size:15px;
    color:#1c2340;
}
.odeme-banka-ox {
    font-size:14px;
    transition:transform .18s ease, color .18s ease;
    color:#9aa4c2;
}
.odeme-banka-item.is-open .odeme-banka-ox {
    transform:rotate(180deg);
    color:#4f46e5;
}
.odeme-banka-item .accordion-collapse {
    display:none;
}
.odeme-banka-item.is-open .accordion-collapse {
    display:block;
}

.accordion-collapse.show + .odeme-banka-ox,
.odeme-banka-button[aria-expanded="true"] .odeme-banka-ox{
    transform:rotate(180deg);
}
.odeme-banka-body {
    padding:16px 20px 18px;
    border-top:1px dashed rgba(148,163,184,0.5);
}
.odeme-banka-detal-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px 16px;
}
.odeme-detal-item{
    font-size:13px;
}
.odeme-detal-basliq{
    display:block;
    color:#8b94ab;
    margin-bottom:2px;
}
.odeme-detal-deyer{
    font-weight:600;
    color:#222741;
}

/* Bank actions */
.odeme-banka-aksiyon-grup{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.odeme-form-info{
    margin-top:8px;
    font-size:13px;
    color:#7b8699;
}

/* Online form */
.odeme-online-item{
    width:100%;
}
.odeme-online-form{
    width:100%;
}
.odeme-online-icerik{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* Info box */
.odeme-form-info--success{
    background:#e7f9ed;
    border-radius:14px;
    padding:10px 12px;
    border:1px solid #a8ecc4;
    font-size:13px;
    color:#1f7b48;
}

/* Form elementləri */
.odeme-form-grup{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.odeme-form-etiket{
    font-size:13px;
    font-weight:500;
    color:#707a91;
}
.odeme-form-etiket--komissiya{
    color:#bf7b12;
}
.odeme-form-input,
.odeme-form-fayl,
.odeme-form-input--static{
    width:100%;
    border-radius:12px;
    border:1px solid #e3e6f2;
    background:#f8f9fd;
    padding:9px 11px;
    font-size:14px;
    color:#1b2140;
    outline:none;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.odeme-form-input:focus,
.odeme-form-fayl:focus{
    border-color:#4b5dff;
    background:#ffffff;
    box-shadow:0 0 0 1px rgba(75,93,255,0.25);
}
.odeme-form-input--static{
    cursor:default;
}

/* Grid */
.odeme-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 18px;
}
.odeme-form-grid--online{
    align-items:flex-end;
}
.odeme-form-grup--yarim{
    grid-column:span 1;
}
.odeme-form-grup--tam{
    grid-column:1 / -1;
}

/* Input group */
.odeme-input-grup{
    display:flex;
    align-items:center;
    gap:8px;
}
.odeme-input-grup-yazi{
    font-size:13px;
    color:#7b8699;
}

/* Buttons */
.odeme-button{
    border-radius:999px;
    border:none;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    padding:10px 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:all .18s ease;
}
.odeme-button--primary{
    background: linear-gradient(135deg, #f97316, #f97316);
    color:#fff;
    box-shadow: 0 14px 40px rgb(249 115 22 / 21%);
}
.odeme-button--primary:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 50px rgb(249 115 22 / 21%);
}
.odeme-button--secondary{
    background:#f5f7ff;
    color:#28314f;
}
.odeme-button--secondary:hover{
    background:#edf0ff;
}
.odeme-button--outline{
    background:#ffffff;
    border:1px solid #e1e4f2;
    color:#28314f;
}
.odeme-button--outline:hover{
    background:#f6f7fe;
}
.odeme-button--tam-genislik{
    width:100%;
}

/* Popup */
.popup_post .post{
    padding:18px 18px 20px;
}

/* Responsive */
@media (max-width: 1024px){
    .account-layout{
        flex-direction:column;
    }
    .account-sidebar{
        flex:0 0 auto;
    }
    .odeme-tab-konteyner{
        flex-direction:column;
    }
    .odeme-tab-sidebar{
        flex:0 0 auto;
    }
}

@media (max-width: 768px){
    .odeme-tab-link{
        padding:9px 11px;
        font-size:13px;
    }
    .odeme-form-grid{
        grid-template-columns:1fr;
    }
    .odeme-form-grup--yarim,
    .odeme-form-grup--tam{
        grid-column:1 / -1;
    }
}




/* Close düyməsi */
.popup_post .popup__close{
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 35, 95, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
}

/* Hover effekti */
.popup_post .popup__close:hover{
    background: #4b5dff;
    box-shadow: 0 10px 28px rgba(75, 93, 255, 0.45);
}

/* SVG ikon ölçüsü və rəngi */
.popup_post .popup__close .icon{
    width: 14px;
    height: 14px;
    color: #1f2937;
    pointer-events: none;
}

/* Hoverda ikon rəngi */
.popup_post .popup__close:hover .icon{
    color: #ffffff;
}

/* Əgər sprite currentColor istifadə etmirsə, ehtiyat variant */
.popup_post .popup__close .icon-close path,
.popup_post .popup__close .icon-close line{
    stroke: currentColor;
}



.withdraw-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Mövcud balans kartı */
.withdraw-balance-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#ffffff;
    border-radius:20px;
    padding:14px 18px;
    /* daha isti, narıncı tonlu shadow */
    box-shadow:0 18px 45px rgba(255,122,0,0.10);
}

.withdraw-balance-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* headerdəki narıncıya uyğun gradient */
    background:linear-gradient(135deg,#ff7a00,#ff9f3c);
    color:#fff;
    font-size:20px;
    flex-shrink:0;
}

.withdraw-balance-text h6{
    margin:0;
    font-size:15px;
    font-weight:600;
    color:#111827;
}

.withdraw-balance-text span{
    display:inline-block;
    margin-top:4px;
    font-size:13px;
    font-weight:500;
    color:#6b7280;
}

/* Form kartı */
.withdraw-form-card{
    background:#ffffff;
    border-radius:24px;
    padding:20px 22px;
    /* daha yumşaq, narıncı shadow */
    box-shadow:0 22px 55px rgba(255,122,0,0.12);
    max-width:640px;
}

.withdraw-form-header{
    margin-bottom:18px;
}

.withdraw-form-title{
    font-size:18px;
    font-weight:600;
    color:#111827;
    margin-bottom:4px;
}

.withdraw-form-subtitle{
    font-size:13px;
    color:#6b7280;
}

/* Form strukturu */
.withdraw-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}

.withdraw-form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.withdraw-form-group--full{
    grid-column:1 / -1;
}

.withdraw-label{
    font-size:13px;
    font-weight:500;
    color:#4b5563;
}

.withdraw-input{
    border-radius:12px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    padding:10px 12px;
    font-size:14px;
    color:#111827;
    outline:none;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
    width:100%;
}

.withdraw-input:focus{
    background:#ffffff;
    border-color:#ff7a00; /* header narıncısı */
    box-shadow:0 0 0 1px rgba(255,122,0,0.18);
}

.withdraw-input::placeholder{
    color:#9ca3af;
}

/* Alt hissə */
.withdraw-footer{
    margin-top:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.withdraw-note{
    font-size:12px;
    color:#9ca3af;
}

/* Button – headerdəki CTA-lara uyğun narıncı gradient */
.withdraw-submit{
    border:none;
    outline:none;
    border-radius:999px;
    padding:11px 18px;
    font-size:15px;
    font-weight:600;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    cursor:pointer;
    background:linear-gradient(135deg,#ff7a00,#ff9f3c);
    color:#ffffff;
    box-shadow:0 18px 45px rgba(255,122,0,0.38);
    transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}

.withdraw-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 22px 55px rgba(255,122,0,0.46);
    filter:brightness(1.03);
}

.withdraw-submit:active{
    transform:translateY(0);
    box-shadow:0 14px 32px rgba(255,122,0,0.36);
}

/* Responsive */
@media (min-width:768px){
    .withdraw-form-card{
        padding:22px 26px;
    }

    .withdraw-form-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:767.98px){
    .withdraw-form-card{
        border-radius:20px;
        padding:16px 15px 18px;
    }

    .withdraw-balance-card{
        border-radius:18px;
        padding:12px 13px;
    }
}

.gifts-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Claim card */
.gift-claim-card{
    background:#ffffff;
    border-radius:20px;
    padding:18px 20px 20px;
    box-shadow:0 18px 45px rgba(15,35,95,0.08);
    margin-bottom:4px;
}

.gift-claim-header{
    margin-bottom:16px;
}

.gift-claim-title{
    font-size:18px;
    font-weight:700;
    color:#111827;
    margin:0 0 4px;
}

.gift-claim-subtitle{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:#6b7280;
}

/* Form fields */
.gift-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 16px;
}

.gift-form-group{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.gift-label{
    font-size:13px;
    font-weight:500;
    color:#4b5563;
}

.gift-input{
    border-radius:12px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    padding:10px 12px;
    font-size:14px;
    color:#111827;
    outline:none;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
    width:100%;
}

.gift-input:focus{
    background:#ffffff;
    border-color:#4f46e5;
    box-shadow:0 0 0 1px rgba(79,70,229,0.18);
}

.gift-input::placeholder{
    color:#9ca3af;
}

.gift-input-error{
    border-color:#ef4444;
}

.gift-error-text{
    font-size:12px;
    color:#b91c1c;
}

.gift-no-fields{
    font-size:13px;
    color:#b45309;
    background:#fffbeb;
    border-radius:12px;
    padding:10px 12px;
}

/* Actions */
.gift-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.gift-btn{
    border:none;
    outline:none;
    border-radius:999px;
    padding:10px 18px;
    font-size:14px;
    font-weight:600;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    cursor:pointer;
    background:linear-gradient(135deg,#4f46e5,#f97316);
    color:#ffffff;
    box-shadow:0 18px 45px rgba(79,70,229,0.35);
    transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
    text-decoration:none;
}

.gift-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 22px 55px rgba(79,70,229,0.45);
    filter:brightness(1.03);
}

.gift-btn:active{
    transform:translateY(0);
    box-shadow:0 14px 32px rgba(79,70,229,0.35);
}

.gift-btn[disabled]{
    opacity:.6;
    cursor:not-allowed;
    box-shadow:none;
}

.gift-btn-ghost{
    background:#f9fafb;
    color:#4b5563;
    box-shadow:none;
    border:1px solid #e5e7eb;
    padding-inline:16px;
}

.gift-btn-ghost:hover{
    background:#eef2ff;
    border-color:#4f46e5;
    color:#111827;
}

/* Small button */
.gift-btn-sm{
    padding:7px 14px;
    font-size:13px;
}

/* List card */
.gifts-list-card{
    background:#ffffff;
    border-radius:20px;
    padding:18px 20px 16px;
    box-shadow:0 18px 45px rgba(15,35,95,0.08);
}

.gifts-list-header{
    margin-bottom:12px;
}

.gifts-list-title{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#111827;
}

/* List body */
.gifts-list-body{
    max-height:600px;
    overflow-y:auto;
    border-radius:14px;
}

.gift-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:12px 8px;
    border-bottom:1px solid #eef2f7;
}

.gift-item:last-child{
    border-bottom:none;
}

.gift-item-left{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.gift-thumb-wrap{
    width:44px;
    height:44px;
    border-radius:14px;
    overflow:hidden;
    flex-shrink:0;
    background:#f3f4f6;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gift-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
}

.gift-info{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.gift-info-title{
    font-size:14px;
    font-weight:600;
    color:#111827;
}

.gift-info-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    font-size:12px;
    color:#6b7280;
}

.gift-info-meta i{
    margin-right:4px;
}

/* Right side */
.gift-item-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    min-width:160px;
}

/* Status chips */
.status-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:500;
    background:#f3f4f6;
    color:#4b5563;
}

.status-chip i{
    font-size:13px;
}

.status-chip-success{
    background:#ecfdf3;
    color:#166534;
}

.status-chip-pending-input{
    background:#eff6ff;
    color:#1d4ed8;
}

.status-chip-pending{
    background:#fffbeb;
    color:#92400e;
}

.status-chip-failed{
    background:#fef2f2;
    color:#b91c1c;
}

.gift-error-note{
    font-size:12px;
    color:#b91c1c;
    max-width:260px;
    text-align:right;
}

/* Empty state */
.gift-empty{
    padding:16px 8px;
    font-size:14px;
    color:#6b7280;
}

/* Responsive */
@media (max-width:991.98px){
    .gifts-list-card{
        padding:16px 15px 14px;
    }
}

@media (max-width:767.98px){
    .gift-form-grid{
        grid-template-columns:1fr;
    }

    .gift-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .gift-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .gift-item-right{
        align-items:flex-start;
        min-width:auto;
    }

    .gifts-list-body{
        max-height:none;
    }
}


.L-MSG-alert {
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.L-MSG-alert ul {
    margin: 0;
    padding-left: 18px;
}

.L-MSG-alert--danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.L-MSG-alert--success {
    background: #ecfdf3;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.L-MSG-alert i {
    margin-right: 4px;
}

/* Layout */

.L-MSG-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.L-MSG-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.L-MSG-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.L-MSG-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Card */

.L-MSG-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.10);
}

/* Empty state */

.L-MSG-table-empty {
    padding: 18px 10px 8px;
    text-align: center;
}

.L-MSG-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.L-MSG-empty-text {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 0;
}

/* Table */

.L-MSG-table-wrapper {
    width: 100%;
}

.L-MSG-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.L-MSG-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 520px;
}

.L-MSG-table thead tr {
    background: #f9fafb;
}

.L-MSG-table th,
.L-MSG-table td {
    padding: 10px 12px;
    text-align: left;
}

.L-MSG-table th {
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.L-MSG-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

.L-MSG-table tbody tr:last-child {
    border-bottom: none;
}

.L-MSG-table tbody tr:hover {
    background: #f9fafb;
}

/* User cell */

.L-MSG-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.L-MSG-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f97316, #fb923c);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.L-MSG-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.L-MSG-user-name {
    font-weight: 600;
    color: #111827;
}

.L-MSG-user-id {
    font-size: 11px;
    color: #9ca3af;
}

/* Status */

.L-MSG-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.L-MSG-status--replied {
    background: #ecfdf3;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.L-MSG-status--waiting {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

/* Buttons */

.L-MSG-btn {
    border-radius: 999px;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all .15s ease;
}

.L-MSG-btn--secondary {
    background: #111827;
    color: #ffffff;
}

.L-MSG-btn--secondary:hover {
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
    transform: translateY(-1px);
}

.L-MSG-btn--secondary:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
}

.L-MSG-btn--sm {
    padding: 5px 11px;
    font-size: 11px;
}

/* Pagination */

.L-MSG-pagination {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

/* Table actions column */

.L-MSG-col-actions {
    text-align: right;
}

/* Responsive */

@media (max-width: 991.98px) {
    .L-MSG-card {
        border-radius: 18px;
        padding: 14px 14px 16px;
    }

    .L-MSG-table {
        min-width: 480px;
    }

    .L-MSG-title {
        font-size: 18px;
    }
}

@media (max-width: 575.98px) {
    .L-MSG-title {
        font-size: 17px;
    }

    .L-MSG-subtitle {
        font-size: 12px;
    }

    .L-MSG-table {
        min-width: 420px;
        font-size: 12px;
    }

    .L-MSG-avatar {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}
.L-CHAT-content{
    display:flex;
    justify-content:center;
    align-items:stretch;
}

.L-CHAT-card{
    width:100%;
    max-width:960px;
    margin:0 auto;
    background:#ffffff;
    border-radius:24px;
    box-shadow:0 20px 55px rgba(15,35,95,0.10);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* Header */
.L-CHAT-header{
    padding:14px 18px;
    border-bottom:1px solid rgba(226,232,240,0.9);
    background:linear-gradient(135deg,#f9fafb,#eef2ff);
}

.L-CHAT-userinfo{
    display:flex;
    align-items:center;
    gap:12px;
}

.L-CHAT-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg,#f97316,#4f46e5);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    flex-shrink:0;
}

.L-CHAT-usertext{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.L-CHAT-username{
    font-size:15px;
    font-weight:600;
    color:#0f172a;
}

.L-CHAT-userlabel{
    font-size:12px;
    color:#6b7280;
}

/* Body */
.L-CHAT-body{
    padding:14px 16px;
    background:radial-gradient(circle at top,#eef2ff 0,#f9fafb 52%,#f3f4f6 100%);
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}

.L-CHAT-list{
    flex:1 1 auto;
    overflow-y:auto;
    padding-right:4px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.L-CHAT-loadmore{
    text-align:center;
    margin-bottom:8px;
}

/* Mesaj item bazası */
.L-CHAT-item{
    display:flex;
}

.L-CHAT-item__bubble{
    max-width:78%;
    border-radius:18px;
    padding:9px 11px;
    background:#ffffff;
    box-shadow:0 8px 24px rgba(15,35,95,0.06);
    font-size:13px;
    color:#111827;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.L-CHAT-item__meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:#9ca3af;
}

.L-CHAT-item__time{
    margin-left:auto;
}

/* Göndərilən (istifadəçi) */
.L-CHAT-item--sent{
    justify-content:flex-end;
}

.L-CHAT-item--sent .L-CHAT-item__bubble{
    background:linear-gradient(135deg,#f97316,#4f46e5);
    color:#ffffff;
}

.L-CHAT-item--sent .L-CHAT-item__time{
    color:rgba(226,232,240,0.9);
}

/* Qəbul edilən (qarşı tərəf) */
.L-CHAT-item--received{
    justify-content:flex-start;
}

/* Admin mesajı */
.L-CHAT-item--admin{
    justify-content:flex-start;
}

.L-CHAT-item--admin .L-CHAT-item__bubble{
    background:#fffbeb;
    border:1px solid #fde68a;
    color:#78350f;
}

.L-CHAT-item__admin-label{
    font-weight:600;
    color:#b45309;
    font-size:11px;
    display:inline-flex;
    align-items:center;
    gap:4px;
}

/* Fayl bloku */
.L-CHAT-item__file{
    padding:8px 9px;
    border-radius:10px;
    background:#fefce8;
    border:1px solid #fde68a;
    font-size:12px;
}

.L-CHAT-item__file-title{
    margin:0 0 3px;
    font-weight:500;
}

.L-CHAT-item__file a{
    font-weight:500;
    text-decoration:underline;
    color:#713f12;
}

.L-CHAT-item__file a:hover{
    color:#111827;
}

/* Mesaj mətn */
.L-CHAT-item__text{
    white-space:pre-wrap;
    word-break:break-word;
    line-height:1.5;
}

/* Boş hal */
.L-CHAT-empty{
    text-align:center;
    font-size:13px;
    color:#6b7280;
    margin-top:18px;
}

/* Footer / form */
.L-CHAT-footer{
    border-top:1px solid rgba(226,232,240,0.9);
    padding:10px 14px;
    background:#ffffff;
}

.L-CHAT-form{
    display:flex;
    align-items:flex-end;
    gap:10px;
}

.L-CHAT-input{
    flex:1 1 auto;
    border-radius:14px;
    border:1px solid #e5e7eb;
    padding:9px 11px;
    font-size:13px;
    resize:vertical;
    min-height:60px;
    max-height:140px;
    outline:none;
    background:#f9fafb;
    transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.L-CHAT-input:focus{
    background:#ffffff;
    border-color:#4f46e5;
    box-shadow:0 0 0 1px rgba(79,70,229,0.18);
}

.L-CHAT-btn{
    border:none;
    outline:none;
    border-radius:999px;
    padding:10px 16px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
}

.L-CHAT-btn--primary{
    background:linear-gradient(135deg,#4f46e5,#f97316);
    color:#ffffff;
    box-shadow:0 12px 30px rgba(79,70,229,0.35);
    transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}

.L-CHAT-btn--primary:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 40px rgba(79,70,229,0.45);
    filter:brightness(1.03);
}

.L-CHAT-btn--primary:active{
    transform:translateY(0);
    box-shadow:0 10px 26px rgba(79,70,229,0.35);
}

/* Mobil uyğunluq */
@media (max-width:767.98px){
    .L-CHAT-card{
        border-radius:18px;
    }

    .L-CHAT-header{
        padding:12px 14px;
    }

    .L-CHAT-body{
        padding:10px 10px 8px;
    }

    .L-CHAT-footer{
        padding:9px 10px 10px;
    }

    .L-CHAT-item__bubble{
        max-width:86%;
    }

    .L-CHAT-form{
        flex-direction:column;
        align-items:stretch;
    }

    .L-CHAT-btn--primary{
        width:100%;
    }
}

.ngx-settings-layout{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Card */
.ngx-card{
    background:#ffffff;
    border-radius:24px;
    box-shadow:0 22px 55px rgba(15,35,95,0.08);
    padding:18px 20px 20px;
}



.ngx-card__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}

.ngx-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-weight:600;
    color:#0f172a;
}

.ngx-title i{
    color:#ff7a1a;
}

.ngx-chip{
    padding:4px 10px;
    border-radius:999px;
    background:#fff7ed;
    color:#c05621;
    font-size:11px;
    font-weight:600;
}

.ngx-body{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* Avatar area */
.pp-wrap{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.pp-avatar{
    position:relative;
    width:132px;
    height:132px;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(15,35,95,0.2);
    flex-shrink:0;
}

.pp-clip{
    width:100%;
    height:100%;
}

.pp-clip img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.pp-edit{
    position:absolute;
    right:10px;
    bottom:10px;
    width:34px;
    height:34px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff7b00,#ff944d);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(255,123,0,0.45);
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.pp-edit:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
    box-shadow:0 16px 40px rgba(255,123,0,0.55);
}

.pp-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* Inputs */
.ngx-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
}

.ngx-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ngx-label{
    font-size:13px;
    font-weight:500;
    color:#4b5563;
}

.ngx-input,
.ngx-select{
    width:100%;
    border-radius:12px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    padding:9px 11px;
    font-size:14px;
    color:#111827;
    outline:none;
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.ngx-input:focus,
.ngx-select:focus{
    background:#ffffff;
    border-color:#4f46e5;
    box-shadow:0 0 0 1px rgba(79,70,229,0.15);
}

.ngx-section{
    margin-top:6px;
    margin-bottom:4px;
    font-size:13px;
    font-weight:600;
    color:#6b7280;
    text-transform:uppercase;
    letter-spacing:.03em;
}

/* Buttons */
.ngx-actions{
    margin-top:6px;
    display:flex;
    justify-content:flex-end;
}

.ngx-btn{
    border:none;
    outline:none;
    border-radius:999px;
    padding:9px 18px;
    font-size:14px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
    background:#e5e7eb;
    color:#111827;
}

.ngx-btn--primary{
    background:linear-gradient(135deg,#4f46e5,#f97316);
    color:#ffffff;
    box-shadow:0 18px 45px rgba(79,70,229,0.35);
}

.ngx-btn--orange {
    background: linear-gradient(135deg, #f97316, #fa842b);
    color: #ffffff;
    box-shadow: 0 18px 45px rgb(255 87 34 / 34%);
}
.ngx-btn--orange:hover{
    box-shadow:0 22px 55px rgb(255 87 34 / 38%);
}

.ngx-btn--ghost{
    background:#ffffff;
    border:1px solid #e5e7eb;
    color:#374151;
}

.ngx-btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.02);
}

.ngx-btn--primary:hover{
    box-shadow:0 22px 55px rgba(79,70,229,0.45);
}

/* Danger style for delete avatar */
.neon-danger{
    color:#b91c1c !important;
    border-color:#fecaca !important;
}

/* Responsive */
@media (max-width:991.98px){
    .ngx-card{
        border-radius:20px;
        padding:16px 14px 18px;
    }
}

@media (max-width:767.98px){
    .ngx-grid-2{
        grid-template-columns:1fr;
    }

    .pp-wrap{
        align-items:flex-start;
    }
}

/* Account tabs wrapper */
.acc-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
}

/* Default (passiv) tab */
.acc-tabs__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    border-radius:999px;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    color:#7c2d12;               
    background:#fff7ed;          
    border:1px solid #fed7aa;    
    box-shadow:0 10px 25px rgba(248,148,64,0.10);
    transition:
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        transform .12s ease;
}

.acc-tabs__icon{
    width:24px;
    height:24px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(249,115,22,0.16);  /* #f97316 */
    color:#f97316;
    font-size:12px;
}

.acc-tabs__label{
    white-space:nowrap;
}

/* Hover */
.acc-tabs__link:hover{
    background:#ffffff;
    border-color:#fdba74;
    color:#ea580c;                      /* bir az tünd narıncı */
    box-shadow:0 16px 40px rgba(248,148,64,0.18);
    transform:translateY(-1px);
    text-decoration:none;
}

.acc-tabs__link:hover .acc-tabs__icon{
    background:rgba(249,115,22,0.22);
    color:#ea580c;
}

/* Aktiv tab */
.acc-tabs__link--active{
    background:linear-gradient(135deg,#f97316,#fb923c);  /* üst menyudakı narıncı kimi */
    color:#ffffff;
    border-color:transparent;
    box-shadow:0 18px 45px rgba(248,148,64,0.45);
}

.acc-tabs__link--active .acc-tabs__icon{
    background:rgba(255,255,255,0.22);
    color:#ffffff;
}

/* Mobil uyğunluq */
@media (max-width:575.98px){
    .acc-tabs{
        gap:8px;
        margin-bottom:14px;
        display: grid;
    }
    .acc-tabs__link{
        padding:7px 16px;
        font-size:13px;
    }
}

#avatarInputSettings {
    display: none !important;
}

/* Alert qutusunun əsas görünüşü */
.alert {
    position: relative;
    padding: 16px 24px;
    padding-right: 45px; /* "x" düyməsi üçün yer */
    background: #ffffff;
    border: 0; /* Standart çərçivəni ləğv edirik */
    border-radius: 16px; /* Saytın digər elementləri kimi yuvarlaq */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); /* Yumşaq kölgə */
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Mətni sola yasla */
    font-size: 15px;
    font-weight: 500;
    color: #374151; /* Tünd boz oxunaqlı rəng */
    overflow: hidden;
    transition: transform 0.2s ease;
}

/* Hover effekti - üzərinə gələndə bir az qalxsın */
.alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Success (Uğurlu) növü üçün rənglər */
.alert-success {
    /* Sol tərəfdə rəngli xətt (Accent) */
    border-left: 5px solid #10b981; /* Modern yaşıl rəng */
}

/* Alert daxilindəki İkon (<i>) tənzimləmələri */
.alert-success i {
    font-size: 20px;
    color: #10b981; /* İkon rəngi */
    margin-right: 12px;
    background: rgba(16, 185, 129, 0.1); /* İkon arxasında yüngül fon */
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Alert daxilindəki <p> teqinin boşluqlarını sıfırlayaq */
.alert p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Bağlama (x) düyməsi */
.alert .close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #9ca3af; /* Boz rəng */
    cursor: pointer;
    opacity: 1;
    transition: all 0.2s ease;
    text-shadow: none;
}

.alert .close:hover {
    color: #ef4444; /* Üzərinə gələndə qırmızı olsun */
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
}

/* --- Converter Card Container --- */
.converter-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04); /* Çox yumşaq kölgə */
    border: 1px solid #f3f4f6;
    margin: 0 auto 30px auto; /* Mərkəzləşdirmə */
}

/* --- Header Hissəsi --- */
.converter-header {
    text-align: center;
    margin-bottom: 35px;
    border-bottom: 1px dashed #e5e7eb;
    padding-bottom: 20px;
}

.converter-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.converter-title .points-value {
    color: #f97316; /* Narıncı vurğu */
}

.converter-rate {
    font-size: 14px;
    color: #6b7280;
    background: #fff7ed; /* Açıq narıncı fon */
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid #ffedd5;
}

/* --- Grid Layout (Inputlar yan-yana) --- */
.converter-grid {
    display: flex;
    align-items: flex-end; /* Aşağıdan hizala */
    justify-content: space-between;
    gap: 15px;
}

/* Form qrupları */
.form-group {
    flex: 1; /* Hər input bərabər yer tutsun */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.5px;
}

/* --- Input Sahələri --- */
.form-input {
    width: 100%;
    height: 56px;
    border-radius: 16px;
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 700;
    color: #374151;
    transition: all 0.2s ease;
    outline: none;
}

/* Aktiv input (yazıla bilən) */
.form-input.active-input {
    background: #ffffff;
    border-color: #fdba74;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.08);
}

.form-input.active-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
}

/* Readonly inputlar (boz rəngdə) */
.form-input[readonly] {
    color: #6b7280;
    cursor: default;
}

/* --- İkonlar (Ox və Bərabərlik) --- */
.converter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 56px; /* Input hündürlüyü ilə eyni */
    font-size: 20px;
    color: #d1d5db;
}

/* --- Footer və Düymə --- */
.converter-footer {
    margin-top: 35px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Xəbərdarlıq mətni */
.alert-text {
    color: #ef4444;
    background: #fef2f2;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    border: 1px solid #fee2e2;
}

/* Əsas Button (CTA) */
.cta-button {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    border: none;
    padding: 16px 40px;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(234, 88, 12, 0.4);
}

.cta-button i {
    font-size: 18px;
}

/* --- Mobil Uyğunluq (Responsive) --- */
@media (max-width: 768px) {
    .converter-grid {
        flex-direction: column; /* Mobildə alt-alta düzülsün */
        align-items: center;
    }
    
    .form-group {
        width: 100%;
    }
    
    .converter-icon {
        height: 30px;
        transform: rotate(90deg); /* Ox işarəsini aşağı çevirir */
        margin: 5px 0;
    }
    
    /* Bərabərlik işarəsini fırlatmayaq, sadəcə gizlədə və ya saxlaya bilərik */
    .converter-icon .fa-equals {
        transform: rotate(-90deg); 
    }
}
/* --- Ümumi Layout (Wrapper) --- */
.oy-support__wrap {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 20px;
}

/* --- Sol Tərəf: Bilet Siyahısı (Sidebar) --- */
.oy-support__list {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    overflow: hidden;
}

.oy-support__list-head {
    padding: 16px 20px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.oy-tickets {
    max-height: 600px;
    overflow-y: auto;
}

/* Tək Bilet Kartı */
.oy-ticket {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #ffffff;
    cursor: pointer;
}

.oy-ticket:hover {
    background: #fff7ed; /* Açıq narıncı hover */
}

/* Aktiv Bilet (Seçili olan) */
.oy-ticket.is-active {
    background: #fff7ed;
    border-left: 3px solid #f97316; /* Aktiv olduğunu göstərən xətt */
}

.oy-ticket__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.oy-ticket__meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

.oy-ticket__meta span:last-child {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
}

.oy-ticket__excerpt {
    font-size: 13px;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* --- Sağ Tərəf: Chat Paneli --- */
.oy-support__chat {
    flex: 1;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 600px;
}

/* Chat Başlığı */
.oy-chat__top {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* Məlumat Çipləri (Tags) */
.oy-chip {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    padding: 4px 12px;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 99px;
    border: 1px solid #e5e7eb;
}

.oy-chip b {
    color: #f97316;
    margin-left: 4px;
}

/* Chat Gövdəsi (Mesajlar sahəsi) */
.oy-chat__body {
    flex: 1;
    padding: 24px;
    background: #f9fafb; /* Mesajlar sahəsi biraz fərqlənsin */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Mesaj Bloku */
.oy-msg {
    display: flex;
    gap: 12px;
    max-width: 85%;
}

.oy-msg__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.oy-msg__bubble {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 16px;
    border-top-left-radius: 2px; /* Sol tərəf künclü olsun */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #e5e7eb;
}

.oy-msg__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.oy-msg__name {
    font-weight: 700;
    color: #f97316; /* Ad rəngi */
}

.oy-msg__time {
    color: #9ca3af;
}

.oy-msg__content {
    color: #374151;
    line-height: 1.5;
    font-size: 14px;
}

/* --- Mesaj Yazma Sahəsi (Composer) --- */
.support_send_form {
    padding: 20px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.oy-chat__composer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oy-input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 12px 16px;
    resize: none;
    min-height: 80px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.oy-input:focus {
    border-color: #f97316;
}

.oy-composer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.oy-file {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
}

/* Fayl inputunu sadələşdirək */
.oy-file input[type="file"] {
    font-size: 12px;
    padding: 4px;
}

/* Göndər Düyməsi */
.oy-btn--send {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
    transition: transform 0.1s;
}

.oy-btn--send:hover {
    transform: translateY(-1px);
}

/* --- Boş Səhifə (Empty State) --- */
.oy-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
}

.oy-support__btn {
    display: inline-block;
    margin-top: 15px;
    background: #f97316;
    color: #fff;
    padding: 10px 20px;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 500;
}

/* --- Mobil Uyğunluq --- */
@media (max-width: 768px) {
    .oy-support__wrap {
        flex-direction: column;
    }
    .oy-support__list {
        width: 100%;
        max-height: 300px; /* Mobildə siyahını qısa tuturuq */
    }
    .oy-support__chat {
        width: 100%;
        min-height: 400px;
    }
}

/* --- Əsas Kart (Konteyner) --- */
.oy-card2 {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid #f3f4f6;
    padding: 40px;
    margin: 0 auto;
}

/* --- Başlıq Hissəsi --- */
.oy-card__head {
    border-bottom: 1px dashed #e5e7eb;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.oy-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oy-card__title i {
    color: #f97316; /* Narıncı ikon */
    font-size: 24px;
}

/* --- Form Sahələri --- */
.oy-field {
    margin-bottom: 24px;
}

/* Etiketlər (Labels) */
.oy-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.oy-hint {
    font-weight: 400;
    color: #9ca3af;
    font-size: 13px;
    margin-left: 5px;
}

/* Input və Textarea Ümumi Stili */
.oy-input, 
.oy-textarea {
    width: 100%;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 20px;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
    outline: none;
    font-family: inherit;
    box-sizing: border-box; /* Daşmanın qarşısını alır */
}

.oy-input:focus, 
.oy-textarea:focus {
    background: #ffffff;
    border-color: #fdba74;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* Textarea xüsusi ölçüləri */
.oy-textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

/* Simvol Sayğacı */
.oy-counter {
    text-align: right;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
    font-weight: 500;
}

/* --- Fayl Yükləmə Sahəsi --- */
.oy-file {
    margin-bottom: 30px;
}

.oy-file__drop {
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    padding: 20px;
    background: #f9fafb;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.oy-file__drop:hover {
    border-color: #f97316;
    background: #fff7ed;
}

.oy-file__left {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

/* Fayl Seç Düyməsi (Custom) */
.oy-file__btn {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Standart input-u gizlədib düymənin üzərinə yayırıq */
.oy-file__btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.oy-file__btn:hover {
    color: #f97316;
    border-color: #fdba74;
}

.oy-file__name {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

/* --- Submit Button --- */
.oy-actions {
    text-align: right; /* Düyməni sağa çək */
    border-top: 1px solid #f3f4f6;
    padding-top: 20px;
}

.oy-btn-submit {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    border: none;
    padding: 16px 40px;
    border-radius: 99px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.oy-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(234, 88, 12, 0.35);
}

/* --- Mobil Uyğunluq --- */
@media (max-width: 768px) {
    .oy-card2 {
        padding: 24px;
    }
    .oy-file__left {
        flex-direction: column;
        align-items: flex-start;
    }
    .oy-actions {
        text-align: center; /* Mobildə mərkəzdə olsun */
    }
    .oy-btn-submit {
        width: 100%;
    }
}

/* --- Əsas Konteyner (Card) --- */
.settings.cardek {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    padding: 30px;
    border: 1px solid #f3f4f6;
    margin-top: 20px;
}

/* --- Naviqasiya Tabları (Pills Style) --- */
.nav-tabs {
    border-bottom: none; /* Alt xətti ləğv et */
    gap: 10px;
    margin-bottom: 25px;
    background: #f9fafb;
    padding: 6px;
    border-radius: 16px;
    display: inline-flex; /* İçindəkilər qədər yer tutsun */
    flex-wrap: wrap;
}

.nav-tabs .nav-item {
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 12px;
    color: #4b5563;
    font-weight: 600;
    padding: 10px 24px;
    transition: all 0.2s ease;
    background: transparent;
}

.nav-tabs .nav-link:hover {
    color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

/* Aktiv Tab Dizaynı */
.nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* --- Input Sahələri --- */
.field__label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Tooltip ikonu */
.field__label .icon-info {
    fill: #9ca3af;
    width: 16px;
    height: 16px;
}

.odeme-input, 
.field__input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s;
    outline: none;
}

.odeme-input:focus, 
.field__input:focus {
    border-color: #fdba74;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* --- Alert (Xəbərdarlıq) Qutuları --- */
.alert {
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border-left: 5px solid #10b981;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 5px solid #f59e0b;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 5px solid #3b82f6;
}

/* --- Düymələr --- */
.odeme-btn, 
.settings__button,
.btn-primary {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border: none !important;
    color: #fff !important;
    padding: 14px 30px;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.25);
}

.odeme-btn:hover, 
.settings__button:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.35);
    color: #fff;
}

/* --- FilePond (Fayl Yükləmə) Customization --- */
/* Standart qara/boz dizaynı ağ/narıncıya çeviririk */

.filepond--root {
    font-family: inherit;
    margin-bottom: 0;
}

.filepond--panel-root {
    background-color: #f9fafb; /* Açıq boz fon */
    border: 2px dashed #d1d5db; /* Qırıq xətlər */
    border-radius: 16px;
}

.filepond--drop-label {
    color: #6b7280;
    font-weight: 500;
}

.filepond--label-action {
    text-decoration-color: #f97316;
    color: #f97316; /* "Browse" yazısı narıncı */
}

/* Fayl yüklənəndə görünən panel */
.filepond--item-panel {
    background-color: #f97316; 
}

/* FilePond yükləmə dairəsi (progress) */
.filepond--drip-blob {
    background-color: #fdba74;
}

/* Mobil uyğunluq */
@media (max-width: 768px) {
    .nav-tabs {
        display: flex;
        flex-direction: column; /* Mobildə tablar alt-alta */
        width: 100%;
    }
    .nav-tabs .nav-link {
        text-align: center;
        width: 100%;
    }
}

.settings__wrapper .nav-tabs {
    list-style: none !important; /* Nöqtələri ləğv edir */
    padding: 0 !important;       /* Sol boşluğu sıfırlayır */
    margin: 0 0 30px 0;          /* Aşağıdan boşluq */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;                   /* Düymələr arası məsafə */
    border: none;                /* Standart xətti silirik */
}

/* Tab Linkləri (Passiv) */
.settings__wrapper .nav-tabs .nav-link {
    border: 1px solid #e5e7eb;   /* Zərif çərçivə */
    background: #ffffff;
    color: #4b5563;
    border-radius: 50px;         /* Tam yuvarlaq (Pill) */
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover effekti */
.settings__wrapper .nav-tabs .nav-link:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #f97316;
}

/* Aktiv Tab (Narıncı) */
.settings__wrapper .nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* --- 2. Form Sahələri (Səliqəli görünüş) --- */
.settings__fieldset {
    padding: 10px 5px;
}

/* Input qutularının düzəlişi */
.field__wrap, 
.odeme-input-wrap {
    width: 100%;
    position: relative;
    margin-bottom: 5px;
}

/* Inputların özü */
.field__input, 
.odeme-input {
    width: 100%;              /* Tam genişlik tutsun */
    height: 52px;             /* Hündürlüyü artırdıq */
    padding: 0 20px;
    background: #f9fafb;      /* Açıq boz fon */
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    font-size: 15px;
    color: #1f2937;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;   /* Daşmanın qarşısını alır */
}

/* Input fokus olanda */
.field__input:focus, 
.odeme-input:focus {
    background: #ffffff;
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* Etiketlər (Label) */
.field__label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 3. Alert (Xəbərdarlıq) Qutuları --- */
.alert {
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; /* Mətni mərkəzləşdirir */
}

.alert-success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-warning {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info {
    background-color: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Uğurlu təsdiq siyahısı (Yaşıl tiklər) */
.alert ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    display: inline-block;
    text-align: left;
}

.alert ul li {
    margin-bottom: 5px;
    font-weight: 600;
}

.alert ul li i {
    color: #10b981;
    margin-left: 5px;
}


/*button[type="submit"], */
/*.odeme-btn, */
/*.settings__button {*/
/*    background: linear-gradient(135deg, #f97316, #ea580c);*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 14px;*/
/*    border-radius: 12px;*/
/*    font-weight: 600;*/
/*    font-size: 16px;*/
/*    cursor: pointer;*/
/*    transition: transform 0.2s;*/
/*}*/

/*button[type="submit"]:hover {*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.2);*/
/*}*/


input[type="file"] {
    background: #fff;
    padding: 10px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
}

/* --- Mobil Uyğunluq --- */
@media (min-width: 768px) {
   
    .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -10px;
        margin-left: -10px;
    }
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-right: 10px;
        padding-left: 10px;
    }
}






.product-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 32px;
}

.product-page__top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-page__col {
    width: 100%;
    min-width: 0;
}



.product-page__bottom {
    margin-top: 24px;
}

@media (min-width: 992px) {
    .product-page__top {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
        gap: 24px;
        align-items: flex-start;
    }

    
}



.pd-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.pd-gallery {
    justify-content: center;
    align-items: center;
}

.pd-gallery__inner {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.9), #f3f4f6);
}

.pd-gallery__img {
    width: 100%;
    display: block;
    border-radius: 14px;
}

.pd-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #111827;
}

.pd-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.pd-rating__avg {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.pd-rating__stars {
    color: #f59e0b;
    display: flex;
    gap: 3px;
    font-size: 16px;
}

.pd-rating__info {
    color: #6b7280;
}

.pd-fe {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.pd-fe__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pd-fe__icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff8a00, #ff5b00);
    color: #fff;
    flex-shrink: 0;
    font-size: 16px;
}

.pd-fe__txt small {
    display: block;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 2px;
}

.pd-fe__txt strong {
    font-size: 13px;
    color: #111827;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pd-sep {
    height: 1px;
    border: 0;
    margin: 12px 0;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.6), transparent);
}

/* KATEQORIYA MƏHSULLARI */

.pd-rel__headline {
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 8px;
}

.pd-rel-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 1200px) {
    .pd-rel-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pd-rel-item {
    width: 100%;
}

.pd-rel {
    display: block;
    border-radius: 12px;
    background: #f9fafb;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    border: 1px solid rgba(15, 23, 42, 0.04);
}

.pd-rel__in {
    padding: 8px 10px;
}

.pd-rel__media {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-rel__img-wrap {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.pd-rel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-rel__title {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-rel:hover {
    transform: translateY(-2px);
    background: #eef2ff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

/* OFFER KART – GÜNDÜZ */

.offer-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 18px 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.offer-card__label {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ffffff;
    background: linear-gradient(90deg, #ff8a00, #ff3d81);
    box-shadow: 0 0 12px rgba(248, 113, 22, 0.55);
}

.offer-seller {
    display: flex;
    align-items: center;
    gap: 10px;
}

.offer-seller__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4ff;
    flex-shrink: 0;
}

.offer-seller__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offer-seller__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.offer-seller__name {
    font-size: 13px;
    color: #111827;
}

.offer-seller__score {
    font-size: 12px;
    color: #6b7280;
}

.offer-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.offer-price__current {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
}

.offer-price__old {
    font-size: 13px;
    color: #9ca3af;
}

.offer-price__old del {
    opacity: .8;
}

.offer-price__stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.offer-price__stock i {
    font-size: 16px;
}

.offer-card__points {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f59e0b;
}

.offer-card__points i {
    font-size: 14px;
}

/* ƏDƏD SEÇİMİ */

.pl-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 4px;
    margin: 4px 0 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.pl-qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    outline: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, #ff8a00, #ff3d81);
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.55);
    transition: transform .12s ease, box-shadow .12s ease;
}

.pl-qty-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.75);
}

.pl-qty-input {
    flex: 1;
    text-align: center;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
}

/* DÜYMƏLƏR */



.pl-btn i {
    font-size: 15px;
}



.pl-btn--disabled {
    background: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.offer-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* TABS – GÜNDÜZ */

.product-page__tabs {
    margin-top: 24px;
}

.gmx-tabs {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.gmx-tabs__header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gmx-tab {
    position: relative;
    border-radius: 999px;
    border: 0;
    outline: 0;
    padding: 8px 16px;
    font-size: 13px;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.gmx-tab i {
    font-size: 14px;
}

.gmx-tab.is-active {
    background: linear-gradient(90deg, #ff8a00, #ff3d81);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(248, 113, 22, 0.55);
    transform: translateY(-1px);
}

.gmx-tabs__panels {
    margin-top: 16px;
}

.gmx-panel {
    display: none;
    padding-top: 8px;
}

.gmx-panel.is-active {
    display: block;
}

.gmx-info {
    padding: 4px 2px 0;
}

.gmx-info__content {
    font-size: 14px;
    line-height: 1.6;
    color: #111827;
}

.gmx-info__faq-title {
    margin: 18px 0 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #111827;
}

/* FAQ */

.gmx-faq {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #f9fafb;
}

.gmx-faq__item + .gmx-faq__item {
    border-top: 1px solid rgba(209, 213, 219, 0.9);
}

.gmx-faq__head {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    background: transparent;
    border: 0;
    outline: 0;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.gmx-faq__q {
    text-align: left;
}

.gmx-faq__body {
    padding: 0 14px 10px;
    font-size: 13px;
    color: #4b5563;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}

.gmx-share {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.gmx-share__btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 1px solid rgba(148, 163, 184, 0.6);
}

/* REYTİNQLƏR / ŞƏRHLƏR */

.gmx-reviews {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.gmx-reviews__grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.gmx-rating {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gmx-rating__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
}

.gmx-rating__label {
    width: 44px;
}

.gmx-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.gmx-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a00, #ff3d81);
}

.gmx-rating__pct {
    width: 40px;
    text-align: right;
}

/* Dairəvi orta xal */

.gmx-score {
    position: relative;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
}

.gmx-score__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gmx-score__track {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 2.5;
}

.gmx-score__bar {
    fill: none;
    stroke: url(#gmx-gradient);
    stroke-width: 3;
    stroke-linecap: round;
}

.gmx-score__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.gmx-score__num {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
}

.gmx-score__label {
    font-size: 12px;
    color: #6b7280;
}

/* EDITOR + REPLY FORM BUTTONLARI SƏLİQƏLİ */

.gmx-editor {
    border-radius: 16px;
    background: #f9fafb;
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(209, 213, 219, 0.9);
}

.gmx-editor__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #111827;
}

.gmx-tip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gmx-editor__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gmx-textarea {
    min-height: 90px;
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    background: #ffffff;
    padding: 10px 12px;
    font-size: 13px;
    color: #111827;
    resize: vertical;
}

.gmx-editor__actions,
.gmx-replyform__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Düymə stil – SEND / CANCEL səliqəli */

.gmx-btn {
    border-radius: 999px;
    border: 1px solid transparent;
    outline: 0;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
}

.gmx-btn--primary {
    background: linear-gradient(90deg, #ff8a00, #ff3d81);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(248, 113, 22, 0.4);
    border-color: transparent;
}

.gmx-btn--ghost {
    background: #f3f4f6;
    color: #374151;
    border-color: rgba(209, 213, 219, 0.9);
}

.gmx-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
        max-height: 35px;
}

.gmx-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ALERT */

.gmx-alert {
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
}

.gmx-alert--error {
    background: #fee2e2;
    color: #b91c1c;
}

.gmx-alert--ok {
    background: #dcfce7;
    color: #166534;
}

.gmx-alert--warn {
    background: #fffbeb;
    color: #b45309;
}

/* ŞƏRHLƏR */

.gmx-comment {
    margin-top: 14px;
    border-radius: 16px;
    background: #ffffff;
    padding: 12px 14px;
    border: 1px solid rgba(209, 213, 219, 0.9);
}

.gmx-comment__head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.gmx-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8a00, #ff3d81);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.gmx-comment__meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gmx-stars {
    font-size: 12px;
    color: #facc15;
}

.gmx-star--on {
    color: #facc15;
}

.gmx-date {
    font-size: 11px;
    color: #9ca3af;
}

.gmx-author {
    font-size: 13px;
    color: #111827;
    font-weight: 500;
}

.gmx-comment__ops {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: auto;
}

@media (min-width: 768px) {
    .gmx-comment__ops {
        flex-direction: row;
    }
}

.gmx-comment__body {
    margin-top: 8px;
}

.gmx-comment__text {
    font-size: 13px;
    color: #374151;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.gmx-comment__text i {
    margin-top: 2px;
    color: #ff8a00;
}

.gmx-chip {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #111827;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CAVABLAR */

.gmx-replies {
    margin: 6px 0 0 46px;
    display: none;
}

.gmx-reply {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.gmx-reply__content {
    flex: 1;
    background: #f9fafb;
    border-radius: 10px;
    padding: 8px 10px;
}

.gmx-reply__author {
    font-size: 12px;
    margin: 0 0 4px;
    color: #111827;
}

.gmx-badge {
    margin-left: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    background: linear-gradient(90deg, #ff8a00, #ff3d81);
    color: #fff;
}

.gmx-muted {
    margin-left: 6px;
    color: #9ca3af;
}

.gmx-reply__text {
    font-size: 13px;
    color: #374151;
}

/* Cavab formu */

.gmx-replyform {
    margin: 8px 0 0 46px;
    display: none;
}

.gmx-replyform__wrap {
    display: flex;
    gap: 8px;
}

.gmx-replyform__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* OXŞAR MƏHSULLAR – ŞƏKİL TAM GÖRÜNSÜN */

.gmx-related {
    margin-top: 24px;
    padding: 16px 14px 4px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(209, 213, 219, 0.9);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.gmx-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gmx-card__title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.gmx-related__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 230px);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.gmx-relcard {
    background: #f9fafb;
    border-radius: 16px;
    border: 1px solid rgba(209, 213, 219, 0.9);
    overflow: hidden;
    min-height: 100%;
}

.gmx-relcard__media {
    display: block;
    position: relative;
}

.gmx-relcard__img {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
}

.gmx-relcard__count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.gmx-relcard__body {
    padding: 8px 10px 10px;
}

.gmx-relcard__title {
    font-size: 13px;
    color: #111827;
    text-decoration: none;
}

/* MOBİL */

.gmx-related--sticky-mobile {
    position: relative;
}

@media (max-width: 767px) {
    .product-page {
        padding-top: 18px;
    }

    .offer-card {
        margin-top: 4px;
    }

    .gmx-reviews__grid {
        flex-direction: column;
    }

    .gmx-score {
        margin-top: 6px;
    }
}

/* Pagination Konteyneri */
.pagination {
    display: flex;
    list-style: none !important; /* Nöqtələri gizlədir */
    padding: 0;
    margin: 20px 0;
    justify-content: center; /* Mərkəzə hizalayır */
    gap: 8px; /* Düymələr arası məsafə */
}

/* Səhifə Elementləri */
.page-item {
    margin: 0;
}

/* Linklərin və ya Spanların ümumi stili */
.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Açıq boz çərçivə */
    border-radius: 8px; /* Yuvarlaq künclər */
    color: #374151; /* Tünd boz yazı */
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* Hover Effekti */
.page-link:hover {
    background-color: #fff7ed; /* Açıq narıncı fon */
    border-color: #fdba74;
    color: #f97316; /* Narıncı yazı */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.1);
}

/* Aktiv Səhifə */
.page-item.active .page-link {
    background: linear-gradient(135deg, #f97316, #ea580c); /* Narıncı gradient */
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    cursor: default;
    pointer-events: none; /* Aktiv səhifəyə kliklənməsin */
}

/* Deaktiv (Disabled) Düymələr (Məsələn, ilk səhifədə "Geri" düyməsi) */
.page-item.disabled .page-link {
    background-color: #f3f4f6;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Ox işarələrinin ölçüsünü biraz böyüdək */
.page-link[aria-label="« Geri"], 
.page-link[aria-label="İleri »"] {
    font-size: 18px;
    line-height: 1;
    padding-bottom: 4px; /* Simvolu mərkəzləmək üçün */
}

/* Mobil Uyğunluq */
@media (max-width: 576px) {
    .page-link {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 10px;
    }
}

/* Slider Konteyner */
.gmx-slider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    /* iOS Fix */
    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Sliderin Hündürlüyü - Responsive */
.gmx-hero-slider {
    width: 100%;
    height: 450px; /* PC üçün */
}

/* Slide Dizaynı */
.gmx-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    /* iOS Fix */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Şəkil */
.gmx-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: inherit;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* iOS Fix */
    -webkit-transform-style: preserve-3d;
}

/* Mobil üçün xüsusi qayda - Şəkli tam görmək üçün */
@media (max-width: 768px) {
    .gmx-hero-slider {
        height: 220px; /* Mobildə konkret hündürlük (aspect-ratio əvəzinə) */
    }
    
    /* iPhone-da şəklin düzgün oturması üçün */
    .gmx-slide-bg {
        height: 100%; 
        object-fit: cover;
    }
}

/* Mətn və Məzmun */
.gmx-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

/* Aktiv Slide Effektləri */
.swiper-slide-active .gmx-slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* Naviqasiya Düymələri */
.gmx-nav-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* iOS Fix */
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s;
}
.gmx-nav-btn:after { font-size: 18px !important; font-weight: bold; }
.gmx-nav-btn:hover { background: #f97316; color: #fff; }

/* Pagination */
.gmx-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.5);
    opacity: 1;
    transition: all 0.3s;
}
.gmx-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: #f97316; 
}


.v4new-mobile-banners-wrap {
    display: none;
    margin-top: 15px; 
}


.v4new-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
}


.v4new-mobile-item {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    
    aspect-ratio: 16 / 9; 
}

.v4new-mobile-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    border-radius: 12px;
}


@media (max-width: 992px) {
    .v4new-mobile-banners-wrap {
        display: block; 
    }
}


.v4new-slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; 
    max-height: 900px; 
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    filter: blur(5px) brightness(0.9) saturate(1.5); 
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
    transition: background-image 1s ease-in-out;
    
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
}


.v4new-story-bar, 
.v4new-slider-area,
.header-area { 
    position: relative;
    z-index: 2;
}

.gamex-qty-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.gamex-qty-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

/* --- GLOBAL SEARCH MODAL --- */
.gs-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999; /* Hər şeyin üstündə */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 60px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.gs-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.gs-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85); /* Ağ şəffaf */
    backdrop-filter: blur(8px);
}

.gs-modal__content {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
    transform: translateY(-20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Ekranın 80%-i */
}

.gs-modal.is-open .gs-modal__content {
    transform: translateY(0);
}

/* Header */
.gs-modal__header {
    padding: 15px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    gap: 10px;
    align-items: center;
}

.gs-search-box {
    flex: 1;
    position: relative;
}

.gs-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.gs-input {
    width: 100%;
    height: 50px;
    padding-left: 45px;
    padding-right: 40px;
    border: 2px solid #f3f4f6;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s;
}

.gs-input:focus {
    background: #fff;
    border-color: #f97316; /* Narıncı */
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

.gs-close-btn {
    width: 50px;
    height: 50px;
    border: none;
    background: #f3f4f6;
    border-radius: 12px;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.gs-close-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Spinner */
.gs-spinner {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 20px;
    height: 20px;
    border: 2px solid #f97316;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin { to { transform: rotate(360deg); } }

/* Body */
.gs-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.gs-placeholder {
    padding: 50px 20px;
    text-align: center;
    color: #9ca3af;
}
.gs-placeholder i { font-size: 32px; margin-bottom: 10px; display: block; opacity: 0.5; }

/* --- NƏTİCƏ ELEMENTLƏRİ (Search Blade üçün) --- */
.gs-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    transition: background 0.2s;
    gap: 15px;
}

.gs-item:hover {
    background: #fff7ed;
}

.gs-item-img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}
.gs-item-img img { width: 100%; height: 100%; object-fit: cover; }

.gs-item-info { flex: 1; overflow: hidden; }
.gs-item-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-item-cat { font-size: 12px; color: #9ca3af; }

.gs-item-price-box { text-align: right; }
.gs-current-price { display: block; font-size: 14px; font-weight: 700; color: #f97316; }
.gs-old-price { display: block; font-size: 11px; color: #9ca3af; text-decoration: line-through; }

.gs-no-result { padding: 30px; text-align: center; color: #6b7280; }
.gs-no-result i { font-size: 24px; display: block; margin-bottom: 10px; opacity: 0.5; }


        .blog-hero {
            position: relative;
            margin-bottom: 32px;
            border-radius: 24px;
            overflow: hidden;
            padding: 20px;
            background: radial-gradient(circle at 0 0, rgba(59,130,246,0.15) 0, transparent 55%),
                        radial-gradient(circle at 100% 100%, rgba(236,72,153,0.18) 0, transparent 55%),
                        #ffffff;
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr);
            gap: 20px;
        }

        .blog-hero::before,
        .blog-hero::after {
            content: "";
            position: absolute;
            inset: -40%;
            pointer-events: none;
            opacity: 0.35;
            mix-blend-mode: screen;
            background:
                radial-gradient(circle at 10% 20%, rgba(59,130,246,0.5) 0, transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(236,72,153,0.55) 0, transparent 55%);
            z-index: 0;
        }

        .blog-hero-inner {
            position: relative;
            z-index: 1;
            display: contents;
        }

        .blog-hero-main {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            background: #020617;
            min-height: 260px;
        }

        .blog-hero-main-media {
            position: absolute;
            inset: 0;
        }

        .blog-hero-main-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.03);
            transition: transform 0.75s ease;
        }

        .blog-hero-main::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(15,23,42,0.2) 0, rgba(15,23,42,0.95) 65%);
            z-index: 1;
        }

        .blog-hero-main-content {
            position: relative;
            z-index: 2;
            height: 100%;
            padding: 24px 26px 26px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 14px;
            color: #e5e7eb;
        }

        .blog-hero-main:hover .blog-hero-main-media img {
            transform: scale(1.08);
        }

        .blog-hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 999px;
            background: rgba(15,23,42,0.7);
            border: 1px solid rgba(148,163,184,0.4);
            font-size: 12px;
            letter-spacing: .02em;
            text-transform: uppercase;
            color: #e5e7eb;
        }

        .blog-hero-pill svg {
            width: 14px;
            height: 14px;
        }

        .blog-hero-title {
            font-size: 26px;
            line-height: 1.25;
            font-weight: 700;
            color: #f9fafb;
        }

        .blog-hero-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            color: #cbd5f5;
        }

        .blog-hero-meta svg {
            width: 14px;
            height: 14px;
        }

        .blog-hero-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 6px;
            padding: 10px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, #f97316, #ec4899);
            color: #ffffff;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 16px 40px rgba(236,72,153,0.35);
            transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
        }

        .blog-hero-btn svg {
            width: 16px;
            height: 16px;
        }

        .blog-hero-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.05);
            box-shadow: 0 20px 50px rgba(236,72,153,0.55);
        }

        .blog-hero-side {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .blog-hero-side-item {
            display: grid;
            grid-template-columns: 110px minmax(0, 1fr);
            gap: 12px;
            background: rgba(255,255,255,0.9);
            border-radius: 16px;
            padding: 10px;
            box-shadow: 0 12px 30px rgba(15,23,42,0.08);
            border: 1px solid rgba(148,163,184,0.35);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
        }

        .blog-hero-side-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 40px rgba(15,23,42,0.12);
            border-color: rgba(59,130,246,0.4);
            background: #ffffff;
        }

        .blog-hero-side-media {
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }

        .blog-hero-side-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.02);
            transition: transform .6s ease;
        }

        .blog-hero-side-item:hover .blog-hero-side-media img {
            transform: scale(1.08);
        }

        .blog-hero-side-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 6px;
        }

        .blog-hero-side-title {
            font-size: 14px;
            font-weight: 600;
            color: #0f172a;
            line-height: 1.3;
        }

        .blog-hero-side-title a {
            color: inherit;
            text-decoration: none;
        }

        .blog-hero-side-title a:hover {
            color: #1d4ed8;
        }

        .blog-hero-side-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #6b7280;
        }

        .blog-hero-side-meta svg {
            width: 13px;
            height: 13px;
        }

        .blog-hero-main-link {
            text-decoration: none;
            color: inherit;
            display: block;
            height: 100%;
        }

        .blog-slider {
            position: relative;
            margin-bottom: 32px;
            border-radius: 24px;
            overflow: hidden;
            padding: 20px;
            background: radial-gradient(circle at 0 0, rgba(59,130,246,0.15) 0, transparent 55%),
                        radial-gradient(circle at 100% 100%, rgba(236,72,153,0.18) 0, transparent 55%),
                        #ffffff;
        }

        .blog-slider-window {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            background: #020617;
        }

        .blog-slider-track {
            display: flex;
            transition: transform .6s ease;
            will-change: transform;
        }

        .blog-slider-slide {
            flex: 0 0 100%;
            position: relative;
            min-height: 260px;
        }

        .blog-slider-img {
            position: absolute;
            inset: 0;
        }

        .blog-slider-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.03);
            transition: transform .75s ease;
        }

        .blog-slider-slide::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(15,23,42,0.15) 0, rgba(15,23,42,0.96) 68%);
            z-index: 1;
        }

        .blog-slider-content {
            position: relative;
            z-index: 2;
            padding: 22px 24px 26px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 10px;
            height: 100%;
            color: #e5e7eb;
        }

        .blog-slider-cat {
            display: inline-flex;
            align-items: center;
            padding: 5px 11px;
            border-radius: 999px;
            background: rgba(15,23,42,0.7);
            border: 1px solid rgba(148,163,184,0.4);
            font-size: 11px;
            color: #e5e7eb;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .blog-slider-cat span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 140px;
        }

        .blog-slider-title h2 {
            font-size: 22px;
            line-height: 1.25;
            font-weight: 700;
            color: #f9fafb;
        }

        .blog-slider-title {
            text-decoration: none;
        }

        .blog-slider-title:hover h2 {
            color: #bfdbfe;
        }

        .blog-slider-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: #cbd5f5;
        }

        .blog-slider-meta svg {
            width: 14px;
            height: 14px;
        }

        .blog-slider-dots {
            margin-top: 14px;
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        .blog-slider-dot {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(148,163,184,0.55);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: background .18s ease, transform .18s ease, width .18s ease;
        }

        .blog-slider-dot.is-active {
            width: 20px;
            background: linear-gradient(135deg, #f97316, #ec4899);
            transform: translateY(-1px);
        }

        .mzd-row {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            align-items: flex-start;
        }

        .mzd-col {
            flex: 1 1 0;
            min-width: 0;
        }

        .mzd-block {
            background: #ffffff;
            border-radius: 22px;
            padding: 22px 22px 20px;
            box-shadow: 0 18px 45px rgba(15,23,42,0.07);
            border: 1px solid rgba(226,232,240,0.9);
        }

        .mzd-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .mzd-head-title {
            font-size: 20px;
            font-weight: 700;
            color: #020617;
        }

        .mzd-viewer {
            display: flex;
            gap: 8px;
        }

        .mzd-btn {
            border: none;
            outline: none;
            background: #f3f4f6;
            color: #4b5563;
            border-radius: 999px;
            padding: 7px 10px;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
        }

        .mzd-btn i {
            font-size: 15px;
        }

        .mzd-view-btn.mzd-active {
            background: linear-gradient(135deg, #f97316, #ec4899);
            color: #ffffff;
            box-shadow: 0 14px 35px rgba(236,72,153,0.4);
            transform: translateY(-1px);
        }

        .mzd-list {
            display: grid;
            gap: 16px;
        }

        .mzd-summary {
            display: grid;
            grid-template-columns: 168px minmax(0, 1fr);
            gap: 16px;
            border-radius: 18px;
            padding: 12px;
            background: #f9fafb;
            border: 1px solid rgba(226,232,240,0.9);
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
        }

        .mzd-summary:hover {
            transform: translateY(-2px);
            background: #ffffff;
            border-color: rgba(59,130,246,0.35);
            box-shadow: 0 16px 35px rgba(15,23,42,0.08);
        }

        .mzd-summary__preview {
            border-radius: 14px;
            overflow: hidden;
            position: relative;
        }

        .mzd-summary__preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.03);
            transition: transform .6s ease;
        }

        .mzd-summary:hover .mzd-summary__preview img {
            transform: scale(1.08);
        }

        .mzd-summary__content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 8px;
        }

        .mzd-summary__title a {
            font-size: 16px;
            font-weight: 600;
            color: #0f172a;
            text-decoration: none;
        }

        .mzd-summary__title a:hover {
            color: #1d4ed8;
        }

        .mzd-summary__desc p {
            margin: 0;
            font-size: 14px;
            color: #4b5563;
            line-height: 1.5;
        }

        .mzd-summary__icons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-size: 13px;
            color: #6b7280;
        }

        .mzd-summary__icons svg {
            width: 14px;
            height: 14px;
        }

        .mzd-summary__view i {
            margin-right: 4px;
        }

        .mzd-summary__cta .mzd-btn {
            padding: 8px 10px;
            box-shadow: none;
            background: #e5e7eb;
        }

        .mzd-summary__cta .mzd-btn svg {
            width: 16px;
            height: 16px;
        }

        .mzd-summary__cta .mzd-btn:hover {
            background: linear-gradient(135deg, #f97316, #ec4899);
            color: #ffffff;
            box-shadow: 0 10px 26px rgba(236,72,153,0.35);
            transform: translateY(-1px);
        }

        .mzd-media {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px dashed rgba(209,213,219,0.9);
        }

        .mzd-media__btns {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .mzd-media__button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 13px;
            text-decoration: none;
            background: #f3f4f6;
            color: #374151;
            transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
        }

        .mzd-media__button i {
            font-size: 15px;
        }

        .mzd-media__button:hover {
            background: linear-gradient(135deg, #f97316, #ec4899);
            color: #ffffff;
            box-shadow: 0 12px 28px rgba(236,72,153,0.35);
            transform: translateY(-1px);
        }

        @media (max-width: 1024px) {
            .blog-hero {
                grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr);
            }
        }

        @media (max-width: 900px) {
            .blog-hero {
                display: flex;
                flex-direction: column;
                padding: 16px;
            }

            .blog-hero-side-item {
                grid-template-columns: 110px minmax(0, 1fr);
            }

            .mzd-summary {
                grid-template-columns: 140px minmax(0, 1fr);
            }
        }

        @media (max-width: 640px) {
            .blog-hero {
                padding: 14px;
                margin-left: -8px;
                margin-right: -8px;
                border-radius: 0;
            }

            .blog-hero-main-content {
                padding: 18px 16px 18px;
            }

            .blog-hero-title {
                font-size: 20px;
            }

            .blog-hero-side {
                flex-direction: row;
                overflow-x: auto;
                padding-bottom: 4px;
                margin-bottom: -4px;
                scrollbar-width: thin;
            }

            .blog-hero-side-item {
                min-width: 220px;
            }

            .blog-slider {
                padding: 14px;
                margin-left: -8px;
                margin-right: -8px;
                border-radius: 0;
            }

            .blog-slider-content {
                padding: 18px 16px 18px;
            }

            .blog-slider-title h2 {
                font-size: 18px;
            }

            .mzd-block {
                padding: 18px 16px 18px;
            }

            .mzd-summary {
                grid-template-columns: minmax(0,1fr);
            }

            .mzd-summary__preview {
                height: 160px;
            }

            .mzd-head {
                flex-direction: column;
                align-items: flex-start;
            }
        }
.mzd-sidebar-widget {
    position: relative;
}

.mzd-top5 {
    position: relative;
    margin-top: 16px;
}

.mzd-top5-card {
    position: relative;
    border-radius: 20px;
    padding: 18px 16px 14px;
    background:
        radial-gradient(circle at 0 0, rgba(59,130,246,0.12) 0, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236,72,153,0.18) 0, transparent 55%),
        #ffffff;
    box-shadow: 0 16px 40px rgba(15,23,42,0.10);
    border: 1px solid rgba(226,232,240,0.95);
    overflow: hidden;
}

.mzd-top5-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: 0.3;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 20% 10%, rgba(59,130,246,0.45) 0, transparent 55%),
        radial-gradient(circle at 90% 90%, rgba(236,72,153,0.55) 0, transparent 55%);
    z-index: 0;
}

.mzd-top5-header {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mzd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #111827;
    background: linear-gradient(135deg, #f97316, #ec4899);
    box-shadow: 0 14px 32px rgba(236,72,153,0.4);
}

.mzd-chip i {
    font-size: 13px;
    color: #fff;
}

.mzd-chip span {
    color: #fff;
    font-weight: 600;
}

.mzd-top5-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mzd-top5-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(249,250,251,0.92);
    border: 1px solid rgba(226,232,240,0.9);
    color: #111827;
    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.mzd-top5-item:hover {
    background: #ffffff;
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 14px 32px rgba(15,23,42,0.12);
    transform: translateY(-2px);
}

.mzd-top5-thumb {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.mzd-top5-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform .5s ease;
}

.mzd-top5-item:hover .mzd-top5-thumb img {
    transform: scale(1.08);
}

.mzd-top5-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.mzd-top5-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.3;
}

.mzd-top5-date {
    font-size: 11px;
    color: #6b7280;
}

.mzd-top5-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: color .16s ease, transform .16s ease;
}

.mzd-top5-item:hover .mzd-top5-arrow {
    color: #f97316;
    transform: translateX(2px);
}

.mzd-icon {
    display: block;
}

@media (max-width: 1024px) {
    .mzd-top5-card {
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    .mzd-top5-card {
        padding: 16px 14px 12px;
        margin-top: 8px;
    }

    .mzd-top5-item {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        padding: 7px 8px;
    }

    .mzd-top5-title {
        font-size: 12px;
    }

    .mzd-top5-date {
        font-size: 10px;
    }
}


.blog-detail-layout {
    padding: 22px 0 32px;
}

.mzd-wrap {
    margin: 0 auto;
}

.mzd-details {
    width: 100%;
}

.mzd-overview {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Breadcrumb */




/* Neon cards & buttons */

.mzd-neon-card {
    position: relative;
    border-radius: 18px;
    padding: 16px 18px;
    background:
        radial-gradient(circle at 0 0, rgba(59,130,246,0.12) 0, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236,72,153,0.16) 0, transparent 55%),
        #ffffff;
    border: 1px solid rgba(226,232,240,0.98);
    box-shadow: 0 18px 40px rgba(15,23,42,0.08);
    overflow: hidden;
}



.mzd-neon-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    opacity: .26;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 20% 0, rgba(59,130,246,0.55) 0, transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(236,72,153,0.55) 0, transparent 55%);
    z-index: 0;
}

.mzd-neon-card > * {
    position: relative;
    z-index: 1;
}

.mzd-neon-btn {
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 8px 13px;
    background: #f3f4f6;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-decoration: none;
    transition:
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.mzd-neon-btn .mzd-icon {
    width: 16px;
    height: 16px;
}

.mzd-neon-btn:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(236,72,153,0.45);
    transform: translateY(-1px);
}

.mzd-neon-btn--circle {
    border-radius: 999px;
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
}

/* Header */

.blog-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.blog-detail-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.blog-detail-title {
    margin: 0 0 6px;
    font-size: 1.6rem;
    line-height: 1.25;
    font-weight: 800;
    color: #020617;
}

.blog-detail-sub {
    margin: 0;
    font-size: 14px;
    color: #4b5563;
}

.blog-detail-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Cover image */


.mzd-cover {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
}

.mzd-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    transition: transform .6s ease;
}

.mzd-cover:hover img {
    transform: scale(1.08);
}

/* Content */

.blog-detail-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #6b7280;
}

.blog-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-detail-meta-item .mzd-icon {
    width: 14px;
    height: 14px;
}

.mzd-prose {
    font-size: 15px;
    line-height: 1.7;
    color: #111827;
}

.mzd-prose p {
    margin-bottom: 0.75em;
}

.mzd-prose h1,
.mzd-prose h2,
.mzd-prose h3,
.mzd-prose h4 {
    margin: 1.1em 0 .45em;
    font-weight: 700;
    color: #020617;
}

.mzd-prose ul,
.mzd-prose ol {
    padding-left: 1.35rem;
    margin: 0 0 .8em;
}

.mzd-prose li {
    margin-bottom: .25em;
}

/* Related posts */

.blog-detail-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mzd-neon-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #020617;
}

.blog-detail-related-list {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.blog-related-item {
    display: grid;
    grid-template-columns: 90px minmax(0,1fr) auto;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(249,250,251,0.96);
    border: 1px solid rgba(226,232,240,0.95);
    transition:
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.blog-related-item:hover {
    background: #ffffff;
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 14px 32px rgba(15,23,42,0.12);
    transform: translateY(-2px);
}

.blog-related-thumb {
    border-radius: 12px;
    overflow: hidden;
}

.blog-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform .5s ease;
}

.blog-related-item:hover .blog-related-thumb img {
    transform: scale(1.08);
}

.blog-related-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.blog-related-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.blog-related-title a {
    color: #0f172a;
    text-decoration: none;
}

.blog-related-title a:hover {
    color: #1d4ed8;
}

.blog-related-meta {
    font-size: 11px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-related-meta .mzd-icon {
    width: 13px;
    height: 13px;
}

.blog-related-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FAB buttons */

.blog-detail-share-wrap {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mzd-neon-fab {
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 10px 12px;
    background: #f3f4f6;
    color: #374151;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

.mzd-neon-fab .mzd-icon {
    width: 18px;
    height: 18px;
}

.mzd-neon-fab:hover {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(236,72,153,0.45);
    transform: translateY(-1px);
}

.mzd-neon-fab--next {
    margin-left: auto;
}

/* Popup share */

.mzd-neon-popup {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
}

.mzd-neon-popup.is-open {
    display: flex;
}

.js-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.65);
    backdrop-filter: blur(8px);
}

.js-popup-wrap {
    position: relative;
    z-index: 1;
    max-width: 460px;
    width: 100%;
    margin: 0 16px;
}

.mzd-share {
    border-radius: 18px;
    padding: 18px 18px 16px;
    background:
        radial-gradient(circle at 0 0, rgba(59,130,246,0.18) 0, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(236,72,153,0.24) 0, transparent 55%),
        #020617;
    border: 1px solid rgba(148,163,184,0.6);
    color: #e5e7eb;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
}

.mzd-share-head {
    margin-bottom: 10px;
}

.mzd-share-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.mzd-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(15,23,42,0.8);
    border: 1px solid rgba(148,163,184,0.6);
}

.mzd-share-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    background: rgba(15,23,42,0.96);
    color: #e5e7eb;
    font-size: 13px;
    padding: 7px 10px;
    outline: none;
}

.mzd-share-input::selection {
    background: rgba(96,165,250,0.5);
}

.mzd-share-copy {
    white-space: nowrap;
}

.mzd-share-cover {
    margin-top: 12px;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
}

.mzd-share-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mzd-share-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mzd-share-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Icons */

.mzd-icon {
    width: 16px;
    height: 16px;
}

/* Responsive */

@media (max-width: 900px) {
    .blog-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-detail-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .blog-detail-title {
        font-size: 1.4rem;
    }

    .blog-detail-related-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .blog-detail-layout {
        padding-top: 18px;
    }

    .mzd-neon-card {
        border-radius: 16px;
        padding: 14px;
    }

    .mzd-media-box {
        padding: 8px;
    }

    .blog-detail-title {
        font-size: 1.25rem;
    }

    .blog-detail-share-wrap {
        justify-content: space-between;
    }

    .mzd-neon-popup.is-open {
        align-items: flex-end;
    }

    .js-popup-wrap {
        margin-bottom: 14px;
    }
}
        
/* --- MEGA MENU KONTEYNERİ --- */
.v4new-mega-wrapper {
    position: static;
}


.v4new-mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #f3f4f6;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1); 
    z-index: 999;
    display: block; 
    max-height: 0; 
    opacity: 0;
    visibility: hidden;
    overflow: hidden; 
    

    transform-origin: top center; 
    transform: scaleY(0.9) translateY(-10px); 
    transition: 
        max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        visibility 0.4s;
}


.v4new-mega-dropdown.active {
    max-height: 800px; 
    opacity: 1;
    visibility: visible;
    transform: scaleY(1) translateY(0);
}


.v4new-mega-scroll {
    max-height: 500px;
    overflow-y: auto;
    padding: 25px 30px;
}
.v4new-mega-scroll::-webkit-scrollbar { width: 5px; }
.v4new-mega-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }


.v4new-mega-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 sütunlu səliqəli düzülüş */
    gap: 15px;
    max-width: 1320px;
    margin: 0 auto;
}

/* --- MODERN KART DİZAYNI --- */
.v4new-mega-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 10px 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effekti */
.v4new-mega-card:hover {
    border-color: #fdba74; /* Narıncı haşiyə */
    background: #fff7ed;   /* Çox açıq narıncı fon */
    transform: translateY(-3px); /* Yüngül yuxarı qalxma */
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.1); /* Narıncı kölgə */
}

/* İkon Qutusu */
.v4new-mega-icon-box {
    width: 42px;
    height: 42px;
    background: #f8fafc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.v4new-mega-card:hover .v4new-mega-icon-box {
    background: #ffffff;
    transform: scale(1.1);
}

.v4new-mega-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Yazı */
.v4new-mega-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.v4new-mega-card:hover .v4new-mega-title {
    color: #f97316;
}

/* Gizli Ox (Hoverdə görünür) */
.v4new-mega-arrow {
    font-size: 12px;
    color: #f97316;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s;
}

.v4new-mega-card:hover .v4new-mega-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- FOOTER (Button hissəsi) --- */
.v4new-mega-footer {
    background: #fcfcfc;
    border-top: 1px solid #f1f5f9;
    padding: 15px 30px;
    display: flex;
    justify-content: flex-end; /* Sağa yasla */
}

.v4new-mega-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: #f97316; /* Əsas narıncı rəng */
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.v4new-mega-all-btn:hover {
    background: #ea580c; /* Tünd narıncı */
    transform: translateX(5px); /* Sağa hərəkət */
}

/* Responsive */
@media (max-width: 1200px) {
    .v4new-mega-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
    .v4new-mega-grid { grid-template-columns: repeat(2, 1fr); }
    .v4new-mega-dropdown { position: fixed; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
}



/* Yuxarı Hissə (Başlıq və Paylaş düyməsi) */
.oy-doc__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
}


.oy-doc__share {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 16px;
}
.oy-doc__share:hover {
    background: #f97316;
    color: #fff;
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2);
}

/* Məqalə Başlığı */
.oy-doc__head {
    margin-bottom: 30px;
}
.oy-doc__title {
    font-size: 32px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Məqalə Şəkli (Cover) */
.oy-doc__cover {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    background: #f3f4f6;
}
.oy-doc__cover img {

    height: auto;
    display: block;
}

/* Məzmun (Body) */
.oy-doc__body {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

/* Typography (Mətn Stili) */
.oy-typography {
    line-height: 1.7;
    font-size: 16px;
    color: #4b5563;
}
.oy-typography h1, .oy-typography h2, .oy-typography h3 {
    color: #111827;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
.oy-typography p { margin-bottom: 1em; }
.oy-typography ul { padding-left: 20px; margin-bottom: 1em; }
.oy-typography li { margin-bottom: 5px; }
.oy-typography a { color: #f97316; text-decoration: underline; }

/* Statik Bloklar (Əgər varsa) */
.oy-doc__block {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: center;
}
.oy-doc__block:nth-child(even) { flex-direction: row-reverse; }
.oy-doc__block-media { flex: 1; border-radius: 12px; overflow: hidden; }
.oy-doc__block-media img { width: 100%; height: auto; display: block; }
.oy-doc__block-content { flex: 1; }
.oy-doc__block-title { font-size: 24px; margin-bottom: 15px; color: #1f2937; }

/* --- MODAL / POPUP (Paylaşım) --- */
.oy-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.oy-modal.is-open { opacity: 1; visibility: visible; }

.oy-modal__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8); backdrop-filter: blur(5px);
}

.oy-modal__panel {
    position: relative; width: 90%; max-width: 450px;
    background: #fff; border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb; padding: 25px;
    transform: translateY(20px); transition: 0.3s;
}
.oy-modal.is-open .oy-modal__panel { transform: translateY(0); }

.oy-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}
.oy-modal__head h3 { font-size: 18px; font-weight: 700; margin: 0; color: #1f2937; }

.oy-modal__close {
    background: #f3f4f6; border: none; width: 32px; height: 32px;
    border-radius: 8px; color: #6b7280; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.oy-modal__close:hover { background: #fee2e2; color: #ef4444; }

.oy-field {
    display: flex; align-items: center; gap: 10px;
    background: #f9fafb; border: 1px solid #e5e7eb;
    padding: 8px 12px; border-radius: 10px; margin-bottom: 15px;
}
.oy-field i { color: #9ca3af; }
.oy-field input {
    border: none; background: transparent; flex: 1;
    color: #374151; font-size: 13px; outline: none;
}

.oy-btn {
    border: none; padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center;
    justify-content: center; transition: 0.2s;
}
.oy-btn--neon { background: #f97316; color: #fff; }
.oy-btn--neon:hover { background: #ea580c; }

.oy-btn--ghost {
    width: 40px; height: 40px; padding: 0;
    background: #fff; border: 1px solid #e5e7eb; color: #4b5563; font-size: 16px;
}
.oy-btn--ghost:hover { border-color: #f97316; color: #f97316; transform: translateY(-2px); }

.oy-modal__preview {
    width: 100%; height: 150px; object-fit: cover;
    border-radius: 10px; margin-bottom: 15px;
}

.oy-modal__actions {
    display: flex; justify-content: center; gap: 10px;
}


@media (max-width: 768px) {
    .oy-doc__body { padding: 20px; }
    .oy-doc__title { font-size: 24px; }
    .oy-doc__block { flex-direction: column !important; }
}






.v4new-brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
    perspective: 1000px; /* 3D effekt üçün */
}


.brand-icon-box {
    width: 44px;
    height: 44px;
    /* Narıncı Gradient */
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* İkonun özü */
.brand-icon-box i {
    transition: transform 0.4s ease;
}


@keyframes breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.6); }
}
.brand-icon-box {
    animation: breathe 3s infinite ease-in-out;
}


.v4new-brand-logo:hover .brand-icon-box {
    transform: rotate(-10deg) scale(1.1); /* Dönür və böyüyür */
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

.v4new-brand-logo:hover .brand-icon-box i {
    transform: rotate(360deg); /* İkon tam fırlanır */
}


.brand-text-group {
    display: flex;
    align-items: baseline;
    font-family: 'Inter', 'Poppins', sans-serif;
    line-height: 1;
    position: relative;
}

/* Gamex */
.txt-gamex {
    font-size: 26px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -1px;
    transition: transform 0.3s ease, color 0.3s;
}

/* Bulk */
.txt-bulk {
    font-size: 26px;
    font-weight: 900;
    color: #f97316; /* Narıncı */
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    position: relative;
}

/* .Com (Animasiyalı) */
.txt-com {
    font-size: 20px;
    font-weight: 700;
    color: #94a3b8; /* Boz rəng */
    opacity: 0;
    transform: translateX(-10px); /* Gizli və solda */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-left: 2px;
}

/* --- HOVER ZAMANI YAZI ANİMASİYASI --- */

/* Gamex azca sola sürüşür */
.v4new-brand-logo:hover .txt-gamex {
    transform: translateX(-2px);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1); /* 3D kölgə */
}

/* Bulk parlayır */
.v4new-brand-logo:hover .txt-bulk {
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.6); /* Neon parıltı */
    color: #ea580c;
}

/* .Com ortaya çıxır */
.v4new-brand-logo:hover .txt-com {
    opacity: 1;
    transform: translateX(0); /* Yerini alır */
    color: #374151;
}

/* Mobil Uyğunluq */
@media (max-width: 768px) {
    .brand-icon-box { width: 38px; height: 38px; font-size: 18px; }
    .txt-gamex, .txt-bulk { font-size: 22px; }
    .txt-com { font-size: 16px; opacity: 1; transform: translateX(0); /* Mobildə həmişə görünsün */ }
}


@media (max-width: 768px) {
    
   
    .v4new-brand-logo {
        gap: 6px; 
    }

 
    .brand-icon-box {
        width: 34px;
        height: 34px;
        font-size: 16px;
        border-radius: 10px;
    }

   
    .txt-gamex, 
    .txt-bulk {
        font-size: 18px; 
        letter-spacing: -0.5px;
    }

 
    .txt-com {
        display: none; 
    }
    
 
    .v4new-mainbar-left {
        gap: 10px; 
    }
}
/* --- KOPYALAMA BİLDİRİŞİ (TOAST - SAĞ ÜST) --- */
#ord-toast {
    position: fixed;
    top: 100px;  /* Header-dən aşağıda olsun */
    right: 30px; /* Sağ tərəf */
    
    background: #ffffff;
    color: #1f2937;
    padding: 16px 24px;
    border-radius: 12px;
    
    /* Kölgə və Sol xətt */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-left: 5px solid #f97316; /* Narıncı */
    
    font-size: 14px;
    font-weight: 600;
    z-index: 99999; /* Hər şeyin üstündə */
    
    /* Gizli vəziyyət (Sağdan gəlsin) */
    opacity: 0;
    transform: translateX(50px);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Aktiv olanda (Görünən hal) */
#ord-toast.is-show {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

/* Yaşıl Təsdiq İkonu */
#ord-toast::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #ecfdf5; /* Açıq yaşıl fon */
    color: #10b981;      /* Tünd yaşıl ikon */
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    flex-shrink: 0;
}

/* Mobil Uyğunluq */
@media (max-width: 768px) {
    #ord-toast {
        top: 80px; /* Mobildə header balaca olduğu üçün biraz yuxarı */
        right: 20px;
        max-width: 80%; /* Çox uzun olmasın */
    }
}

.nav-game-icon {
    margin-right: 6px;
    font-size: 16px;
}


.nav-game-icon.fa-wallet        { color: #ff9800; } /* Wallet TopUp */
.nav-game-icon.fa-crosshairs    { color: #ff9800; } /* PUBG */
.nav-game-icon.fa-bullseye      { color: #e53935; } /* Valorant və s. */
.nav-game-icon.fa-playstation   { color: #003791; } /* PlayStation mavi */
.nav-game-icon.fa-fire,
.nav-game-icon.fa-fire-alt      { color: #ff5722; } /* Free Fire */
.nav-game-icon.fa-steam         { color: #1b2838; } /* Steam */



:root {
    --theme-color: #ff6a00; /* MilliEpin Narıncı */
    --theme-light: rgba(255, 106, 0, 0.1);
    --bg-white: #ffffff;
    --text-dark: #2d3436;
    --card-radius: 22px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.gmx-tools { display: flex; gap: 15px; margin-bottom: 30px; position: relative; z-index: 10; }
.gmx-search-wrapper {
    flex: 1; position: relative; background: #fff; border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #e1e1e1;
    display: flex; align-items: center; padding: 5px 20px; transition: var(--transition);
}
.gmx-search-wrapper:focus-within {
    border-color: var(--theme-color); box-shadow: 0 0 0 4px var(--theme-light);
}


.gmx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    padding: 15px 10px;
}


.gmx-card {
    position: relative;
    background: #fff;
    border-radius: var(--card-radius);
    padding: 25px 15px;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    border: 1px solid #f0f0f0; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    overflow: hidden;
    z-index: 1;
}


.gmx-thumb {
    width: 85px; height: 85px; margin-bottom: 15px;
    position: relative; z-index: 2; 
   
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
    
}
.gmx-thumb img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.05));
        border-radius: 12px;
}

/* Başlıq */
.gmx-title {
    font-size: 0.95rem; font-weight: 700; color: var(--text-dark);
    z-index: 2; transition: color 0.3s;
}


.gmx-card:hover {
    transform: translateY(-8px);
    
    border-color: var(--theme-color);
    

    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        inset 0 0 20px rgba(255, 106, 0, 0.15), 
        0 15px 35px rgba(255, 106, 0, 0.25);   
}


.gmx-card:hover .gmx-thumb {
    /* scale(1.15) = Böyüyür */
    /* rotate(-10deg) = Sola dönür */
    transform: scale(1.15) rotate(-10deg); 
}


.gmx-card:hover .gmx-title { color: var(--theme-color); }


.gmx-card::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80px; height: 80px;
    background: var(--theme-color);
    border-radius: 50%;
    opacity: 0;
    filter: blur(40px);
    transform: translate(-50%, -50%) scale(0.5);
    transition: all 0.5s ease;
    z-index: 0;
}
.gmx-card:hover::before {
    opacity: 0.3; 
    transform: translate(-50%, -50%) scale(2.5);
}


.gmx-card::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255, 0.8), transparent);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
}
.gmx-card:hover::after {
    animation: flash 0.7s;
}

@keyframes flash {
    0% { left: -150%; }
    100% { left: 150%; }
}


@media (max-width: 576px) {
    .gmx-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .gmx-thumb { width: 65px; height: 65px; }
}

/* --- Axtarış Paneli (Tam Responsiv) --- */
.gmx-tools { 
    display: flex; 
    gap: 15px; 
    margin: 0 auto 30px auto; 
    max-width: 800px;         
    position: relative; 
    z-index: 10; 
    /* Hündürlüyü sildik ki, mobildə böyüyə bilsin */
    height: auto;             
    flex-wrap: wrap;          /* Yer çatmayanda aşağı düşsün */
}

.gmx-search-wrapper {
    flex: 1; 
    position: relative; 
    background: #fff; 
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    border: 1px solid #e1e1e1;
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    transition: var(--transition);
    height: 50px;             /* Hündürlük elementin özünə verildi */
    min-width: 200px;         /* Çox kiçilməsin */
}

.gmx-search-wrapper:focus-within {
    border-color: var(--theme-color); 
    box-shadow: 0 0 0 4px var(--theme-light);
}

.gmx-input { 
    border: none !important; 
    background: transparent !important; 
    width: 100%; 
    padding: 0 10px;
    outline: none !important; 
    font-size: 0.95rem; 
    color: var(--text-dark);
    height: 100% !important; 
    box-shadow: none !important;
}

.gmx-search-icon { 
    color: #b2bec3; 
    font-size: 1.1rem; 
    min-width: 20px; /* İkon sıxılmasın */
}

.gmx-btn-filter {
    background: #fff; 
    border: 1px solid #e1e1e1; 
    border-radius: 12px;
    padding: 0 25px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px; 
    color: #636e72; 
    font-weight: 600; 
    cursor: pointer; 
    transition: var(--transition);
    height: 50px;             /* Hündürlük elementin özünə verildi */
    white-space: nowrap;
}

.gmx-btn-filter:hover { 
    color: var(--theme-color); 
    border-color: var(--theme-color); 
    background: #fff5eb; 
}

/* --- MOBİL RESPONSİV KODLAR --- */
@media (max-width: 768px) {
    .gmx-tools {
        flex-direction: column; /* Alt-alta düzürük */
        gap: 10px;              /* Aralıq məsafəsi */
    }

    .gmx-search-wrapper {
        width: 100%;            /* Tam ekran genişliyi */
        flex: none;             /* Flex davranışını ləğv et */
    }

    .gmx-btn-filter {
        width: 100%;            /* Tam ekran genişliyi */
        justify-content: center;
    }
}


/* --- Dəyişənlər --- */
:root {
    --auth-orange: #ff6a00;
    --auth-dark: #2d3436;
    --auth-gray: #f1f2f6;
    --auth-shadow: rgba(255, 106, 0, 0.35);
}

/* --- Base Button Reset (Köhnə CSS-i ləğv etmək üçün) --- */
.gmx-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px !important;
    height: 42px !important; /* Sabit hündürlük */
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1 !important;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* İkonların ölçüsü */
.gmx-auth-btn i {
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

/* --- 1. GİRİŞ BUTONU (Minimalist) --- */
.gmx-login-btn {
    background: #fff !important;
    color: var(--auth-dark) !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

.gmx-login-btn:hover {
    border-color: var(--auth-orange) !important;
    color: var(--auth-orange) !important;
    background: #fffbf8 !important; /* Çox açıq narıncı fon */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* Hover edəndə ikon yüngülcə tərpənir */
.gmx-login-btn:hover i {
    transform: translateX(-3px);
}

/* --- 2. QEYDİYYAT BUTONU (Modern & Parıltılı) --- */
.gmx-reg-btn {
    background: linear-gradient(135deg, #ff6a00 0%, #ff4500 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--auth-shadow) !important;
}

.gmx-reg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--auth-shadow) !important;
    color: #fff !important;
}

/* Parıltı Animasiyası (Shine Effect) */
.gmx-reg-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
}

.gmx-reg-btn:hover::after {
    animation: authShine 0.75s;
}

@keyframes authShine {
    0% { left: -150%; }
    100% { left: 150%; }
}


.gmx-mobile-btn {

    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--auth-dark) !important;
    border: 1px solid #eee !important;
    font-size: 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    text-decoration: none !important;
    transition: 0.3s;
}

.gmx-mobile-btn:active, 
.gmx-mobile-btn:hover {
    background: var(--auth-orange) !important;
    color: #fff !important;
    border-color: var(--auth-orange) !important;
    transform: scale(0.95);
}

/* Çəkiliş Menyusu Effekti */
.menu-raffle-effect {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 8px;
    background: linear-gradient(45deg, #fff, #fff9e6);
    border: 1px solid #ffd700;
    animation: glowBox 2s infinite;
    text-decoration: none;
    color: #ff9f43 !important; /* Qızılı rəng */
    overflow: hidden;
}

/* Yazı rəngi animasiyası */
.menu-raffle-effect span {
    background: linear-gradient(90deg, #e1b12c, #ff9f43, #e1b12c);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 3s linear infinite;
}

/* Ulduz İkonu (Parıldayan) */
.raffle-star {
    font-size: 12px;
    color: #ffd700;
    animation: twinkle 1.5s infinite alternate;
}

/* İşıq parıltısı */
@keyframes glowBox {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
    100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
}

@keyframes shineText {
    to { background-position: 200% center; }
}

@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 5px #ffd700; }
}

/* İkonun özü */
.menu-raffle-effect i {
    color: #ff9f43;
    font-size: 1.1em;
}


.menu-deal-effect {
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        border: 1px solid #ff4757 !important; /* Canlı Qırmızı Çərçivə */
        background: linear-gradient(to right, #fff, #fff0f0) !important;
        border-radius: 8px;
        padding: 5px 10px !important;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
        animation: pulse-red-border 2s infinite; /* Döyünən çərçivə effekti */
}

    
.menu-deal-effect:hover {
        background: #ff4757 !important;
        box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4) !important;
        transform: translateY(-1px);
}
    
   
    .menu-deal-effect:hover .deal-text-anim,
    .menu-deal-effect:hover i {
        background: none;
        -webkit-text-fill-color: #fff;
        color: #fff !important;
    }

  
    .deal-text-anim {
        background: linear-gradient(90deg, #ff4757, #ff6b81);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }

  
    .deal-fire-anim {
        color: #ff4757;
        font-size: 14px; /* Bir az böyük */
        animation: burn 0.5s infinite alternate; /* Yanma effekti */
    }

  
    @keyframes pulse-red-border {
        0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.4); }
        70% { box-shadow: 0 0 0 4px rgba(255, 71, 87, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
    }

    @keyframes burn {
        0% { transform: scale(1) rotate(-5deg); opacity: 0.8; }
        100% { transform: scale(1.1) rotate(5deg); opacity: 1; text-shadow: 0 0 5px #ff6b81; }
    }
    

@media (max-width: 992px) {
    .v4new-inline-links {
        display: flex;
        flex-direction: column !important; 
        gap: 10px; 
        padding: 0;
        list-style: none;
    }

    .v4new-inline-links li {
        width: 100%;
    }

    .v4new-inline-links li a {
        display: flex; 
        align-items: center;
        width: 100%;
    }
}   


@media (max-width: 992px) {
    
    .menu-raffle-effect,
    .menu-deal-effect {
        display: flex !important;
        width: 100% !important;
        
     
        justify-content: space-between !important; 
        align-items: center !important;
        
        padding: 12px 15px !important;
        margin-bottom: 8px;
        box-sizing: border-box;
        height: auto !important;
    }
    
  
    .menu-deal-effect span, 
    .menu-raffle-effect span {
        margin-right: auto; 
        margin-left: 10px;  
        font-size: 1rem;
    }

    .v4new-inline-links {
        display: flex;
        flex-direction: column !important;
        gap: 10px;
    }
    
    .v4new-inline-links li {
        width: 100%;
        margin: 0;
    }
}



.menu-package-effect {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    border: 1px solid #70a1ff !important; /* Açıq Mavi/Bənövşəyi Çərçivə */
    background: linear-gradient(to right, #fff, #f0f4ff) !important;
    border-radius: 8px;
    padding: 5px 10px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: pulse-blue-border 3s infinite;
}


.menu-package-effect:hover {
    background: #5352ed !important; /* Tünd Mavi/Bənövşəyi */
    box-shadow: 0 4px 15px rgba(83, 82, 237, 0.4) !important;
    transform: translateY(-1px);
    border-color: #5352ed !important;
}


.menu-package-effect:hover .package-text-anim,
.menu-package-effect:hover i {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff !important;
}


.package-text-anim {
    background: linear-gradient(90deg, #3742fa, #5352ed);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}


.package-box-anim {
    color: #3742fa;
    font-size: 14px;
    animation: bounce-box 2s infinite;
}


@keyframes pulse-blue-border {
    0% { box-shadow: 0 0 0 0 rgba(83, 82, 237, 0.4); }
    70% { box-shadow: 0 0 0 4px rgba(83, 82, 237, 0); }
    100% { box-shadow: 0 0 0 0 rgba(83, 82, 237, 0); }
}

@keyframes bounce-box {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
    60% { transform: translateY(-1.5px); }
}


@media (max-width: 992px) {
    .menu-package-effect {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important; /* İkon solda, qutu sağda */
        align-items: center !important;
        padding: 12px 15px !important;
        margin-bottom: 8px;
        box-sizing: border-box;
        height: auto !important;
    }

    .menu-package-effect span {
        margin-right: auto;
        margin-left: 10px;
        font-size: 1rem;
    }
}
/* --- Elan Bazarı Effekti (Yaşıl/Market Konsept) --- */
.market-btn-effect {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border: 1px solid #00b894 !important; /* Nanə Yaşılı Çərçivə */
    background: linear-gradient(to right, #fff, #f0fff4) !important;
    border-radius: 8px;
    padding: 6px 15px !important; /* Digər header düymələri ilə eyni ölçü */
    text-decoration: none !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: pulse-green-border 3s infinite;
    height: 40px; /* Digər elementlərlə eyni hündürlük */
}

/* Üzərinə gələndə */
.market-btn-effect:hover {
    background: #00b894 !important; /* Tam Yaşıl */
    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4) !important;
    transform: translateY(-2px);
    border-color: #00b894 !important;
}

/* Hover olanda yazı və ikon ağ olsun */
.market-btn-effect:hover span,
.market-btn-effect:hover i {
    color: #fff !important;
}

/* Yazı Stili */
.market-btn-effect span {
    color: #00b894;
    font-weight: 700;
    font-size: 0.95rem;
    transition: 0.3s;
}

/* İkon Stili və Animasiyası */
.market-icon-anim {
    color: #00b894;
    font-size: 1.1rem;
    transition: 0.3s;
}

/* Hover olanda ikon yellənsin (Shop lövhəsi kimi) */
.market-btn-effect:hover .market-icon-anim {
    animation: swing 0.6s ease-in-out;
}

/* Animasiyalar */
@keyframes pulse-green-border {
    0% { box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.4); }
    70% { box-shadow: 0 0 0 4px rgba(0, 184, 148, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 184, 148, 0); }
}

@keyframes swing {
    15% { transform: translateX(3px) rotate(5deg); }
    30% { transform: translateX(-3px) rotate(-5deg); }
    50% { transform: translateX(2px) rotate(3deg); }
    65% { transform: translateX(-2px) rotate(-3deg); }
    80% { transform: translateX(1px) rotate(1deg); }
    100% { transform: rotate(0deg); }
}

@media (max-width: 992px) {
    .market-btn-effect {
        display: none !important;
    }
}

/* Mesaj Bildiriş Animasiyası */
.msg-notify-badge {
    position: absolute;
    top: -5px;    /* İkonun yuxarısına qaldırır */
    right: -5px;  /* İkonun sağına çəkir */
    background: #ff4757; /* Qırmızı rəng */
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px; /* Dairəvi forma üçün */
    height: 18px;
    border-radius: 50%; /* Tam dairə */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff; /* Ağ çərçivə (ayrılması üçün) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    
    /* Hərəkət Animasiyası */
    animation: bounceMsg 1s infinite alternate;
}

/* Yuxarı-aşağı oynama (hoppanma) effekti */
@keyframes bounceMsg {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-4px) scale(1.1); }
}


@media (max-width: 768px) {

    .v4new-dropdown-menu.v4new-pop-menu {
        left: auto !important;
        right: -70px !important; /* Sağ küncə yapışdırırıq */
        width: 300px !important; /* Sabit en veririk */
        max-width: 90vw !important; /* Ekranın 90%-indən çox olmasın */
        transform: none !important; /* Transformasiyanı ləğv edirik ki, yerindən oynamasın */
    }

    /* Üçbucaq oxunu da sağ tərəfə çəkirik ki, ikonun altına düşsün */
    .v4new-dropdown-menu.v4new-pop-menu::before {
        left: auto !important;
        right: 20px !important; /* İkonun mərkəzinə uyğunlaşdırın */
    }
}

.v4new-user-menu {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    padding: 10px !important;
    min-width: 240px !important;
    margin-top: 10px !important;
    background: #fff;
    

    transform-origin: top center;
}


.v4new-user-menu.show {
    animation: slideUpFade 0.3s ease forwards;
}


@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Menyu Linkləri */
.v4new-dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 15px !important;
    border-radius: 10px !important;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2d3436 !important;
    transition: all 0.2s ease;
    background: transparent;
}

.v4new-dropdown-item i {
    font-size: 1.1rem;
    color: #b2bec3;
    transition: 0.2s;
}

/* Hover Effekti */
.v4new-dropdown-item:hover {
    background: #fff5eb !important; /* Açıq Narıncı fon */
    color: #ff6a00 !important;      /* Narıncı yazı */
    transform: translateX(5px);     /* Sağa sürüşmə */
}

.v4new-dropdown-item:hover i {
    color: #ff6a00;
}

/* Divider (Xətt) */
.v4new-dropdown-divider {
    margin: 6px 0;
    border-top: 1px solid #f1f2f6;
}

/* Çıxış Düyməsi (Xüsusi) */
.v4new-dropdown-item-danger:hover {
    background: #fff0f1 !important;
    color: #ff4757 !important;
}
.v4new-dropdown-item-danger:hover i {
    color: #ff4757;
}

/* Avatar hissəsi (Headerdəki trigger) */
.v4new-user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-radius: 30px;
    transition: 0.3s;
}
.v4new-user-trigger:hover {
    background: #f8f9fa;
}


.msg-btn-modern {
    width: 42px;        
    height: 42px;        
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;  
    background: #fff;    
    border: 1px solid #e1e1e1; 
    color: #636e72;      
    font-size: 1.2rem;   
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    position: relative;
    margin: 0 10px;       
    text-decoration: none !important;
}

.msg-btn-modern:hover {
    background: #f0f4ff; 
    border-color: #f36812; 
    color: #f06310;      
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgb(255 87 34 / 28%);
}


.msg-btn-modern i {
    transition: transform 0.3s ease;
}

.msg-btn-modern:hover i {
    transform: scale(1.15) rotate(-10deg); 
}


.msg-notify-badge {
    top: -6px !important;
    right: -6px !important;
    border: 2px solid #fff;
}

/* --- Modern Səbət Düyməsi (Narıncı Konsept) --- */
.cart-btn-modern {
    width: 42px;          /* Kvadrat-dairəvi forma */
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #ff6a00; /* Narıncı Çərçivə */
    color: #ff6a00;            /* Narıncı İkon */
    font-size: 1.2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.1);
    position: relative;
    text-decoration: none !important;
}

/* Üzərinə gələndə (Hover) */
.cart-btn-modern:hover {
    background: #ff6a00;      /* Fon Narıncı olsun */
    color: #fff;              /* İkon Ağ olsun */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 106, 0, 0.3);
}

/* İkon Animasiyası (Hover zamanı səbət yellənsin) */
.cart-btn-modern i {
    transition: transform 0.3s ease;
}

.cart-btn-modern:hover i {
    transform: rotate(-15deg) scale(1.1);
}

/* Məhsul Sayı Bildirişi */
.cart-notify-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff4757; /* Qırmızı diqqət çəkən rəng */
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff; /* Ağ haşiyə */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
}


        :root {
            --mkp-primary: #00b894; /* Nanə Yaşılı (Market rəngi) */
            --mkp-dark: #2d3436;
            --mkp-gray: #f8f9fa;
            --mkp-border: #e1e1e1;
            --mkp-radius: 16px;
            --mkp-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        /* --- Layout --- */
        .mkp-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 30px;
            padding-top: 20px;
            align-items: start;
        }

        /* --- Sidebar --- */
        .mkp-sidebar {
            position: sticky;
            top: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .mkp-filter-card {
            background: #fff;
            border-radius: var(--mkp-radius);
            border: 1px solid var(--mkp-border);
            padding: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        }

        .mkp-filter-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--mkp-dark);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f1f2f6;
        }
        .mkp-filter-title i { color: var(--mkp-primary); }

        .mkp-input {
            width: 100%;
            height: 42px;
            border: 1px solid var(--mkp-border);
            border-radius: 10px;
            padding: 0 15px;
            font-size: 0.9rem;
            transition: 0.3s;
            outline: none;
            background: #fff;
            box-sizing: border-box;
        }
        .mkp-input:focus {
            border-color: var(--mkp-primary);
            box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.1);
        }

        .mkp-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #636e72;
            margin-bottom: 8px;
            display: block;
            margin-top: 15px;
        }
        .mkp-label:first-child { margin-top: 0; }

        /* Checkbox Style */
        .mkp-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            cursor: pointer;
        }
        .mkp-check input {
            width: 18px; height: 18px;
            accent-color: var(--mkp-primary);
            cursor: pointer;
        }
        .mkp-check label {
            font-size: 0.9rem;
            color: var(--mkp-dark);
            cursor: pointer;
            margin: 0;
        }

        /* Category List */
        .mkp-cat-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
        }
        .mkp-cat-item a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            color: var(--mkp-dark);
            text-decoration: none;
            transition: 0.2s;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .mkp-cat-item a:hover {
            background: #f0fff4;
            color: var(--mkp-primary);
        }
        .mkp-cat-icon {
            width: 24px; height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }

        /* Search Button */
        .mkp-btn-search {
            width: 100%;
            height: 45px;
            background: var(--mkp-primary);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .mkp-btn-search:hover {
            background: #00a884;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);
        }

        /* Price Slider */
        #slider-range {
            height: 6px; background: #dfe6e9; border: none; border-radius: 3px; margin: 15px 5px;
        }
        #slider-range .ui-slider-range { background: var(--mkp-primary); }
        #slider-range .ui-slider-handle {
            border-color: var(--mkp-primary); background: #fff; border-radius: 50%; top: -7px; cursor: pointer; outline: none;
        }
        .mkp-price-inputs { display: flex; gap: 10px; }

        /* --- Main Content --- */
        .mkp-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .mkp-add-btn {
            background: var(--mkp-dark);
            color: #fff;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none !important;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: 0.3s;
        }
        .mkp-add-btn:hover { background: #000; transform: translateY(-2px); color: #fff; }
        
        .mkp-reset-btn {
            background: #fff;
            color: #636e72;
            border: 1px solid #e1e1e1;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none !important;
            font-weight: 600;
            transition: 0.3s;
        }
        .mkp-reset-btn:hover { background: #f1f2f6; color: var(--mkp-dark); }

        /* --- GRID --- */
        .mkp-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
        }

        /* --- CARD --- */
        .mkp-item {
            background: #fff;
            border-radius: var(--mkp-radius);
            border: 1px solid var(--mkp-border);
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .mkp-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--mkp-shadow);
            border-color: var(--mkp-primary);
        }
        
        /* Özel Çərçivələr (Backend-dən gələn siniflər üçün) */
        .mkp-item.kcerceve { border: 2px solid gold; }
        .mkp-item.rcerceve { border: 2px solid #ff7675; }

        .mkp-img-wrap {
            position: relative;
            width: 100%;
            height: 160px;
            background: #f8f9fa;
            overflow: hidden;
        }
        .mkp-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.5s;
        }
        .mkp-item:hover .mkp-img { transform: scale(1.05); }

        .mkp-ribbon {
            position: absolute;
            top: 10px; left: 10px;
            background: #fdcb6e;
            color: #2d3436;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 4px 8px;
            border-radius: 6px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            z-index: 2;
        }

        .mkp-price-tag {
            position: absolute;
            bottom: 10px; right: 10px;
            background: var(--mkp-primary);
            color: #fff;
            font-weight: 800;
            padding: 5px 10px;
            border-radius: 8px;
            font-size: 1rem;
            box-shadow: 0 4px 10px rgba(0, 184, 148, 0.4);
            z-index: 2;
        }

        .mkp-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
        
        .mkp-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--mkp-dark);
            margin-bottom: 8px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-decoration: none;
            transition: 0.2s;
        }
        .mkp-title:hover { color: var(--mkp-primary); }
        
        /* Özel Başlıqlar */
        .mkp-title.rbaslik { color: #d63031; }
        .mkp-title.kbaslik { color: #e17055; }

        .mkp-desc {
            font-size: 0.85rem;
            color: #636e72;
            margin-bottom: 15px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .mkp-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #f1f2f6;
            padding-top: 12px;
        }

        .mkp-user {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none !important;
        }
        .mkp-avatar {
            width: 30px; height: 30px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid #e1e1e1;
        }
        .mkp-username {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--mkp-dark);
        }
        
        .mkp-status {
            width: 10px; height: 10px;
            border-radius: 50%;
            border: 2px solid #fff;
            position: absolute;
            bottom: 0; right: 0;
        }
        .mkp-status.online { background: #2ecc71; }
        .mkp-status.offline { background: #b2bec3; }
        
        .mkp-avatar-box { position: relative; width: 30px; height: 30px; }

        .mkp-date { font-size: 0.75rem; color: #b2bec3; }

        /* Responsive */
        @media (max-width: 992px) {
            .mkp-layout { grid-template-columns: 1fr; }
            .mkp-sidebar { position: relative; top: 0; }
        }
        @media (max-width: 576px) {
            .mkp-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
            .mkp-img-wrap { height: 120px; }
            .mkp-price-tag { font-size: 0.85rem; padding: 4px 8px; }
            .mkp-title { font-size: 0.9rem; }
            .mkp-username { font-size: 0.75rem; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        }

@media (max-width: 768px) {
  
    .mkp-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
        margin-bottom: 15px;
    }

  
    .mkp-add-btn, 
    .mkp-reset-btn {
        width: 100% !important;       
        justify-content: center;      
        height: 44px;                
        font-size: 0.85rem;          
        padding: 0 5px !important;    
        white-space: nowrap;          
        border-radius: 12px;         
    }

 
    .mkp-add-btn i, 
    .mkp-reset-btn i {
        font-size: 1rem;
        margin-right: 4px;
    }
    
 
    .mkp-grid {
        gap: 10px !important;
    }
}
/* --- MODERN LIVE FEED (TICKER STYLE) --- */
.live-feed-container {
    background: #fff;
    border-radius: 16px; /* Yumşaq künclər */
    border: 1px solid #e1e1e1;
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    height: 64px; /* Sabit hündürlük */
    display: flex;
    align-items: center;
}

/* Sol Tərəfdə Sabit Başlıq (Header) */
.lf-static-header {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 20; /* Slayderin üstündə dursun */
    border-right: 1px solid #f1f2f6;
    box-shadow: 5px 0 15px rgba(0,0,0,0.02); /* Kölgə effekti */
    min-width: 140px; /* Minimum genişlik */
}

/* Qırmızı Nöqtə Animasiyası */
.lf-pulse {
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    animation: lf-pulse 1.5s infinite;
}

.lf-label {
    font-weight: 800;
    font-size: 0.9rem;
    color: #2d3436;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Gizlətmə Düyməsi */
.lf-hide-btn {
    margin-left: auto;
    color: #b2bec3;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
}
.lf-hide-btn:hover { color: #d63031; }



/* Kart Dizaynı (Ticker Item) */
.lf-ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    padding: 5px 15px 5px 5px; /* Sol tərəf şəkliə görə az padding */
    border-radius: 30px; /* Oval forma */
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: all 0.2s ease;
    width: fit-content;
    white-space: nowrap;
    user-select: none; /* Yazını seçməyi əngəlləyir (sürüşdürmə üçün) */
}

.lf-ticker-item:hover {
    background: #fff;
    border-color: #00b894;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 184, 148, 0.15);
}

.lf-t-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.lf-t-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    justify-content: center;
}

.lf-t-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2d3436;
}

.lf-t-time {
    font-size: 0.65rem;
    color: #b2bec3;
    margin-left: 5px;
    font-weight: normal;
}

.lf-t-price {
    font-size: 0.75rem;
    font-weight: 800;
    color: #00b894; /* Yaşıl rəng */
}

/* Animasiya Keyframes */
@keyframes lf-pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 71, 87, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}

/* --- MOBİL RESPONSIVE --- */
@media (max-width: 768px) {
    .live-feed-container {
        flex-direction: column; /* Alt-alta düzülür */
        height: auto;
        padding: 0;
        border-radius: 12px;
    }

    .lf-static-header {
        position: relative; /* Artıq absolute deyil */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f2f6;
        padding: 12px 15px;
        box-shadow: none;
    }

   
    
    /* Slayderi biraz kiçildirik */
    .lf-ticker-item {
        padding: 4px 12px 4px 4px;
    }
    .lf-t-img {
        width: 32px; 
        height: 32px;
    }
    .lf-t-title {
        font-size: 0.75rem;
    }
}

/* Slayder sahəsi üçün düzəliş */
.lf-swiper-area {
    width: 100%;
    /* Soldan başlıq qədər boşluq veririk ki, kartlar başlığın altından çıxmasın */
    padding-left: 160px !important; 
    padding-right: 10px !important;
    display: flex;
    align-items: center;
    height: 100%;
}

/* Mobil üçün ayrıca düzəliş */
@media (max-width: 768px) {
    .lf-swiper-area {
        padding-left: 10px !important; /* Mobildə başlıq yuxarıda olduğu üçün soldan boşluq lazım deyil */
        padding-top: 10px !important;
    }
}

:root {
    --ep-primary: #00b894; /* Nanə Yaşılı */
    --ep-dark: #2d3436;
    --ep-gray: #f8f9fa;
    --ep-border: #e1e1e1;
    --ep-radius: 16px;
    --ep-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- Layout --- */
.elanshop-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    padding-top: 20px;
    align-items: start;
}

/* --- Breadcrumb --- */
.elanshop-bc {
    background: #fff;
    padding: 15px 20px;
    border-radius: var(--ep-radius);
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
}
.elanshop-bc__list {
    list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; align-items: center; font-size: 0.9rem;
}
.elanshop-bc__list li a { color: #636e72; text-decoration: none; transition: 0.2s; }
.elanshop-bc__list li a:hover { color: var(--ep-primary); }
.elanshop-bc__list li.active { color: var(--ep-dark); font-weight: 600; }
.elanshop-bc__list li + li::before { content: "/"; color: #b2bec3; margin-right: 10px; }

/* --- Header --- */
.elanshop-head {
    background: #fff;
    border-radius: var(--ep-radius);
    border: 1px solid #e1e1e1;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--ep-shadow);
}
.elanshop-head__left { display: flex; flex-direction: column; gap: 5px; }
.elanshop-breadcrumb { font-size: 0.85rem; color: var(--ep-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.elanshop-title { font-size: 1.8rem; font-weight: 800; color: var(--ep-dark); line-height: 1.2; margin: 0; }

.elanshop-sharechips { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.elanshop-sharechips li a {
    width: 36px; height: 36px; border-radius: 50%; background: var(--ep-gray);
    color: #636e72; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: 0.3s; font-size: 1rem;
}
.elanshop-sharechips li a:hover { background: var(--ep-primary); color: #fff; transform: translateY(-3px); }

/* --- Gallery --- */
.elanshop-card {
    background: #fff;
    border-radius: var(--ep-radius);
    border: 1px solid #e1e1e1;
    padding: 25px;
    box-shadow: var(--ep-shadow);
    margin-bottom: 25px;
}

.elanshop-gallery__main {
    display: block;
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f2f6;
    margin-bottom: 15px;
    border: 1px solid #eee;
}
.elanshop-gallery__main img { width: 100%; height: 100%; object-fit: contain; transition: 0.3s; }

.elanshop-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.elanshop-thumb {
    width: 70px; height: 70px; border-radius: 10px; border: 2px solid transparent;
    cursor: pointer; overflow: hidden; transition: 0.2s; background: #fff; padding: 0; flex-shrink: 0;
}
.elanshop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.elanshop-thumb.is-active, .elanshop-thumb:hover { border-color: var(--ep-primary); }

/* --- Tabs --- */
.elanshop-tabs__nav {
    display: flex; gap: 10px; border-bottom: 1px solid #f1f2f6; padding-bottom: 15px; margin-bottom: 20px; list-style: none; padding-left: 0;
}
.elanshop-tabs__nav button {
    background: transparent; border: none; font-size: 1rem; font-weight: 700;
    color: #b2bec3; padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: 0.3s;
}
.elanshop-tabs__nav button.active { background: rgba(0, 184, 148, 0.1); color: var(--ep-primary); }

.elanshop-desc { font-size: 0.95rem; line-height: 1.6; color: #636e72; }
.elanshop-section-title { font-size: 1.1rem; font-weight: 700; color: var(--ep-dark); margin-bottom: 15px; margin-top: 25px; border-left: 4px solid var(--ep-primary); padding-left: 10px; }

.elanshop-video__frame { width: 100%; height: 350px; border-radius: 12px; overflow: hidden; }
.elanshop-video__frame iframe { width: 100%; height: 100%; border: none; }

.elanshop-details__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.elanshop-kv { display: flex; justify-content: space-between; background: var(--ep-gray); padding: 12px; border-radius: 8px; font-size: 0.9rem; }
.elanshop-kv__k { font-weight: 600; color: #636e72; }
.elanshop-kv__v { font-weight: 700; color: var(--ep-dark); }

/* --- Comments --- */
.elanshop-commentlist { list-style: none; padding: 0; margin: 0 0 20px 0; }
.elanshop-comment { border-bottom: 1px solid #f1f2f6; padding: 15px 0; }
.elanshop-comment:last-child { border-bottom: none; }
.elanshop-comment__meta { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.85rem; }
.elanshop-comment__name { font-weight: 700; color: var(--ep-dark); }
.elanshop-comment__text { font-size: 0.9rem; color: #636e72; }
.elanshop-nocomment { text-align: center; color: #b2bec3; font-style: italic; }

.elanshop-input { width: 100%; border: 1px solid #e1e1e1; border-radius: 10px; padding: 12px; font-size: 0.9rem; outline: none; transition: 0.3s; background: #fdfdfd; }
.elanshop-input:focus { border-color: var(--ep-primary); box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.1); background: #fff; }

/* --- RIGHT COLUMN --- */
.elanshop-buy { text-align: center; padding: 30px; }
.elanshop-buy__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.elanshop-status { font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.elanshop-status.is-active { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }
.elanshop-status.is-pending { background: rgba(255, 159, 67, 0.1); color: #ff9f43; }
.elanshop-id { color: #b2bec3; font-size: 0.85rem; }

.elanshop-price { font-size: 2.5rem; font-weight: 800; color: var(--ep-primary); margin-bottom: 20px; letter-spacing: -1px; }

.elanshop-btn { display: flex; align-items: center; justify-content: center; width: auto; padding: 12px; border-radius: 10px; border: none; font-weight: 700; cursor: pointer; transition: 0.3s; text-decoration: none; gap: 8px; font-size: 1rem; }
.elanshop-btn--grad { background: linear-gradient(135deg, #00b894, #00cece); color: #fff; box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3); }
.elanshop-btn--grad:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 184, 148, 0.4); color: #fff; }
.elanshop-btn--soft { background: var(--ep-gray); color: var(--ep-dark); margin-top: 10px; }
.elanshop-btn--soft:hover { background: #e1e1e1; }

.elanshop-infolist { list-style: none; padding: 0; margin: 20px 0 0 0; border-top: 1px solid #f1f2f6; padding-top: 15px; }
.elanshop-infolist li { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 8px; color: #636e72; }
.elanshop-infolist li span:last-child { font-weight: 600; color: var(--ep-dark); }

/* Seller Box (Fixed Layout) */
.elanshop-seller__box { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; width: 100%; }
.elanshop-seller__avatar { width: 60px; height: 60px; position: relative; flex-shrink: 0; }
.elanshop-seller__avatar img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.elanshop-seller__frame { position: absolute; top: -5px; left: -5px; width: 70px; height: 70px; background-size: cover; pointer-events: none; }

.elanshop-seller__meta { flex: 1; overflow: hidden; }
.elanshop-seller__name { font-size: 1.1rem; font-weight: 700; color: var(--ep-dark); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elanshop-seller__status { font-size: 0.8rem; display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #636e72; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.on { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
.dot.off { background: #b2bec3; }

.elanshop-verify { display: flex; gap: 10px; justify-content: center; margin-bottom: 15px; background: #f8f9fa; padding: 10px; border-radius: 10px; }
.elanshop-verify .v { width: 32px; height: 32px; border-radius: 50%; background: #dfe6e9; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.elanshop-verify .v.ok { background: #00b894; }

.elanshop-sellerstats { display: flex; justify-content: space-between; font-size: 0.85rem; color: #636e72; margin-bottom: 15px; }
.elanshop-sellerstats div i { margin-right: 5px; }
.elanshop-sellerstats div:first-child i { color: #2ecc71; }
.elanshop-sellerstats div:last-child i { color: #e17055; }

/* --- CUSTOM MODAL (BOOTSTRAPSIZ) --- */
.custom-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center;
    backdrop-filter: blur(5px); animation: fadeIn 0.3s ease;
}
.custom-modal-content {
    background: #fff; width: 90%; max-width: 450px; border-radius: 20px;
    overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    transform: scale(0.8); animation: popIn 0.3s forwards;
}
.custom-modal-header {
    background: var(--ep-primary); padding: 20px; display: flex;
    justify-content: space-between; align-items: center; color: #fff;
}
.custom-modal-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.custom-modal-close {
    background: transparent; border: none; color: #fff; font-size: 1.5rem;
    cursor: pointer; line-height: 1;
}
.custom-modal-body { padding: 30px; text-align: center; font-size: 1rem; color: #2d3436; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { to { transform: scale(1); } }

/* Responsive */
@media (max-width: 992px) {
    .elanshop-grid { grid-template-columns: 1fr; }
    .elanshop-col--right { order: -1; margin-bottom: 20px; }
    .elanshop-head { flex-direction: column; align-items: flex-start; gap: 15px; }
    .elanshop-gallery__main { height: 300px; }
}

/* --- MOBİL RESPONSIVE CSS --- */

/* Tablet və Kiçik PC (992px-dən aşağı) */
@media (max-width: 992px) {
    .elanshop-grid {
        grid-template-columns: 100%; /* Tək sütun */
        gap: 20px;
    }

    /* Sağ tərəfi (Qiymət və Satıcı) məzmundan əvvəl göstər */
    .elanshop-col--right {
        order: -1; 
    }

    /* Başlıq hissəsi */
    .elanshop-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .elanshop-sharechips {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Mobil Telefonlar (768px-dən aşağı) */
@media (max-width: 768px) {
    
    /* Kartların iç boşluqlarını azaldırıq */
    .elanshop-card, .elanshop-head {
        padding: 20px;
    }

    /* Başlıq */
    .elanshop-title {
        font-size: 1.3rem;
    }
    

    .elanshop-gallery__main {
        height: 250px; /* Mobildə şəkli çox hündür etmirik */
    }
    
    .elanshop-thumb {
        width: 60px;
        height: 60px;
    }


    .elanshop-price {
        font-size: 2rem;
    }
    
    .elanshop-btn {
        height: 48px;
        font-size: 1rem;
    }


    .elanshop-seller__box {
        flex-direction: row; /* Avatar və ad yan-yana qalsın */
        align-items: center;
    }

    .elanshop-tabs__nav {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        /* Scrollbar-ı gizlət */
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    .elanshop-tabs__nav::-webkit-scrollbar {
        display: none;
    }
    
    .elanshop-tabs__nav li {
        flex: 0 0 auto;
    }


    .elanshop-details__grid {
        grid-template-columns: 1fr; /* Detallar alt-alta */
        gap: 8px;
    }
    
    .elanshop-video__frame {
        height: 200px;
    }
    
  
    .custom-modal-content {
        width: 95%;
        margin: 10px;
    }
}



.alertMessage {
    position: fixed;
    top: 20px !important;        /* Change from bottom to top */
    bottom: auto !important;     /* Reset bottom */
    right: 20px !important;      /* Keep it on the right */
    z-index: 99999;
    
    background-color: #fff !important;
    color: #2d3436 !important;
    padding: 15px 20px 15px 50px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid #f1f2f6 !important;
    min-width: 300px;
    
    /* Animation: Slide in from Right or Top */
    animation: slideInRight 0.4s ease forwards;
    display: flex;
    align-items: center;
}

/* Success Style */
.alertMessage.alert_success {
    border-left: 5px solid #2ecc71 !important;
}
.alertMessage.alert_success::before {
    content: '\f058'; /* FontAwesome Check Circle */
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    color: #2ecc71;
    font-size: 1.4rem;
}

/* Error Style */
.alertMessage.alert_error {
    border-left: 5px solid #ff4757 !important;
}
.alertMessage.alert_error::before {
    content: '\f057'; /* FontAwesome Times Circle */
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    color: #ff4757;
    font-size: 1.4rem;
}

/* Animation Keyframes */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}


  :root {
        --sp-primary: #00b894;
        --sp-dark: #2d3436;
        --sp-gray: #f8f9fa;
        --sp-border: #e1e1e1;
        --sp-radius: 16px;
        --sp-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    /* --- LAYOUT --- */
    .spf-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 30px;
        padding-top: 20px;
        align-items: start;
    }

    /* --- PROFILE HEADER CARD (Satıcı Profili Dizaynı) --- */
    .spf-header-card {
        background: #fff;
        border-radius: var(--sp-radius);
        border: 1px solid var(--sp-border);
        box-shadow: var(--sp-shadow);
        overflow: hidden;
        margin-bottom: 30px;
    }

    .spf-cover {
        height: 200px;
        background: #dfe6e9;
        position: relative;
    }
    .spf-cover img { width: 100%; height: 100%; object-fit: cover; }
    .spf-cover-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 100%; pointer-events: none; }

    .spf-profile-body {
        padding: 20px 30px;
        position: relative;
        display: flex;
        align-items: flex-end;
        gap: 20px;
        margin-top: -60px; /* Avatarı yuxarı qaldırır */
    }

    .spf-avatar-box {
        position: relative;
        width: 120px; height: 120px;
        flex-shrink: 0;
    }
    .spf-avatar {
        width: 100%; height: 100%;
        border-radius: 12px;
        border: 4px solid #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        object-fit: cover;
        background: #fff;
    }
    .spf-pf-frame {
        position: absolute; top: -12px; left: -12px; width: 144px; height: 144px;
        background-size: cover; pointer-events: none; z-index: 2;
    }

    .spf-info {
        flex: 1;
        padding-top: 65px; /* Avatarın yanındakı boşluq */
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .spf-names { display: flex; flex-direction: column; }
    .spf-name { font-size: 1.5rem; font-weight: 800; color: var(--sp-dark); line-height: 1.2; }
    .spf-bio { font-size: 0.9rem; color: #636e72; margin-top: 5px; }
    
    .spf-status-badge {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 0.85rem; font-weight: 600; color: #636e72;
        margin-top: 5px;
    }
    .spf-dot { width: 8px; height: 8px; border-radius: 50%; }
    .spf-dot.on { background: #2ecc71; box-shadow: 0 0 5px #2ecc71; }
    .spf-dot.off { background: #b2bec3; }

    .spf-stats {
        display: flex; gap: 20px;
    }
    .spf-stat-item {
        text-align: center;
        background: var(--sp-gray);
        padding: 8px 15px;
        border-radius: 10px;
        border: 1px solid #eee;
    }
    .spf-stat-val { display: block; font-weight: 800; font-size: 1.1rem; color: var(--sp-dark); }
    .spf-stat-label { font-size: 0.75rem; color: #b2bec3; text-transform: uppercase; }

    /* --- SIDEBAR FILTERS --- */
    .spf-sidebar {
        background: #fff;
        border-radius: var(--sp-radius);
        border: 1px solid var(--sp-border);
        padding: 20px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
        position: sticky; top: 20px;
    }

    .spf-input {
        width: 100%; height: 45px; border: 1px solid var(--sp-border); border-radius: 10px;
        padding: 0 15px; outline: none; transition: 0.3s; background: #fff; box-sizing: border-box;
    }
    .spf-input:focus { border-color: var(--sp-primary); }

    .spf-btn {
       ; padding: 12px; border-radius: 10px; border: none; font-weight: 600;
        cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;
        text-decoration: none !important; font-size: 0.95rem;
    }
    .spf-btn-primary { background: var(--sp-primary); color: #fff; }
    .spf-btn-primary:hover { background: #00a884; transform: translateY(-2px); color: #fff; }
    .spf-btn-soft { background: #f1f2f6; color: var(--sp-dark); }
    .spf-btn-soft:hover { background: #e1e1e1; }

    /* Slider */
    #slider-range { height: 6px; background: #dfe6e9; border: none; border-radius: 3px; margin: 15px 5px; }
    #slider-range .ui-slider-range { background: var(--sp-primary); }
    #slider-range .ui-slider-handle {
        border-color: var(--sp-primary); background: #fff; border-radius: 50%; top: -7px; cursor: pointer; outline: none;
    }
    .spf-price-inputs { display: flex; gap: 10px; margin-top: 15px; }

    /* --- GRID & CARDS --- */
    .spf-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px;
    }
    .spf-card {
        background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-border);
        overflow: hidden; transition: 0.3s; position: relative; display: flex; flex-direction: column;
    }
    .spf-card:hover { transform: translateY(-5px); box-shadow: var(--sp-shadow); border-color: var(--sp-primary); }
    
    .spf-card-img { height: 160px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #f1f1f1; }
    .spf-card-img img { width: 90%; height: 90%; object-fit: contain; transition: 0.5s; }
    .spf-card:hover .spf-card-img img { transform: scale(1.05); }

    .spf-card-price { position: absolute; top: 10px; right: 10px; background: var(--sp-primary); color: #fff; padding: 4px 8px; border-radius: 6px; font-weight: 700; font-size: 0.85rem; }

    .spf-card-body { padding: 15px; flex: 1; }
    .spf-card-title { color: var(--sp-dark); font-weight: 700; font-size: 1rem; text-decoration: none; display: block; margin-bottom: 5px; }
    .spf-card-desc { font-size: 0.85rem; color: #636e72; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    .spf-card-footer { padding: 10px 15px; border-top: 1px solid #f1f2f6; background: #fff; margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #b2bec3; }

    /* --- CUSTOM MODAL --- */
    .custom-modal {
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center;
        backdrop-filter: blur(5px); animation: fadeIn 0.3s ease;
    }
    .custom-modal-content {
        background: #fff; width: 90%; max-width: 450px; border-radius: 20px;
        overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        transform: scale(0.8); animation: popIn 0.3s forwards;
    }
    .custom-modal-header {
        background: var(--sp-primary); padding: 20px; display: flex;
        justify-content: space-between; align-items: center; color: #fff;
    }
    .custom-modal-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
    .custom-modal-close {
        background: transparent; border: none; color: #fff; font-size: 1.5rem;
        cursor: pointer; line-height: 1;
    }
    .custom-modal-body { padding: 30px; text-align: center; font-size: 1rem; color: #2d3436; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes popIn { to { transform: scale(1); } }

    /* Responsive */
    @media (max-width: 992px) {
        .spf-layout { grid-template-columns: 1fr; }
        .spf-profile-body { flex-direction: column; align-items: center; text-align: center; margin-top: -50px; }
        .spf-info { padding-top: 10px; justify-content: center; gap: 20px; }
        .spf-stats { width: 100%; justify-content: space-around; }
    }
    @media (max-width: 576px) {
        .spf-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .spf-card-img { height: 120px; }
    }


:root {
    --pa-primary: #00b894;
    --pa-dark: #2d3436;
    --pa-gray: #f8f9fa;
    --pa-border: #e1e1e1;
    --pa-radius: 12px;
    --pa-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


.p-add-header {
    background: #fff;
    border-radius: var(--pa-radius);
    border: 1px solid var(--pa-border);
    padding: 20px 25px;
    box-shadow: var(--pa-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.p-add-title { font-size: 1.3rem; font-weight: 800; color: var(--pa-dark); margin: 0; }

.p-add-card {
    background: #fff;
    border-radius: var(--pa-radius);
    border: 1px solid var(--pa-border);
    padding: 30px;
    box-shadow: var(--pa-shadow);
}

.p-stepper {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #f1f2f6;
    padding-bottom: 20px;
}
.p-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #b2bec3;
    position: relative;
}
.p-step.active { color: var(--pa-primary); }
.p-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: #f1f2f6; color: #636e72;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; transition: 0.3s;
}
.p-step.active .p-step-num { background: var(--pa-primary); color: #fff; }

.p-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}
.p-cat-item {
    position: relative;
    cursor: pointer;
}
.p-cat-input { position: absolute; opacity: 0; width: 0; height: 0; }
.p-cat-box {
    background: #fff;
    border: 2px solid var(--pa-border);
    border-radius: var(--pa-radius);
    padding: 20px 10px;
    text-align: center;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.p-cat-input:checked + .p-cat-box {
    border-color: var(--pa-primary);
    background: #f0fff4;
    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.2);
}
.p-cat-img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 5px; }
.p-cat-name { font-weight: 600; font-size: 0.9rem; color: var(--pa-dark); line-height: 1.2; }

.p-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.p-form-full { grid-column: 1 / -1; }

.p-form-group label {
    display: block; font-weight: 700; font-size: 0.9rem; color: var(--pa-dark); margin-bottom: 8px;
}
.p-input {
    width: 100%; height: 50px; border: 1px solid var(--pa-border);
    border-radius: 10px; padding: 0 15px; font-size: 0.95rem; outline: none; transition: 0.3s;
    background: #fff; box-sizing: border-box;
}
.p-input:focus { border-color: var(--pa-primary); box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.1); }
.p-textarea { height: auto; padding: 15px; line-height: 1.5; }

.p-file-area {
    border: 2px dashed var(--pa-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
}
.p-file-area:hover { border-color: var(--pa-primary); background: #f0fff4; }
.p-file-real { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.p-file-icon { font-size: 2rem; color: #b2bec3; margin-bottom: 10px; }
.p-file-text { font-weight: 600; color: #636e72; }

.p-gallery-preview {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px;
}
.p-g-thumb {
    width: 70px; height: 70px; border-radius: 8px; border: 1px solid #eee;
    object-fit: cover; position: relative;
}
.p-g-rm {
    position: absolute; top: -5px; right: -5px; width: 20px; height: 20px;
    background: #ff4757; color: #fff; border-radius: 50%; border: none;
    font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.p-btn-next {
    width: 100%; height: 50px; background: var(--pa-primary); color: #fff;
    border: none; border-radius: 12px; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px;
}
.p-btn-next:hover { background: #00a884; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3); }

.p-alert {
    padding: 15px; border-radius: 10px; margin-bottom: 20px; font-size: 0.9rem; font-weight: 500;
}
.p-alert-danger { background: #ffecec; color: #e74c3c; border: 1px solid #ffdede; }
.p-alert-success { background: #e8f8f5; color: #00b894; border: 1px solid #d1f2eb; }

@media (max-width: 992px) {
    .account-layout { grid-template-columns: 1fr; }
    
}
@media (max-width: 768px) {
    .p-form-grid { grid-template-columns: 1fr; }
    .p-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

    :root {
        --sale-primary: #00b894;
        --sale-dark: #2d3436;
        --sale-gray: #f8f9fa;
        --sale-border: #e1e1e1;
        --sale-radius: 12px;
        --sale-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }



    /* --- Page Header --- */
    .sale-header {
        background: #fff; border-radius: var(--sale-radius); border: 1px solid var(--sale-border);
        padding: 20px 25px; box-shadow: var(--sale-shadow);
        display: flex; justify-content: space-between; align-items: center;
    }
    .sale-title { font-size: 1.3rem; font-weight: 800; color: var(--sale-dark); margin: 0; }
    .sale-count { background: var(--sale-gray); padding: 5px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: #636e72; }

    /* --- Sales List (Card Style) --- */
    .sale-list { display: flex; flex-direction: column; gap: 15px; }
    
    .sale-item {
        background: #fff; border-radius: var(--sale-radius); border: 1px solid var(--sale-border);
        padding: 20px; transition: 0.3s; position: relative; overflow: hidden;
    }
    .sale-item:hover { transform: translateY(-3px); box-shadow: var(--sale-shadow); border-color: var(--sale-primary); }

    /* Grid içində Grid */
    .sale-grid {
        display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
    }

    /* Sol tərəf: Məlumatlar */
    .sale-info { display: flex; flex-direction: column; gap: 5px; }
    .sale-date { font-size: 0.8rem; color: #b2bec3; display: flex; align-items: center; gap: 5px; }
    .sale-prod-title { font-size: 1.1rem; font-weight: 700; color: var(--sale-dark); }
    
    .sale-meta {
        display: flex; gap: 15px; margin-top: 10px; font-size: 0.9rem; color: #636e72; flex-wrap: wrap;
    }
    .sale-meta div { display: flex; align-items: center; gap: 5px; }
    .sale-meta b { color: var(--sale-dark); }

    /* Qiymət və Qazanc */
    .sale-finance {
        display: flex; gap: 10px; margin-top: 10px; background: #f8f9fa; padding: 8px 12px; border-radius: 8px; width: fit-content;
    }
    .sf-item { display: flex; flex-direction: column; }
    .sf-label { font-size: 0.7rem; text-transform: uppercase; color: #b2bec3; font-weight: 600; }
    .sf-val { font-weight: 800; font-size: 0.95rem; color: var(--sale-dark); }
    .sf-val.earn { color: #00b894; } /* Qazanc yaşıl */
    .sf-val.fee { color: #e17055; }   /* Kesinti qırmızı */

    /* Sağ tərəf: Status və Buton */
    .sale-actions {
        display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    }
    
    .sale-status {
        font-size: 0.8rem; font-weight: 700; padding: 5px 12px; border-radius: 20px;
        text-transform: uppercase; letter-spacing: 0.5px; display: inline-block;
    }
    .st-pending { background: rgba(255, 159, 67, 0.1); color: #ff9f43; }
    .st-info { background: rgba(9, 132, 227, 0.1); color: #0984e3; }
    .st-rejected { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }
    .st-completed { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }

    .sale-btn {
        padding: 8px 15px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
        text-decoration: none !important; transition: 0.2s; cursor: pointer; border: none;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .btn-deliver { background: var(--sale-primary); color: #fff; }
    .btn-deliver:hover { background: #00a884; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 184, 148, 0.3); }

    /* Empty State */
    .sale-empty {
        text-align: center; padding: 50px; background: #fff; border-radius: var(--sale-radius);
        border: 1px dashed #e1e1e1;
    }

 

    .sale-input {
        width: 100%; height: 45px; border: 1px solid var(--sale-border); border-radius: 10px;
        padding: 0 15px; outline: none; transition: 0.3s; background: #fff;
    }
    .sale-input:focus { border-color: var(--sale-primary); }

    /* Alert */
    .sale-alert {
        padding: 12px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 15px;
    }
    .sa-info { background: #e3f2fd; color: #0d47a1; border: 1px solid #bbdefb; }
    .sa-danger { background: #ffecec; color: #e74c3c; border: 1px solid #ffdede; }
    .sa-success { background: #e8f8f5; color: #00b894; border: 1px solid #d1f2eb; }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes popIn { to { transform: scale(1); } }

    @media (max-width: 992px) {
        .account-layout { grid-template-columns: 1fr; }
        
    }
    @media (max-width: 768px) {
        .sale-grid { grid-template-columns: 1fr; }
        .sale-actions { align-items: flex-start; flex-direction: row; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f2f6; width: 100%; }
        .sale-finance { width: 100%; justify-content: space-between; }
    }
/* --- STREAMER PANEL (YENİ DİZAYN) --- */
:root {
    --st-orange: #ff6a00;
    --st-dark: #2d3436;
    --st-gray: #f8f9fa;
    --st-border: #e1e1e1;
    --st-radius: 16px;
    --st-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* --- STATİSTİKA KARTLARI --- */
.st-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.st-card {
    background: #fff;
    border-radius: var(--st-radius);
    padding: 20px;
    border: 1px solid var(--st-border);
    box-shadow: var(--st-shadow);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.st-card:hover {
    transform: translateY(-5px);
    border-color: var(--st-orange);
    box-shadow: 0 10px 25px rgba(255, 106, 0, 0.15);
}

.st-icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 106, 0, 0.1);
    color: var(--st-orange);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.st-card-info h6 {
    margin: 0;
    line-height: 1.3;
}

.st-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--st-dark);
}

.st-label {
    font-size: 0.85rem;
    color: #636e72;
    font-weight: 500;
}

/* --- TAB MENYU --- */
.st-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    background: #fff;
    padding: 10px;
    border-radius: var(--st-radius);
    border: 1px solid var(--st-border);
}

.st-tab-link {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #636e72;
    text-decoration: none;
    transition: 0.3s;
    background: transparent;
    border: 1px solid transparent;
}

.st-tab-link:hover {
    color: var(--st-orange);
    background: #fff5eb;
}

.st-tab-link.active {
    background: var(--st-orange);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.3);
}

/* --- TAB CONTENT AREA --- */
.st-content-box {
    background: #fff;
    border-radius: var(--st-radius);
    border: 1px solid var(--st-border);
    padding: 25px;
    box-shadow: var(--st-shadow);
}

/* --- ALERTS & STATUS --- */
.st-alert {
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.st-alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.st-alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.st-alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }

.st-profile-link {
    color: var(--st-orange);
    font-weight: 700;
    text-decoration: none;
}
.st-profile-link:hover { text-decoration: underline; }

/* --- CUSTOM TABLES (DIV BASED) --- */
.st-table-wrapper {
    overflow-x: auto;
}

.st-table {
    min-width: 700px;
    width: 100%;
}

.st-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 15px;
    border-bottom: 1px solid #f1f2f6;
    align-items: center;
    font-size: 0.9rem;
}

.st-row.header {
    background: #f8f9fa;
    font-weight: 700;
    color: var(--st-dark);
    border-radius: 10px;
    margin-bottom: 10px;
}

.st-row:not(.header):hover {
    background: #fff5eb;
}

.st-col {
    padding: 0 10px;
    word-break: break-word;
}

.st-textarea {
    width: 100%;
    border: 1px solid #eee;
    background: #fcfcfc;
    border-radius: 6px;
    padding: 5px;
    font-size: 0.85rem;
    resize: none;
    color: #636e72;
}

/* --- STATUS BADGES --- */
.st-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

.st-status.pending { background: #fff3cd; color: #856404; }
.st-status.approved { background: #d4edda; color: #155724; }
.st-status.rejected { background: #f8d7da; color: #721c24; }

/* Mobil */
@media (max-width: 768px) {
    .st-tabs-nav { flex-direction: column; }
    .st-tab-link {  text-align: center; }
}
/* --- FORM ELEMENTLƏRİ (YENİ) --- */
.st-form-group {
    margin-bottom: 20px;
}

.st-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--st-dark);
    font-size: 0.9rem;
}

.st-form-input, 
.st-form-select {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    background: #fcfcfc;
    color: var(--st-dark);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
}

.st-form-input:focus, 
.st-form-select:focus {
    border-color: var(--st-orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
}

.st-form-input:disabled, 
.st-form-select:disabled {
    background: #f1f2f6;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Input Qrupu (Link birləşdirmək üçün) */
.st-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.st-group-text {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    color: #636e72;
    font-size: 0.9rem;
    white-space: nowrap;
}

.st-input-group .st-form-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Streamlabs Bağlantı Qutusu */
.st-connect-box {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px dashed #e1e1e1;
}

.st-connect-icon {
    font-size: 3rem;
    color: var(--st-orange);
    margin-bottom: 15px;
    display: inline-block;
}

.st-back-link {
    display: inline-block;
    margin-top: 15px;
    color: #636e72;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.st-back-link:hover { color: var(--st-orange); }


/* --- FORM BUTONU (Davam et) --- */
.st-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px; /* Geniş və dolğun */
    background: linear-gradient(135deg, #ff6a00 0%, #e65100 100%); /* Narıncı Qradient */
    color: #fff !important;
    border: none;
    border-radius: 12px; /* Oval künclər */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.3); /* Yüngül narıncı kölgə */
    margin-top: 15px;
    text-decoration: none;
    width: auto; /* Yazıya görə genişlik */
}

/* Hover (Üzərinə gələndə) */
.st-btn-primary:hover {
    transform: translateY(-3px); /* Yuxarı qalxır */
    box-shadow: 0 8px 25px rgba(255, 106, 0, 0.45); /* Kölgə böyüyür */
    background: linear-gradient(135deg, #e65100 0%, #ff6a00 100%); /* Rəng tərsinə dönür */
}

/* Mobil üçün tam ekran */
@media (max-width: 768px) {
    .st-btn-primary {
        width: 100%;
        display: flex;
    }
}

/* --- DONATE PAGE STYLES --- */
:root {
    --dt-orange: #ff6a00;
    --dt-dark: #2d3436;
    --dt-gray: #f8f9fa;
    --dt-border: #e1e1e1;
    --dt-radius: 16px;
    --dt-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Layout Grid */
.dt-layout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    padding-top: 20px;
    align-items: start;
}

/* --- LEFT SIDEBAR (PROFILE) --- */
.dt-profile-card {
    background: #fff;
    border-radius: var(--dt-radius);
    padding: 30px;
    border: 1px solid var(--dt-border);
    box-shadow: var(--dt-shadow);
    text-align: center;
    position: sticky;
    top: 20px;
}

.dt-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 20px;
    padding: 5px;
    border: 2px solid var(--dt-orange);
    position: relative;
}

.dt-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.dt-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dt-dark);
    margin-bottom: 5px;
}

.dt-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.dt-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--dt-gray);
    color: var(--dt-dark);
    font-size: 1.1rem;
    transition: 0.3s;
}
.dt-social-link:hover {
    background: var(--dt-orange);
    color: #fff;
    transform: translateY(-3px);
}

/* --- RIGHT SIDE (CONTENT) --- */
.dt-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Video Player */
.dt-player-box {
    background: #000;
    border-radius: var(--dt-radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Donate Form Card */
.dt-form-card {
    background: #fff;
    border-radius: var(--dt-radius);
    padding: 30px;
    border: 1px solid var(--dt-border);
    box-shadow: var(--dt-shadow);
}

/* Form Elements */
.dt-group { margin-bottom: 20px; }

.dt-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dt-dark);
}

.dt-input, .dt-textarea {
    width: 100%;
    border: 1px solid var(--dt-border);
    background: #fcfcfc;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 0.95rem;
    outline: none;
    transition: 0.3s;
}
.dt-input:focus, .dt-textarea:focus {
    border-color: var(--dt-orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
}

.dt-textarea { resize: vertical; min-height: 100px; }

/* Amount Buttons */
.dt-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dt-amount-btn {
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--dt-gray);
    border: 1px solid transparent;
    font-weight: 700;
    color: var(--dt-dark);
    cursor: pointer;
    transition: 0.2s;
}

.dt-amount-btn:hover {
    background: #fff;
    border-color: var(--dt-orange);
    color: var(--dt-orange);
}

/* Submit Button */
.dt-submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #ff6a00, #e65100);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}
.dt-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 106, 0, 0.2);
}

/* Info Box */
.dt-info-box {
    background: #fff8f0;
    border: 1px dashed var(--dt-orange);
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #5d4037;
}

.dt-info-box strong { color: var(--dt-orange); }

/* --- POPUP STYLES --- */
.dt-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999; display: none; align-items: center; justify-content: center;
}
.dt-popup.visible { display: flex; }

.dt-popup-overlay {
    position: absolute; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
}

.dt-popup-content {
    position: relative; z-index: 2; background: #fff; width: 90%; max-width: 450px;
    border-radius: 20px; padding: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: popUp 0.3s ease-out;
}
@keyframes popUp { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dt-popup-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px;
}
.dt-popup-title { font-size: 1.2rem; font-weight: 800; color: var(--dt-dark); margin: 0; }
.dt-popup-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #b2bec3; }

/* Mobil */
@media (max-width: 992px) {
    .dt-layout { grid-template-columns: 1fr; }
    .dt-profile-card { position: static; }
}


/* Bildiriş qutusunun (Alert) özü - Əgər yoxdursa bunu əlavə edin */
.alert-box-class-name { /* Buranı öz div-inizin class adı ilə dəyişin */
    position: relative; /* Bu vacibdir ki, düymə qutunun içində küncdə dursun */
}

/* Bağla Düyməsi (btn-close) */
.btn-close {
    position: absolute; /* Qutunun içində sərbəst hərəkət üçün */
    top: 15px;
    right: 15px;
    width: 32px;      /* Rahat klikləmək üçün ölçü */
    height: 32px;
    background-color: transparent; /* Arxa fon şəffaf */
    border: none;
    border-radius: 50%; /* Tam dairəvi forma */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6; /* Bir az şəffaflıq */
    padding: 0;
}

/* "X" işarəsini yaratmaq üçün (İkon yoxdursa) */
.btn-close::before {
    content: "\00d7"; /* X işarəsinin kodu */
    font-size: 24px;
    font-weight: 300;
    color: #155724; /* Tünd yaşıl (Alert rənginə uyğun) */
    line-height: 1;
}

/* Üzərinə gələndə (Hover) */
.btn-close:hover {
    background-color: rgba(21, 87, 36, 0.1); /* Çox açıq yaşıl fon */
    opacity: 1; /* Tam görünür */
    transform: rotate(90deg); /* Qəşəng fırlanma effekti */
}

/* Klikləyəndə */
.btn-close:active {
    transform: scale(0.9);
}