:root {
    --brand-primary: #8b5cf6;
    --brand-secondary: #3b82f6;
    --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
    --brand-glow: rgba(139, 92, 246, 0.35);
    --bg-body: #f4f6f8;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f5f9;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1
}

body.dark,body.dark.modern,html.dark {
    --bg-body: #0b0f19;
    --bg-surface: #151a27;
    --bg-surface-hover: #1e2536;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #262e40;
    --border-hover: #3b455c
}


/* =========================================================
   FOOTER / INFO / MOBILE NAV  (Twitch-style palette)
   ========================================================= */

/* 1) RƏNG DƏYİŞƏNLƏRİ  ------------------------------------ */
:root {
    /* Footer & info area - LIGHT */
    --gxf-ft-bg: #f4f5ff;
    --gxf-ft-bg-deep: #eef2ff;
    --gxf-ft-card-bg: #ffffff;
    --gxf-ft-card-border: rgba(15, 23, 42, 0.08);
    --gxf-ft-card-glow: rgba(139, 92, 246, 0.16);

    --gxf-ft-text-main: #020617;
    --gxf-ft-text-soft: #64748b;
    --gxf-ft-text-mute: #94a3b8;

    --gxf-ft-accent: #8b5cf6;            /* twitch bənövşəyi */
    --gxf-ft-accent-soft: rgba(139, 92, 246, 0.18);
    --gxf-ft-accent-strong: #4f46e5;
    --gxf-ft-accent-strong-soft: rgba(79, 70, 229, 0.3);

    --gxf-ft-line: rgba(15, 23, 42, 0.08);

    --gxf-ft-chip-bg: rgba(129, 140, 248, 0.08);
    --gxf-ft-chip-border: rgba(129, 140, 248, 0.35);

    --gxf-ft-pill-bg: #eef2ff;
    --gxf-ft-pill-border: rgba(129, 140, 248, 0.4);

    --gxf-nav-bg: rgba(15, 23, 42, 0.95);
    --gxf-nav-border: rgba(148, 163, 184, 0.5);
    --gxf-nav-icon: #e5e7eb;
    --gxf-nav-text: #9ca3af;
    --gxf-nav-active: #a855f7;
}

body.dark,
body.dark.modern,
html.dark {
    /* Footer & info area - DARK */
    --gxf-ft-bg: #020617;
    --gxf-ft-bg-deep: #020617;
    --gxf-ft-card-bg: rgba(15, 23, 42, 0.98);
    --gxf-ft-card-border: rgba(148, 163, 184, 0.45);
    --gxf-ft-card-glow: rgba(37, 99, 235, 0.18);

    --gxf-ft-text-main: #e5e7eb;
    --gxf-ft-text-soft: #9ca3af;
    --gxf-ft-text-mute: #6b7280;

    --gxf-ft-accent: #a855f7;
    --gxf-ft-accent-soft: rgba(168, 85, 247, 0.25);
    --gxf-ft-accent-strong: #6366f1;
    --gxf-ft-accent-strong-soft: rgba(79, 70, 229, 0.4);

    --gxf-ft-line: rgba(15, 23, 42, 0.85);

    --gxf-ft-chip-bg: rgba(15, 23, 42, 0.9);
    --gxf-ft-chip-border: rgba(148, 163, 184, 0.55);

    --gxf-ft-pill-bg: rgba(15, 23, 42, 0.95);
    --gxf-ft-pill-border: rgba(148, 163, 184, 0.55);

    --gxf-nav-bg: rgba(15, 23, 42, 0.98);
    --gxf-nav-border: rgba(31, 41, 55, 0.9);
    --gxf-nav-icon: #e5e7eb;
    --gxf-nav-text: #9ca3af;
    --gxf-nav-active: #a855f7;
}
:root {

    --header-gradient: linear-gradient(119deg, rgba(255, 255, 255, .98) 0%, rgba(244, 246, 248, .98) 50%, rgba(139, 92, 246, .05) 100%);
    --footer-gradient: linear-gradient(180deg, rgba(244, 246, 248, .05) 0%, rgba(255, 255, 255, .98) 50%, rgba(255, 255, 255, .98) 100%);
}

body.dark, html.dark {
 
    --header-gradient: linear-gradient(119deg, rgba(30, 34, 39, .98) 0%, rgba(21, 26, 39, .98) 10%, rgba(110, 73, 255, .12) 60%, rgba(110, 73, 255, .22) 100%);
    --footer-gradient: linear-gradient(180deg, rgba(110, 73, 255, .05) 0%, rgba(21, 26, 39, .98) 40%, rgba(30, 34, 39, .98) 100%);
}


/* STANDART (İŞIQLI - LIGHT) REJİM ÜÇÜN RƏNGLƏR */
:root {
  --qb-accent:      var(--primary-color, #22d3ee);
  --qb-accent-2:    var(--primary-glow-color, #8b5cf6);
  --qb-success:     #22c55e;
  --qb-danger:      #ef4444;

  --qb-radius-xl:   18px;
  --qb-radius-lg:   14px;
  --qb-radius-md:   12px;

  /* İşıqlı rejim üçün ağ/açıq rənglər */
  --qb-backdrop:    rgba(255,255,255,.72);
  --qb-panel:       rgba(255,255,255,.98);
  --qb-surface:     rgba(15, 23, 42, .04);
  --qb-surface-2:   rgba(15, 23, 42, .06);

  --qb-border:      rgba(15, 23, 42, .12);
  --qb-border-2:    rgba(15, 23, 42, .18);

  --qb-text:        #0f172a; /* Tünd yazı */
  --qb-muted:       rgba(15, 23, 42, .62);

  --qb-input:       rgba(15, 23, 42, .04);
  --qb-input-br:    rgba(15, 23, 42, .14);
  --qb-focus-ring:  rgba(34, 211, 238, .22);

  --qb-shadow:      0 18px 55px rgba(2, 6, 23, .18);
}

/* QARANLIQ (DARK) REJİM ÜÇÜN RƏNGLƏR */
body.dark,
body.dark.modern,
html.dark {
  /* Qaranlıq rejim üçün tünd fon və açıq yazılar */
  --qb-backdrop:    rgba(6, 10, 18, .72);
  --qb-panel:       rgba(18, 24, 38, .98);
  --qb-surface:     rgba(255,255,255,.06);
  --qb-surface-2:   rgba(255,255,255,.08);

  --qb-border:      rgba(140, 170, 220, .18);
  --qb-border-2:    rgba(140, 170, 220, .28);

  --qb-text:        #e9eef7; /* Ağ yazı */
  --qb-muted:       rgba(233, 238, 247, .68);

  --qb-input:       rgba(255,255,255,.06);
  --qb-input-br:    rgba(140, 170, 220, .22);
  --qb-focus-ring:  rgba(34, 211, 238, .22);

  --qb-shadow:      0 18px 55px rgba(0,0,0,.55);
}



:root{
    --rv-accent: var(--brand-primary, var(--primary-color, #f97316));
    --rv-accent-2: #22c55e;

    --rv-card-bg: var(--hx-card-bg, rgba(255,255,255,.86));
    --rv-sec-bg: var(--hx-sec-bg, rgba(255,255,255,.72));
    --rv-border: var(--hx-border, rgba(15,23,42,.10));
    --rv-text: var(--hx-text, #0f172a);
    --rv-muted: rgba(var(--hx-text-rgb, 15,23,42), .62);

    --rv-input-bg: rgba(var(--hx-text-rgb, 15,23,42), .04);
    --rv-input-border: rgba(var(--hx-text-rgb, 15,23,42), .14);

    --rv-shadow: 0 18px 60px rgba(2,6,23,.10);
    --rv-shadow-2: 0 14px 35px rgba(2,6,23,.12);

    --rv-radius: 22px;
    --rv-radius-sm: 16px;
}

html.dark,
body.dark,
body.dark.modern{
    --rv-card-bg: var(--hx-card-bg, rgba(31,37,51,.92));
    --rv-sec-bg: var(--hx-sec-bg, rgba(31,37,51,.72));
    --rv-border: var(--hx-border, rgba(255,255,255,.10));
    --rv-text: var(--hx-text, #e9eef7);
    --rv-muted: rgba(233,238,247,.62);

    --rv-input-bg: rgba(255,255,255,.05);
    --rv-input-border: rgba(255,255,255,.12);

    --rv-shadow: 0 22px 70px rgba(0,0,0,.42);
    --rv-shadow-2: 0 18px 45px rgba(0,0,0,.34);
}



:root {
    --gmx-tab-border: #e0e0e0;
    --gmx-tab-text-muted: #6c757d;
    --gmx-tab-text-main: #1e1e21;
    --gmx-tab-card-bg: #f7f7f9;
    --gmx-tab-bg: #ffffff;
    --gmx-tab-accent: var(--primary-color, #22d3ee);
}

body.dark,
body.dark.modern,
html.dark {
    --gmx-tab-border: rgba(140, 170, 220, 0.18);
    --gmx-tab-text-muted: #a0a0b0;
    --gmx-tab-text-main: #e9eef7;
    --gmx-tab-card-bg: rgba(255, 255, 255, 0.04);
    --gmx-tab-bg: rgba(18, 24, 38, 0.98);
    --gmx-tab-accent: var(--primary-color, #22d3ee);
}




:root {
  --rvp-bg: rgba(255,255,255,.85);
  --rvp-bg2: rgba(248,250,252,.92);
  --rvp-border: rgba(15,23,42,.12);
  --rvp-text: #0f172a;
  --rvp-muted: rgba(15,23,42,.55);
  --rvp-accent: var(--primary-color, #f97316);
  --rvp-shadow: 0 14px 40px rgba(2,6,23,.10);
}

html.dark, body.dark, body.dark.modern {
  --rvp-bg: rgba(31,37,51,.92);
  --rvp-bg2: rgba(255,255,255,.04);
  --rvp-border: rgba(255,255,255,.10);
  --rvp-text: #e9eef7;
  --rvp-muted: rgba(233,238,247,.58);
  --rvp-shadow: 0 18px 50px rgba(0,0,0,.35);
}


:root{
  --vpr-card-bg: rgba(255,255,255,.85);
  --vpr-card-bg2: rgba(248,250,252,.92);
  --vpr-border: rgba(15,23,42,.12);
  --vpr-text: #0f172a;
  --vpr-muted: rgba(15,23,42,.60);
  --vpr-accent: var(--primary-color, #f97316);
  --vpr-shadow: 0 18px 55px rgba(2,6,23,.12);
  --vpr-soft: 0 10px 30px rgba(2,6,23,.10);
}

html.dark, body.dark, body.dark.modern{
  --vpr-card-bg: rgba(31,37,51,.92);
  --vpr-card-bg2: rgba(255,255,255,.04);
  --vpr-border: rgba(255,255,255,.10);
  --vpr-text: #e9eef7;
  --vpr-muted: rgba(233,238,247,.58);
  --vpr-shadow: 0 22px 70px rgba(0,0,0,.45);
  --vpr-soft: 0 12px 35px rgba(0,0,0,.35);
}

:root{
  --gmx-bg: #f6f8fc;
  --gmx-card: rgba(255,255,255,.86);
  --gmx-card-2: rgba(255,255,255,.72);
  --gmx-border: rgba(15, 23, 42, .10);
  --gmx-text: #0f172a;
  --gmx-muted: rgba(15, 23, 42, .62);

  --gmx-brand: #7c3aed;
  --gmx-brand-2: #6366f1;
  --gmx-brand-rgb: 124, 58, 237;

  --gmx-shadow: 0 16px 55px rgba(2, 6, 23, .08);
  --gmx-shadow-2: 0 10px 26px rgba(2, 6, 23, .08);

  --gmx-radius: 22px;
  --gmx-radius-sm: 16px;

  --gmx-focus: 0 0 0 4px rgba(var(--gmx-brand-rgb), .14);
}

body.dark{
  --gmx-bg: #0b1020;
  --gmx-card: rgba(17, 24, 39, .76);
  --gmx-card-2: rgba(17, 24, 39, .60);
  --gmx-border: rgba(255,255,255,.10);
  --gmx-text: rgba(233, 238, 247, 1);
  --gmx-muted: rgba(233, 238, 247, .62);

  --gmx-brand: #8b5cf6;
  --gmx-brand-2: #60a5fa;
  --gmx-brand-rgb: 139, 92, 246;

  --gmx-shadow: 0 20px 68px rgba(0,0,0,.52);
  --gmx-shadow-2: 0 12px 30px rgba(0,0,0,.42);

  --gmx-focus: 0 0 0 4px rgba(var(--gmx-brand-rgb), .18);
}



.lt-game-layout{
    display:flex;
    gap:25px;
    align-items:flex-start;
    margin-top:20px;
    position:relative;

    /* Local tokens ONLY for View4 */
    --lt-active-bg: rgba(139, 92, 246, 0.06);

    /* PRICE (green) + subtle pink touch */
    --lt-price-color: #22c55e;
    --lt-price-glow: rgba(34,197,94,.18);

    /* NOTE (separate color) */
    --lt-note-color: rgba(236,72,153,.88);
    --lt-note-bg: rgba(236,72,153,.10);
    --lt-note-br: rgba(236,72,153,.18);
}

/* Better blending when supported */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .lt-game-layout{
        /* keep green dominant, add small #ec4899 nuance */
        --lt-price-color: color-mix(in srgb, #22c55e 85%, #ec4899 15%);
        --lt-price-glow: color-mix(in srgb, rgba(34,197,94,.22) 70%, rgba(236,72,153,.22) 30%);

        /* note is clearly different from price */
        --lt-note-color: color-mix(in srgb, #ec4899 70%, var(--text-main) 30%);
        --lt-note-bg:    color-mix(in srgb, #ec4899 12%, transparent 88%);
        --lt-note-br:    color-mix(in srgb, #ec4899 22%, transparent 78%);

        --lt-active-bg:  color-mix(in srgb, var(--brand-primary) 10%, transparent 90%);
    }
}

/* Dark-mode tuning (robust selectors) */
html.dark .lt-game-layout,
body.dark .lt-game-layout,
[data-theme="dark"] .lt-game-layout{
    --lt-active-bg: rgba(139, 92, 246, 0.08);

    /* a bit brighter on dark */
    --lt-price-color: #34d399;
    --lt-price-glow: rgba(52,211,153,.22);

    --lt-note-color: rgba(244,114,182,.90);
    --lt-note-bg: rgba(236,72,153,.12);
    --lt-note-br: rgba(236,72,153,.22);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    html.dark .lt-game-layout,
    body.dark .lt-game-layout,
    [data-theme="dark"] .lt-game-layout{
        --lt-price-color: color-mix(in srgb, #34d399 85%, #ec4899 15%);
        --lt-price-glow:  color-mix(in srgb, rgba(52,211,153,.25) 70%, rgba(236,72,153,.25) 30%);

        --lt-note-color:  color-mix(in srgb, #f472b6 70%, var(--text-main) 30%);
        --lt-note-bg:     color-mix(in srgb, #ec4899 14%, transparent 86%);
        --lt-note-br:     color-mix(in srgb, #ec4899 26%, transparent 74%);
    }
}


.gmxpay-root {
    --up-bg-main: #ffffff;
    --up-bg-head: linear-gradient(135deg, #f5f7ff 0%, #ebf0ff 100%);
    --up-bg-body: #f8fafc;
    --up-bg-card: #ffffff;
    --up-border: #e2e8f0;
    --up-text-title: #0f172a;
    --up-text-sub: #64748b;
    --up-accent: #f97316;
    --up-accent-hover: #ea580c;
    --up-icon-bg: #f1f5f9;
    --up-logo-bg: #ffffff;
    --up-logo-border: #e2e8f0;
}

body.dark .gmxpay-root, html.dark .gmxpay-root {
    --up-bg-main: #151521;
    --up-bg-head: linear-gradient(135deg, #232334 0%, #1a1a27 100%);
    --up-bg-body: #151521;
    --up-bg-card: #1e1e2d;
    --up-border: #2b2b40;
    --up-text-title: #ffffff;
    --up-text-sub: #a1a5b7;
    --up-icon-bg: #252536;
    --up-logo-border: #323248;
}



.gmxpay-root {
    --up-bg-main: #ffffff;
    --up-bg-head: linear-gradient(135deg, #f5f7ff 0%, #ebf0ff 100%);
    --up-bg-body: #f8fafc;
    --up-bg-card: #ffffff;
    --up-border: #e2e8f0;
    --up-text-title: #0f172a;
    --up-text-sub: #64748b;
    --up-accent: #f97316;
    --up-accent-hover: #ea580c;
    --up-icon-bg: #f1f5f9;
    --up-logo-bg: #ffffff;
    --up-logo-border: #e2e8f0;
}
body.dark .gmxpay-root, html.dark .gmxpay-root {
    --up-bg-main: #151521;
    --up-bg-head: linear-gradient(135deg, #232334 0%, #1a1a27 100%);
    --up-bg-body: #151521;
    --up-bg-card: #1e1e2d;
    --up-border: #2b2b40;
    --up-text-title: #ffffff;
    --up-text-sub: #a1a5b7;
    --up-accent: #f97316;
    --up-accent-hover: #ea580c;
    --up-icon-bg: #252536;
    --up-logo-bg: #ffffff;
    --up-logo-border: #323248;
}


.gmx-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
}

.gmx-modal.is-open {
    display: flex !important;
}

.gmx-modal-card {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    margin: 0 auto !important;
    position: relative;
    top: auto !important;
    transform: none !important;
}

.gmx-checkout-preview {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.02);
    padding: 14px;
    margin-bottom: 14px;
}

.gmx-checkout-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.gmx-checkout-preview-title {
    font-size: 15px;
    font-weight: 800;
}

.gmx-checkout-preview-count {
    font-size: 12px;
    opacity: .8;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
}

.gmx-checkout-preview-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
}

.gmx-checkout-preview-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
}

.gmx-checkout-preview-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmx-checkout-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gmx-checkout-preview-info {
    min-width: 0;
}

.gmx-checkout-preview-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
}

.gmx-checkout-preview-meta {
    font-size: 12px;
    opacity: .78;
}

.gmx-checkout-preview-total {
    text-align: right;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.gmx-checkout-summary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gmx-checkout-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gmx-checkout-summary-row.muted {
    opacity: .8;
    font-size: 13px;
}
 
    .gmx-ci-check { display: flex; align-items: center; justify-content: center; }
    .gmx-ci-check .checkbox { position: relative; display: inline-block; width: 22px; height: 22px; cursor: pointer; margin: 0; }
    .gmx-ci-check .checkbox__input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
    .gmx-ci-check .checkbox__inner { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: #2a2a35; border: 2px solid #4a4a5a; border-radius: 6px; transition: all 0.2s ease; }
    .gmx-ci-check .checkbox__input:checked ~ .checkbox__inner { background-color: var(--gmx-brand, #8a2be2); border-color: var(--gmx-brand, #8a2be2); }
    .gmx-ci-check .checkbox__input:checked ~ .checkbox__inner:after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }


    .modern-qty-wrapper { display: inline-flex; align-items: center; background: #1c1c24; border: 1px solid #3f3f4e; border-radius: 8px; overflow: hidden; height: 38px; }
    .modern-qty-wrapper .qty-modern-btn { background: transparent; border: none; color: #a0a0b5; width: 36px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; outline: none; }
    .modern-qty-wrapper .qty-modern-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
    .modern-qty-wrapper .modern-qty-input { width: 45px; height: 100%; background: transparent; border: none; border-left: 1px solid #3f3f4e; border-right: 1px solid #3f3f4e; color: #fff; text-align: center; font-size: 15px; font-weight: 600; padding: 0; -moz-appearance: textfield; outline: none; }
    .modern-qty-wrapper .modern-qty-input::-webkit-outer-spin-button, .modern-qty-wrapper .modern-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


    .gmx-cart-tools { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: flex-end; }
    .gmx-cart-tools .gmx-btn { background: #2a2a36; color: #e2e2e9 !important; border: 1px solid #3f3f4e; padding: 10px 20px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: 0.2s; text-decoration: none; cursor: pointer; }
    .gmx-cart-tools .gmx-btn i { font-size: 16px; }
    .gmx-cart-tools .gmx-btn:hover { background: #3f3f4e; color: #fff !important; }
    .gmx-cart-tools .gmx-btn-danger { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; }
    .gmx-cart-tools .gmx-btn-danger:hover { background: #ef4444 !important; color: #fff !important; }


    .dealer-discount-alert { background: rgba(138, 43, 226, 0.1); border: 1px solid var(--gmx-brand, #8a2be2); border-radius: 10px; padding: 12px 15px; margin-top: 15px; display: flex; align-items: flex-start; gap: 12px; color: #e2e2e9; line-height: 1.5; font-size: 13px; }
    .dealer-discount-alert i { color: var(--gmx-brand, #8a2be2); font-size: 18px; margin-top: 2px; }
    .dealer-discount-alert strong { color: #fff; }


@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes pulse {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(255,255,255,.7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px transparent
    }

    to {
        transform: scale(.95);
        box-shadow: 0 0 0 0 transparent
    }
}

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

    to {
        transform: translateX(100%)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.transition-fade {
    transition: opacity .4s ease-out,transform .4s cubic-bezier(.4,0,.2,1);
    opacity: 1;
    transform: translateY(0)
}

html.is-animating .transition-fade {
    opacity: 0;
    transform: translateY(-30px)
}

body,li,ul {
    padding: 0;
    margin: 0
}

body {
    font-family: "Inter",sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
  
}

a {
    text-decoration: none;
    color: inherit
}

li,ul {
    list-style: none
}

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

.gmx-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem
}

@media (min-width:768px) {
    .gmx-container {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.logo-dark,body.dark .logo-light,html.dark .logo-light {
    display: none!important
}

.logo-light,body.dark .logo-dark,html.dark .logo-dark {
    display: block!important
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: var(--bg-body)
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary)
}

.gmx-box {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    transition: all .3s ease
}

.gmx-box:hover {
    border-color: var(--brand-primary)
}

.gmx-btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--brand-glow);
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 0
}

.gmx-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--brand-glow);
    color: #fff
}

.text-main {
    color: var(--text-main)!important
}

.text-muted {
    color: var(--text-muted)!important
}

.text-brand {
    color: var(--brand-primary)!important
}

.oy-balance-hidden .oy-balance-amount {
    filter: blur(6px)!important;
    user-select: none;
    opacity: .7
}

.gmx-mainbar,.gmx-topbar {
    border-bottom: 1px solid var(--border-color)
}

.gmx-topbar {
    background-color: var(--bg-surface-hover);
    font-size: 13px;
    height: 46px;
    display: flex;
    align-items: center
}

.gmx-mainbar {
    background-color: var(--bg-surface);
    padding: 15px 0
}

.gmx-mainbar-inner {
    column-gap: 16px
}

.gmx-mainbar-left,.gmx-mainbar-right {
    flex-shrink: 0
}

.gmx-mainbar-search {
    flex: 1;
    max-width: 600px
}

.gmx-navbar {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color)
}

.gmx-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.gmx-flex-center {
    display: flex;
    align-items: center;
    gap: 15px
}

.gmx-icon-btn,.gmx-menu-link {
    display: inline-flex;
    align-items: center;
    position: relative
}

.gmx-menu-link {
    color: var(--text-muted);
    font-weight: 600;
    transition: color .3s ease;
    gap: 6px;
    padding: 5px 0
}

.gmx-menu-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-gradient);
    transition: width .3s cubic-bezier(.4,0,.2,1)
}

.gmx-icon-btn:hover,.gmx-menu-link:hover {
    color: var(--brand-primary)
}

.gmx-menu-link.active::after,.gmx-menu-link:hover::after {
    width: 100%
}

.gmx-icon-btn {
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--bg-body);
    border: 1.5px solid var(--border-color);
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
    transition: all .3s ease
}

.gmx-icon-btn:hover {
    box-shadow: 0 4px 10px var(--brand-glow)
}

.gmx-badge,.gmx-lang-btn {
    display: flex;
    align-items: center
}

.gmx-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--brand-gradient);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    border: 2px solid var(--bg-surface)
}

.gmx-lang-btn {
    background-color: var(--bg-body);
    border: 1.5px solid var(--border-color);
    padding: 6px 14px;
    border-radius: 20px;
    color: var(--text-main);
    font-weight: 600;
    gap: 8px;
    transition: all .3s ease
}

.cm-suggest a.group:hover .overflow-hidden,.gmx-icon-btn:hover,.gmx-lang-btn:hover {
    border-color: var(--brand-primary)
}

.theme-icon {
    transition: transform .4s ease,opacity .4s ease;
    font-size: 14px
}

#icon-moon {
    display: inline-block;
    color: var(--text-muted)
}

#icon-sun {
    color: #fbbf24
}

#icon-sun,body.dark #icon-moon,html.dark #icon-moon {
    display: none
}

body.dark #icon-sun,html.dark #icon-sun {
    display: inline-block
}

.gmx-search-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--bg-body);
    border: 1.5px solid var(--border-color);
    border-radius: 50px;
    padding: 4px 4px 4px 18px;
    width: 100%;
    max-width: 550px;
    transition: all .3s ease;
    height: 46px;
    box-sizing: border-box;
    cursor: pointer
}

.gmx-search-wrapper:focus-within {
    border-color: var(--brand-primary);
    background-color: var(--bg-surface);
    box-shadow: 0 0 10px var(--brand-glow)
}

.gmx-search-wrapper input {
    flex: 1;
    border: 0;
    background: 0 0;
    outline: 0;
    color: var(--text-main);
    font-size: 14px;
    padding-right: 10px;
    width: 100%;
    cursor: pointer
}

.gmx-search-wrapper button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
    flex-shrink: 0;
    border: 0;
    cursor: pointer
}

.gmx-search-wrapper button:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 10px var(--brand-glow)
}

.gmx-balance-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-body);
    border: 1px solid var(--border-color)
}

.gmx-balance-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2
}

.gmx-balance-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted)
}

.gmx-balance-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px
}

.gmx-balance-link {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main)
}

.gmx-balance-currency {
    color: var(--brand-primary)
}

.gmx-balance-add,.gmx-balance-visibility {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
    color: var(--text-muted);
    transition: all .2s ease
}

.gmx-balance-add:hover,.gmx-balance-visibility:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary)
}

.gmx-avatar-dropdown {
    position: relative
}

.gmx-avatar-toggle {
    display: flex;
    align-items: center;
    gap: 8px
}

.gmx-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-primary)
}

.gmx-avatar-chevron {
    font-size: 10px;
    color: var(--text-muted)
}

.gmx-drawer-menu a,.gmx-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    color: var(--text-main)
}

.gmx-dropdown-link {
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: .3s
}

.gmx-dropdown-link:hover {
    background: var(--bg-body);
    color: var(--brand-primary)
}

.gmx-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 5px 0
}

.gmx-dropdown-logout {
    color: #ef4444
}

.gmx-dropdown-logout:hover {
    background: rgba(239,68,68,.1);
    color: #ef4444
}

.gmx-dropdown-link-simple {
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
    transition: .3s
}

.gmx-drawer-menu a.active,.gmx-drawer-menu a:hover,.gmx-dropdown-link-simple:hover {
    background: var(--bg-body);
    color: var(--brand-primary)
}

.v4new-dropdown-menu {
    background-color: var(--bg-surface)!important;
    border: 1px solid var(--border-color)!important;
    border-radius: 12px!important;
    box-shadow: 0 10px 30px rgba(0,0,0,.1)!important
}

body.dark .v4new-dropdown-menu {
    box-shadow: 0 10px 30px rgba(0,0,0,.5)!important
}

.mega-menu-box {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    width: 800px;
    padding: 20px;
    z-index: 99;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.1)
}

body.dark .mega-menu-box {
    box-shadow: 0 10px 30px rgba(0,0,0,.5)
}

.mega-menu-box.active {
    display: block!important
}

.gmx-annbar {
   
    border-top: 1px solid var(--border-color);
    clear: both;
    display: block;
    margin-bottom: 10px
}

.gmx-announcement-wrapper {
    margin-top: 15px!important;
    margin-bottom: 15px!important
}

@media (max-width:992px) {
    .gmx-desktop-only {
        display: none!important
    }

    .gmx-icon-btn {
        width: 38px!important;
        height: 38px!important;
        font-size: 15px!important
    }

    .gmx-flex-center {
        gap: 10px!important
    }

    .v4new-brand-img {
        height: 34px!important
    }
}

@media (max-width:640px) {
    .gmx-mainbar {
        padding: 8px 0
    }

    .gmx-container {
        padding-left: 12px;
        padding-right: 12px
    }
}

@media (min-width:993px) {
    .gmx-mobile-only {
        display: none!important
    }
}

.gmx-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease
}

.gmx-drawer-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: var(--bg-surface);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 15px rgba(0,0,0,.1)
}

body.gmx-drawer-open {
    overflow: hidden
}

body.gmx-drawer-open .gmx-drawer-backdrop {
    opacity: 1;
    visibility: visible
}

body.gmx-drawer-open .gmx-drawer-panel {
    transform: translateX(0)
}

.gmx-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color)
}

.gmx-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px
}

.gmx-drawer-menu li {
    margin-bottom: 10px
}

.gmx-drawer-menu a {
    padding: 12px 15px;
    font-weight: 600;
    transition: background .3s ease
}

.gs-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 0;
    transition: opacity .3s ease
}

.gs-modal.is-open {
    opacity: 1
}

.gs-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(5px)
}

.gs-modal__content {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 0 15px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-20px) scale(.98);
    transition: transform .3s ease
}

.gs-modal.is-open .gs-modal__content {
    transform: translateY(0) scale(1)
}

.gs-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--bg-body);
    border-radius: 12px;
    padding: 0 15px;
    border: 1px solid transparent;
    transition: .3s
}

.gs-search-box:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 10px var(--brand-glow)
}

.gs-search-box input {
    border: 0;
    background: 0 0;
    outline: 0;
    width: 100%;
    color: var(--text-main);
    font-size: 16px;
    padding: 15px 10px
}

.gs-no-result,.gs-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-weight: 600
}

.gs-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px
}



/* =================================================================
   AXTARIŞ MODALI (GLOBAL SEARCH) DÜZƏLİŞLƏRİ VƏ X DÜYMƏSİ
   ================================================================= */

/* 1. Mobil görünüşdə daşma (kəsilmə) probleminin həlli */
.gs-modal__content {
    width: calc(100% - 30px) !important; 
    margin: 0 auto !important; 
    box-sizing: border-box !important;
}

/* 2. Axtarış Qutusu və Yazı sahəsi */
.gs-search-box {
    position: relative !important;
    padding: 0 !important; 
}
.gs-search-box input {
    padding: 16px 50px 16px 20px !important; 
    box-sizing: border-box !important;
}

/* 3. X (Bağla) düyməsinin tam mərkəzə və yerinə oturdulması */
.gs-close-btn {
    position: absolute !important;
    top: 11px !important; /* Axtarış barının tam şaquli mərkəzi (vertical center) */
    right: 12px !important; /* Sağdan səliqəli məsafə */
    width: 32px !important;
    height: 32px !important;
    background: var(--bg-body) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
}

/* X düyməsinin Hover effekti (Zərif qırmızı) */
.gs-close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: scale(1.08) !important; /* Üzərinə gələndə yüngülcə böyüsün */
}

/* Axtarış nəticələri gəlmədikdə çıxan klaviatura ikonu hissəsinin mərkəzlənməsi */
.gs-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ui-stories__list {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.ui-stories__list::-webkit-scrollbar {
    display: none
}

.ui-story {
    transition: transform .3s ease
}

.ui-story:hover {
    transform: translateY(-3px)
}

.ui-story__ring {
    transition: all .3s ease
}

.ui-story:hover .ui-story__ring {
    box-shadow: 0 0 15px var(--brand-glow);
    padding: 2px
}

.swiper-button-next,.swiper-button-prev {
    background-color: var(--bg-surface)!important;
    color: var(--brand-primary)!important;
    width: 40px!important;
    height: 40px!important;
    border-radius: 50%!important;
    box-shadow: 0 4px 15px rgba(0,0,0,.2)!important;
    transition: all .3s ease
}

.swiper-button-next:hover,.swiper-button-prev:hover {
    background: var(--brand-gradient)!important;
    color: #fff!important;
    transform: scale(1.1)
}

.swiper-button-next::after,.swiper-button-prev::after {
    font-size: 16px!important;
    font-weight: 900!important
}

.swiper-pagination-bullet {
    background: var(--text-muted)!important;
    opacity: .5!important
}

.swiper-pagination-bullet-active {
    background: var(--brand-primary)!important;
    opacity: 1!important;
    width: 20px!important;
    border-radius: 10px!important
}

.custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent
}

.custom-scrollbar::-webkit-scrollbar {
    height: 6px
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: 0 0
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-primary)
}

.skeleton-wrapper {
    position: relative;
    background-color: var(--bg-surface-hover);
    overflow: hidden
}

.skeleton-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    animation: shimmer 1.5s infinite;
    z-index: 1;
    pointer-events: none
}

html.dark .skeleton-wrapper::after {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent)
}

.skeleton-wrapper img.lazyload {
    opacity: 0
}

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

.skeleton-wrapper:has(img.lazyloaded)::after {
    display: none!important;
    animation: none!important
}

.skeleton-wrapper:has(img.lazyloaded) {
    background-color: transparent!important
}

.v4new-tab-pane {
    display: none;
    animation: fadeIn .4s ease
}

.v4new-tab-pane.active {
    display: block
}


/* =================================================================
   DÜZƏLİŞLƏR (GHOST DÜYMƏ, PROFİL KARTI, BALANS PİLL VƏ MOBİL)
   ================================================================= */

/* 1. Daxil ol (Ghost) Düyməsi */
.gmx-btn-ghost {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 20px;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.gmx-btn-ghost:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* 4. Axtarış Pəncərəsi (Modal) X düyməsinin tənzimlənməsi */
.gs-modal__content { position: relative; } /* Əgər yoxdursa əlavə edirik */
.gs-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}
.gs-close-btn:hover { background: #ef4444; color: white; border-color: #ef4444; }

/* 5. Təmiz Balans Kapsulu (Pill) */
.gmx-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 4px 4px 4px 15px;
    border-radius: 50px;
    font-weight: 800;
    color: var(--text-main);
    font-size: 14px;
    transition: 0.3s;
}
.gmx-balance-pill:hover { border-color: var(--brand-primary); }
.gmx-balance-pill-icon { color: var(--text-muted); font-size: 16px; }
.gmx-balance-pill-btn {
    background: #10b981; /* Yaşıl güvən rəngi */
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: 0.3s;
}
.gmx-balance-pill-btn:hover { transform: scale(1.1); background: #059669; }

/* 6. Modern Profil Dropdown (Kart dizaynı) */
.gmx-profile-dropdown { width: 300px !important; padding: 0 !important; overflow: hidden; }
.gmx-profile-head { padding: 20px; background: var(--bg-body); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; }
.gmx-profile-head img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--brand-primary); object-fit: cover; }
.gmx-profile-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; }
.gmx-pc-card { padding: 15px 10px; border-radius: 12px; text-align: center; display: flex; flex-direction: column; gap: 5px; color: white; transition: 0.3s; }
.gmx-pc-card:hover { transform: translateY(-3px); }
.gmx-pc-balance { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3); }
.gmx-pc-points { background: linear-gradient(135deg, #f43f5e, #ec4899); box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3); }
.gmx-profile-links { padding: 10px; display: flex; flex-direction: column; gap: 5px; max-height: 280px; overflow-y: auto; }

/* 3. Mobil Görünüşün Yığılması (Dağılmanın qarşısını almaq) */
@media (max-width: 992px) {
    .gmx-mainbar-inner { gap: 8px !important; }
    .site-logo-bg { padding: 4px 10px !important; }
    .v4new-brand-img { height: 28px !important; } /* Loqonu mobildə biraz kiçiltdik ki, yer qalsın */
   
    .gmx-badge { width: 18px !important; height: 18px !important; font-size: 9px !important; top: -4px !important; right: -4px !important; }
}


/* =================================================================
   MOBİL EKRANDAN KƏNARA ÇIXMA (OVERFLOW) VƏ SIĞIŞMAMA FİXİ
   ================================================================= */

/* 1. Əsas Səbəbkar: Padding-in çölə daşmasının qarşısını alırıq */
.gmx-container, 
.gmx-mainbar, 
.gmx-topbar, 
.gmx-navbar {
    box-sizing: border-box !important;
}

/* 2. Mobil görünüşdə elementlərin daha kompakt və səliqəli düzülüşü */
@media (max-width: 992px) {
    .gmx-mainbar-inner {
        flex-wrap: nowrap !important;
        gap: 5px !important;
    }
    .gmx-mainbar-left, .gmx-mainbar-right {
        gap: 6px !important; /* İkonlar və loqo arası boşluq daraldı */
    }
   
    .site-logo-bg {
        padding: 4px 10px !important;
    }
    .v4new-brand-img {
        height: 26px !important; /* Loqonu mobildə azca yığdıq */
    }
    .gmx-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* 3. Daha kiçik ekranlı telefonlar üçün (Məsələn: köhnə iPhone-lar) ekstra sıxışdırma */
@media (max-width: 380px) {
    .gmx-icon-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .site-logo-bg {
        padding: 4px 8px !important;
    }
    .v4new-brand-img {
        height: 22px !important;
    }
    .gmx-mainbar-left, .gmx-mainbar-right {
        gap: 4px !important;
    }
    .gmx-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}







/* body lock (mobil seçim sheet açıq olanda) */
body.oyf-lock {
    overflow: hidden;
}


/* 2) INFO CARDS  (oy-info-wrap)  --------------------------- */

.oy-info-wrap {
    padding: 32px 0 28px;
    background: radial-gradient(circle at top left,
        rgba(79, 70, 229, 0.10),
        transparent 55%);
    border-top: 1px solid var(--gxf-ft-line);
    border-bottom: 1px solid var(--gxf-ft-line);
}

.oy-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

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

.oy-info__card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left,
            var(--gxf-ft-accent-soft),
            transparent 60%),
        var(--gxf-ft-card-bg);
    border: 1px solid var(--gxf-ft-card-border);
    box-shadow: 0 18px 50px var(--gxf-ft-card-glow);
    overflow: hidden;
}

.oy-info__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.30),
        rgba(56, 189, 248, 0.16),
        transparent 55%
    );
    opacity: 0.14;
    pointer-events: none;
}

.oy-info__icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 20% 0,
        #f9fafb 0,
        var(--gxf-ft-accent-strong) 68%);
    box-shadow:
        0 10px 25px rgba(15, 23, 42, 0.55),
        0 0 0 1px rgba(248, 250, 252, 0.04);
    color: #f9fafb;
}

.oy-info__icon svg {
    width: 22px;
    height: 22px;
}

.oy-info__text {
    position: relative;
    z-index: 1;
}

.oy-info__text h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gxf-ft-text-main);
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}

.oy-info__text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gxf-ft-text-soft);
}

/* responsive info */
@media (max-width: 1024px) {
    .oy-info__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 14px;
    }
}
@media (max-width: 640px) {
    .oy-info__grid {
        grid-template-columns: 1fr;
    }
    .oy-info__card {
        padding: 16px 15px;
        border-radius: 20px;
    }
    .oy-info__icon {
        width: 36px;
        height: 36px;
    }
}


/* 3) MAIN FOOTER (gxf-footer)  ---------------------------- */

.gxf-footer {
    background: var(--gxf-ft-bg-deep);
    padding: 28px 0 10px;
    border-top: 1px solid var(--gxf-ft-line);
}

.gxf-footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px 18px;
}

.gxf-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 260px) repeat(3, minmax(0, 1fr));
    gap: 28px 48px;
    align-items: flex-start;
}

/* Brand blok */
.gxf-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gxf-footer-logoBox {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    border-radius: 18px;
    background: radial-gradient(circle at top left,
        rgba(139, 92, 246, 0.20),
        rgba(15, 23, 42, 0.97));
    border: 1px solid rgba(129, 140, 248, 0.5);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.65),
        0 0 0 1px rgba(15, 23, 42, 0.8);
}

.gxf-footer-logo {
   
    height: auto;
    display: block;
}

/* Brand sosial */
.gxf-brandSocialTitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--gxf-ft-text-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.gxf-brandSocialRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gxf-brandSocialLink {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gxf-ft-chip-bg);
    border: 1px solid var(--gxf-ft-chip-border);
    color: var(--gxf-ft-text-soft);
    text-decoration: none;
    transition: all 0.22s ease;
}
.gxf-brandSocialLink:hover {
    color: #f9fafb;
    background: linear-gradient(135deg, var(--gxf-ft-accent), var(--gxf-ft-accent-strong));
    transform: translateY(-2px);
}

/* Kolonlar */
.gxf-footer-col {
    min-width: 0;
}

.gxf-footer-linkList {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gxf-footer-headingWrap {
    margin-bottom: 6px;
}

.gxf-footer-heading {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gxf-ft-text-main);
}

.gxf-footer-link,
.gxf-footer-link--single {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    font-size: 13px;
    color: var(--gxf-ft-text-soft);
    text-decoration: none;
    transition: color 0.22s ease, transform 0.22s ease;
}
.gxf-footer-link:hover,
.gxf-footer-link--single:hover {
    color: var(--gxf-ft-accent-strong);
    transform: translateX(2px);
}

/* aktiv blok xətti */
.gxf-footer-menuGroup.is-active .gxf-footer-heading {
    color: var(--gxf-ft-accent);
}
.gxf-footer-menuGroup.is-active .gxf-footer-heading::after {
    content: "";
    display: inline-block;
    width: 26px;
    height: 2px;
    margin-left: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gxf-ft-accent), var(--gxf-ft-accent-strong));
}

/* Əlaqə sütunu */
.gxf-footer-contact {
    max-width: 320px;
}

.gxf-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gxf-contactTitle {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gxf-ft-text-main);
    margin-bottom: 4px;
}

.gxf-contactList {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gxf-contactItem a {
    font-size: 13px;
    color: var(--gxf-ft-text-soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.22s ease, transform 0.22s ease;
}
.gxf-contactItem a i {
    font-size: 14px;
    color: var(--gxf-ft-accent);
}
.gxf-contactItem a:hover {
    color: var(--gxf-ft-accent-strong);
    transform: translateX(2px);
}


/* 4) MOBİL DİL / VALYUTA PREF (gxf-pref) ------------------ */

.gxf-pref {
    position: relative;
    margin: 16px auto 10px;
    max-width: 360px;
}

.gxf-pref__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--gxf-ft-pill-border);
    background: var(--gxf-ft-pill-bg);
    color: var(--gxf-ft-text-soft);
    font-size: 13px;
    text-decoration: none;
}

.gxf-pref__trigger .gxf-pref__caret {
    font-size: 14px;
    color: var(--gxf-ft-accent);
}

/* bottom sheet */
.gxf-pref__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
}
.gxf-pref__sheet {
    position: fixed;
    inset: auto 12px 16px 12px;
    max-width: 420px;
    margin: 0 auto;
    border-radius: 24px;
    background: var(--gxf-ft-card-bg);
    border: 1px solid var(--gxf-ft-card-border);
    box-shadow: 0 18px 60px var(--gxf-ft-card-glow);
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 50;
}
.gxf-pref.is-open .gxf-pref__backdrop {
    opacity: 1;
    pointer-events: auto;
}
.gxf-pref.is-open .gxf-pref__sheet {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.gxf-pref__body {
    padding: 16px 18px;
}
.gxf-pref__head {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--gxf-ft-text-main);
    margin-bottom: 4px;
}
.gxf-pref__desc {
    font-size: 12px;
    color: var(--gxf-ft-text-mute);
    margin-bottom: 12px;
}
.gxf-pref__group {
    margin-bottom: 10px;
}
.gxf-pref__label {
    display: block;
    font-size: 12px;
    color: var(--gxf-ft-text-mute);
    margin-bottom: 3px;
}
.gxf-pref__select {
    width: 100%;
    border-radius: 999px;
    border: 1px solid var(--gxf-ft-card-border);
    background: var(--gxf-ft-card-bg);
    color: var(--gxf-ft-text-main);
    font-size: 13px;
    padding: 7px 10px;
}
.gxf-pref__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.gxf-pref__btn {
    flex: 1;
    border-radius: 999px;
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid transparent;
    cursor: pointer;
}
.gxf-pref__btn--primary {
    background: linear-gradient(135deg, var(--gxf-ft-accent), var(--gxf-ft-accent-strong));
    color: #f9fafb;
}
.gxf-pref__btn--ghost {
    background: transparent;
    border-color: var(--gxf-ft-card-border);
    color: var(--gxf-ft-text-soft);
}


/* 5) ALT BAR (gxf-footer-bar) ----------------------------- */

.gxf-footer-bar {
    background: var(--gxf-ft-bg);
    border-top: 1px solid var(--gxf-ft-line);
    padding: 10px 0;
    width: 100%;
}

.gxf-footer-barInner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 56px;
}

.gxf-bar-menu {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.gxf-bar-menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gxf-ft-text-soft);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}
.gxf-bar-menu a i {
    font-size: 16px;
    color: var(--gxf-ft-accent);
}
.gxf-bar-menu a:hover {
    color: var(--gxf-ft-accent-strong);
    transform: translateY(-1px);
}

.gxf-payments {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gxf-payIcon {
    border-radius: 10px;
    width: 46px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: radial-gradient(circle at top left,
        rgba(148, 163, 184, 0.32),
        rgba(15, 23, 42, 0.98));
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.52);
    overflow: hidden;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gxf-payIcon img {
    max-height: 18px;
    max-width: 34px;
    display: block;
}
.gxf-payIcon:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.7);
    border-color: rgba(129, 140, 248, 0.8);
}
.gxf-payIcon--shield i {
    color: #22c55e;
    font-size: 16px;
}

/* Copyright xətti */
.gxf-copy {
    border-top: 1px solid var(--gxf-ft-line);
    padding: 10px 0 14px;
    text-align: center;
    background: var(--gxf-ft-bg-deep);
}
.gxf-copy p {
    margin: 0;
    font-size: 12px;
    color: var(--gxf-ft-text-mute);
}


/* 6) MOBİL BOTTOM NAV (oym-bottomNav) --------------------- */

.oym-bottomNav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 6px 8px;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.75),
        var(--gxf-nav-bg)
    );
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--gxf-nav-border);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.7);
}

.oym-bottomNav__item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    text-decoration: none;
    color: var(--gxf-nav-text);
    font-size: 11px;
    position: relative;
}

.oym-bottomNav__icon {
    font-size: 18px;
    color: var(--gxf-nav-icon);
}

.oym-bottomNav__label {
    line-height: 1.2;
}

.oym-bottomNav__item.is-active .oym-bottomNav__icon,
.oym-bottomNav__item.is-active .oym-bottomNav__label {
    color: var(--gxf-nav-active);
}

.oym-bottomNav__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gxf-ft-accent), var(--gxf-ft-accent-strong));
}

/* cart badge */
.oym-bottomNav__cart {
    position: relative;
    display: inline-flex;
}
.oym-bottomNav__badge {
    position: absolute;
    right: -9px;
    top: -4px;
    min-width: 16px;
    padding: 0 4px;
    height: 16px;
    border-radius: 999px;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    background: #f97316;
    color: #0b1120;
    font-weight: 700;
}

/* content altında boşluq */
.oym-bottomNav-spacer {
    height: 56px;
}

/* NAV yalnız mobil üçün olsun */
@media (min-width: 992px) {
    .oym-bottomNav,
    .oym-bottomNav-spacer,
    .gxf-pref.pcgizle {
        display: none !important;
    }
}

/* Footer grid responsive */
@media (max-width: 1100px) {
    .gxf-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }
}
@media (max-width: 768px) {
    .gxf-footer-grid {
        grid-template-columns: 1fr;
    }
    .gxf-footer {
        padding-top: 22px;
    }
    .gxf-footer-brand {
        order: -1;
    }

    .gxf-footer-barInner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .gxf-bar-menu,
    .gxf-payments {
        justify-content: flex-start;
    }
}

/* Footer logo görünməsi */
.gxf-logo-light {
    display: block;
}
.gxf-logo-dark {
    display: none;
}

/* Dark mode olanda – white logo açılır, light bağlanır */
body.dark .gxf-logo-light,
body.dark.modern .gxf-logo-light,
html.dark .gxf-logo-light {
    display: none;
}

body.dark .gxf-logo-dark,
body.dark.modern .gxf-logo-dark,
html.dark .gxf-logo-dark {
    display: block;
}


















/*--------------------------------------------------welcome------------------------*/


/* =================================================================
   HEKAYƏLƏR VƏ SLİDER DÜZƏLİŞLƏRİ (TAM SƏN İSTƏYƏN KİMİ)
   ================================================================= */

/* --- HEKAYƏLƏR (STORIES) --- */
.gmx-story-bar {
    padding-top: 30px;
    margin-bottom: 20px;
}
.gmx-stories-list {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px; /* Hover zamanı kəsilməməsi üçün padding əlavə edildi */
}
.gmx-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 80px;
    text-decoration: none !important;
}

/* Sənin istədiyin kvadrat, yumşaq künclü və parıldayan çərçivə */
.gmx-story-ring {
    width: 80px;
    height: 80px;
    border-radius: 20px; /* Yumru yox, kvadratik yumşaq künclər */
    padding: 3px;
    background: var(--brand-gradient); /* Markanın rəngləri */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yay kimi yumşaq animasiya */
}

/* Üzərinə gələndə yuxarı qalxıb, rotasiya (eyilmə) etməsi */
.gmx-story-item:hover .gmx-story-ring {
    transform: translateY(-8px) rotate(4deg) scale(1.05); /* Yuxarı qalx, fırlan, azca böyü */
    box-shadow: 0 12px 25px var(--brand-glow);
    padding: 2px;
}

/* Tək-tək fərqli dərəcələrdə əyilmə (Sənin istədiyin kimi "arta-arta gedən" effekt) */
.gmx-story-item:nth-child(even):hover .gmx-story-ring {
    transform: translateY(-8px) rotate(-4deg) scale(1.05); /* Cüt olanlar sola əyilsin */
}
.gmx-story-item:nth-child(3n):hover .gmx-story-ring {
    transform: translateY(-8px) rotate(6deg) scale(1.05); /* 3-cü olanlar daha çox sağa əyilsin */
}

/* İçəridəki şəklin forması */
.gmx-story-img {
    width: 100%;
    height: 100%;
    border-radius: 17px; /* Çərçivəyə uyğun iç künclər */
    background: var(--bg-surface);
    border: 2px solid var(--bg-body);
    overflow: hidden;
    display: block;
}
.gmx-story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.gmx-story-item:hover .gmx-story-img img {
    transform: scale(1.15); /* Şəkil içəridə yüngülcə böyüsün */
}

.gmx-story-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}
.gmx-story-item:hover .gmx-story-title {
    color: var(--brand-primary);
}





/* --- YENİ SLİDER STRUKTURU (Ölçü Dağılmasının Qarşısını Alan Fix) --- */
.gmx-slider-area {
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

/* Bütün Slider variantları üçün vahid hündürlük! Ən vacib kod budur */
.gmx-slider-col-full,
.gmx-slider-layout-split {
    width: 100%;
    height: clamp(280px, 35vw, 450px); /* Nə çox böyüyəcək, nə də çox kiçiləcək */
    position: relative;
}

/* Tip 2, 3, 4 üçün yan-yana durma məntiqi */
.gmx-slider-layout-split {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}

/* Ortadakı Əsas Slider və Kənar Bannerlərin ortaq xüsusiyyətləri */
.gmx-slider-col-full,
.gmx-slider-main,
.gmx-slider-side-banner,
.gmx-side-box {
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
}
html.dark .gmx-slider-col-full,
html.dark .gmx-slider-main {
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.gmx-slider-main {
    flex: 1; /* Qalan bütün boşluğu doldurur */
    height: 100%;
    min-width: 0;
}
.gmx-slider-side-banner {
    width: 28%; /* Təkli kənar banner */
    flex-shrink: 0;
    height: 100%;
}
.gmx-slider-side-stack {
    width: 28%; /* İkili alt-alta bannerlər */
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gmx-side-box {
    flex: 1;
    height: calc(50% - 10px);
}

/* Şəkillərin tam yerinə oturması (Əzilmənin və daşmanın qarşısı) */
.gmx-slide-link, .gmx-slider-side-banner a, .gmx-side-box a {
    display: block;
    width: 100%;
    height: 100%;
}
.gmx-slide-bg, .gmx-slider-side-banner img, .gmx-side-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Şəkli sındırmadan qutuya sığdırır */
    display: block;
}

/* Swiper mütləq valideynin ölçüsünü almalıdır */
.gmx-hero-swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    height: 100%; /* Slaydın aşağıya uzanmasının qarşısını alır */
}

/* --- MOBİL ÜÇÜN SLİDER FİX --- */
@media (max-width: 992px) {
    .gmx-slider-col-full,
    .gmx-slider-layout-split {
        height: clamp(180px, 45vw, 250px); /* Mobildə hündürlüyü azaldırıq */
        flex-direction: column;
    }
    .gmx-slider-side-banner,
    .gmx-slider-side-stack {
        display: none !important; /* PC bannerlərini mobildə gizlədirik */
    }
    
    .gmx-mobile-banners-wrap {
        display: flex !important;
        flex-direction: row;
        gap: 10px;
        margin-top: 15px;
        height: 100px; /* Mobildə alt bannerlərin ölçüsü */
    }
    .gmx-mobile-banner {
        flex: 1;
        border-radius: 12px;
        overflow: hidden;
    }
    .gmx-mobile-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* =================================================================
   FİX: ARXA FON YANSIMASI (BLUR) VƏ TİP 2 DİZAYNI
   ================================================================= */

/* 1. Arxa Fon (Reflection) Görünməmə probleminin həlli */
.gmx-slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px; /* Daha geniş əraziyə yayılsın */
    background-size: cover;
    background-position: center top;
    filter: blur(10px) saturate(1.5); /* Rəngləri həm bulandırır, həm də canlı (neon) edir */
    opacity: 0.5; /* Görünürlüyünü artırdıq */
    z-index: 0; /* Səhifə elementlərinin düz arxasında dayansın */
    pointer-events: none; /* Mausun kliklərinə mane olmasın */
    transition: background-image 1s ease-in-out; /* Şəkil dəyişəndə yumşaq keçid */
    
    /* Aşağıya doğru kəsiksiz formada yoxa çıxması (Fade to transparent) */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
html.dark .gmx-slider-bg {
    opacity: 0.35; /* Gecə modunda çox göz yormasın deyə biraz qısıq olur */
}

/* Hekayələr və Slider bölməsi mütləq z-index almalıdır ki, fonun altında qalmasın */
.gmx-story-bar, .gmx-slider-area {
    position: relative;
    z-index: 5;
}

/* 2. Tip 2 (Sol Banner - Orta Slider - Sağ Banner) üçün xüsusi ölçü */
.gmx-slider-layout-type-2 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    height: clamp(280px, 35vw, 450px);
}
.gmx-slider-layout-type-2 .gmx-slider-side-banner {
    width: 22%; /* 3 yerə bölündüyü üçün kənarları biraz daha incə etdik ki, ortadakı böyük qalsın */
    flex-shrink: 0;
}

/* Tip 2 üçün Mobil vəziyyət */
@media (max-width: 992px) {
    .gmx-slider-layout-type-2 {
        flex-direction: column;
        height: clamp(180px, 45vw, 250px);
    }
}

/* =========================================================
   POPULYAR OYUNLAR (TAM XÜSUSİ CSS HƏLLİ)
   ========================================================= */
.gmx-popular-section {
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}
.gmx-relative {
    position: relative;
    z-index: 10;
}

/* Arxa Fon Animasiyası */
.gmx-animated-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(110, 73, 255, 0.04) 0%, transparent 50%);
    animation: gmxRotateBg 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}
html.dark .gmx-animated-bg {
    background: radial-gradient(circle at center, rgba(110, 73, 255, 0.08) 0%, transparent 50%);
}
@keyframes gmxRotateBg {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Başlıq Hissəsi */
.gmx-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}
.gmx-pop-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.gmx-pop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 0 15px var(--brand-glow);
    font-size: 16px;
}
.gmx-pop-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}
.gmx-pop-link:hover {
    color: var(--brand-primary);
}
.gmx-pop-link i {
    transition: transform 0.3s ease;
}
.gmx-pop-link:hover i {
    transform: translateX(5px);
}

/* Grid Sistemi (PC: 6, Tablet: 4, Mobil: 3) */
.gmx-pop-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Kartın Özü (Hover effektləri daxil) */
.gmx-pop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    border-radius: 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
html.dark .gmx-pop-card { box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

.gmx-pop-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-primary);
    box-shadow: 0 12px 30px var(--brand-glow);
}

/* Kart içi daxili parıltı (gradient) */
.gmx-pop-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, var(--brand-primary));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}
.gmx-pop-card:hover .gmx-pop-gradient {
    opacity: 0.15;
}

/* İçindəki Şəkil (İkon) Çərçivəsi */
.gmx-pop-img-wrap {
    width: 75px;
    height: 75px;
    border-radius: 16px;
    margin-bottom: 15px;
    border: 2px solid var(--bg-body);
    background-color: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}
.gmx-pop-card:hover .gmx-pop-img-wrap {
    border-color: var(--brand-primary);
    box-shadow: 0 0 15px var(--brand-glow);
}
.gmx-pop-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.gmx-pop-card:hover .gmx-pop-img-wrap img {
    transform: scale(1.15); /* Hoverdə şəkil 15% böyüyür */
}

/* Oyun Adı */
.gmx-pop-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gmx-pop-card:hover .gmx-pop-card-title {
    color: var(--brand-primary);
}

/* Mobil və Planşet Uyğunlaşdırması */
@media (max-width: 1200px) {
    .gmx-pop-grid { grid-template-columns: repeat(4, 1fr); gap: 15px; }
}
@media (max-width: 992px) {
    .gmx-popular-section { padding: 30px 0; }
    .gmx-pop-title { font-size: 18px; }
    .gmx-pop-icon { width: 32px; height: 32px; font-size: 14px; }
}
@media (max-width: 768px) {
    .gmx-pop-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .gmx-pop-card { padding: 12px 8px; border-radius: 12px; }
    .gmx-pop-img-wrap { width: 60px; height: 60px; border-radius: 12px; margin-bottom: 10px; }
    .gmx-pop-card-title { font-size: 11px; }
}
@media (max-width: 480px) {
    .gmx-pop-grid { grid-template-columns: repeat(2, 1fr); }
}



/* =========================================================
   POPULYAR MƏHSULLAR CAROUSEL - GMX DİZAYN
   ========================================================= */
.gmx-products-section {
    padding: 60px 0;
}

.gmx-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.gmx-section-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
}

.gmx-title-icon {
    width: 42px;
    height: 42px;
    background: var(--brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 0 20px var(--brand-glow);
}

.gmx-nav-group {
    display: flex;
    gap: 10px;
}

/* Naviqasiya Oxları */
.gmx-product-prev, .gmx-product-next {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    transition: 0.3s !important;
}
.gmx-product-prev:after, .gmx-product-next:after { font-size: 16px !important; font-weight: bold; }
.gmx-product-prev:hover, .gmx-product-next:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}

/* --- MƏHSUL KARTI --- */
.gmx-product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.gmx-product-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-primary);
    box-shadow: 0 15px 35px var(--brand-glow);
}

.gmx-product-img-wrap {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
   
}
html.dark .gmx-product-img-wrap { background: #1a1d26; }

.gmx-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s;
}
.gmx-product-card:hover .gmx-product-img-wrap img { transform: scale(1.1); }

/* Endirim Etiketi */
.gmx-discount-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
}

/* Hover Overlay */
.gmx-product-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
    backdrop-filter: blur(4px);
}
.gmx-product-card:hover .gmx-product-overlay { opacity: 1; }
.gmx-btn-view {
    width: 50px;
    height: 50px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transform: translateY(20px);
    transition: 0.4s;
}
.gmx-product-card:hover .gmx-btn-view { transform: translateY(0); }

/* Kart Body */
.gmx-product-body {
    padding: 20px;
}
.gmx-product-cat {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}
.gmx-product-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px;
    line-height: 1.2;
}

/* Qiymət Hissəsi */
.gmx-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gmx-price-wrap {
    display: flex;
    flex-direction: column;
}
.gmx-old-price {
    font-size: 12px;
    text-decoration: line-through;
    color: var(--text-muted);
    margin-bottom: -2px;
}
.gmx-current-price {
    font-size: 18px;
    font-weight: 900;
    color: var(--brand-primary);
}

/* Mobil Üçün */
@media (max-width: 768px) {
    .gmx-products-section { padding: 30px 0; }
    .gmx-section-title { font-size: 18px; }
    .gmx-product-body { padding: 15px; }
    .gmx-product-name { font-size: 13px; height: 32px; }
    .gmx-current-price { font-size: 16px; }
}

/* Karusel konteynerinə hover üçün yer açırıq */
.gmx-product-swiper {
    padding-top: 25px !important; /* Kart yuxarı qalxanda kəsilməməsi üçün */
 
}

/* Swiper init olmadan görünməsin (refresh zamanı flash çıxmasın) */
.gmx-product-swiper:not(.swiper-initialized){
  opacity: 0;
  visibility: hidden;
}

.gmx-product-swiper.swiper-initialized{
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}

/* istəsən hero üçün də eyni */
.gmx-hero-swiper:not(.swiper-initialized){
  opacity: 0;
  visibility: hidden;
}
.gmx-hero-swiper.swiper-initialized{
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}


/* =========================================================
   GMX LIVE ORDERS - RIGHT TO LEFT (KƏSİLMƏSİZ AXIN)
   ========================================================= */
.gmx-live-section {
    padding: 40px 0;
    background: rgba(110, 73, 255, 0.02);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden; /* Səhifənin sağa-sola qaçmaması üçün */
}

.gmx-live-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

/* Pulsasiya edən qırmızı nöqtə */
.gmx-live-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ef4444;
    padding: 6px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.gmx-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    animation: gmxPulse 1.5s infinite;
}

@keyframes gmxPulse {
    0% { transform: scale(0.9); opacity: 1; }
    70% { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}

.gmx-live-sub {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- AXIN SİSTEMİ (TAM EKRAN ENİNDƏ) --- */
.gmx-marquee-container {
    width: 100vw; /* Ekranın tam eni */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: 15px 0;
}

/* Sağdan Sola Axın Animasiyası */
.gmx-marquee-track {
    display: inline-flex;
    gap: 20px;
    /* 80s - Çox aramla və premium bir sürət */
    animation: gmxMarqueeRightToLeft 80s linear infinite;
    will-change: transform;
}

.gmx-marquee-container:hover .gmx-marquee-track {
    animation-play-state: paused;
}

@keyframes gmxMarqueeRightToLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Sənin Blade-dəki 2-li dövrün tam oturması üçün */
}

/* Canlı Kart Dizaynı */
.gmx-live-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 12px 18px;
    border-radius: 18px;
    min-width: 300px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gmx-live-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand-primary);
    box-shadow: 0 8px 25px var(--brand-glow);
}

.gmx-live-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.gmx-live-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gmx-live-info {
    flex: 1;
    min-width: 0;
}

.gmx-live-product {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.gmx-live-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.gmx-live-user {
    color: var(--brand-primary);
    font-weight: 700;
}

.gmx-live-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-size: 12px;
    font-weight: 900;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    margin-left: 5px;
}

/* Mobil tənzimləmələr */
@media (max-width: 768px) {
    .gmx-marquee-track { animation-duration: 40s; } /* Mobildə ekran kiçik olduğu üçün 40s kifayətdir */
    .gmx-live-card { min-width: 260px; }
    .gmx-live-section { padding: 25px 0; }
}





/* =========================================================
   GMX REVIEWS SECTION - FULL FIXED
   ========================================================= */
.gmx-reviews-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Oxlar və Karusel üçün Ana Wrap */
.gmx-review-rel-wrap {
    position: relative;
    padding: 0 60px; /* Oxlar üçün yanlarda yer açır */
    margin-top: 30px;
}

/* Karuselin özü (Kəsilmənin qarşısını almaq üçün mühüm hissə) */
.gmx-review-swiper {
    padding: 20px 5px 60px 5px !important; /* Üst, alt və yan boşluqlar */
    margin: -20px -5px 0 -5px !important; /* Boşluğu kompensasiya edir */
    overflow: visible !important; /* Kartların daşmasına icazə verir */
}

/* --- RƏY KARTI --- */
.gmx-review-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.gmx-review-card:hover {
    transform: translateY(-10px);
    border-color: var(--brand-primary);
    box-shadow: 0 15px 35px var(--brand-glow);
    z-index: 5;
}

.gmx-review-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gmx-review-avatar {
    position: relative;
    width: 50px;
    height: 50px;
}

.gmx-review-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--brand-primary);
    padding: 2px;
}

.gmx-verified-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    color: #10b981;
    background: var(--bg-surface);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}

.gmx-u-name { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0; }
.gmx-u-date { font-size: 12px; color: var(--text-muted); }
.gmx-quote-icon { font-size: 24px; color: var(--brand-primary); opacity: 0.2; }

.gmx-review-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-main);
    font-style: italic;
    flex: 1;
}

.gmx-review-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.gmx-review-stars i.active { color: #facc15; }
.gmx-review-stars i.muted { color: var(--border-color); }
.gmx-review-platform { color: #10b981; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 5px; }

/* --- NAVİQASİYA OXLARI (YANLARDA) --- */
.gmx-review-prev, .gmx-review-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-100%) !important; /* Pagination olduğu üçün bir az yuxarı çəkirik */
    width: 45px !important;
    height: 45px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    color: var(--text-main) !important;
    z-index: 50 !important;
    transition: 0.3s !important;
}

.gmx-review-prev { left: 0 !important; }
.gmx-review-next { right: 0 !important; }

.gmx-review-prev:hover, .gmx-review-next:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 15px var(--brand-glow) !important;
}

.gmx-review-prev:after, .gmx-review-next:after { font-size: 18px !important; font-weight: bold; }

/* Pagination Nöqtələri */
.gmx-review-pagination {
    bottom: 0 !important;
}

/* Mobil Üçün */
@media (max-width: 768px) {
    .gmx-review-rel-wrap { padding: 0; }
    .gmx-review-prev, .gmx-review-next { display: none !important; } /* Mobildə oxlara ehtiyac yoxdur */
    .gmx-review-swiper { overflow: hidden !important; }
}
/* =========================================================
   GLOBAL SCROLLBAR FIX (X-AXIS OVERFLOW HƏLLİ)
   ========================================================= */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* =========================================================
   GMX BLOG SECTION - ANA BÖLMƏ VƏ BOŞLUQLAR
   ========================================================= */
.gmx-blog-section {
    padding-top: 60px;
    padding-bottom: 100px !important; /* Alt bölmə ilə aradakı məsafəni xeyli açır */
}

@media (max-width: 768px) {
    .gmx-blog-section {
        padding-top: 40px;
        padding-bottom: 70px !important; /* Mobildə də ideal məsafə saxlayır */
    }
}

/* =========================================================
   GMX BLOG - PAGINATION (NÖQTƏLƏR) VƏ SWIPER DÜZƏLİŞİ
   ========================================================= */
.gmx-blog-swiper {
    padding-bottom: 50px !important; /* Nöqtələr üçün rahat yer açırıq */
}

.gmx-blog-pagination {
    bottom: 0 !important; /* Nöqtələri kartlardan uzaqlaşdırıb aşağı çəkirik */
}

/* Nöqtələrin rəngi və forması (Nümunədəki kimi uzanan neon nöqtə) */
.gmx-blog-pagination .swiper-pagination-bullet {
    background: var(--text-muted);
    opacity: 0.5;
    transition: all 0.3s ease;
}
.gmx-blog-pagination .swiper-pagination-bullet-active {
    background: #00f2fe !important;
    opacity: 1;
    width: 20px;
    border-radius: 10px;
}

/* =========================================================
   GMX BLOG - KART DİZAYNI (V2 COMPACT DESIGN)
   ========================================================= */
.gmx-blog-card-v2 {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    border-left: 4px solid #00f2fe; /* Nümunədəki sol gradient effekti üçün */
    overflow: hidden;
    height: 100%; /* Eyni hündürlük */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.gmx-blog-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-left-color: var(--brand-primary);
}

.gmx-blog-link-v2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

.gmx-blog-img-v2 {
    width: 100%;
    height: 160px; /* Nümunədəki kimi şəkli daha yastı edirik */
    position: relative;
}

.gmx-blog-img-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gmx-blog-content-v2 {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    flex: 1; /* Alt qismin aşağıya yapışması üçün */
    gap: 8px;
}

.gmx-blog-title-v2 {
    font-size: 15px; /* Daha kiçik font */
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2 sətirdə kəsir */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gmx-blog-desc-v2 {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Şəkildəki kimi description-u qısaldırıq */
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* Nümunədəki o rəngli nöqtəli kapsul (Tarix) dizaynı */
.gmx-blog-meta-v2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    padding: 5px 12px;
    border-radius: 20px;
    margin-top: 10px;
    width: max-content;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gmx-blog-dot {
    width: 8px;
    height: 8px;
    background: #00f2fe;
    border-radius: 50%;
    box-shadow: 0 0 8px #00f2fe;
}


/* =========================================================
   GMX MARKETPLACE SECTION
   ========================================================= */
.gmx-market-section {
    padding: 60px 0;
}

.gmx-market-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* Tab Düymələri */
.gmx-market-tabs {
    display: flex;
    gap: 10px;
}

.gmx-tab-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gmx-tab-btn:hover {
    border-color: var(--brand-primary);
    color: var(--text-main);
}

.gmx-tab-btn.active {
    background: rgba(110, 73, 255, 0.1);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Tab Panelləri */
.gmx-tab-pane {
    display: none;
    animation: gmxFadeIn 0.4s ease;
}

.gmx-tab-pane.active {
    display: block;
}

/* Grid Sistemi - Nümunədəki kimi kompakt (PC-də 5 kart) */
.gmx-market-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* --- KART DİZAYNI --- */
.gmx-market-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.gmx-market-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border-color: var(--brand-primary);
}

.gmx-market-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* Xüsusi Çərçivələr (Gold / Kırmızı) */
.gmx-frame-k { border: 1px solid #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.1); }
.gmx-frame-r { border: 1px solid #facc15; box-shadow: 0 0 10px rgba(250, 204, 21, 0.1); }

.gmx-market-img {
    width: 100%;
    height: 130px; /* Kompakt görünüş üçün qısa şəkil */
    position: relative;
    background: #1a1d24;
}

.gmx-market-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gmx-market-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #facc15;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(250, 204, 21, 0.3);
}

/* Kartın Gövdəsi */
.gmx-market-body {
    padding: 12px 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gmx-market-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gmx-market-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.gmx-market-price-box {
    background: rgba(110, 73, 255, 0.05);
    border: 1px solid rgba(110, 73, 255, 0.1);
    padding: 6px 10px;
    border-radius: 8px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gmx-price-val { font-size: 14px; font-weight: 900; color: var(--brand-primary); }
.gmx-price-cur { font-size: 11px; font-weight: 700; color: var(--text-muted); }

/* Satıcı Footer-i */
.gmx-market-footer {
    padding: 10px 15px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,0,0,0.1);
}

.gmx-market-seller-av {
    position: relative;
    width: 28px;
    height: 28px;
}

.gmx-market-seller-av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.gmx-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
}
.gmx-status-dot.online { background: #10b981; }
.gmx-status-dot.offline { background: #64748b; }

.gmx-market-seller-info {
    display: flex;
    flex-direction: column;
}

.gmx-seller-name { font-size: 11px; font-weight: 800; color: var(--text-main); }
.gmx-seller-seen { font-size: 10px; color: var(--text-muted); }

/* Responsivlik */
@media (max-width: 1200px) { .gmx-market-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px) { .gmx-market-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
    .gmx-market-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .gmx-market-tabs { width: 100%; overflow-x: auto; padding-bottom: 5px; }
    .gmx-tab-btn { white-space: nowrap; flex-shrink: 0; }
    .gmx-market-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gmx-market-img { height: 110px; }
}
@media (max-width: 480px) {
    .gmx-market-grid { grid-template-columns: repeat(2, 1fr); /* Mobildə də 2-li kompakt görünüş */ }
    .gmx-market-card { border-radius: 10px; }
    .gmx-market-body { padding: 10px; }
}

/* =========================================================
   GMX BRAND STRIP (YENİLƏNMİŞ ÖLÇÜLƏR)
   ========================================================= */
.gmx-brand-section {
    padding: 20px 0;
}

.gmx-brand-strip {
    display: flex;
    align-items: center;
   
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.gmx-brand-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    height: 80px; /* PC-də zolağı bir az qalınlaşdırdıq (70-dən 80-ə) */
    background: transparent;
}

.gmx-brand-item:last-child {
    border-right: none;
}

.gmx-brand-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gmx-brand-item img {
    max-height: 55px; /* Loqoları xeyli böyütdük (40-dan 55-ə) */
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.gmx-brand-item:hover img {
    transform: scale(1.1);
}

.custom-scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.custom-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* MOBİL GÖRÜNÜŞ (Daha İri Kvadrat İkonlar) */
@media (max-width: 768px) {
    .gmx-brand-section {
        padding: 10px 0;
    }

    .gmx-brand-strip {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px; /* Aradakı boşluğu artırdıq */
        padding: 10px 0;
    }

    .gmx-brand-item {
        flex: 0 0 90px; /* Mobildə kvadratları xeyli böyütdük (70-dən 90-a) */
        height: 90px;   /* Hündürlük də 90px oldu */
        padding: 0;
        border-right: none;
        border-radius: 20px; /* Küncləri daha yumşaq etdik */
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        scroll-snap-align: start;
        overflow: hidden;
    }

    .gmx-brand-item img {
        height: 100%;
        width: 100%;
        max-height: none;
        object-fit: cover;
    }
}




/* =========================================================
   GMX GIVEAWAY SECTION (ÇƏKİLİŞLƏR)
   ========================================================= */
.gmx-giveaway-section {
    padding: 60px 0;
    position: relative;
}

/* Çəkiliş İkonu xüsusi rəngi */
.giveaway-icon i {
    color: #ec4899 !important; /* Çəhrayı/Neon rəng */
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
}

/* --- KART DİZAYNI --- */
.gmx-gw-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    position: relative;
}

.gmx-gw-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(236, 72, 153, 0.15); /* Çəhrayı parıltı */
    border-color: #ec4899;
}

.gmx-gw-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* Şəkil Qismi */
.gmx-gw-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    background: #111;
    overflow: hidden;
}

.gmx-gw-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gmx-gw-card:hover .gmx-gw-img img {
    transform: scale(1.08);
}

/* Badgelər (Pulsuz / Qiymət) */
.gmx-gw-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.gmx-badge-free {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4);
}

.gmx-badge-price {
    background: rgba(0, 0, 0, 0.8);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

/* Hover Overlay və Qoşul Düyməsi */
.gmx-gw-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.gmx-gw-card:hover .gmx-gw-overlay {
    opacity: 1;
}

.gmx-join-btn {
    background: #ec4899;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.5);
}

.gmx-gw-card:hover .gmx-join-btn {
    transform: translateY(0);
}

/* Gövdə Qismi */
.gmx-gw-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.gmx-gw-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 15px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Statistika və Vaxt */
.gmx-gw-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 10px 12px;
}

.gmx-gw-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.gmx-time-text {
    color: #facc15; /* Vaxt üçün qızılı rəng */
    font-variant-numeric: tabular-nums;
}

/* Nöqtələr */
.gmx-gw-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.5; transition: 0.3s; }
.gmx-gw-pagination .swiper-pagination-bullet-active { background: #ec4899 !important; opacity: 1; width: 20px; border-radius: 10px; }

@media (max-width: 768px) {
    .gmx-giveaway-section { padding: 40px 0; }
    .gmx-gw-title { font-size: 15px; }
    .gmx-gw-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}


.gmx-giveaway-swiper {
    padding: 20px 5px 50px 5px !important; /* Yuxarıdan 20px boşluq veririk ki, kart yuxarı qalxanda kəsilməsin */
    margin: -20px -5px 0 -5px !important; /* Dizayn balansını qorumaq üçün əks tərəfə çəkirik */
    overflow: visible !important; /* Swiper kənarlarını azad edirik */
}

/* =========================================================
   GMX PROMO BANNERS (HEADER PROBLEMİ HƏLL EDİLDİ)
   ========================================================= */
.gmx-promo-section {
    padding: 60px 0;
    position: relative;
    z-index: 10;
}

/* PC Grid Sistemi */
.gmx-promo-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    width: 100%;
}

.gmx-promo-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Kartın Ümumi Dizaynı */
.gmx-promo-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 100%;
}

.gmx-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px var(--brand-glow);
    z-index: 2;
    border-color: var(--brand-primary);
}

.gmx-promo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.gmx-promo-card:hover img {
    transform: scale(1.08);
}

/* Ölçülər */
.gmx-promo-small {
    aspect-ratio: 16 / 10;
}

.gmx-promo-col-main .gmx-promo-large {
    height: 100%;
    min-height: 400px;
}

/* Hover Overlay Effekti */
.gmx-promo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gmx-promo-card:hover .gmx-promo-overlay {
    opacity: 1;
}

.gmx-promo-overlay i {
    font-size: 24px;
    color: #fff;
    background: var(--brand-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.5);
    transition: transform 0.4s ease;
}

.gmx-promo-card:hover .gmx-promo-overlay i {
    transform: scale(1);
}

.gmx-promo-btn {
    background: var(--brand-gradient);
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.gmx-promo-card:hover .gmx-promo-btn {
    transform: translateY(0);
}

/* --- YALNIZ PROMO BÖLMƏSİ ÜÇÜN MOBİL/PC AYARLARI --- */
.gmx-promo-section .gmx-desktop-only { display: grid; }


@media (max-width: 992px) {
    .gmx-promo-grid { grid-template-columns: 1fr 1fr; }
    .gmx-promo-col-main { grid-column: span 2; order: -1; }
    .gmx-promo-col-main .gmx-promo-large { min-height: 300px; aspect-ratio: 16/9; }
}

@media (max-width: 768px) {
    .gmx-promo-section .gmx-desktop-only { display: none !important; }

    .gmx-promo-section { padding: 40px 0; }
    
    .gmx-promo-swiper {
        padding-bottom: 40px !important;
        overflow: hidden !important;
    }
    
    .gmx-promo-mobile {
        aspect-ratio: 16/9;
        border-radius: 16px;
    }

    .gmx-promo-pagination {
        bottom: 0 !important;
    }
}


/* =========================================================
   GMX FOOTER & INFO CARDS (LIGHT/DARK MODE UYĞUN)
   ========================================================= */
.gmx-info-section {
    padding: 50px 0;
    background: transparent !important;
    border-top: 1px solid var(--border-color);
}

.gmx-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gmx-info-card {
    background: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

.gmx-info-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.gmx-info-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.gmx-info-icon {
    width: 100px;
    height: 50px;
    color: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.gmx-info-text h4 { font-size: 15px; font-weight: 800; color: var(--text-main); margin: 0 0 5px 0; }
.gmx-info-text p { font-size: 12px; color: var(--text-muted); margin: 0; }

/* MAIN FOOTER */
.gmx-footer {
    background: var(--footer-gradient) !important;
    padding: 60px 0 30px 0;
    border-top: none !important; /* İnfo bölməsi ilə birləşir */
}

.gmx-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 40px;
}

/* YENİ: SABİT TƏRCİH DÜYMƏSİ (Logonun üstü üçün) */
.gmx-footer-pref-box {
    margin-bottom: 25px;
    display: flex;
}

.gmx-pref-trigger-static {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gmx-pref-trigger-static:hover {
    border-color: var(--brand-primary);
    background: rgba(110, 73, 255, 0.05);
}

/* Light / Dark Mode Loqo Dəyişimi */
.gxf-logo-dark { display: none; }
.gxf-logo-light { display: block; }
html.dark .gxf-logo-dark { display: block; }
html.dark .gxf-logo-light { display: none; }

.gmx-footer-logoBox img { max-height: 45px; margin-bottom: 20px; }
.gmx-footer-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }

.gmx-social-row { display: flex; gap: 10px; }

.gmx-social-link {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
}

.gmx-social-link {
    width: 38px; height: 38px;
    color: var(--text-main);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.gmx-social-link:hover { background: var(--brand-primary); color: #fff; transform: translateY(-3px); border-color: var(--brand-primary); }

.gmx-footer-heading { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; }
.gmx-footer-linkList { display: flex; flex-direction: column; gap: 12px; }
.gmx-footer-link, .gmx-footer-contact-item { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: 0.3s; display: flex; align-items: center; gap: 8px; }
.gmx-footer-link:hover, .gmx-footer-contact-item:hover { color: var(--brand-primary); padding-left: 5px; }

/* BOTTOM BAR */
.gmx-footer-bottom {
    background: transparent !important;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.gmx-fb-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.gmx-fb-copy { font-size: 13px; color: var(--text-muted); }
.gmx-fb-payments { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gmx-pay-icon { height: 24px; filter: grayscale(100%) opacity(0.7); transition: 0.3s; }
.gmx-pay-icon:hover { filter: none; }

/* =========================================================
   MOBİL ÖZƏL (BOTTOM NAV VƏ MODAL)
   ========================================================= */


@media (max-width: 992px) {
    .gmx-info-grid { grid-template-columns: repeat(2, 1fr); }
    .gmx-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .gmx-footer-brand { grid-column: span 2; }
}

@media (max-width: 768px) {
    .gmx-info-grid { grid-template-columns: 1fr; }
    .gmx-footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    
    /* Düyməni və Logonu mərkəzləşdiririk */
    .gmx-footer-pref-box { justify-content: center; }
    .gmx-footer-logoBox img { margin: 0 auto 20px auto; }
    
    .gmx-social-row { justify-content: center; }
    .gmx-footer-link, .gmx-footer-contact-item { justify-content: center; }
    .gmx-footer-link:hover { padding-left: 0; color: var(--brand-primary); }
    .gmx-fb-inner { justify-content: center; padding-bottom: 20px; }
    
  
    
    /* Bnav Spacer - Çox böyük olmayan bir boşluq */
    .gmx-bnav-spacer { height: 80px; clear: both; width: 100%; display: block; }

    /* Modal (Aşağıdan çıxan pəncərə) */
    .gmx-pref-modal {
        position: fixed; inset: 0; z-index: 9999;
        visibility: hidden; opacity: 0; transition: 0.3s;
    }
    .gmx-pref-modal.active { visibility: visible; opacity: 1; }
    .gmx-pref-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
    .gmx-pref-sheet {
        position: absolute; bottom: -100%; left: 0; right: 0;
        background: var(--bg-surface);
        border-radius: 24px 24px 0 0;
        padding: 25px;
        transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .gmx-pref-modal.active .gmx-pref-sheet { bottom: 0; }
    
    .gmx-pref-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .gmx-pref-header h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-main); }
    .gmx-pref-close { background: none; border: none; color: var(--text-muted); font-size: 20px; }
    
    .gmx-form-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
    .gmx-form-group label { font-size: 12px; color: var(--text-muted); font-weight: 700; }
    
    .gmx-select { 
       
      
        color: var(--text-main); 
        padding: 12px; 
        border-radius: 12px; 
        width: 100%; 
    }
    .gmx-select { 
    background: var(--bg-surface) !important; /* Daha təmiz görünüş */
    border: 1px solid var(--border-color) !important;
}
    
    .gmx-btn-primary { background: var(--brand-primary); color: #fff; border: none; padding: 12px; border-radius: 12px; font-weight: 800; }

    /* Modern Floating Bottom Nav */
    .gmx-bottom-nav {
        position: fixed;
        bottom: 15px;
        left: 15px; 
        right: 15px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        border-radius: 24px;
        display: flex;
        justify-content: space-around;
        padding: 10px 5px;
        z-index: 100;
    }
    .gmx-bnav-item {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        color: var(--text-muted); text-decoration: none; font-size: 10px; font-weight: 700;
        transition: 0.3s;
        flex: 1;
    }
    
    /* İkonlara modern arxa fon və rənglər */
    .bnav-icon-box {
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px;
        font-size: 16px;
        transition: 0.3s;
        background: transparent;
    }

    .gmx-bnav-item.active { color: var(--text-main); }
    .gmx-bnav-item.active .bnav-icon-box {
        background: rgba(110, 73, 255, 0.1);
        color: var(--brand-primary);
        transform: translateY(-3px);
    }
    
    .gmx-cart-badge {
        position: absolute; top: -5px; right: -5px;
        background: #ef4444; color: #fff; font-size: 9px; font-weight: 900;
        padding: 2px 5px; border-radius: 10px;
        border: 2px solid var(--bg-surface);
    }
}





.v4new-header {
    background: var(--header-gradient) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.3s ease;
}

/* 2. Bölmələrin Şəffaflaşdırılması (Bütöv görünüş üçün) */
.gmx-topbar, 
.gmx-mainbar, 
.gmx-navbar {
    background-color: transparent !important;
    border-bottom: none !important;
}

/* 3. Topbar Tənzimləməsi (Daha yığcam) */
.gmx-topbar {
    height: 38px !important;
    font-size: 12px !important;
}

/* 4. Axtarış Çubuğu (Modern yumşaq künclər) */
.gmx-search-wrapper {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    height: 44px !important;
    transition: all 0.3s ease;
}

.gmx-search-wrapper:focus-within {
    background-color: var(--bg-surface) !important;
    border-color: var(--brand-primary) !important;
}

/* 5. Menyu Linkləri (Zərif alt xətt) */
.gmx-menu-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    padding: 8px 0 !important;
}

.gmx-menu-link::after {
    height: 2px !important;
    bottom: 0px !important;
    background: var(--brand-gradient) !important;
}

/* 6. Balans Kapsulu və Dil Düyməsi */
.gmx-balance-pill, 
.gmx-lang-btn {
    background-color: var(--bg-body) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 7. Ən alt Elan Barı Ayırıcısı */
.gmx-annbar {
    border-top: 1px solid var(--border-color) !important;
    background: transparent !important;
}

/* 8. Profil İkonu Fix */
.header-profile-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    border: 2px solid var(--brand-primary) !important;
}




/* =========================================================
   GMX USER DASHBOARD (LAYOUT & MAIN CONTENT)
   ========================================================= */

/* --- Qlobal Grid Layout (Sol Menyü və Sağ Məzmun) --- */
.gmx-dashboard-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 15px;
}

/* --- Əsas Məzmun Sahəsi --- */
.gmx-dashboard-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* =========================================================
   STATİSTİKA KARTLARI (Yuxarıdakı 3 qutu)
   ========================================================= */
.gmx-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gmx-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
body.dark .gmx-stat-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); }

/* Kliklənə bilən (Link) olan kartların hover effekti */
.gmx-stat-card.clickable:hover {
    border-color: var(--brand-primary);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

/* İkon Qutuları */
.gmx-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.gmx-stat-icon.balance {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--brand-primary);
}
.gmx-stat-icon.points {
    background: rgba(234, 179, 8, 0.12); /* Gold */
    color: #eab308;
}
.gmx-stat-icon.ref {
    background: rgba(16, 185, 129, 0.12); /* Green */
    color: #10b981;
}

/* Yazı və Rəqəmlər */
.gmx-stat-info { flex: 1; min-width: 0; }
.gmx-stat-info h4 {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0 0 6px 0;
}
.gmx-stat-info .value {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bonus xal kartındakı sağdakı ox */
.gmx-stat-card .arrow-icon {
    color: var(--text-muted);
    font-size: 14px;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}
.gmx-stat-card.clickable:hover .arrow-icon {
    opacity: 1;
    transform: translateX(0);
    color: var(--brand-primary);
}


/* =========================================================
   HIZLI HƏRƏKƏTLƏR (Action düymələri)
   ========================================================= */
.gmx-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.gmx-action-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 800;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.01);
}
.gmx-action-card i {
    font-size: 22px;
    color: var(--brand-primary);
    transition: transform 0.3s;
}
.gmx-action-card:hover {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 3%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.gmx-action-card:hover i {
    transform: scale(1.15);
}


/* =========================================================
   CƏDVƏL KARTI (Son Sifarişlər)
   ========================================================= */
.gmx-card {
    background: var(--bg-surface);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}
body.dark .gmx-card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); }

.gmx-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 30px;
    border-bottom: 1px solid var(--border-color);
}
.gmx-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-main);
    margin: 0;
}
.gmx-view-all {
    font-size: 13px;
    font-weight: 800;
    color: var(--brand-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.3s;
}
.gmx-view-all:hover {
    color: var(--brand-secondary);
    transform: translateX(4px);
}

.gmx-card-body {
    padding: 0;
}

/* Cədvəl (Table) Dizaynı */
.gmx-table-responsive {
    overflow-x: auto;
}
.gmx-dashboard-table {
    width: 100%;
    border-collapse: collapse;
}
.gmx-dashboard-table th {
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 16px 24px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    letter-spacing: 0.5px;
}
.gmx-dashboard-table td {
    padding: 20px 24px;
    border-bottom: 1px dashed var(--border-color);
    vertical-align: middle;
}
.gmx-dashboard-table tr:last-child td { border-bottom: none; }
.gmx-dashboard-table tr:hover td { background: color-mix(in srgb, var(--brand-primary) 2%, transparent); }

.order-id { font-weight: 900; color: var(--text-main); font-size: 14px;}
.date-col { font-weight: 600; color: var(--text-muted); font-size: 13px;}
.price-col { font-weight: 900; color: var(--brand-primary); font-size: 15px;}

/* Məhsul Sütunu (Şəkil və Ad) */
.gmx-table-product {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gmx-table-product img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
}
.gmx-table-product span {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
}

/* Status Badgeləri */
.gmx-status-badge {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.gmx-status-badge.completed { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.gmx-status-badge.cancelled { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.gmx-status-badge.process { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.gmx-status-badge.partial { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }
.gmx-status-badge.pending { background: var(--bg-body); color: var(--text-muted); border: 1px solid var(--border-color); }

/* Cədvəl Sətirindəki İkon Düyməsi */
.gmx-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}
.gmx-btn-icon:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: transparent;
    transform: scale(1.05);
}

/* Boş (Empty) State */
.gmx-empty-state {
    padding: 60px 20px;
    text-align: center;
}
.gmx-empty-state i {
    font-size: 40px;
    color: var(--border-color);
   
}
.gmx-empty-state p {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0;
}

/* =========================================================
   RESPONSIVE (MOBİL VƏ PLANŞET GÖRÜNÜŞ) - DÜZƏLDİLMİŞ
   ========================================================= */

@media (max-width: 1024px) {
    .gmx-dashboard-layout {
        grid-template-columns: 1fr; /* Sol menyu və sağ panel alt-alta düşsün */
        gap: 20px;
    }
    
    /* VİP KOD: Sağ panelin ekrandan kənara daşmasının qarşısını alır */
    .gmx-dashboard-main {
        min-width: 0; 
        width: 100%;
        overflow: hidden; 
    }
    
    /* Planşetdə kartlar çox sıxılmasın deyə 3 yerinə 2 sütun edirik */
    .gmx-stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    /* Statistika kartları Mobildə tək-tək (alt-alta) dursun */
    .gmx-stats-grid { 
        grid-template-columns: 1fr; 
        gap: 15px; 
    }
    
    /* Hızlı Action düymələri 2-2 dursun */
    .gmx-actions-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }
    .gmx-action-card { 
        padding: 12px; 
        font-size: 12px; 
    }
    .gmx-action-card i { 
        font-size: 18px; 
    }

    /* Kart başlığı mobildə düzgün dursun */
    .gmx-card-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px;
        padding: 20px; 
    }

    /* Cədvəlin mobilə sığışması üçün tənzimləmə */
    .gmx-table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* İOS-da rahat sağa-sola sürüşmə üçün */
    }
    
    .gmx-dashboard-table {
        min-width: 600px; /* Cədvəl çox əzilməsin deyə limit veririk, sağa sürüşdürməklə baxacaqlar */
    }
    
    .gmx-dashboard-table td, 
    .gmx-dashboard-table th { 
        padding: 12px 15px; 
    }
    
    .gmx-table-product span { 
        font-size: 13px; 
    }
}

/* Çox kiçik ekranlar üçün (iPhone SE və s.) */
@media (max-width: 480px) {
    .gmx-stat-card {
        padding: 20px 15px;
    }
    .gmx-stat-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    .gmx-stat-info .value {
        font-size: 22px;
    }
}




.gmx-epic-login-wrapper {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    background-color: var(--bg-body);
}

.gmx-epic-card {
    display: flex;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: var(--bg-surface);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

/* ================== SOL TƏRƏF (VİZUAL) ================== */
.epic-info-side {
    flex: 1;
    position: relative;
    padding: 60px 50px;
    color: #fff;
    /* GMX-in marka rəngləri ilə güclü qradiyent fon */
    background: linear-gradient(135deg, #1e1b4b 0%, var(--brand-primary) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* Arxaya abstrakt naxış effekti (optional) */
.epic-info-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 40%);
    z-index: 1;
}

.epic-info-content {
    position: relative;
    z-index: 2;
}

.epic-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.epic-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 50px;
    max-width: 90%;
}

.epic-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.epic-feat-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.feat-text h6 { font-size: 16px; font-weight: 800; margin: 0 0 6px 0; color: #fff; }
.feat-text p { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin: 0; line-height: 1.5; }


/* ================== SAĞ TƏRƏF (FORM) ================== */
.epic-form-side {
    width: 500px;
    padding: 50px;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
}

/* Tabs */
.epic-tabs {
    display: flex;
    background: var(--bg-body);
    padding: 6px;
    border-radius: 14px;
    margin-bottom: 35px;
    border: 1px solid var(--border-color);
}
.epic-tab {
    flex: 1; text-align: center; padding: 12px; border-radius: 10px;
    font-size: 14px; font-weight: 800; color: var(--text-muted);
    transition: 0.3s; text-decoration: none;
}
.epic-tab.active {
    background: var(--bg-surface); color: var(--brand-primary);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.epic-welcome { margin-bottom: 30px; }
.epic-welcome h3 { font-size: 24px; font-weight: 800; color: var(--text-main); margin: 0 0 5px 0; }
.epic-welcome p { font-size: 14px; color: var(--text-muted); margin: 0; }

/* Alerts */
.epic-alert { padding: 15px 20px; border-radius: 12px; font-size: 13px; font-weight: 700; margin-bottom: 25px; }
.epic-alert.error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.epic-alert.success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.epic-alert ul { margin: 0; padding-left: 15px; }

/* Inputs */
.epic-form { display: flex; flex-direction: column; gap: 20px; }
.epic-input-group label { display: block; font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }


/* İnput Qrupu və Qutusu üçün tam genişlik təmin edilir */
.epic-input-group { 
    width: 100%; 
}

.input-box { 
    position: relative; 
    width: 100%; 
}

.input-box i { 
    position: absolute; 
    left: 18px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--text-muted); 
    font-size: 16px; 
    transition: 0.3s; 
}

/* DAŞMA PROBLEMİNİN HƏLLİ (box-sizing əlavə edildi) */
.input-box input {
    width: 100%; 
    box-sizing: border-box; /* Bu kod daşmanın qarşısını 100% alır */
    padding: 15px 15px 15px 48px;
    background: var(--bg-body); 
    border: 2px solid var(--border-color);
    border-radius: 14px; 
    color: var(--text-main); 
    font-size: 15px; 
    font-weight: 600;
    transition: all 0.3s ease; 
    outline: none;
}

.input-box input:focus { 
    border-color: var(--brand-primary); 
    background: var(--bg-surface); 
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1); 
}

.input-box input:focus + i { 
    color: var(--brand-primary); 
}

/* 1. SEHRLİ KOD: Bütün login elementlərinin çölə daşmasının qarşısını mütləq şəkildə alır */
.gmx-epic-login-wrapper *, 
.gmx-epic-login-wrapper *::before, 
.gmx-epic-login-wrapper *::after {
    box-sizing: border-box !important;
}

/* 2. MOBİL ÜÇÜN DAHA YIĞCAM ÖLÇÜLƏR VƏ FIX */
@media (max-width: 992px) {
    .gmx-epic-card {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    .epic-form-side {
        width: 100%;
        padding: 40px 25px !important; /* Sağ-sol boşluqları tam çərçivəyə oturdur */
    }
}

@media (max-width: 480px) {
    .gmx-epic-login-wrapper {
        padding: 20px 15px !important; /* Ekranın kənarlarına yapışmasın deyə */
    }
    .epic-form-side {
        padding: 30px 15px !important; /* Mobildə inputların yerləşməsi üçün ideal boşluq */
    }
    /* Mobildə inputun içi çox dar olmasın deyə padding bir az azaldıldı */
    .input-box input {
        padding: 14px 15px 14px 45px !important; 
    }
}
/* Tools & Button */
.epic-form-tools { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.epic-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-muted); }
.epic-checkbox input { display: none; }
.checkmark { width: 18px; height: 18px; border: 2px solid var(--border-color); border-radius: 6px; display: inline-block; position: relative; transition: 0.2s; }
.epic-checkbox input:checked + .checkmark { background: var(--brand-primary); border-color: var(--brand-primary); }
.epic-checkbox input:checked + .checkmark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.epic-forgot { color: var(--brand-primary); transition: 0.2s; }
.epic-forgot:hover { text-decoration: underline; }

.epic-btn-submit {
    width: 100%; padding: 16px; margin-top: 10px;
    background: var(--brand-gradient); color: #fff; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 800; cursor: pointer; transition: 0.3s;
    box-shadow: 0 10px 25px var(--brand-glow);
}
.epic-btn-submit:hover { transform: translateY(-3px); box-shadow: 0 15px 30px var(--brand-glow); }

/* Socials */
.epic-divider { text-align: center; margin: 30px 0; position: relative; }
.epic-divider::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--border-color); }
.epic-divider span { position: relative; background: var(--bg-surface); padding: 0 15px; color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.social-row { display: flex; gap: 15px; }
.s-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px; border-radius: 12px; border: 2px solid var(--border-color);
    font-size: 14px; font-weight: 800; color: var(--text-main); transition: 0.3s; text-decoration: none;
}
.s-btn i { font-size: 18px; }
.s-btn.fb:hover { border-color: #1877f2; color: #1877f2; background: rgba(24,119,242,0.05); }
.s-btn.tw:hover { border-color: #1da1f2; color: #1da1f2; background: rgba(29,161,242,0.05); }

/* ================== RESPONSIVE ================== */
@media (max-width: 992px) {
    .gmx-epic-card { flex-direction: column; max-width: 500px; }
    /* Mobildə sol tərəf (vizual) gizlənir, çünki ekranda yer tutmasın */
    .epic-info-side { display: none; }
    .epic-form-side { width: 100%; padding: 40px 30px; }
}

@media (max-width: 480px) {
    .gmx-epic-login-wrapper { padding: 20px 0; }
    .epic-form-side { padding: 30px 20px; }
    .social-row { flex-direction: column; gap: 10px; }
}


.google-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}




/* =========================================================
   GMX EPIC SPLIT REGISTER EKSTRALARI
   ========================================================= */

/* Qeydiyyatdakı yan-yana input sətirləri (Ad-Soyad, Parol və s.) */
.epic-form-row {
    display: flex;
    gap: 15px;
    width: 100%;
}
.epic-form-row .epic-input-group {
    flex: 1;
}

/* Şərtlər (Checkbox) qutusu */
.epic-terms-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-body);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.epic-terms-box a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 700;
}
.epic-terms-box a:hover {
    text-decoration: underline;
}
.chk-text {
    font-size: 13px;
    color: var(--text-muted);
}

/* Mobildə yan-yana inputların alt-alta düşməsi */
@media (max-width: 576px) {
    .epic-form-row {
        flex-direction: column;
        gap: 20px;
    }
}

/* Cloudflare Turnstile Sabitləyici (Atlamanın qarşısını alır) */
.cf-turnstile-wrapper {
    min-height: 65px; /* Cloudflare widget-nin standart hündürlüyü */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Əgər xəta mesajı çıxarsa */
.turnstile-error {
    color: #ef4444;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    font-weight: 600;
}



/* =========================================================
   GMX EPIC SPLIT - ŞİFRƏ SIFIRLAMA EKSTRALARI
   ========================================================= */

/* Göz İkonu (Sağda dayanması üçün) */
.input-box i.right-icon {
    left: auto;
    right: 18px;
    cursor: pointer;
    pointer-events: auto; /* Kliklənməyə icazə veririk */
    color: var(--text-muted);
}
.input-box i.right-icon:hover {
    color: var(--brand-primary);
}

/* Sağda ikon olanda yazının ikonun üstünə çıxmaması üçün */
.input-box input[type="password"],
.input-box input[type="text"] {
    padding-right: 45px !important; 
}

/* Şifrə Gücü (Strength Meter) */
.password-strength-meter {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.strength-bar {
    height: 6px;
    flex: 1;
    background: var(--border-color);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.strength-bar.weak { background-color: #ef4444; } /* Zəif - Qırmızı */
.strength-bar.medium { background-color: #f59e0b; } /* Orta - Sarı */
.strength-bar.strong { background-color: #10b981; } /* Güclü - Yaşıl */


/* =========================================================
   GMX EPIC SPLIT - ŞİFRƏ UNUTDUM EKSTRALARI
   ========================================================= */

/* Geri Qayıt Düyməsi (Back Link) */
.epic-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.3s ease;
    align-self: flex-start;
}
.epic-back-link i {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.epic-back-link:hover {
    color: var(--brand-primary);
}
.epic-back-link:hover i {
    transform: translateX(-4px); /* Üzərinə gələndə ox sola hərəkət edir */
}

/* Google reCAPTCHA wrapper (Daşmanın və asimmetriyanın qarşısını alır) */
.recaptcha-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}



/* =========================================================
   GMX CATALOG / ALL CATEGORIES PAGE
   ========================================================= */

.gmx-catalog-wrapper , .gmx-user-panel-page , .gmx-public-page {
    padding: 40px 0 80px 0;
    min-height: 80vh;
}

/* Header & Breadcrumb */
.catalog-header-area { text-align: center; margin-bottom: 40px; }

.gmx-game-detail-wrapper {
    padding-top: 25px; /* Üst bardan olan məsafə */
    background: var(--bg-body);
    min-height: 60vh;
}


.breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 10px 20px; /* Daxili boşluq bir az artırıldı */
    border-radius: 50px; /* Tam pilled görünüş */
    margin-bottom: 25px; /* Altındakı elementlərlə məsafə */
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Çox incə kölgə */
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
}

.breadcrumb a:hover {
    color: var(--brand-primary);
}

.breadcrumb .divider {
    opacity: 0.3;
    font-weight: 400;
}

.breadcrumb .active {
    color: var(--text-main);
}

/* --- Kateqoriya Düymələri (Sub-nav) --- */
.gmx-subcat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.gmx-subcat-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gmx-subcat-btn:hover {
    border-color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.05);
    color: var(--text-main);
    transform: translateY(-2px);
}

.gmx-subcat-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 8px 20px var(--brand-glow);
}

/* Mobil tənzimləmə */
@media (max-width: 768px) {
    .gmx-game-detail-wrapper {
        padding-top: 15px;
    }
    
    .gmx-breadcrumb {
        padding: 8px 16px;
        font-size: 12px;
    }
}
.catalog-main-title { font-size: 36px; font-weight: 900; color: var(--text-main); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.catalog-main-title .text-gradient { background: var(--brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.catalog-subtitle { font-size: 15px; color: var(--text-muted); }

/* Tools Bar (Search & Filter) */
.catalog-tools-bar { display: flex; gap: 15px; margin-bottom: 40px; align-items: center; justify-content: space-between; background: var(--bg-surface); padding: 15px; border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

.catalog-search-box { flex: 1; position: relative; overflow: hidden; border-radius: 12px; }
.catalog-search-box i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 16px; z-index: 2; }
.catalog-search-box input { width: 100%; padding: 16px 20px 16px 50px; background: var(--bg-body); border: 1px solid transparent; border-radius: 12px; color: var(--text-main); font-size: 15px; font-weight: 600; outline: none; transition: 0.3s; position: relative; z-index: 1; }
.catalog-search-box input:focus { background: var(--bg-surface); }
.search-glow-line { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--brand-primary); transition: width 0.4s ease; z-index: 3; box-shadow: 0 -2px 10px var(--brand-glow); }
.catalog-search-box input:focus ~ .search-glow-line { width: 100%; }
.catalog-search-box input:focus ~ i { color: var(--brand-primary); }

.catalog-filter-btn { display: flex; align-items: center; gap: 8px; padding: 16px 25px; background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-main); font-weight: 800; cursor: pointer; transition: 0.3s; }
.catalog-filter-btn:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* Category Grid */
.gmx-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

/* Category Cards */
.gmx-cat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    position: relative;
}

.cat-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1; /* Kvadrat format */
    position: relative;
    overflow: hidden;
    background: var(--bg-body);
}

.cat-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    opacity: 0.6;
    transition: 0.3s;
}

.cat-hover-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -30%);
    width: 45px; height: 45px;
    background: var(--brand-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    opacity: 0;
    box-shadow: 0 5px 15px var(--brand-glow);
    transition: all 0.3s ease;
}

.cat-content {
    padding: 18px 15px;
    text-align: center;
    background: var(--bg-surface);
    position: relative;
    z-index: 2;
}

.cat-content h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    transition: 0.3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hover Effects */
.gmx-cat-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-primary);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.gmx-cat-card:hover .cat-image-wrap img { transform: scale(1.1); }
.gmx-cat-card:hover .cat-overlay { opacity: 0.8; }
.gmx-cat-card:hover .cat-hover-btn { opacity: 1; transform: translate(-50%, -50%); }
.gmx-cat-card:hover .cat-content h3 { color: var(--brand-primary); }

/* Responsive */
@media (max-width: 768px) {
    .gmx-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
    .catalog-main-title { font-size: 28px; }
    .catalog-tools-bar { flex-direction: column; padding: 10px; }
    .catalog-search-box, .catalog-filter-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .gmx-catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .cat-content { padding: 12px 10px; }
    .cat-content h3 { font-size: 12px; }
}
/* =========================================================
   GMX GAME DETAILS / SUB-CATEGORY PAGE
   ========================================================= */

/* Cinematic Hero Section */
.gmx-game-hero {
    position: relative;
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Aşağıya doğru tündləşən gradient (Məlumatlar oxunsun deyə) */
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 40px;
}

.hero-icon-box {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    background: var(--bg-surface);
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.1);
}

.hero-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.hero-text-box .hero-title {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

/* Layout: Sidebar & Main Grid */
.gmx-game-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Sol Sidebar (SEO & Info) */
.gmx-game-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 100px; /* Aşağı düşəndə ekranla birgə sürüşməsi üçün */
}

.sidebar-info-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.sidebar-info-box h3 {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0 0 15px 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-info-box .desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* SEO contentin içinin səliqəyə salınması */
.seo-content {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}
.seo-content::-webkit-scrollbar { width: 4px; }
.seo-content::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.seo-content h1, .seo-content h2, .seo-content h3 { font-size: 16px; color: var(--text-main); margin: 15px 0 10px 0; }
.seo-content p { margin-bottom: 10px; }

/* Sağ Əsas Məzmun (Kartlar) */
.gmx-game-main {
    flex: 1;
}

/* Responsive Dizayn */
@media (max-width: 992px) {
    .gmx-game-layout { flex-direction: column; }
    .gmx-game-sidebar { width: 100%; position: static; }
    .hero-text-box .hero-title { font-size: 32px; }
    .hero-icon-box { width: 90px; height: 90px; }
}

@media (max-width: 576px) {
    .gmx-game-hero { height: 280px; border-radius: 16px; }
    .hero-inner { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px; }
    .hero-text-box .hero-title { font-size: 24px; }
}

/* --- Game Detail Wrapper --- */
.gmx-game-detail-wrapper {
    padding-bottom: 50px;
    background: var(--bg-body);
 
}


/* --- Subcategory Chips --- */
.gmx-subcat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gmx-subcat-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gmx-subcat-btn i {
    font-size: 14px;
    color: var(--text-muted);
    transition: 0.3s;
}

/* Hover & Active State */
.gmx-subcat-btn:hover {
    border-color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), 0.05);
    color: var(--text-main);
    transform: translateY(-2px);
}

.gmx-subcat-btn.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 8px 20px var(--brand-glow);
}

.gmx-subcat-btn.active i {
    color: #fff;
}/* --- Cinematic Hero --- */
.gmx-game-hero {
    position: relative;
    width: 100%;
    min-height: 260px;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Şəkli qaraldıb yazıları oxunaqlı edir */
    background: linear-gradient(90deg, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.4) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%;
}

.hero-icon-box {
    width: 110px;
    height: 110px;
    background: var(--bg-surface);
    border-radius: 20px;
    padding: 10px;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    flex-shrink: 0;
}

.hero-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.hero-text-box .hero-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-text-box .hero-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    max-width: 500px;
    margin: 0;
}/* --- Gaming Tabs Nav --- */
.gmx-tabs-nav {
    display: flex;
    gap: 15px;
    background: var(--bg-surface);
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    overflow-x: auto;
}

.gmx-tab-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 14px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
    border: 1px solid transparent;
}

.gmx-tab-link i {
    font-size: 16px;
    opacity: 0.7;
}

.gmx-tab-link:hover {
    color: var(--text-main);
    background: rgba(255,255,255,0.02);
}

.gmx-tab-link.active {
    background: var(--bg-body);
    color: var(--brand-primary);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gmx-tab-link.active i {
    opacity: 1;
}@media (max-width: 768px) {
    .gmx-game-hero {
        min-height: auto;
        border-radius: 16px;
    }
    
    .hero-inner {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 15px;
    }
    
    .hero-icon-box {
        width: 80px;
        height: 80px;
    }
    
    .hero-text-box .hero-title {
        font-size: 24px;
    }
    
    .gmx-tabs-nav {
        gap: 5px;
        padding: 5px;
    }
    
    .gmx-tab-link {
        padding: 10px 14px;
        font-size: 12px;
    }
}


/* =========================================================
   GMX SINGLE CATEGORY - TOP SECTION (BREADCRUMB, HERO, TABS)
   TWITCH / MODERN GAMING STYLE
   ========================================================= */

/* Breadcrumb Əsas Konteyneri */
.shop nav[aria-label="breadcrumb"] .breadcrumb,
.gmx-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--bg-surface);
    padding: 10px 20px;
    border-radius: 50px; /* Oval, hap forması */
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 25px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 0;
    list-style: none; /* Əgər ul/ol kimi istifadə edilsə nöqtələri gizlədir */
}

/* Qaranlıq Rejim (Dark Mode) Kölgəsi */
html.dark .shop nav[aria-label="breadcrumb"] .breadcrumb,
html.dark .gmx-breadcrumb {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Breadcrumb Elementləri */
.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

/* Linklərin Dizaynı */
.breadcrumb-item a,
.gmx-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hover Effekti */
.breadcrumb-item a:hover,
.gmx-breadcrumb a:hover {
    color: var(--brand-primary);
}

/* Aktiv (Hazırkı) Səhifə */
.breadcrumb-item.active,
.gmx-breadcrumb .active {
    color: var(--text-main);
}

/* Ayırıcı (Slash - "/") İşarəsi Bootstrap üçün */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--text-muted);
    opacity: 0.5;
    padding: 0 8px;
}

/* Ayırıcı (Slash - "/") İşarəsi xüsusi gmx-breadcrumb üçün (əgər span ilə yazılıbsa) */
.gmx-breadcrumb .divider {
    color: var(--text-muted);
    opacity: 0.5;
    padding: 0 8px;
}

/* --- 2. Catchips (Alt Kateqoriya Menyu) --- */
.catchips {
    margin-bottom: 30px;
}

.catchips__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.catchips__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.catchips__btn i {
    font-size: 14px;
    color: inherit;
    opacity: 0.7;
    transition: 0.3s;
}

.catchips__btn:hover {
    border-color: var(--brand-primary);
    background: rgba(139, 92, 246, 0.05);
    color: var(--brand-primary);
    transform: translateY(-2px);
}

.catchips__btn.is-active {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px var(--brand-glow);
}

.catchips__btn.is-active i {
    opacity: 1;
}

/* --- 3. Hero Section (cat-hero) --- */
.cardspec {
    margin-bottom: 30px;
}

.cat-hero {
    position: relative;
    width: 100%;
    min-height: 280px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-end;
}

html.dark .cat-hero {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.cat-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Şəkil yoxdursa standart arxa plan */
.cat-hero__bg--placeholder {
    background: linear-gradient(135deg, var(--bg-surface), var(--border-color));
}

/* Şəklin üzərindəki qaranlıq qradiyent (yazı oxunsun deyə) */
.cat-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 10%, rgba(15, 23, 42, 0.6) 60%, rgba(15, 23, 42, 0.1) 100%);
}

.cat-hero__glass {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 40px;
}

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

/* Oyun/Kateqoriya İkonu */
.cat-hero__thumb {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    background: var(--bg-surface);
    padding: 10px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cat-hero__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.cat-hero__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-hero__title {
    font-size: 36px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.cat-hero__desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    max-width: 600px;
    margin: 0;
}

.cat-hero__meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
}

.cat-hero__meta .stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cat-hero__meta .stat i.fa-star {
    color: #facc15;
}

.cat-hero__meta .stat--cat {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* --- 4. Tabs (Header Row Nav) --- */
.header-row.nav {
    display: flex;
    gap: 10px;
    background: var(--bg-surface);
    padding: 8px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    margin-bottom: 30px;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Scrollbar-ı gizlətmək üçün */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.header-row.nav::-webkit-scrollbar {
    display: none;
}

.header-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
}

.header-column i {
    font-size: 16px;
    opacity: 0.7;
    transition: 0.3s;
}

.header-column:hover {
    color: var(--text-main);
    background: rgba(139, 92, 246, 0.05);
}

.header-column.active {
    background: var(--bg-body);
    color: var(--brand-primary);
    border-color: var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

html.dark .header-column.active {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.header-column.active i {
    opacity: 1;
    color: var(--brand-primary);
}

/* --- RESPONSIVE (MOBİL) --- */
@media (max-width: 992px) {
    .cat-hero__overlay {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 20%, rgba(15, 23, 42, 0.6) 60%, rgba(15, 23, 42, 0.2) 100%);
    }
    .cat-hero__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .shop nav[aria-label="breadcrumb"] .breadcrumb {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .cat-hero {
        min-height: auto;
        border-radius: 16px;
    }

    .cat-hero__glass {
        padding: 25px 20px;
    }

    .cat-hero__row {
        align-items: center;
        text-align: center;
    }

    .cat-hero__thumb {
        width: 90px;
        height: 90px;
        padding: 6px;
    }

    .cat-hero__title {
        font-size: 26px;
    }

    .cat-hero__desc {
        font-size: 13px;
    }

    .cat-hero__meta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .header-column {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* =========================================================
   GMX VIEW 4 - MODERNIZED (TWITCH / GAMING STYLE)
   - Dark/Light variables compatible
   - Title (top) -> Price (middle) -> Note (bottom)
   - Price: green + subtle #ec4899 mix
   - Note: separate soft pink/purple (different from price)
   ========================================================= */


.lt-game-left{ flex:1; }

.lt-game-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
}

/* --- Product Card --- */
.lt-game-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:var(--bg-surface);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:12px 15px;
    cursor:pointer;
    transition:all .25s ease;
    position:relative;
    color:var(--text-main);
    box-shadow:0 4px 10px rgba(0,0,0,0.02);
    overflow:hidden;
}

.lt-game-card:hover{
    border-color:var(--brand-primary);
    box-shadow:0 8px 20px var(--brand-glow);
    transform:translateY(-3px);
}

.lt-game-card.active{
    border-color:var(--brand-primary);
    background:var(--lt-active-bg);
    box-shadow:0 0 0 1px var(--brand-primary), 0 10px 25px var(--brand-glow);
}

/* Active neon line */
.lt-game-card.active::before{
    content:"";
    position:absolute;
    left:0;
    top:20%;
    height:60%;
    width:4px;
    background:var(--brand-gradient);
    border-radius:0 4px 4px 0;
}

.lt-game-card.disabled{
    opacity:.55;
    cursor:not-allowed;
    filter:grayscale(1);
    background:var(--bg-body);
}

/* --- Card Media --- */
.lt-gc-media{
    width:54px;
    height:54px;
    flex-shrink:0;
    background:var(--bg-body);
    border-radius:12px;
    padding:4px;
    border:1px solid var(--border-color);
}

.lt-gc-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:8px;
}

/* --- Card Info --- */
.lt-gc-info{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

/* Title (top) */
.lt-gc-title{
    font-size:14px;
    font-weight:800;
    color:var(--text-main);
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Price (middle) + Note (bottom) */
.lt-gc-price{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
        "old new"
        "note note";
    column-gap:8px;
    row-gap:6px;
    align-items:center;
    min-width:0;
}

/* Old price */
.lt-gc-price .old{
    grid-area:old;
    font-size:11px;
    color:var(--text-muted);
    text-decoration:line-through;
    font-weight:750;
    white-space:nowrap;
    opacity:.9;
}

/* New price (MIDDLE) */
.lt-gc-price .new{
    grid-area:new;
    font-size:14px;
    font-weight:950;
    color:var(--lt-price-color);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-shadow: 0 0 14px var(--lt-price-glow);
}

/* Note (BOTTOM) */
.lt-gc-price .text-infov4{
    grid-area:note;
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:6px;

    max-width:100%;
    padding:3px 10px;
    border-radius:999px;

    font-size:12px;
    font-weight:800;
    line-height:1.2;

    color:var(--lt-note-color);
    background:var(--lt-note-bg);
    border:1px solid var(--lt-note-br);

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Arrow */
.lt-gc-arrow{
    margin-left:auto;
    color:var(--text-muted);
    font-size:14px;
    transition:.2s;
    opacity:.55;
}

.lt-game-card.active .lt-gc-arrow{
    color:var(--brand-primary); /* price-dən ayrı saxladım */
    transform:translateX(3px);
    opacity:1;
}

/* --- Right Panel --- */
.lt-game-right{
    width:360px;
    flex-shrink:0;
}

.lt-order-panel{
    background:var(--bg-surface);
    border-radius:20px;
    border:1px solid var(--border-color);
    position:sticky;
    top:90px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,0.10);
}

.lt-op-head{
    background:var(--bg-surface-hover);
    padding:18px 25px;
    font-size:15px;
    font-weight:900;
    color:var(--text-main);
    border-bottom:1px solid var(--border-color);
    text-transform:uppercase;
    letter-spacing:.5px;
}

.lt-op-body{ padding:25px; }

.lt-op-product{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--bg-body);
    padding:12px;
    border-radius:14px;
    border:1px solid var(--border-color);
}

.lt-op-product img{
    width:48px;
    height:48px;
    border-radius:10px;
    object-fit:cover;
    background:var(--bg-surface);
}

.lt-op-name{
    color:var(--text-main);
    font-weight:850;
    font-size:14px;
    line-height:1.25;
}

/* Rows */
.lt-op-row.align-center{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:15px;
}

.lt-op-label{
    font-size:11px;
    color:var(--text-muted);
    font-weight:900;
    text-transform:uppercase;
}

/* Qty Controls */
.lt-op-qty{
    display:flex;
    align-items:center;
    background:var(--bg-body);
    border-radius:12px;
    padding:4px;
    border:1px solid var(--border-color);
}

.op-qty-btn{
    width:32px;
    height:32px;
    border:1px solid var(--border-color);
    background:var(--bg-surface);
    color:var(--text-main);
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    transition:.2s;
}

.op-qty-btn:hover{
    background:var(--brand-primary);
    color:#fff;
    border-color:var(--brand-primary);
}

#opQtyInput{
    width:45px;
    background:transparent;
    border:0;
    text-align:center;
    font-size:15px;
    font-weight:900;
    color:var(--text-main);
}

.lt-op-divider{
    height:1px;
    background:var(--border-color);
    margin:22px 0;
}

.lt-op-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.lt-op-total span{
    font-size:13px;
    font-weight:900;
    color:var(--text-muted);
}

.lt-op-total .price{
    font-size:24px;
    font-weight:950;
    color:var(--lt-price-color);
    text-shadow: 0 0 14px var(--lt-price-glow);
}

/* Actions */
.lt-op-actions{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.lt-op-btn{
    flex:1;
    padding:15px;
    border-radius:12px;
    border:0;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    text-transform:uppercase;
    transition:all .3s ease;
    color:#fff;
}

.lt-op-btn.cart{
    background:rgba(16,185,129,.10);
    color:#10b981;
    border:1px solid rgba(16,185,129,.22);
    box-shadow:none;
}

.lt-op-btn.cart:hover{
    background:#10b981;
    color:#fff;
    transform:translateY(-3px);
}

.lt-op-btn.buy{
    background:var(--brand-gradient);
    box-shadow:0 8px 20px var(--brand-glow);
}

.lt-op-btn.buy:hover{
    filter:brightness(1.08);
    transform:translateY(-3px);
    box-shadow:0 12px 25px var(--brand-glow);
}

/* --- Badges --- */
.lt-badge{
    position:absolute;
    top:-1px;
    right:20px;
    padding:4px 12px;
    font-size:10px;
    border-radius:0 0 10px 10px;
    font-weight:900;
    color:#fff;
    display:flex;
    align-items:center;
    gap:5px;
    z-index:5;
    text-transform:uppercase;
}

.lt-badge-ok{ background:#10b981; }
.lt-badge-out{ background:#ef4444; }

.lt-badge-ok.neon-badge{ box-shadow:0 4px 12px rgba(16,185,129,.40); }
.lt-badge-out.neon-badge{ box-shadow:0 4px 12px rgba(239,68,68,.35); }
@media (max-width: 991px) {
    
.lt-game-layout {
    flex-direction: row-reverse;
    flex-wrap: wrap; /* Bunu mütləq əlavə et ki, yer çatmayanda sıxışmasınlar, alt-alta düşsünlər */
    padding-bottom: 10px !important;
    gap: 15px;
}

    /* Sol küncün tam ekranı doldurması üçün */
    .lt-game-left {
        width: 100%;
    }

    .lt-game-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        width: 100%; 
        margin-bottom: 0; 
    }

    .lt-game-card {
        padding: 12px 15px !important;
        align-items: center;
        width: 100%; 
        box-sizing: border-box;
    }

    .lt-gc-price .new { font-size: 14px; }
    .lt-gc-price .text-infov4 { font-size: 12px; }

    /* Portal fixed panel (Sağ tərəf - indi Alt panel oldu) */
    .lt-game-right {
        width: 100%;
        flex-shrink: 0;
    }

    /* Səhifənin ən altından asılı qalması üçün */
    body > .lt-game-right.is-portal-fixed,
    .lt-game-right.is-portal-fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1001;
    }

    .lt-order-panel {
        border-radius: 24px 24px 0 0;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -10px 40px rgba(0,0,0,0.30);
        position: relative;
        top: auto;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        margin-bottom: 0;
    }

    .lt-op-divider,
    .lt-op-head,
    .lt-op-label {
        display: none !important;
    }

    .lt-op-body {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 15px 20px;
        align-items: center;
    }

    .lt-op-product {
        grid-column: 1 / 2;
        background: transparent;
        border: none;
        padding: 0;
    }

    .lt-op-product img { display: none; }

    .lt-op-total {
        grid-column: 2 / 3;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    .lt-op-total .price { font-size: 20px; }

    /* Düymələr qrupu */
    .lt-op-actions {
        grid-column: 1 / 3;
        margin-top: 5px;
    }
    
    .lt-op-actions .product-action-buttons {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .lt-op-btn { 
        padding: 12px; 
        flex: 1; /* Düymələrin yan-yana bərabər açılması üçün */
    }
}


/* =========================================================
   FIX: NEO CARD LIST (product_card_view == 1)
   - 4 yan-yana (desktop), alt-alta düşməni kəsir
   - şəkil heç vaxt "dev ekran" olmur (height clamp)
   - price yaşıl, note ayrı rəng, title üst
   - dark/light uyumlu, yalnız bu blok üçün lokal rənglər
   ========================================================= */

/* YALNIZ neo-card olan listdə işləsin */
.newItem:has(.neo-card){
    /* Lokal accent-lər (yalnız bu view) */
    --neo-accent: #ec4899;

    /* Qiymət yaşıl (yumşaq) */
    --neo-price: #22c55e;
    --neo-price-glow: rgba(34, 197, 94, .26);

    /* Qeyd (note) rəngi */
    --neo-note: var(--text-muted);

    /* Aktiv/hover kontur */
    --neo-ring: rgba(236, 72, 153, .28);

    /* GRID */
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;

    /* bootstrap row/col marginlarını zərərsizləşdir */
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

/* Rəngləri dark/light-a daha “yumşaq” qarışdır (Chrome dəstək var) */
@supports (color: color-mix(in srgb, #000 50%, #fff)){
    .newItem:has(.neo-card){
        --neo-price: color-mix(in srgb, #22c55e 72%, var(--brand-primary) 28%);
        --neo-price-glow: color-mix(in srgb, rgba(34,197,94,.42) 60%, var(--brand-glow) 40%);
        --neo-note: color-mix(in srgb, var(--text-muted) 78%, var(--neo-accent) 22%);
        --neo-ring: color-mix(in srgb, var(--neo-accent) 45%, transparent 55%);
    }
}

/* Responsiv */
@media (max-width: 1200px){
    .newItem:has(.neo-card){ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 992px){
    .newItem:has(.neo-card){ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
    .newItem:has(.neo-card){ grid-template-columns: 1fr; }
}

/* newItem içində gələn wrapper-lar (card-body / col-md-3) grid item kimi davransın */
.newItem:has(.neo-card) > .card-body.p-0,
.newItem:has(.neo-card) > [class*="col-"]{
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
}

/* =========================================================
   NEO CARD düzəlişləri (şəkil "dev ekran" olmasın)
   ========================================================= */

.newItem:has(.neo-card) .neo-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.newItem:has(.neo-card) .neo-card:hover{
    transform: translateY(-4px);
    border-color: var(--neo-ring);
    box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.newItem:has(.neo-card) .neo-card.is-in-cart{
    border-color: var(--neo-ring);
    box-shadow: 0 0 0 1px var(--neo-ring), 0 12px 30px rgba(0,0,0,.10);
}

/* Şəkil wrap: hündürlüyü clamp -> heç vaxt həddindən artıq böyümür */
.newItem:has(.neo-card) .neo-card__media{
    padding: 16px 16px 0 16px;
}

.newItem:has(.neo-card) .neo-card__img-wrap{
    position: relative;
    width: 100%;
    height: clamp(210px, 16vw, 280px); /* <-- əsas fix */
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
}

/* Şəkil tam görünsün */
.newItem:has(.neo-card) .neo-card__img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

/* Title / Price / Note rəng ayrımı */
.newItem:has(.neo-card) .neo-card__content{
    padding: 14px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.newItem:has(.neo-card) .neo-card__title{
    font-weight: 900;
    font-size: 14px;
    color: var(--text-main);
    text-decoration: none;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Qiymət yaşıl */
.newItem:has(.neo-card) .neo-price__now{
    font-size: 16px;
    font-weight: 1000;
    color: var(--neo-price);
    text-shadow: 0 10px 18px var(--neo-price-glow);
}

/* Köhnə qiymət */
.newItem:has(.neo-card) .neo-price__old{
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Tag-lər */
.newItem:has(.neo-card) .neo-tag--primary{
    background: rgba(236,72,153,.10);
    border-color: rgba(236,72,153,.22);
    color: color-mix(in srgb, var(--neo-accent) 70%, var(--text-main) 30%);
}

/* Buttons */
.newItem:has(.neo-card) .neo-cart-btn.action-button{
    border-radius: 14px;
    border: 1px solid rgba(34,197,94,.25);
    background: rgba(34,197,94,.12);
    color: #22c55e;
    font-weight: 900;
    padding: 12px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    transition: .22s ease;
}

.newItem:has(.neo-card) .neo-cart-btn.action-button:hover{
    background: #22c55e;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(34,197,94,.20);
}


/* =========================================================
   NEO CARD LIST (product_card_view == 1) - FINAL PACK
   - .newItem row olmayan halda: 4 kart yan-yana (grid)
   - şəkil tam görünür (contain) + heç vaxt həddən artıq böyümür (height clamp)
   - price yaşıl, tag/nota ayrıdır (accent + muted)
   - dark/light uyumlu (mövcud theme var-ları ilə)
   ========================================================= */

/* ---------------------------------------------------------
   1) Lokal rəng/effekt dəyişənləri (yalnız neo-card üçün)
--------------------------------------------------------- */
.newItem{
    --neo-accent: #ec4899;

    --neo-price: #22c55e;
    --neo-price-glow: rgba(34, 197, 94, .28);

    --neo-note: var(--text-muted);

    --neo-ring: rgba(236, 72, 153, .30);
    --neo-soft-shadow: 0 18px 45px rgba(0,0,0,.10);
}

/* color-mix varsa: dark/light-a görə daha yumşaq, daha “theme” olur */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .newItem{
        --neo-price: color-mix(in srgb, #22c55e 72%, var(--brand-primary) 28%);
        --neo-price-glow: color-mix(in srgb, rgba(34,197,94,.45) 60%, var(--brand-glow) 40%);
        --neo-note: color-mix(in srgb, var(--text-muted) 78%, var(--neo-accent) 22%);
        --neo-ring: color-mix(in srgb, var(--neo-accent) 45%, transparent 55%);
    }
}

/* ---------------------------------------------------------
   2) Layout FIX: .newItem row DEYİLSƏ -> GRID (4 yan-yana)
   Səndə liste_gorunum==1/2 olanda row olmur, card-body p-0 gəlir
--------------------------------------------------------- */
.newItem:not(.row){
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* grid item kimi gələn wrapper-lar */
.newItem:not(.row) > .card-body.p-0{
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

/* Bootstrap row olanda da aralıq yumşaq olsun (digər view-ları pozmur) */
.newItem.row{
    row-gap: 18px;
}

/* Responsiv */
@media (max-width: 1200px){
    .newItem:not(.row){ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 992px){
    .newItem:not(.row){ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
    .newItem:not(.row){ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   3) NEO CARD – kartın özü
--------------------------------------------------------- */
.neo-card{
    height: 100%;
    display: flex;
    flex-direction: column;

    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    overflow: hidden;

    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.neo-card:hover{
    transform: translateY(-4px);
    border-color: var(--neo-ring);
    box-shadow: var(--neo-soft-shadow);
}

/* Səbətdədirsə highlight */
.neo-card.is-in-cart{
    border-color: var(--neo-ring);
    box-shadow: 0 0 0 1px var(--neo-ring), 0 12px 30px rgba(0,0,0,.10);
}

/* ---------------------------------------------------------
   4) Şəkil sahəsi (ƏSAS FIX):
   - object-fit: contain (tam görünsün)
   - height clamp (heç vaxt böyüyüb ekranı yeməsin)
--------------------------------------------------------- */
.neo-card__media{
    padding: 16px 16px 0 16px;
}

.neo-card__img-wrap{
    position: relative;
    width: 100%;

    /* aspect-ratio yerinə clamp: böyük ekranda “dev ekran” problemini kəsir */
    height: clamp(210px, 16vw, 285px);

    border-radius: 18px;
    overflow: hidden;

    background: var(--bg-body);
    border: 1px solid var(--border-color);

    display: flex;
    align-items: center;
    justify-content: center;
}

.neo-card__img{
    width: 100%;
    height: 100%;
    object-fit: contain;     /* TAM GÖRÜNSÜN */
    padding: 10px;           /* kənarlara yapışmasın */
    background: transparent;
}

/* overlay (göz iconu) */
.neo-card__overlay{
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;

    opacity: 0;
    transition: .2s ease;

    background: rgba(0,0,0,.35);
    color: #fff;
    text-decoration:none;
}
.neo-card:hover .neo-card__overlay{ opacity: 1; }

/* ---------------------------------------------------------
   5) Badge-lər
--------------------------------------------------------- */
.neo-badge{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 900;
    border-radius: 999px;
    display:flex;
    align-items:center;
    gap: 6px;
    color: #fff;
    z-index: 3;
}

.neo-badge--ok{
    background: rgba(34,197,94,.95);
    box-shadow: 0 10px 20px rgba(34,197,94,.22);
}
.neo-badge--no{
    background: rgba(239,68,68,.95);
    box-shadow: 0 10px 20px rgba(239,68,68,.20);
}

/* Puan badge (accent) */
.neo-points{
    position:absolute;
    top: 10px;
    right: 10px;
    z-index: 3;

    background: rgba(236,72,153,.16);
    border: 1px solid rgba(236,72,153,.28);

    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    display:flex;
    align-items:center;
    gap: 6px;

    backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   6) Content: Title -> Tags -> Price -> Controls
--------------------------------------------------------- */
.neo-card__content{
    padding: 14px 16px 16px 16px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.neo-card__title{
    font-weight: 900;
    font-size: 14px;
    color: var(--text-main);
    text-decoration: none;
    line-height: 1.25;

    display:block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tags (qeyd/nota kimi) */
.neo-tags{ display:flex; gap: 8px; flex-wrap: wrap; }

.neo-tag{
    font-size: 11px;
    font-weight: 850;
    padding: 6px 10px;
    border-radius: 999px;

    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--neo-note);

    display:flex;
    align-items:center;
    gap: 6px;
}

.neo-tag--primary{
    background: rgba(236,72,153,.10);
    border-color: rgba(236,72,153,.22);
    color: var(--neo-accent);
}

/* Qiymət – YAŞIL */
.neo-price{
    display:flex;
    align-items: baseline;
    gap: 10px;
}

.neo-price__old{
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    text-decoration: line-through;
}

.neo-price__now{
    font-size: 16px;
    font-weight: 1000;
    color: var(--neo-price);
    text-shadow: 0 10px 18px var(--neo-price-glow);
}

/* ---------------------------------------------------------
   7) Controls – qty + button
--------------------------------------------------------- */
.neo-controls{
    margin-top: auto;
    display:flex;
    gap: 10px;
    align-items: center;
}

/* qty calc */
.gamex-quantity-calc{
    display:flex;
    align-items:center;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
}

.gamex-qty-btn{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    font-weight: 900;
    transition: .18s ease;
}

.gamex-qty-btn:hover{
    border-color: var(--neo-accent);
    color: #fff;
    background: var(--neo-accent);
}

.gamex-input-quantity{
    width: 46px;
    text-align: center;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-weight: 900;
}

/* add to cart button */
.neo-cart-btn.action-button{
    flex: 1;
    border-radius: 14px;

    border: 1px solid rgba(34,197,94,.25);
    background: rgba(34,197,94,.12);
    color: #22c55e;

    font-weight: 900;
    padding: 12px 12px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;

    transition: .22s ease;
}

.neo-cart-btn.action-button:hover{
    background: #22c55e;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(34,197,94,.20);
}


.neo-cart-btn.is-disabled,
.action-button.is-disabled{
    opacity: .6;
    cursor: not-allowed;
    filter: grayscale(1);
}




.pl-list{
    --pl-accent: #22d3ee;                 /* cyan accent */
    --pl-accent-2: #60a5fa;               /* soft blue */
    --pl-price: #34d399;                  /* yumşaq yaşıl qiymət */
    --pl-danger: #fb7185;                 /* stock yox */
    --pl-ok: #22c55e;                     /* stock var */

    --pl-ring: rgba(34, 211, 238, .25);
    --pl-shadow: 0 18px 55px rgba(0,0,0,.10);
    --pl-soft: rgba(255,255,255,.06);     /* fallback glass */

    display:flex;
    flex-direction:column;
    gap:14px;
}

/* color-mix varsa daha yaxşı yumşaldır */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .pl-list{
        --pl-ring: color-mix(in srgb, var(--pl-accent) 48%, transparent 52%);
        --pl-soft: color-mix(in srgb, var(--bg-surface) 70%, transparent 30%);
    }
}

/* ROW container */
.pl-row{
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;     /* FIX: şəkil sol tərəfi tam tutmasın */
    gap: 14px;
    align-items: start;                  /* FIX: thumb stretch olmasın */

    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    overflow: hidden;

    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* sol accent xətt */
.pl-row::before{
    content:"";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, var(--pl-accent), var(--pl-accent-2));
    opacity: .85;
}

/* glass overlay */
.pl-row::after{
    content:"";
    position:absolute;
    inset: 0;
    background: radial-gradient(1200px 260px at 10% 0%,
        rgba(34,211,238,.10),
        transparent 55%);
    pointer-events:none;
}

@supports (backdrop-filter: blur(10px)) {
    .pl-row{
        background: var(--pl-soft);
        backdrop-filter: blur(10px);
    }
}

.pl-row:hover{
    transform: translateY(-3px);
    border-color: var(--pl-ring);
    box-shadow: var(--pl-shadow);
}

/* ---------------------------------------------------------
   THUMB (PC: daha yığcam, hündürlük sabit)
--------------------------------------------------------- */
.pl-thumb{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    display: block;

    height: 112px;           /* FIX: böyük ekran kimi şişməsin */
    min-height: 112px;
    align-self: start;       /* stretch olmasın */
}

.pl-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
}

/* ---------------------------------------------------------
   MAIN AREA
--------------------------------------------------------- */
.pl-main{
    display:flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Head: title + badge (PC-də badge absolute olacaq) */
.pl-head{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start; /* FIX: badge flow-dan çıxacaq */
    gap: 10px;
}

/* Title (PC: 2 sətir, ellipsis yox, daha balaca) */
.pl-title{
    margin:0;
    font-size: 13.5px;      /* FIX: balacalaşdır */
    font-weight: 950;
    color: var(--text-main);
    line-height: 1.25;

    white-space: normal;    /* FIX: 1 sətir yox */
    overflow: hidden;
    max-width: 100%;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 2 sətir göstər */
}

/* stock badge base */
.pl-badge{
    flex-shrink: 0;
    display:inline-flex;
    align-items:center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-muted);
}

/* rənglər */
.pl-badge.is-success{
    border-color: rgba(34,197,94,.25);
    background: rgba(34,197,94,.10);
    color: var(--pl-ok);
}
.pl-badge.is-danger{
    border-color: rgba(251,113,133,.25);
    background: rgba(251,113,133,.10);
    color: var(--pl-danger);
}

/* PC-də badge: məhsulun SOL ÜSTÜNDƏ (şəkilin üstündə) */
@media (min-width: 769px){
    .pl-badge{
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 5;
        backdrop-filter: blur(10px);
    }
}

/* spesific_value / note line (PC: 2 sətir, balaca) */
.pl-sub{
    margin:0;
    font-size: 12px;        /* FIX */
    font-weight: 800;
    color: var(--text-muted);
    opacity: .95;

    white-space: normal;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* meta: points + price */
.pl-meta{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* points badge */
.gamex-point-content{
    display:inline-flex;
    align-items:center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;

    background: rgba(34,211,238,.10);
    border: 1px solid rgba(34,211,238,.22);
    color: var(--pl-accent);
}

/* price block */
.pl-price{
    display:flex;
    align-items: baseline;
    gap: 10px;
}

.products-price-old{
    font-size: 12px;
    font-weight: 850;
    color: var(--text-muted);
    text-decoration: line-through;
}

.products-price-current{
    font-size: 17px;
    font-weight: 1000;
    color: var(--pl-price);
    text-shadow: 0 12px 20px rgba(52,211,153,.22);
}

/* ---------------------------------------------------------
   ACTIONS (PC FIX): qty yuxarı, düymələr aşağıda YAN-YANA
--------------------------------------------------------- */
.pl-actions{
    margin-top: 4px;
    display: grid;                 /* FIX: flex-wrap yox */
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

/* qty */
.pl-qty{
    display:flex;
    align-items:center;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 4px;
    width: fit-content;
}

.pl-qty .pl-qty-btn{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    font-weight: 950;
    transition: .18s ease;
}

.pl-qty .pl-qty-btn:hover{
    background: var(--pl-accent);
    border-color: var(--pl-accent);
    color:#fff;
}

.pl-qty-input{
    width: 52px;
    text-align:center;
    border:0;
    outline:none;
    background: transparent;
    color: var(--text-main);
    font-weight: 950;
}


.pl-buttons{
    display: grid;                         
    /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
    gap: 10px;
    width: 100%;
}


.pl-btn{
                        
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-main);
    border-radius: 14px;
    padding: 11px 12px;                     
    font-size: 11.5px;                       
    font-weight: 950;
    display:inline-flex;
    align-items:center;
    justify-content: center;
    gap: 8px;
    cursor:pointer;
    transition: .22s ease;
    white-space: nowrap;
}


.pl-btn--disabled{
    grid-column: 1 / -1;
    opacity: .6;
    cursor: not-allowed;
    filter: grayscale(1);
}


.pl-btn--cart{
    border-color: rgba(34,211,238,.22);
    background: rgba(34,211,238,.10);
    color: var(--pl-accent);
}

.pl-btn--cart:hover{
    background: var(--pl-accent);
    border-color: var(--pl-accent);
    color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(34,211,238,.18);
}


.pl-btn--buy{
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--pl-accent), var(--brand-primary));
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.pl-btn--buy:hover{
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(0,0,0,.16);
}


@media (max-width: 992px){
    .pl-row{ grid-template-columns: 116px 1fr; }
    .products-price-current{ font-size: 16px; }
}


@media (max-width: 768px){
    .pl-row{
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    .pl-row::before{
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 4px;
        border-radius: 0 0 10px 10px;
        background: linear-gradient(90deg, var(--pl-accent), var(--pl-accent-2));
    }

    .pl-thumb{
        height: auto;
        min-height: 170px;
        border-radius: 18px;
    }

   
    .pl-badge{
        position: static;
        backdrop-filter: none;
    }

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

    .pl-title{
        white-space: normal;
        max-height: 2.6em;
        overflow: hidden;
        -webkit-line-clamp: 2;
    }

    .pl-actions{
        display:flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .pl-buttons{
        width: 100%;
        grid-template-columns: 1fr; 
    }

    .pl-btn{
       
        justify-content: center;
        padding: 12px 14px;
        font-size: 12px;
    }

    .pl-qty{
        width: 100%;
        justify-content: center;
    }
}





/* ---------- Body lock (JS ilə qb-lock toggle edirsən) ---------- */
html.qb-lock,
body.qb-lock{
  overflow:hidden !important;
}

/* ---------- Modal Shell ---------- */
#quickBuyModal.qb-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:2147483647; /* həmişə ən üstdə */
}

#quickBuyModal.qb-modal.qb-show{
  display:flex;
}

#quickBuyModal .qb-backdrop{
  position:absolute;
  inset:0;
  background:var(--qb-backdrop);
  /* blur YOXDUR -> performance */
}

/* ---------- Panel ---------- */
#quickBuyModal .qb-panel{
  position:relative;
  width:min(920px, calc(100vw - 28px));
  max-height:min(92vh, 820px);
  border-radius:var(--qb-radius-xl);
  background:var(--qb-panel);
  color:var(--qb-text);
  border:1px solid var(--qb-border);
  box-shadow:var(--qb-shadow);

  display:flex;
  flex-direction:column;
  overflow:hidden;

  /* yüngül açılış animasiyası */
  transform:translateY(10px);
  opacity:0;
  animation:qbIn .16s ease-out forwards;
}

@keyframes qbIn{
  to{ transform:translateY(0); opacity:1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #quickBuyModal .qb-panel{ animation:none; transform:none; opacity:1; }
}

/* ---------- Header ---------- */
#quickBuyModal .qb-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--qb-border);
  background:linear-gradient(180deg, var(--qb-surface-2), transparent);
}

#quickBuyModal .qb-title{
  font-weight:800;
  font-size:16px;
  letter-spacing:.2px;
}

#quickBuyModal .qb-close{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--qb-border);
  background:var(--qb-surface);
  color:var(--qb-muted);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}

#quickBuyModal .qb-close:hover{
  background:var(--qb-surface-2);
  border-color:var(--qb-border-2);
  color:var(--qb-text);
}

/* ---------- Body Layout ---------- */
#quickBuyModal .qb-body{
  flex:1;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px;
  display:grid;
  gap:14px;
}

/* Desktop split */
@media (min-width: 900px){
  #quickBuyModal .qb-body{
    grid-template-columns: 360px 1fr;
    gap:16px;
    padding:18px;
  }
}

/* ---------- Cards ---------- */
#quickBuyModal .qb-card{
  background:transparent;
  border:none;
  padding:0;
}

#quickBuyModal .qb-summary{
  background:var(--qb-surface);
  border:1px solid var(--qb-border);
  border-radius:var(--qb-radius-lg);
  padding:14px;
}

#quickBuyModal .qb-prod{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

#quickBuyModal .qb-prod img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:12px;
  flex:0 0 auto;
  background:var(--qb-surface-2);
  border:1px solid var(--qb-border);
}

@media (min-width: 900px){
  #quickBuyModal .qb-prod img{ width:74px; height:74px; }
}

#quickBuyModal .qb-prod-title{
  margin:0;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
}

#quickBuyModal .qb-meta{
  margin-top:6px;
  color:var(--qb-muted);
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

#quickBuyModal .qb-meta div{
  display:flex;
  align-items:center;
  gap:6px;
}

#quickBuyModal .qb-separator{
  border:0;
  border-top:1px solid var(--qb-border);
  margin:12px 0;
}

#quickBuyModal .qb-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-weight:800;
}

#quickBuyModal .qb-total span:first-child{
  color:var(--qb-muted);
  font-size:13px;
  font-weight:700;
}

#quickBuyModal .qb-total span:last-child{
  font-size:18px;
  letter-spacing:.2px;
  color:var(--qb-accent);
}

/* ---------- Section titles / Labels ---------- */
#quickBuyModal .qb-section-title{
  font-weight:900;
  font-size:14px;
  margin:2px 0 10px;
}

#quickBuyModal .qb-form .qb-label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--qb-muted);
  margin:10px 0 6px;
}

/* ---------- Inputs ---------- */
#quickBuyModal .qb-input-wrap{
  position:relative;
}

#quickBuyModal .qb-input-wrap svg{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--qb-muted);
  pointer-events:none;
}

#quickBuyModal .qb-input{
  width:100%;
  max-width: 275px;
  height:42px;
  border-radius:var(--qb-radius-md);
  background:var(--qb-input);
  border:1px solid var(--qb-input-br);
  color:var(--qb-text);
  padding:10px 12px 10px 40px;
  font-size:14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#quickBuyModal .qb-input:focus{
  border-color:var(--qb-accent);
  box-shadow:0 0 0 3px var(--qb-focus-ring);
}

/* Quantity input special */
#quickBuyModal #qbQtyInput{
  padding:10px 12px;
  text-align:center;
}

/* ---------- Quantity row ---------- */
#quickBuyModal .qb-qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

#quickBuyModal .qb-qty .qb-step{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--qb-border);
  background:var(--qb-surface);
  color:var(--qb-text);
  font-weight:900;
  font-size:18px;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
  flex:0 0 auto;
}

#quickBuyModal .qb-qty .qb-step:hover{
  background:var(--qb-surface-2);
  border-color:var(--qb-border-2);
}

#quickBuyModal .qb-qty .qb-max{
  margin-left:auto;
  color:var(--qb-muted);
  font-weight:700;
  font-size:12.5px;
}

/* ---------- Balance box ---------- */
#quickBuyModal .qb-balance{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:var(--qb-radius-lg);
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.08);
}

#quickBuyModal .qb-balance-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(34,197,94,.22);
  border:1px solid rgba(34,197,94,.35);
  display:grid;
  place-items:center;
  color:var(--qb-success);
  flex:0 0 auto;
}

#quickBuyModal .qb-balance-title{
  font-weight:900;
  font-size:13px;
}

#quickBuyModal #qbBalanceText{
  margin-top:2px;
  font-size:12.5px;
  color:var(--qb-muted);
  font-weight:700;
}

/* ---------- CTA button ---------- */
#quickBuyModal .qb-badge{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(34,211,238,.25);

  /* yüngül gradient (anim yox) */
  background:linear-gradient(90deg, var(--qb-accent), var(--qb-accent-2));
  color:#fff;
  font-weight:900;
  font-size:14.5px;
  text-decoration:none;
  cursor:pointer;

  margin-top:12px;
  transition:opacity .15s ease, transform .15s ease;
}

#quickBuyModal .qb-badge:hover{
  opacity:.95;
  transform:translateY(-1px);
}

#quickBuyModal .qb-badge[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* Mobile: sticky CTA */
@media (max-width: 767px){
  #quickBuyModal .qb-badge{
    position:sticky;
    bottom:0;
    z-index:2;
    margin-top:10px;
  }
}

/* ---------- Error box ---------- */
#quickBuyModal .qb-err{
  margin-top:10px;
  border-radius:14px;
  padding:10px 12px;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.25);
  color:var(--qb-danger);
  font-weight:800;
  font-size:13px;
}

/* =========================================================
   QB Toast (lightweight, no blur)
   ========================================================= */
.qb-toast-notification{
  position:fixed;
  top:14px;
  right:14px;
  z-index:2147483647;
  width:min(380px, calc(100vw - 28px));

  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);

  color:#fff;
  font-weight:800;
  line-height:1.35;

  box-shadow:0 14px 36px rgba(0,0,0,.35);

  opacity:0;
  transform:translateY(-10px);
  animation:qbToastIn .18s ease-out forwards;
}

@keyframes qbToastIn{
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .qb-toast-notification{ animation:none; opacity:1; transform:none; }
}

.qb-toast-notification .toast-message{
  margin:0;
  padding:0;
  font-size:13.5px;
  flex:1;
}

.qb-toast-notification .toast-close{
  width:32px;
  height:32px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.qb-ok-note{
  background:rgba(34,197,94,.92);
  border-color:rgba(34,197,94,.35);
}

.qb-err-note{
  background:rgba(239,68,68,.92);
  border-color:rgba(239,68,68,.35);
}

.rv-wrap,
.rv-wrap *{ box-sizing:border-box; }

.rv-wrap{
    margin-top: 26px;
}

.rv-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px;
    border-radius: var(--rv-radius);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) , var(--rv-card-bg);
    border: 1px solid var(--rv-border);
    backdrop-filter: blur(10px);
    box-shadow: var(--rv-shadow);
}

.rv-head__l{
    display:flex;
    align-items:center;
    gap:12px;
    min-width: 0;
}

.rv-icon-box{
    width:40px;
    height:40px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background: radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), var(--rv-accent);
    box-shadow: 0 12px 28px rgba(249,115,22,.28);
    flex: 0 0 auto;
}

.rv-head__l h5{
    margin:0;
    font-weight: 600;
    font-size: 15px;
    color: var(--rv-text);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rv-head__r{
    display:flex;
    align-items:center;
    gap:12px;
    flex: 0 0 auto;
}

.rv-rating-avg{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--rv-border);
    background: rgba(255,255,255,.06);
    color: var(--rv-text);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.rv-count{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--rv-border);
    background: rgba(255,255,255,.03);
    color: var(--rv-muted);
    font-weight: 700;
}

.rv-alert{
    padding: 14px 16px;
    border-radius: var(--rv-radius-sm);
    border: 1px solid var(--rv-border);
    background: var(--rv-card-bg);
    color: var(--rv-text);
    box-shadow: var(--rv-shadow-2);
    margin: 16px 0;
}

.rv-alert--info{ border-color: rgba(59,130,246,.35); }
.rv-alert--warn{ border-color: rgba(245,158,11,.35); }
.rv-alert--danger{ border-color: rgba(239,68,68,.35); }
.rv-alert--success{ border-color: rgba(34,197,94,.35); }

.rv-list{ margin:0; padding-left: 18px; }
.rv-list li{ color: var(--rv-text); }

.rv-empty{
    padding: 22px;
    border-radius: var(--rv-radius);
    border: 1px dashed var(--rv-border);
    background: rgba(255,255,255,.04);
    color: var(--rv-muted);
    text-align:center;
    margin: 16px 0 22px;
}

.rv-empty__icon{
    width:54px;height:54px;
    margin: 0 auto 10px;
    border-radius: 18px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    background: radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 45%), var(--rv-accent);
    box-shadow: 0 14px 30px rgba(249,115,22,.22);
}

.rv-empty__title{
    margin: 0 0 6px 0;
    color: var(--rv-text);
    font-weight: 600;
}

.rv-empty__desc{
    margin:0;
    color: var(--rv-muted);
    font-weight: 700;
}

.rv-form{
    display:flex;
    gap: 16px;
    padding: 18px;
    border-radius: var(--rv-radius);
    border: 1px solid var(--rv-border);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) , var(--rv-card-bg);
    box-shadow: var(--rv-shadow);
    backdrop-filter: blur(10px);
    margin: 18px 0 24px;
}

.rv-form__thumb{
    width: 58px;
    height: 58px;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid var(--rv-border);
    flex: 0 0 auto;
    position: relative;
}

.rv-form__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.01);
}

.rv-form__body{
    flex: 1 1 auto;
    min-width: 0;
}

.rv-field-row{
    display:flex;
    gap: 14px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.rv-field{ min-width: 0; }
.rv-field--select{ flex: 1 1 auto; }
.rv-field--stars{ flex: 0 0 auto; }

.rv-field label{
    display:block;
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--rv-muted);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.rv-select,
.rv-textarea{
    width:100%;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid var(--rv-input-border);
    background: var(--rv-input-bg);
    color: var(--rv-text);
    font-weight: 500;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.rv-select{
    appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--rv-muted) 50%),
        linear-gradient(135deg, var(--rv-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat:no-repeat;
    padding-right: 36px;
}

.rv-textarea{
    min-height: 110px;
    resize: vertical;
}

.rv-select:focus,
.rv-textarea:focus{
    border-color: rgba(249,115,22,.65);
    box-shadow: 0 0 0 4px rgba(249,115,22,.12);
    background: rgba(255,255,255,.06);
}

.rv-stars{
    display:flex;
    flex-direction: row-reverse;
    justify-content:flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--rv-input-border);
    background: rgba(255,255,255,.03);
}

.rv-stars input{ display:none; }
.rv-stars label{
    cursor:pointer;
    font-size: 20px;
    color: rgba(250,204,21,.22);
    transition: transform .15s ease, color .15s ease, filter .15s ease;
}

.rv-stars input:checked ~ label,
.rv-stars label:hover,
.rv-stars label:hover ~ label{
    color: #facc15;
    transform: translateY(-1px) scale(1.12);
    filter: drop-shadow(0 6px 10px rgba(250,204,21,.18));
}

.rv-form__footer{
    display:flex;
    justify-content:flex-end;
    margin-top: 10px;
}

.rv-btn{
    border: 0;
    outline: none;
    cursor:pointer;
    border-radius: 16px;
    padding: 12px 16px;
    font-weight: 600;
    display:inline-flex;
    align-items:center;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.rv-btn--send{
    color:#fff;
    background:
        radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 45%),
        linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,0)),
        var(--rv-accent);
    box-shadow: 0 16px 34px rgba(249,115,22,.26);
}

.rv-btn--send:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(249,115,22,.32);
    filter: brightness(1.02);
}

.rv-listing{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.rv-card{
    position: relative;
    border-radius: var(--rv-radius);
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)) , var(--rv-card-bg);
    border: 1px solid var(--rv-border);
    backdrop-filter: blur(10px);
    box-shadow: var(--rv-shadow-2);
    overflow:hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.rv-card:before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    pointer-events:none;
    opacity: 0;
    background: radial-gradient(120% 120% at 30% 10%, rgba(249,115,22,.24), rgba(249,115,22,0) 55%);
    transition: opacity .22s ease;
}

.rv-card:hover{
    transform: translateY(-6px);
    border-color: rgba(249,115,22,.45);
    box-shadow: var(--rv-shadow);
}

.rv-card:hover:before{ opacity: 1; }

.rv-card__top{
    display:flex;
    align-items:center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rv-border);
}

.rv-card__thumb{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    overflow:hidden;
    position: relative;
    flex: 0 0 auto;
    border: 1px solid var(--rv-border);
    background: rgba(255,255,255,.04);
}

.rv-card__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition: transform .22s ease, filter .22s ease;
}

.rv-card__overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    opacity:0;
    transition: opacity .2s ease;
    background: rgba(2,6,23,.56);
}

.rv-card:hover .rv-card__overlay{ opacity:1; }
.rv-card:hover .rv-card__thumb img{ transform: scale(1.08); filter: saturate(1.06); }

.rv-card__titles{
    min-width:0;
    flex: 1 1 auto;
}

.rv-card__titles h5{
    margin:0 0 4px 0;
    font-size: 14px;
    font-weight: 950;
    color: var(--rv-text);
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

.rv-card__titles h5 a{ color: inherit; text-decoration:none; }
.rv-card__titles h6{
    margin:0;
    font-size: 12px;
    color: var(--rv-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

.rv-card__content{
    color: var(--rv-text);
    font-weight: 700;
    line-height: 1.6;
    font-size: 14px;
    margin-bottom: 14px;
}

.rv-card__meta{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--rv-border);
}

.rv-meta-left{
    display:flex;
    flex-direction:column;
    gap: 6px;
    min-width: 0;
}

.rv-meta-left span{
    display:flex;
    align-items:center;
    gap: 8px;
    color: var(--rv-muted);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

.rv-card__rating{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--rv-border);
    background: rgba(255,255,255,.04);
    flex: 0 0 auto;
}

.rv-card__rating strong{
    color: var(--rv-text);
    font-weight: 950;
    font-size: 13px;
}

.rv-stars-read{
    display:flex;
    gap: 2px;
    color: #facc15;
    font-size: 12px;
}

.rv-answers-list{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--rv-border);
}

.rv-answer-item{
    display:flex;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    margin-top: 10px;
}

html.dark .rv-answer-item,
body.dark .rv-answer-item,
body.dark.modern .rv-answer-item{
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
}

.rv-answer-icon{
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background: radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.25), rgba(255,255,255,0) 45%), rgba(34,197,94,.95);
    box-shadow: 0 14px 28px rgba(34,197,94,.18);
    flex: 0 0 auto;
}

.rv-answer-body{ min-width:0; flex: 1 1 auto; }

.rv-answer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rv-answer-head strong{
    color: var(--rv-text);
    font-weight: 950;
    font-size: 13px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

.rv-answer-head span{
    color: var(--rv-muted);
    font-weight: 600;
    font-size: 12px;
    flex: 0 0 auto;
}

.rv-answer-text{
    color: var(--rv-text);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.55;
}


@media (max-width: 900px){
    .rv-head{ flex-direction: column; align-items: flex-start; }
    .rv-head__r{ width:100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 768px){
    .rv-listing{ grid-template-columns: 1fr; }
    .rv-form{ flex-direction: column; }
    .rv-form__thumb{ display:none; }
    .rv-field-row{ flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce){
    .rv-card,
    .rv-card * ,
    .rv-btn,
    .rv-select,
    .rv-textarea,
  .page-item .page-link{
        transition: none !important;
    }
    .rv-card:hover,
    .rv-btn--send:hover,
   .page-item .page-link:hover{
        transform: none !important;
    }
}




html.dark .rv-select option,
body.dark .rv-select option,
body.dark.modern .rv-select option{
  background-color: #1f2533 !important;
  color: #e9eef7 !important;
}


/* --- 1. Tab Düymələrinin (Naviqasiyanın) Dizaynı --- */
.gmx-tabs-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto; /* Mobildə sağa-sola sürüşdürülə bilsin */
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--gmx-tab-border);
}

.gmx-tab-link {
    background: transparent;
    border: none;
    padding: 12px 20px;
    color: var(--gmx-tab-text-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
}

.gmx-tab-link:hover {
    color: var(--gmx-tab-text-main);
    background: var(--gmx-tab-card-bg);
    border-radius: 8px 8px 0 0;
}


.gmx-tab-link.active {
    color: var(--gmx-tab-accent);
    border-bottom-color: var(--gmx-tab-accent);
    background: var(--gmx-tab-card-bg);
    border-radius: 8px 8px 0 0;
}


#menu1, #menu2 {
    background: var(--gmx-tab-bg);
    border: 1px solid var(--gmx-tab-border);
    border-radius: 20px;
    padding: 30px;
    color: var(--gmx-tab-text-main);
    font-size: 15px;
    line-height: 1.8; 
}


#menu1 p, #menu2 p {
    margin-bottom: 15px;
    color: var(--gmx-tab-text-muted);
}

#menu1 p:last-child, #menu2 p:last-child {
    margin-bottom: 0;
}


#menu1 strong, #menu1 b,
#menu2 strong, #menu2 b {
    color: var(--gmx-tab-text-main);
    font-weight: 800;
}


#menu1 h1, #menu1 h2, #menu1 h3, #menu1 h4, #menu1 h5, #menu1 h6,
#menu2 h1, #menu2 h2, #menu2 h3, #menu2 h4, #menu2 h5, #menu2 h6 {
    color: var(--gmx-tab-text-main);
    font-weight: 800;
    margin-top: 24px;
    margin-bottom: 12px;
    line-height: 1.4;
}


#menu1 > *:first-child, #menu2 > *:first-child {
    margin-top: 0 !important;
}


#menu1 ul, #menu1 ol,
#menu2 ul, #menu2 ol {
    margin-bottom: 20px;
    padding-left: 20px;
    color: var(--gmx-tab-text-muted);
}

#menu1 li, #menu2 li {
    margin-bottom: 10px;
}


#menu1 li::marker, #menu2 li::marker {
    color: var(--gmx-tab-accent);
    font-weight: 800;
}


#menu1 a, #menu2 a {
    color: var(--gmx-tab-accent);
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s ease;
}

#menu1 a:hover, #menu2 a:hover {
    text-decoration: underline;
    filter: brightness(1.2);
}


@media (max-width: 768px) {
    #menu1, #menu2 {
        padding: 20px;
        font-size: 14px;
        border-radius: 16px;
    }
}





/* Wrapper və ümumi .pagination klası */
.rv-pagination, 
.rv-pagination nav {
  display: flex;
  justify-content: center;
  width: 100%;
}

.rv-pagination nav .pagination,
ul.pagination {
  display: flex;
  flex-wrap: wrap; /* ƏSAS HƏLL BUDUR: Sığmayanda alt sətrə atır */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 18px auto;
  list-style: none;
  border-radius: 24px;
  background: var(--rvp-bg2);
  border: 1px solid var(--rvp-border);
  box-shadow: var(--rvp-shadow);
  backdrop-filter: blur(10px);
  width: fit-content;
  max-width: 100%; /* Ekrandan kənara çıxmağı qəti qadağan edir */
}

/* Items */
.rv-pagination nav .page-item,
ul.pagination .page-item {
  margin: 0;
}

/* Links */
.rv-pagination nav .page-link,
ul.pagination .page-link {
  border: 1px solid var(--rvp-border);
  background: var(--rvp-bg);
  color: var(--rvp-text);
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.rv-pagination nav .page-link:hover,
ul.pagination .page-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rvp-accent) 55%, var(--rvp-border));
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

/* Active */
.rv-pagination nav .page-item.active .page-link,
ul.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--rvp-accent), color-mix(in srgb, var(--rvp-accent) 65%, #6d28d9));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--rvp-accent) 35%, rgba(0,0,0,.35));
}

/* Disabled (prev/next) */
.rv-pagination nav .page-item.disabled .page-link,
ul.pagination .page-item.disabled .page-link {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dots (...) */
.rv-pagination nav .page-item .page-link[aria-label="..."],
.rv-pagination nav .page-item.disabled span.page-link,
ul.pagination .page-item .page-link[aria-label="..."],
ul.pagination .page-item.disabled span.page-link {
  color: var(--rvp-muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Focus (keyboard accessibility) */
.rv-pagination nav .page-link:focus,
ul.pagination .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rvp-accent) 30%, transparent), var(--rvp-shadow);
  border-color: color-mix(in srgb, var(--rvp-accent) 55%, var(--rvp-border));
}

/* =========================================
   MOBİL ÜÇÜN XÜSUSİ TƏNZİMLƏMƏLƏR
========================================= */
@media (max-width: 768px) {
  .rv-pagination nav .pagination,
  ul.pagination {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
  }
  .rv-pagination nav .page-link,
  ul.pagination .page-link {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* Çox kiçik ekranlar üçün (iPhone SE və s.) */
@media (max-width: 420px) {
  .rv-pagination nav .pagination,
  ul.pagination {
    gap: 6px;
    padding: 10px;
  }
  .rv-pagination nav .page-link,
  ul.pagination .page-link {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }
}
/* =========================================================
   VIDEO PRESENTATION (YouTube) - GMX DARK/LIGHT + RESPONSIVE
   Structure stays the same
   ========================================================= */


/* Container */
.video-presentation-container{
  margin-top: 26px;
  padding: 18px;
  border-radius: 18px;
  background: var(--vpr-card-bg2);
  border: 1px solid var(--vpr-border);
  box-shadow: var(--vpr-shadow);
  backdrop-filter: blur(10px);
}

/* Title */
.video-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 0 0 14px 0;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  color: var(--vpr-text);
}

.video-title i{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--vpr-accent) 18%, transparent);
  color: var(--vpr-accent);
}

/* Placeholder (thumb) */
.video-placeholder{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--vpr-card-bg);
  border: 1px solid var(--vpr-border);
  box-shadow: var(--vpr-soft);
  isolation: isolate;
  transform: translateZ(0);
}

/* 16:9 responsive ratio */
.video-placeholder::before{
  content:"";
  display:block;
  padding-top: 56.25%;
}

.video-thumbnail{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .25s ease, filter .25s ease;
}

/* Subtle gradient overlay */
.video-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,.08), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.60));
  opacity: .9;
  transition: opacity .25s ease;
  z-index: 1;
}

/* Play button */
.play-button-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 78px;
  height: 78px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--vpr-accent) 85%, rgba(0,0,0,.2));
  color:#fff;
  z-index: 2;
  box-shadow: 0 22px 60px color-mix(in srgb, var(--vpr-accent) 28%, rgba(0,0,0,.55));
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.play-button-overlay i{
  font-size: 22px;
  transform: translateX(2px);
}

.video-placeholder:hover .video-thumbnail{
  transform: scale(1.08);
  filter: saturate(1.1) contrast(1.05);
}

.video-placeholder:hover::after{
  opacity: .78;
}

.video-placeholder:hover .play-button-overlay{
  transform: translate(-50%,-50%) scale(1.06);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--vpr-accent) 38%, rgba(0,0,0,.6));
}

/* Small "hint" ring animation */
.video-placeholder:hover .play-button-overlay{
  filter: brightness(1.05);
}
.video-placeholder:hover .play-button-overlay::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--vpr-accent) 35%, transparent);
  animation: vprPulse 1.2s ease-out infinite;
}

@keyframes vprPulse{
  0%{opacity:.0; transform: scale(.95);}
  25%{opacity:.55;}
  100%{opacity:0; transform: scale(1.12);}
}

/* Lightbox overlay */
.video-lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

html.dark .video-lightbox-overlay,
body.dark .video-lightbox-overlay,
body.dark.modern .video-lightbox-overlay{
  background: rgba(0,0,0,.78);
}

/* Show/hide (JS sənin kimi toggle edəcək) */
.video-lightbox-overlay[aria-hidden="false"]{
  display: flex;
}

/* Modal */
.video-lightbox-content{
  width: min(980px, 100%);
  border-radius: 18px;
  background: var(--vpr-card-bg);
  border: 1px solid var(--vpr-border);
  box-shadow: var(--vpr-shadow);
  overflow: hidden;
  position: relative;
}

/* Close button */
.close-lightbox-button{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--vpr-border);
  background: color-mix(in srgb, var(--vpr-card-bg) 70%, rgba(0,0,0,.25));
  color: var(--vpr-text);
  font-size: 26px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: pointer;
  z-index: 3;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.close-lightbox-button:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vpr-accent) 45%, var(--vpr-border));
  background: color-mix(in srgb, var(--vpr-accent) 14%, var(--vpr-card-bg));
}

/* Iframe wrapper ratio 16:9 */
.video-iframe-container{
  position: relative;
  width: 100%;
  background: #000;
}
.video-iframe-container::before{
  content:"";
  display:block;
  padding-top: 56.25%;
}
.video-iframe-container iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Mobile tuning */
@media (max-width: 768px){
  .video-presentation-container{
    padding: 14px;
    border-radius: 16px;
  }
  .video-title{
    font-size: 15px;
  }
  .play-button-overlay{
    width: 64px;
    height: 64px;
  }
  .play-button-overlay i{
    font-size: 20px;
  }
  .video-lightbox-content{
    border-radius: 16px;
  }
  .close-lightbox-button{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 24px;
  }
}

@media (max-width: 420px){
  .video-title i{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .play-button-overlay{
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   QUICK BUY MODAL - PLAYER VERIFY DESIGN (ŞƏKİLDƏKİ DİZAYN)
   ========================================================= */

/* Yoxlama Gözləyərkən (Spinner) */
.ff-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rv-text-muted, #64748b);
    padding: 8px 16px;
    background: var(--rv-card-bg, rgba(255, 255, 255, 0.03));
    border-radius: 50px;
    border: 1px solid var(--rv-input-border, rgba(140, 170, 220, 0.22));
    margin-top: 10px;
}

/* Nəticə Konteyneri */
.ff-result, .ff-error {
    margin-top: 12px;
}

/* Çip (Chip) Ümumi Dizayn - Oval forma */
.ff-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 6px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

/* --- UĞURLU NƏTİCƏ (GREEN PILL) --- */
.ff-chip.is-ok {
    background-color: #eefbf4; /* Açıq yaşıl arxa fon */
    border: 1px solid #d1f4e0;
}

.ff-chip.is-ok .ff-chip__icon {
    width: 34px;
    height: 34px;
    background-color: #d1f4e0; /* İkonun ətrafındakı dairə */
    color: #10b981; /* Yaşıl işarə rəngi */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ff-chip.is-ok .ff-chip__icon svg {
    width: 18px;
    height: 18px;
}

.ff-chip.is-ok .ff-chip__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

.ff-chip.is-ok .ff-chip__label {
    font-size: 12px;
    font-weight: 600;
    color: #059669; /* Oyunçu adı yazısı rəngi */
    text-transform: capitalize;
}

.ff-chip.is-ok .ff-chip__name {
    font-size: 15px;
    font-weight: 800;
    color: #064e3b; /* Qalın ad rəngi */
}

/* UĞURLU NƏTİCƏ DARK MOD */
body.dark .ff-chip.is-ok,
html.dark .ff-chip.is-ok {
    background-color: rgba(16, 185, 129, 0.12); /* Gecə modunda transparan yaşıl */
    border-color: rgba(16, 185, 129, 0.2);
}
body.dark .ff-chip.is-ok .ff-chip__icon,
html.dark .ff-chip.is-ok .ff-chip__icon {
    background-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
body.dark .ff-chip.is-ok .ff-chip__label,
html.dark .ff-chip.is-ok .ff-chip__label {
    color: #6ee7b7;
}
body.dark .ff-chip.is-ok .ff-chip__name,
html.dark .ff-chip.is-ok .ff-chip__name {
    color: #ffffff;
}

/* --- XƏTA NƏTİCƏSİ (RED PILL) --- */
.ff-chip.is-err {
    background-color: #fef2f2;
    border: 1px solid #fee2e2;
}

.ff-chip.is-err .ff-chip__icon {
    width: 34px;
    height: 34px;
    background-color: #fee2e2;
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ff-chip.is-err .ff-chip__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.ff-chip.is-err .ff-chip__label {
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
}

.ff-chip.is-err .ff-chip__name {
    font-size: 14px;
    font-weight: 700;
    color: #7f1d1d;
}

/* XƏTA NƏTİCƏSİ DARK MOD */
body.dark .ff-chip.is-err,
html.dark .ff-chip.is-err {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.2);
}
body.dark .ff-chip.is-err .ff-chip__icon,
html.dark .ff-chip.is-err .ff-chip__icon {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
body.dark .ff-chip.is-err .ff-chip__label,
html.dark .ff-chip.is-err .ff-chip__label {
    color: #fca5a5;
}
body.dark .ff-chip.is-err .ff-chip__name,
html.dark .ff-chip.is-err .ff-chip__name {
    color: #ffffff;
}

.gmx-cart-page{
  background: var(--gmx-bg);
  color: var(--gmx-text);
}

.gmx-cart-top{ padding: 18px 0 10px; }

.gmx-cart-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  color: var(--gmx-muted);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.gmx-cart-breadcrumb a{
  color: var(--gmx-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.gmx-cart-breadcrumb a:hover{ color: var(--gmx-text); }
.gmx-cart-breadcrumb .sep{ opacity:.65; }
.gmx-cart-breadcrumb .active{ color: var(--gmx-text); opacity:.95; }

.gmx-cart-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--gmx-border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.gmx-cart-title{
  margin:0;
  font-weight:700;
  letter-spacing:.15px;
  font-size: clamp(18px, 3vw, 28px);
  display:flex;
  align-items:center;
  gap:10px;
}
.gmx-cart-title i{ color: var(--gmx-brand); }
.gmx-cart-sub{
  color: var(--gmx-muted);
  font-size: 13px;
  margin-top: 6px;
}

.gmx-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--gmx-border);
  background: var(--gmx-card-2);
  box-shadow: var(--gmx-shadow-2);
  font-weight: 650;
  font-size: 12px;
  color: var(--gmx-text);
  white-space: nowrap;
}
.gmx-pill i{ color: var(--gmx-brand); }

.gmx-alert{
  border: 1px solid var(--gmx-border);
  background: var(--gmx-card);
  border-radius: var(--gmx-radius-sm);
  box-shadow: var(--gmx-shadow-2);
  padding: 12px 14px;
  margin: 10px 0 16px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.gmx-alert i{ margin-top: 2px; font-size: 16px; }
.gmx-alert ul{ margin:0; padding-left: 18px; }
.gmx-alert.gmx-alert-danger i{ color:#dc3545; }
.gmx-alert.gmx-alert-success i{ color:#28a745; }
.gmx-alert.gmx-alert-warning i{ color:#ffc107; }
body.dark .gmx-alert.gmx-alert-warning i{ color:#ffd36b; }

.gmx-cart-grid{
  display:grid;
  gap: 16px;
  padding: 6px 0 28px;
}
@media (min-width: 992px){
  .gmx-cart-grid{
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items:start;
  }
}

.gmx-card{
  border: 1px solid var(--gmx-border);
  background: var(--gmx-card);
  border-radius: var(--gmx-radius);
  box-shadow: var(--gmx-shadow);
  overflow: hidden;
}

.gmx-card-head{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid var(--gmx-border);
  background: linear-gradient(180deg, rgba(var(--gmx-brand-rgb), .10), rgba(255,255,255,0));
}
body.dark .gmx-card-head{
  background: linear-gradient(180deg, rgba(var(--gmx-brand-rgb), .12), rgba(0,0,0,0));
}
.gmx-card-head h2,
.gmx-card-head h3{
  margin:0;
  font-weight:700;
  font-size: 15px;
  display:flex;
  align-items:center;
  gap:10px;
}
.gmx-card-head h2 i,
.gmx-card-head h3 i{ color: var(--gmx-brand); }

.gmx-cart-list{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.gmx-cart-item{
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.55);
  border-radius: 18px;
  padding: 12px;
  display:grid;
  gap: 12px;
  grid-template-columns: 1fr;
  box-shadow: 0 10px 24px rgba(2,6,23,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.dark .gmx-cart-item{
  background: rgba(17,24,39,.52);
  box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
.gmx-cart-item:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--gmx-brand-rgb), .22);
  box-shadow: 0 16px 38px rgba(2,6,23,.10);
}
body.dark .gmx-cart-item:hover{
  border-color: rgba(var(--gmx-brand-rgb), .26);
  box-shadow: 0 18px 46px rgba(0,0,0,.44);
}

@media (min-width: 768px){
  .gmx-cart-item{
    grid-template-columns: 34px 86px minmax(0, 1fr) 240px;
    align-items:center;
  }
}

.gmx-ci-check{
  display:flex;
  align-items:center;
  justify-content:center;
}

.gmx-ci-img{
  width: 86px;
  height: 86px;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.35);
  display:block;
}
body.dark .gmx-ci-img{ background: rgba(0,0,0,.22); }
.gmx-ci-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gmx-ci-info{ min-width: 0; }

.gmx-ci-title{
  margin:0 0 6px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}
.gmx-ci-title a{
  color: var(--gmx-text);
  text-decoration:none;
}
.gmx-ci-title a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.gmx-ci-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  color: var(--gmx-muted);
  font-size: 12px;
  font-weight: 600;
}
.gmx-ci-meta .price{ color: var(--gmx-text); font-weight: 750; }
.gmx-ci-meta .dot{ opacity:.5; }

.gmx-ci-notes{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.gmx-input{
 
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.65);
  color: var(--gmx-text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.dark .gmx-input{ background: rgba(0,0,0,.18); }
.gmx-input:focus{
  border-color: rgba(var(--gmx-brand-rgb), .35);
  box-shadow: var(--gmx-focus);
}
body.dark .gmx-input:focus{ border-color: rgba(var(--gmx-brand-rgb), .42); }

.gmx-ci-actions{
  display:grid;
  gap: 10px;
  grid-template-columns: 1fr;
  justify-items: stretch;
}
@media (min-width: 768px){
  .gmx-ci-actions{ justify-items: end; }
}

.gmx-qty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  overflow:hidden;
  width: 100%;
  max-width: 220px;
  box-shadow: 0 10px 22px rgba(2,6,23,.07);
}
body.dark .gmx-qty{
  background: rgba(0,0,0,.18);
  box-shadow: 0 12px 24px rgba(0,0,0,.30);
}

.gmx-qty-btn{
  width: 46px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: none;
  background: transparent;
  color: var(--gmx-text);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.gmx-qty-btn:hover{
  background: rgba(var(--gmx-brand-rgb), .10);
  transform: translateY(-1px);
}

.gmx-qty input{
  width: 64px;
  text-align:center;
  border: none;
  background: transparent;
  color: var(--gmx-text);
  font-weight: 650;
  outline: none;
  -moz-appearance: textfield;
}
.gmx-qty input::-webkit-outer-spin-button,
.gmx-qty input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.gmx-ci-total{
  font-weight: 650;
  font-size: 14px;
  text-align:right;
}
.gmx-ci-total .num{ font-weight: 850; }
.gmx-ci-total small{
  display:block;
  color: var(--gmx-muted);
  font-weight: 600;
  font-size: 11px;
  margin-top: 3px;
}

.gmx-icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.60);
  color: var(--gmx-text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 10px 20px rgba(2,6,23,.07);
}
body.dark .gmx-icon-btn{
  background: rgba(0,0,0,.18);
  box-shadow: 0 12px 24px rgba(0,0,0,.30);
}
.gmx-icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--gmx-brand-rgb), .28);
  background: rgba(var(--gmx-brand-rgb), .08);
}
.gmx-icon-btn.delete-btn:hover{
  border-color: rgba(220,53,69,.35);
  background: rgba(220,53,69,.10);
}

.gmx-cart-tools{
  padding: 0 10px 10px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap: wrap;
}


body.dark .gmx-btn{
  background: rgba(0,0,0,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.38);
}
.gmx-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--gmx-brand-rgb), .26);
  background: rgba(var(--gmx-brand-rgb), .07);
}
.gmx-btn.gmx-btn-danger:hover{
  border-color: rgba(220,53,69,.35);
  background: rgba(220,53,69,.10);
}

.gmx-summary{ position: relative; }
@media (min-width: 992px){
  .gmx-summary{ position: sticky; top: 18px; }
}

.gmx-summary-body{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.gmx-srow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 650;
  font-size: 14px;
}
.gmx-srow .muted{
  color: var(--gmx-muted);
  font-weight: 600;
  font-size: 13px;
}
.gmx-srow .amount{ font-weight: 850; }

.gmx-balance{
  border: 1px solid var(--gmx-border);
  border-radius: 18px;
  padding: 12px 12px;
  background: rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 650;
}
body.dark .gmx-balance{ background: rgba(0,0,0,.16); }
.gmx-balance .muted{
  color: var(--gmx-muted);
  font-size: 12px;
  font-weight: 600;
}

.gmx-badge{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(var(--gmx-brand-rgb), .22);
  background: rgba(var(--gmx-brand-rgb), .08);
  color: var(--gmx-text);
  border-radius: 18px;
  font-weight: 650;
  font-size: 12px;
}
.gmx-badge i{ color: var(--gmx-brand); }

.gmx-cta{ display:flex; gap: 10px; margin-top: 4px; }

.gmx-cta .gmx-primary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width:100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--gmx-brand-rgb), .30);
  background: linear-gradient(90deg, rgba(var(--gmx-brand-rgb), .92), rgba(99,102,241,.92));
  color: #fff;
  font-weight: 700;
  text-decoration:none;
  cursor:pointer;
  box-shadow: 0 16px 42px rgba(var(--gmx-brand-rgb), .16);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
body.dark .gmx-cta .gmx-primary{
  box-shadow: 0 18px 48px rgba(var(--gmx-brand-rgb), .16);
}
.gmx-cta .gmx-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 20px 54px rgba(var(--gmx-brand-rgb), .20);
}
.gmx-cta .gmx-primary[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  filter: grayscale(.2);
  box-shadow:none;
}

.gmx-empty{
  padding: 28px 16px 30px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.gmx-empty i{
  font-size: 44px;
  color: var(--gmx-brand);
  opacity: .92;
}
.gmx-empty h3{ margin:0; font-weight: 750; font-size: 18px; }
.gmx-empty p{
  margin:0;
  color: var(--gmx-muted);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.55;
}
.gmx-empty a{ margin: 8px auto 0; max-width: 260px; }

.gmx-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.gmx-modal:target,
.gmx-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.gmx-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.55);
}
body.dark .gmx-modal-backdrop{ background: rgba(0,0,0,.66); }

.gmx-modal-card{
  position: relative;
  width: min(760px, 100%);
  border-radius: 26px;
  border: 1px solid var(--gmx-border);
  background: var(--gmx-card);
  box-shadow: var(--gmx-shadow);
  overflow:hidden;
}

.gmx-modal-head{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid var(--gmx-border);
  background: linear-gradient(180deg, rgba(var(--gmx-brand-rgb), .10), rgba(255,255,255,0));
}
body.dark .gmx-modal-head{
  background: linear-gradient(180deg, rgba(var(--gmx-brand-rgb), .12), rgba(0,0,0,0));
}
.gmx-modal-head h3{
  margin:0;
  font-weight: 700;
  font-size: 15px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.gmx-modal-close{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.60);
  color: var(--gmx-text);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
body.dark .gmx-modal-close{ background: rgba(0,0,0,.18); }
.gmx-modal-close:hover{
  transform: translateY(-1px);
  background: rgba(var(--gmx-brand-rgb), .08);
  border-color: rgba(var(--gmx-brand-rgb), .28);
}

.gmx-modal-body{ padding: 16px; }

.gmx-form-grid{ display:grid; gap: 12px; }
@media (min-width: 768px){
  .gmx-form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
}

.gmx-field label{
  display:block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--gmx-muted);
}
.gmx-select{
  width: 100%;
  border: 1px solid var(--gmx-border);
  background: rgba(255,255,255,.65);
  color: var(--gmx-text);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 13px;
  outline: none;
}
body.dark .gmx-select{ background: rgba(0,0,0,.18); }
.gmx-select:focus{
  border-color: rgba(var(--gmx-brand-rgb), .35);
  box-shadow: var(--gmx-focus);
}

.gmx-note{
  color: var(--gmx-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.gmx-modal-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
  margin-top: 12px;
}

.gmx-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid rgba(var(--gmx-brand-rgb), .30);
  background: linear-gradient(90deg, rgba(var(--gmx-brand-rgb), .92), rgba(99,102,241,.92));
  color: #fff;
  font-weight: 700;
  cursor:pointer;
  text-decoration:none;
  min-width: 160px;
  box-shadow: 0 16px 42px rgba(var(--gmx-brand-rgb), .16);
}
.gmx-submit[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.alertMessage{
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  background: var(--gmx-card);
  color: var(--gmx-text);
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: var(--gmx-shadow);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 13px;
  border-left: 5px solid;
  min-width: 280px;
}
.alertMessage.alert_success{ border-color:#28a745; }
.alertMessage.alert_success i{ color:#28a745; font-size: 18px; }
.alertMessage.alert_danger{ border-color:#dc3545; }
.alertMessage.alert_danger i{ color:#dc3545; font-size: 18px; }
.alertMessage.alert_warning{ border-color:#ffc107; }
.alertMessage.alert_warning i{ color:#ffc107; font-size: 18px; }

@media (prefers-reduced-motion: reduce){
  .gmx-cart-item,
  .gmx-btn,
  .gmx-icon-btn,
  .gmx-qty-btn,
  .gmx-cta .gmx-primary,
  .gmx-modal{ transition:none; }
}

/* =========================================================
   MƏHSUL SƏHİFƏSİ (DARK/LIGHT UYĞUN, ZƏRİF FONT VƏ RƏNGLƏR)
   ========================================================= */

.oyw-page {
  padding: 14px 0 40px;
}

.product-page {
  width: 100%;
}

.product-page__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.product-page__col {
  min-width: 0;
}

/* Kart Dizaynları - Dark/Light Moduna Tam Uyğun */
.pd-card,
.offer-card,
.shop.modern_shop_product.cardborder {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

html.dark .pd-card,
html.dark .offer-card,
html.dark .shop.modern_shop_product.cardborder {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.pd-card {
  padding: 16px;
}

.pd-gallery {
  padding: 16px;
  border-radius: 22px;
}

.pd-gallery__inner {
  width: 100%;
  display: grid;
  place-items: center;
}

.pd-gallery__img {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
}

.pd-info {
  padding: 18px;
}

.pd-title {
  margin: 0 0 10px;
  color: var(--text-main);
  font-weight: 700; /* 900-dən 700-ə salındı */
  letter-spacing: .2px;
  font-size: clamp(18px, 2.3vw, 26px);
  line-height: 1.2;
}

.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
}

.pd-rating__avg {
  width: 46px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 700; /* 900-dən 700-ə salındı */
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.pd-rating__stars {
  display: inline-flex;
  gap: 3px;
  color: #facc15; /* Sizin layihənin rənglərinə daha uyğun sarı */
  font-size: 16px;
}

.pd-rating__info {
  margin-left: auto;
  color: var(--text-muted);
  font-weight: 600; /* 700-dən 600-ə salındı */
  font-size: 12px;
}

.pd-fe {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pd-fe__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
}

.pd-fe__icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

.pd-fe__txt small {
  display: block;
  font-size: 12px;
  font-weight: 600; /* 800-dən 600-ə salındı */
  color: var(--text-muted);
  margin-bottom: 2px;
}

.pd-fe__txt strong {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--text-main);
  font-weight: 700; /* 900-dən 700-ə salındı */
}

.pd-fe__txt strong span {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.pd-sep {
  height: 1px;
  margin: 16px 0;
  background: var(--border-color);
}

.pd-rel__headline {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700; /* 900-dən 700-ə salındı */
  color: var(--text-muted);
  letter-spacing: .2px;
  text-transform: uppercase;
}

.pd-rel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pd-rel {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pd-rel__in {
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pd-rel:hover .pd-rel__in {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 25px var(--brand-glow);
}

.pd-rel__media {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
}

.pd-rel__img-wrap {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.pd-rel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-rel__title {
  font-weight: 600; /* 900-dən 600-ə salındı */
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.25;
}

/* =========================================================
   TƏKLİF VƏ QİYMƏT BÖLMƏSİ
   ========================================================= */

.offer-card {
  padding: 16px;
}

.offer-card__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700; /* 950-dən 700-ə salındı */
  font-size: 12px;
  letter-spacing: .2px;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  margin-bottom: 12px;
}

.offer-seller {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  margin-bottom: 12px;
}

.offer-seller__avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

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

.offer-seller__name strong {
  display: block;
  font-weight: 700; /* 950-dən 700-ə salındı */
  color: var(--text-main);
  line-height: 1.2;
}

.offer-seller__score {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600; /* 800-dən 600-ə salındı */
  color: var(--text-muted);
}

.offer-price {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  margin-bottom: 12px;
}

.offer-price__current {
  font-size: 24px;
  font-weight: 800; /* 1000-dən 800-ə salındı */
  color: var(--brand-primary); /* Əsas rənginizə dəyişildi */
  letter-spacing: .2px;
}

.offer-price__old {
  margin-top: 4px;
  color: var(--text-muted);
  font-weight: 600; /* 800-dən 600-ə salındı */
  font-size: 13px;
  text-decoration: line-through;
}

.offer-price__stock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  margin-bottom: 12px;
  color: var(--text-muted);
  font-weight: 600; /* 850-dən 600-ə salındı */
  font-size: 13px;
}

.offer-price__stock i {
  font-size: 18px;
  color: var(--text-main);
}

.offer-card__points {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(250, 204, 21, 0.35); /* Sarı rəng xəfif saxlanıldı */
  background: rgba(250, 204, 21, 0.1);
  color: var(--text-main);
  font-weight: 700; /* 950-dən 700-ə salındı */
  margin-bottom: 12px;
}

/* Say və Düymələr */
.product-page .pl-qty {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  margin-bottom: 12px;
}

.product-page .pl-qty-btn {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  transition: all .2s ease;
}

.product-page .pl-qty-btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.product-page .pl-qty-input {
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-weight: 700;
  text-align: center;
  outline: none;
}

.offer-actions {
  display: grid;
  gap: 10px;
}

.product-page .pl-btn {

  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-weight: 700; /* 1000-dən 700-ə salındı */
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s ease;
}

.product-page .pl-btn:hover {
  transform: translateY(-2px);
}

.product-page .pl-btn--disabled,
.product-page .pl-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  background: var(--bg-body) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
  box-shadow: none !important;
}

/* Səbətə at düyməsi */
.product-page .pl-btn--cart {
  background: rgba(139, 92, 246, 0.1); 
  border-color: rgba(139, 92, 246, 0.3);
  color: var(--brand-primary);
}
.product-page .pl-btn--cart:hover {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 8px 20px var(--brand-glow);
}

/* İndi al düyməsi */
.product-page .pl-btn--buy {
  background: var(--brand-gradient);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 15px var(--brand-glow);
}
.product-page .pl-btn--buy:hover {
  box-shadow: 0 8px 25px var(--brand-glow);
}

.product-page__bottom {
  margin-top: 14px;
}

.shop.modern_shop_product.cardborder {
  padding: 14px;
}

/* =========================================================
   TABLAR VƏ İNFO (FAQ, REVIEWS)
   ========================================================= */

.gmx-tabs {
  width: 100%;
}

.gmx-tabs__header {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
}

.gmx-tab {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-muted);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 700; /* 950-dən 700-ə salındı */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all .2s ease;
}

.gmx-tab:hover {
  border-color: var(--brand-primary);
  color: var(--text-main);
}

.gmx-tab.is-active {
  border-color: var(--brand-primary);
  background: var(--bg-surface);
  color: var(--brand-primary);
  box-shadow: 0 4px 15px var(--brand-glow);
}

.gmx-tabs__panels {
  margin-top: 12px;
}

.gmx-panel {
  display: none;
}

.gmx-panel.is-active {
  display: block;
}

.gmx-info__content {
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.7;
}

.gmx-info__content p,
.gmx-info__content li {
  color: var(--text-muted);
}

.gmx-info__faq-title {
  margin: 16px 0 10px;
  font-size: 14px;
  font-weight: 700; /* 1000-dən 700-ə salındı */
  color: var(--text-main);
  letter-spacing: .2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gmx-faq {
  display: grid;
  gap: 10px;
}

.gmx-faq__item {
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  overflow: hidden;
}

.gmx-faq__head {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 700; /* 950-dən 700-ə salındı */
  color: var(--text-main);
}

.gmx-faq__body {
  padding: 0 14px 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.gmx-reviews {
  margin-top: 6px;
}

.gmx-reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.gmx-rating {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.gmx-rating__row {
  display: grid;
  grid-template-columns: 52px 1fr 56px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}

.gmx-rating__label {
  font-weight: 700; /* 950-dən 700-ə salındı */
  color: var(--text-muted);
  font-size: 12px;
}

.gmx-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--border-color);
  overflow: hidden;
}

.gmx-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-gradient);
}

.gmx-rating__pct {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

.gmx-score {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  display: grid;
  place-items: center;
  min-height: 180px;
}

.gmx-score__svg {
  width: 150px;
  height: 150px;
  display: block;
}

.gmx-score__track {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 3.2;
}

.gmx-score__bar {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.gmx-score__content {
  margin-top: -120px;
  text-align: center;
}

.gmx-score__num {
  font-size: 30px;
  font-weight: 800; /* 1100-dən 800-ə salındı */
  color: var(--text-main);
}

.gmx-score__label {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600; /* 900-dən 600-ə salındı */
  color: var(--text-muted);
}

/* =========================================================
   RƏY YAZMA (EDITOR) VƏ ŞƏRHLƏR
   ========================================================= */

.gmx-editor {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  margin-bottom: 12px;
}

.gmx-editor__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700; /* 1000-dən 700-ə salındı */
  color: var(--text-main);
  margin-bottom: 10px;
}

.gmx-textarea {
  width: 100%;
  min-height: 110px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  color: var(--text-main);
  padding: 12px 14px;
  font-weight: 500; /* 700-dən 500-ə salındı */
  outline: none;
  resize: vertical;
  transition: all .2s ease;
}

.gmx-textarea:focus {
  border-color: var(--brand-primary);
  background: var(--bg-surface);
}

.gmx-editor__actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}


.gmx-btn:hover {
  transform: translateY(-1px);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}


/* 5. PRİMARY DÜYMƏ (Əsas marka rəngi ilə olan lüks düymə) */
.gmx-btn--primary {
    background-color: var(--brand-primary, #3b82f6) !important; /* Sənin saytının əsas rəngini alır */
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-primary, #3b82f6) 40%, transparent);
}

.gmx-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--brand-primary, #3b82f6) 60%, transparent);
    color: #fff !important;
    filter: brightness(1.1); /* Hover olanda rəngi yüngülcə canlandırır */
}
.gmx-btn--ghost {
  background: transparent;
}

.gmx-btn--sm {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
}

.gmx-alert {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-main);
  font-weight: 600; /* 800-dən 600-ə salındı */
  margin-bottom: 10px;
}

.gmx-alert--error {
  border-color: rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .05);
  color: #ef4444;
}

.gmx-alert--ok {
  border-color: rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .05);
  color: #10b981;
}

.gmx-alert--warn {
  border-color: rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .05);
  color: #f59e0b;
}

.gmx-comment {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  margin-bottom: 10px;
}

.gmx-comment__head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}

.gmx-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 700; /* 1000-dən 700-ə salındı */
  color: var(--brand-primary);
  background: var(--bg-body);
  border: 1px solid var(--border-color);
}

.gmx-comment__meta {
  display: grid;
  gap: 4px;
}

.gmx-stars {
  display: inline-flex;
  gap: 4px;
  color: #facc15;
  font-size: 14px;
}

.gmx-date {
  font-size: 12px;
  font-weight: 600; /* 900-dən 600-ə salındı */
  color: var(--text-muted);
}

.gmx-author {
  font-weight: 700; /* 1000-dən 700-ə salındı */
  color: var(--text-main);
  font-size: 14px;
}

.gmx-comment__ops {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gmx-comment__body {
  margin-top: 12px;
}

.gmx-comment__text {
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  padding: 14px;
  color: var(--text-main);
  line-height: 1.6;
  font-weight: 500; /* 650-dən 500-ə salındı */
}

.gmx-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
  font-weight: 700; /* 1000-dən 700-ə salındı */
  font-size: 11px;
  color: var(--text-muted);
}

.gmx-replies {
  margin: 10px 0 0 54px;
  display: grid;
  gap: 10px;
}

.gmx-reply {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
}

.gmx-reply__author {
  margin: 0 0 6px;
  font-weight: 700; /* 1000-dən 700-ə salındı */
  color: var(--text-main);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.gmx-muted {
  color: var(--text-muted);
  font-weight: 600; /* 900-dən 600-ə salındı */
  font-size: 11px;
}

.gmx-reply__text {
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 10px 14px;
  color: var(--text-main);
  line-height: 1.6;
  font-weight: 500; /* 650-dən 500-ə salındı */
}

.gmx-replyform {
  margin: 10px 0 0 54px;
}

.gmx-replyform__wrap {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-body);
}

.gmx-replyform__actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

/* =========================================================
   MEDİA QUERIES
   ========================================================= */

@media (min-width: 992px) {
  .product-page__top {
    grid-template-columns: 420px minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }

  .product-page__col--offer .offer-card {
    position: sticky;
    top: 88px;
  }

  .pd-rel-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gmx-reviews__grid {
    grid-template-columns: 1.2fr .8fr;
    align-items: stretch;
  }
}

@media (max-width: 520px) {
  .pd-rel-list {
    grid-template-columns: 1fr;
  }

  .gmx-comment__head {
    grid-template-columns: 38px 1fr;
  }

  .gmx-replies,
  .gmx-replyform {
    margin-left: 0;
  }

  .offer-price__current {
    font-size: 20px;
  }
}



/* =========================================================
   ƏSAS STRUKTUR & KARTLAR
   ========================================================= */
.gmxpay-balance-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.gmxpay-balance-icon {
    width: 60px; height: 60px;
    background: color-mix(in srgb, var(--brand-primary) 15%, transparent);
    color: var(--brand-primary);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.gmxpay-balance-amount { font-size: 32px; font-weight: 900; color: var(--text-main); line-height: 1.1; margin-bottom: 4px; }
.gmxpay-balance-sub { font-size: 14px; color: var(--text-muted); font-weight: 600; margin: 0; }

.gmxpay-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.gmxpay-nav-list { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 90px; }

/* Menyu Linkləri */
.gmxpay-nav-item {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    background: var(--bg-surface); border: 2px solid transparent; border-radius: 16px;
    text-decoration: none; color: var(--text-main); font-weight: 700; font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.gmxpay-nav-item:hover { transform: translateY(-3px) scale(1.02); border-color: var(--brand-primary); box-shadow: 0 15px 40px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.gmxpay-nav-item.is-active { background: var(--brand-gradient); border-color: transparent !important; color: #fff; box-shadow: 0 8px 25px var(--brand-glow) !important; }

.gmxpay-nav-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-body); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.gmxpay-nav-ico img { width: 24px; height: 24px; object-fit: contain; }
.gmxpay-nav-item.is-active .gmxpay-nav-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
.gmxpay-nav-text { flex: 1; }

.gmxpay-nav-badge {
    margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 8px; font-weight: 800;
    background: var(--bg-body); color: var(--text-muted); transition: 0.3s;
}
.gmxpay-nav-item.is-active .gmxpay-nav-badge { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: transparent; }

/* Məzmun Qutusu */
.gmxpay-content {
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: 24px; padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
.gmxpay-tab { animation: fadeIn 0.4s ease; }

/* =========================================================
   FORM DİZAYNI (SIKIŞDIRILMIŞ VƏ STANDART)
   ========================================================= */
.gmxpay-online-form, .gmxpay-notify { max-width: 600px; /* Formaları standart 600px daxilində tutur */ }

.gmxpay-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.gmxpay-field { margin-bottom: 24px; max-width: 600px; }
.gmxpay-field--full { grid-column: span 2; }
.gmxpay-field--half { grid-column: span 1; }

.gmxpay-label { display: block; font-size: 13px; font-weight: 800; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; }
.gmxpay-input-wrap { position: relative; display: flex; align-items: center; }
.gmxpay-input {
    width: 100%; background: var(--bg-body); border: 1px solid var(--border-color);
    color: var(--text-main); padding: 16px 20px; border-radius: 16px; font-size: 16px; font-weight: 700; outline: none; transition: all 0.3s;
}
.gmxpay-input:focus { border-color: var(--brand-primary); background: var(--bg-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.gmxpay-input--static { background: color-mix(in srgb, var(--brand-primary) 5%, transparent) !important; border-color: transparent !important; color: var(--brand-primary); }

.gmxpay-badge-commission {
    display: inline-block; background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 8px 16px;
    border-radius: 10px; font-size: 13px; font-weight: 800; margin-bottom: 15px; border: 1px solid rgba(239, 68, 68, 0.2);
}
.gmxpay-note, .gmxpay-warn {
    padding: 16px 20px; border-radius: 16px; font-size: 14px; font-weight: 600; margin-bottom: 24px; display: flex; align-items: center; gap: 12px;
}
.gmxpay-note { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.gmxpay-warn { background: rgba(245, 158, 11, 0.1); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.2); }

/* Bank Accordion & Info */
.gmxpay-bank-card { border: 1px solid var(--border-color); border-radius: 20px; overflow: hidden; background: var(--bg-surface); transition: 0.3s; margin-bottom: 15px; }
.gmxpay-bank-card:hover { border-color: var(--brand-primary); }
.gmxpay-bank-toggle { width: 100%; padding: 20px; background: transparent; border: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--text-main); font-weight: 800; font-size: 16px; }
.gmxpay-bank-ident { display: flex; align-items: center; gap: 15px; }
.gmxpay-bank-logo { width: 45px; height: 45px; border-radius: 12px; background: #fff; padding: 5px; border: 1px solid var(--border-color); }
.gmxpay-bank-chevron { transition: transform 0.3s; color: var(--text-muted); }
.gmxpay-bank-toggle[aria-expanded="true"] .gmxpay-bank-chevron { transform: rotate(180deg); }
.gmxpay-bank-body { padding: 0 24px 24px 24px; }

.gmxpay-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--bg-body); padding: 24px; border-radius: 16px; margin-bottom: 24px; border: 1px solid var(--border-color); }
.gmxpay-info-box { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.gmxpay-info-label { font-size: 11px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; }
.gmxpay-info-value { font-size: 15px; font-weight: 800; color: var(--text-main); word-break: break-word; }

/* =========================================================
   POPUP VƏ MODAL (ÖDƏMƏ BİLDİRİMİ)
   ========================================================= */





/* Responsive */
@media (max-width: 1024px) {
    .gmxpay-layout { grid-template-columns: 1fr; }
    .gmxpay-nav-list { position: relative; top: 0; flex-direction: row; overflow-x: auto; padding-bottom: 10px; }
    .gmxpay-nav-item { flex-shrink: 0; }
}
@media (max-width: 768px) {
    .gmxpay-content { padding: 20px 15px; }
    .gmxpay-form-grid, .gmxpay-info-grid { grid-template-columns: 1fr; }
    .gmxpay-field--full { grid-column: auto; }
}


.gmxpay-alerts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.gmxpay-alert { position: relative; padding: 16px 48px 16px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; animation: fadeIn 0.4s ease; border: 1px solid transparent; }
.gmxpay-alert--error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2); color: #ef4444; }
.gmxpay-alert--success { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); color: #22c55e; }
.gmxpay-alert-close { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); background: transparent; border: none; color: inherit; opacity: 0.6; font-size: 18px; cursor: pointer; transition: 0.3s; }
.gmxpay-alert-close:hover { opacity: 1; }
.gmxpay-alert-list { margin: 0; padding-left: 20px; }
.gmxpay-balance-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 20px; padding: 24px 30px; display: flex; align-items: center; gap: 20px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.gmxpay-balance-icon { width: 60px; height: 60px; background: color-mix(in srgb, var(--brand-primary) 15%, transparent); color: var(--brand-primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.gmxpay-balance-amount { font-size: 32px; font-weight: 900; color: var(--text-main); line-height: 1.1; margin-bottom: 4px; }
.gmxpay-balance-sub { font-size: 14px; color: var(--text-muted); font-weight: 600; margin: 0; }
.gmxpay-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.gmxpay-nav-list { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 90px; }
.gmxpay-nav-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--bg-surface); border: 2px solid transparent; border-radius: 16px; text-decoration: none; color: var(--text-main); font-weight: 700; font-size: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.gmxpay-nav-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(102,126,234,0.1) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; pointer-events: none; }
.gmxpay-nav-item:hover::before { transform: translateX(100%); }
.gmxpay-nav-item:hover { transform: translateY(-3px) scale(1.02); border-color: var(--brand-primary); box-shadow: 0 15px 40px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.gmxpay-nav-item.is-active { background: var(--brand-gradient); border-color: transparent !important; color: #fff; box-shadow: 0 8px 25px var(--brand-glow) !important; }
.gmxpay-nav-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-body); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.gmxpay-nav-ico img { width: 24px; height: 24px; object-fit: contain; }
.gmxpay-nav-item.is-active .gmxpay-nav-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
.gmxpay-nav-text { flex: 1; }
.gmxpay-nav-badge { margin-left: auto; font-size: 11px; padding: 4px 10px; border-radius: 8px; font-weight: 800; background: var(--bg-body); color: var(--text-muted); transition: 0.3s; }
.gmxpay-nav-item.is-active .gmxpay-nav-badge { background: rgba(255, 255, 255, 0.2); color: #fff; border-color: transparent; }
.gmxpay-nav-item--birbank { border: 1px solid rgba(255, 59, 59, 0.45); background: linear-gradient(90deg, rgba(255,59,59,0.22), rgba(255,59,59,0.06)); }
body.dark .gmxpay-nav-item--birbank { background: linear-gradient(90deg, rgba(255,59,59,0.15), rgba(255,59,59,0.02)); }
.gmxpay-nav-item--birbank .gmxpay-nav-badge { background: rgba(255,59,59,0.14); color: #ff6b6b; border: 1px solid rgba(255,59,59,0.35); }
.gmxpay-nav-item--birbank.is-active { background: linear-gradient(135deg, #ff416c, #ff4b2b); border-color: transparent; }
.gmxpay-nav-item--card { border: 1px solid rgba(64, 167, 255, 0.35); background: linear-gradient(90deg, rgba(64,167,255,0.18), rgba(64,167,255,0.05)); }
body.dark .gmxpay-nav-item--card { background: linear-gradient(90deg, rgba(64,167,255,0.1), rgba(64,167,255,0.02)); }
.gmxpay-nav-item--card .gmxpay-nav-badge { background: rgba(64,167,255,0.14); color: #40a7ff; border: 1px solid rgba(64,167,255,0.30); }
.gmxpay-content { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 24px; padding: 40px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); }
.gmxpay-tab { animation: fadeIn 0.4s ease; }
.gmxpay-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.gmxpay-field { margin-bottom: 24px; width: 100%; box-sizing: border-box; }
.gmxpay-field--full { grid-column: span 2; }
.gmxpay-field--half { grid-column: span 1; }
.gmxpay-field:last-child { margin-bottom: 0; }
.gmxpay-label { display: block; font-size: 13px; font-weight: 800; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; }
.gmxpay-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.gmxpay-input { width: 100%; background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main); padding: 16px 20px; border-radius: 16px; font-size: 16px; font-weight: 700; outline: none; transition: all 0.3s; box-sizing: border-box; }
.gmxpay-input:focus { border-color: var(--brand-primary); background: var(--bg-surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.gmxpay-input--static { background: color-mix(in srgb, var(--brand-primary) 5%, transparent) !important; border-color: transparent !important; color: var(--brand-primary); display: flex; align-items: center; width: 100%; box-sizing: border-box; }
.gmxpay-suffix { position: absolute; right: 20px; font-weight: 800; color: var(--text-muted); pointer-events: none; }
.gmxpay-note { background: rgba(16, 185, 129, 0.1); color: #10b981; padding: 16px 20px; border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; }
.gmxpay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 28px; border-radius: 16px; font-weight: 800; font-size: 16px; border: none; cursor: pointer; transition: all 0.3s ease; }
.gmxpay-btn--primary { background: var(--brand-gradient); color: #fff; box-shadow: 0 8px 20px var(--brand-glow); }
.gmxpay-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 25px var(--brand-glow); }
.gmxpay-btn--secondary { background: var(--bg-body); color: var(--text-main); border: 1px solid var(--border-color); }
.gmxpay-btn--secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.gmxpay-btn--outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); }
.gmxpay-btn--outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.gmxpay-btn--full { width: 100%; box-sizing: border-box; margin-top: 10px; }
.gmxpay-bank-accordion { display: flex; flex-direction: column; gap: 16px; }
.gmxpay-bank-card { border: 1px solid var(--border-color); border-radius: 20px; overflow: hidden; background: var(--bg-surface); transition: border-color 0.3s; }
.gmxpay-bank-card:hover { border-color: var(--brand-primary); }
.gmxpay-bank-toggle { width: 100%; padding: 20px 24px; background: transparent; border: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--text-main); font-weight: 800; font-size: 16px; }
.gmxpay-bank-ident { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gmxpay-bank-logo { width: 48px; height: 48px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--border-color); padding: 6px; }
.gmxpay-bank-name { min-width: 0; }
.gmxpay-bank-chevron { transition: transform 0.3s; color: var(--text-muted); }
.gmxpay-bank-toggle[aria-expanded="true"] .gmxpay-bank-chevron { transform: rotate(180deg); }
.gmxpay-bank-body { padding: 0 24px 24px 24px; }
.gmxpay-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--bg-body); padding: 24px; border-radius: 16px; margin-bottom: 24px; border: 1px solid var(--border-color); }
.gmxpay-info-grid > * { min-width: 0; }
.gmxpay-info-box { display: flex; flex-direction: column; gap: 6px; }
.gmxpay-info-box--full { grid-column: span 2; }
.gmxpay-info-label { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.gmxpay-info-value { font-size: 15px; font-weight: 800; color: var(--text-main); overflow-wrap: anywhere; word-break: break-word; }
.gmxpay-copy { color: var(--brand-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; padding: 4px 10px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border-radius: 8px; width: max-content; max-width: 100%; white-space: normal; word-break: break-all; flex-wrap: wrap; }
.gmxpay-copy:hover { background: color-mix(in srgb, var(--brand-primary) 20%, transparent); }
.gmxpay-actions { display: flex; gap: 16px; margin-bottom: 24px; }
.gmxpay-actions .gmxpay-btn { flex: 1; }
.gmxpay-badge-commission { display: inline-block; background: rgba(239, 68, 68, 0.1); color: #ef4444; padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 800; margin-bottom: 15px; }
.gmxpay-warn { display: flex; gap: 15px; background: rgba(245, 158, 11, 0.1); color: #d97706; padding: 16px 20px; border-radius: 16px; margin-bottom: 24px; font-size: 14px; align-items: center; }
.gmxpay-dropzone { border: 2px dashed var(--border-color); border-radius: 16px; padding: 40px 20px; text-align: center; cursor: pointer; display: block; transition: all 0.3s; background: var(--bg-body); }
.gmxpay-dropzone:hover { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 2%, transparent); }
.gmxpay-drop-ico { font-size: 36px; color: var(--brand-primary); margin-bottom: 12px; }
.gmxpay-drop-title { font-weight: 700; color: var(--text-muted); font-size: 14px; }
.gmxpay-file { display: none; }
.gmxpay-file-name { margin-top: 12px; font-size: 13px; font-weight: 800; color: #10b981; text-align: center; }
.gmxpay-terminal { background: var(--up-bg-card); border-radius: 20px; border: 1px solid var(--up-border); box-shadow: 0 4px 15px rgba(0,0,0,0.15); overflow: hidden; }
body:not(.dark) .gmxpay-terminal { box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.gmxpay-terminal-head { background: var(--up-bg-head); padding: 40px 20px; text-align: center; border-bottom: 1px solid var(--up-border); }
.gmxpay-terminal-logo { width: 80px; height: 80px; background: var(--up-logo-bg); border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); padding: 12px; border: 2px solid var(--up-logo-border); }
body.dark .gmxpay-terminal-logo { box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.gmxpay-terminal-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gmxpay-terminal-logo i { font-size: 36px; color: var(--up-text-sub); }
.gmxpay-terminal-title { font-size: 26px; font-weight: 800; color: var(--up-text-title); margin-bottom: 8px; }
.gmxpay-terminal-sub { font-size: 14px; color: var(--up-text-sub); margin-bottom: 10px; }
.gmxpay-terminal-warn { font-size: 12px; color: #ff9800; background: rgba(255, 152, 0, 0.1); display: inline-block; padding: 6px 15px; border-radius: 20px; font-weight: 600; margin-top: 5px; border: 1px dashed rgba(255, 152, 0, 0.3); }
.gmxpay-terminal-body { padding: 30px; background: var(--up-bg-body); }
.gmxpay-terminal-id { background: var(--up-bg-card); border: 1px solid var(--up-border); border-radius: 16px; padding: 25px 30px; display: flex; align-items: center; justify-content: space-between; max-width: 550px; margin: -55px auto 30px auto; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; z-index: 2; }
body.dark .gmxpay-terminal-id { box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.gmxpay-terminal-id-label { font-size: 13px; color: var(--up-text-sub); font-weight: 600; display: block; margin-bottom: 5px; }
.gmxpay-terminal-id-value { font-size: 38px; font-weight: 800; color: var(--up-accent); margin: 0; line-height: 1; }
.gmxpay-terminal-copy { background: var(--up-accent); color: #fff; border: none; padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 6px rgba(249, 115, 22, 0.2); }
.gmxpay-terminal-copy:hover { background: var(--up-accent-hover); transform: translateY(-2px); box-shadow: 0 6px 10px rgba(249, 115, 22, 0.3); }
.gmxpay-steps-head { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 800; color: var(--up-text-title); margin-bottom: 25px; }
.gmxpay-steps-ico { background: rgba(249, 115, 22, 0.1); color: var(--up-accent); width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid rgba(249, 115, 22, 0.2); }
.gmxpay-steps { max-width: 600px; margin: 0 auto; position: relative; padding-left: 20px; }
.gmxpay-steps::before { content: ''; position: absolute; left: 38px; top: 20px; bottom: 30px; width: 2px; background: var(--up-border); z-index: 0; }
.gmxpay-step { background: var(--up-bg-card); border: 1px solid var(--up-border); border-radius: 16px; padding: 20px 20px 20px 65px; margin-bottom: 15px; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; z-index: 1; transition: all 0.3s; }
body.dark .gmxpay-step { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.gmxpay-step:hover { transform: translateX(5px); border-color: var(--up-accent); box-shadow: 0 4px 10px rgba(249, 115, 22, 0.1); }
.gmxpay-step-no { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--up-bg-card); color: var(--up-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 2px solid var(--up-accent); box-shadow: 0 0 0 4px var(--up-bg-body); }
.gmxpay-step-main { flex: 1; }
.gmxpay-step-title { font-size: 15px; font-weight: 700; color: var(--up-text-title); margin-bottom: 3px; }
.gmxpay-step-desc { font-size: 13px; color: var(--up-text-sub); margin: 0; line-height: 1.4; }
.gmxpay-step-ico { width: 36px; height: 36px; background: var(--up-icon-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 15px; border: 1px solid var(--up-border); }
.gmxpay-step:hover .gmxpay-step-ico { background: rgba(249, 115, 22, 0.1); color: var(--up-accent); border-color: rgba(249, 115, 22, 0.3); }

.popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 40px 20px; overflow-y: auto; }
.popup.visible, .popup.is-open, .popup.active { opacity: 1; visibility: visible; }
.popup__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1; }
.popup__wrap { position: relative; background: var(--bg-surface, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 24px; padding: 40px 35px; width: 100%; max-width: 500px; margin: auto; z-index: 2; box-shadow: 0 20px 60px rgba(0,0,0,0.15); transform: scale(0.95) translateY(20px); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
body.dark .popup__wrap { background: var(--bg-surface, #1e1e2d); border-color: var(--border-color, #2b2b40); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.popup.visible .popup__wrap, .popup.is-open .popup__wrap, .popup.active .popup__wrap { transform: scale(1) translateY(0); }
.popup__close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: var(--bg-body, #f4f6f8); border: 1px solid var(--border-color, #e2e8f0); color: var(--text-muted, #64748b); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 20px; }
body.dark .popup__close { background: var(--bg-body, #151521); border-color: var(--border-color, #2b2b40); color: var(--text-muted, #a1a5b7); }
.popup__close:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: transparent; transform: rotate(90deg); }
.popup__close svg { display: none; }
.popup__close::after { content: '\2715'; font-family: Arial, sans-serif; font-weight: bold; font-size: 16px; line-height: 1; }
.post { display: flex; flex-direction: column; gap: 15px; }
.post__title { font-size: 22px; font-weight: 900; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 2px solid var(--border-color, #e2e8f0); }
body.dark .post__title { border-color: var(--border-color, #2b2b40); }
.title-green { color: #10b981; }
.title-green::before { content: '\24D8'; font-size: 24px; }
.post p { color: var(--text-main, #0f172a); font-size: 15px; line-height: 1.6; font-weight: 600; margin: 0; position: relative; padding-left: 20px; }
body.dark .post p { color: var(--text-main, #ffffff); }
.post p::before { content: '\2022'; position: absolute; left: 0; color: var(--brand-primary, #9146ff); font-size: 18px; top: -2px; }
.post br { display: none; }
#paymentDialog .modal-content { background: var(--bg-surface, #ffffff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; }
body.dark #paymentDialog .modal-content { background: var(--bg-surface, #1e1e2d); border-color: var(--border-color, #2b2b40); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.gmxpay-online-form, .gmxpay-notify { max-width: 600px; width: 100%; box-sizing: border-box; }

@media (max-width: 1024px) {
    .gmxpay-layout { grid-template-columns: 1fr; }
    .gmxpay-nav-item { flex-shrink: 0; padding: 12px 20px; }
}
@media (max-width: 768px) {
    .gmxpay-balance-card { flex-direction: column; text-align: center; padding: 24px; }
    .gmxpay-form-grid { grid-template-columns: 1fr; gap: 12px; }
    .gmxpay-field--full, .gmxpay-field--half { grid-column: span 1; }
    .gmxpay-actions { flex-direction: column; }
    .gmxpay-terminal-head { padding: 40px 20px; }
    .gmxpay-terminal-body { padding: 30px 20px; }
    .gmxpay-terminal-id { flex-direction: column; gap: 20px; text-align: center; padding: 24px; margin-top: 0; }
    .gmxpay-steps { padding-left: 0; }
    .gmxpay-steps::before { display: none; }
    .gmxpay-step { flex-direction: column; text-align: center; padding: 24px 20px; gap: 16px; }
    .gmxpay-step-no { margin-right: 0; box-shadow: none; border: 1px solid var(--up-border); }
    .gmxpay-step-ico { display: none; }
    .gmxpay-content { padding: 20px 16px; border-radius: 20px; }
    .gmxpay-bank-toggle { padding: 16px; }
    .gmxpay-bank-body { padding: 0 16px 16px 16px; }
    .gmxpay-info-grid { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
    .gmxpay-info-box--full { grid-column: auto; }
}
@media (max-width: 420px) {
    .gmxpay-info-value { font-size: 14px; }
    .gmxpay-bank-logo { width: 42px; height: 42px; border-radius: 12px; }
}










/* =========================================================
   GMX USER PANEL SIDEBAR (SOFT & PREMIUM DESIGN)
   ========================================================= */

/* --- Ümumi Sidebar Qutusu --- */
.gmx-sidebar {
    background: var(--bg-surface);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.3s ease;
    height: max-content;
    position: sticky;
    top: 90px;
}
body.dark .gmx-sidebar {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* Mobildə açılıb qapanan Toggle Düyməsi */
.gmx-sidebar-toggle {
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-main);
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
}
.gmx-sidebar-toggle:hover {
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}
.gmx-sidebar-toggle .toggle-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gmx-sidebar-toggle .toggle-left i { color: var(--brand-primary); font-size: 18px; }
.gmx-sidebar-toggle .toggle-icon { transition: transform 0.3s ease; color: var(--text-muted); }
.gmx-sidebar.is-open .gmx-sidebar-toggle .toggle-icon { transform: rotate(180deg); }

/* İçərik (Toggle ilə Mobildə Gizlənən Hissə) */
.gmx-sidebar-inner {
    display: block; /* Desktop-da həmişə açıq */
}

/* --- İstifadəçi Profil Qutusu --- */
.gmx-user-profile-box {
    padding: 30px 24px 20px 24px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 5%, transparent) 0%, transparent 100%);
}

/* Avatar Dizaynı */
.avatar-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px auto;
}
.avatar-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 4px;
    background: var(--bg-surface);
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
    position: relative;
}
.user-img, .user-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.user-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}
.avatar-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 28px;
    height: 28px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--brand-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.avatar-edit-btn:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: transparent;
    transform: scale(1.1);
}

/* Ad və Email */
.user-name-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0 0 4px 0;
    line-height: 1.2;
}
.user-email-text {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 12px 0;
}

/* Badgelər (Təsdiqli və ID) */
.user-badges-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.badge-chip, .id-chip {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
.badge-chip.verified {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.badge-chip.unverified {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    transition: 0.3s;
}
.badge-chip.unverified:hover {
    background: #ef4444;
    color: #fff;
}
.id-chip {
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}


/* --- Naviqasiya Menyusu --- */
.gmx-sidebar-navigation {
    padding: 20px;
}
.nav-list-main {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Menyu Başlıqları (Labels) */
.nav-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 12px;
    margin-bottom: 6px;
}
.nav-label.mt-4 { margin-top: 16px; }

/* Linklər */
.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

/* İkon Qutuları */
.nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    color: var(--text-muted);
    transition: 0.3s;
}

/* Rəngli İkon Klassları (Köhnədə qoyduğun rənglər üçün) */
.nav-icon.pink { color: #ec4899; }
.nav-icon.blue { color: #3b82f6; }
.nav-icon.green { color: #10b981; }
.nav-icon.orange { color: #f97316; }
.nav-icon.cyan { color: #06b6d4; }
.nav-icon.purple { color: #a855f7; }
.nav-icon.indigo { color: #6366f1; }
.nav-icon.red { color: #ef4444; }
.nav-icon.gold { color: #eab308; }

/* Link Hover Effekti */
.nav-link:hover {
    background: var(--bg-surface-hover, var(--bg-body));
    border-color: var(--border-color);
    transform: translateX(4px);
}
.nav-link:hover .nav-icon {
    background: var(--bg-surface);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Aktiv Link (Seçilmiş Səhifə) */
.nav-link.active {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 6px 20px var(--brand-glow);
}
.nav-link.active .nav-icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Çıxış Düyməsi Xüsusi */
.nav-link.text-danger { color: #ef4444; }
.nav-link.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}
.nav-link.text-danger:hover .nav-icon {
    background: #ef4444;
    color: #fff;
}

/* Badge / Hədiyyə Sayı */
.pulse-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 99px;
    animation: pulse 2s infinite;
}
.nav-link.active .pulse-badge {
    background: #fff;
    color: var(--brand-primary);
    animation: none;
}


/* =========================================================
   RESPONSIVE (MOBIL GÖRÜNÜŞ)
   ========================================================= */
@media (max-width: 768px) {
    .gmx-sidebar {
        position: relative; /* Mobildə scrolla minməsin */
        top: 0;
        margin-bottom: 20px;
    }
    
    /* Mobildə ilk öncə menyu içini gizlədirik ki, toggle ilə açılsın */
    .gmx-sidebar-inner {
        display: none; 
    }
    
    /* Toggle butonu basılanda bura JS ilə .is-open classı düşəcək və görünəcək */
    .gmx-sidebar.is-open .gmx-sidebar-inner {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    .gmx-user-profile-box {
        padding: 24px 20px 20px 20px;
    }
    .nav-link {
        padding: 10px 12px;
    }
}

/* Ekran böyük olanda d-md-none işləyəcək, amma biz yenə də toggle-i sığortalayırıq */
@media (min-width: 769px) {
    .gmx-sidebar-toggle {
        display: none;
    }
}


/* =========================================================
   GMX USER SETTINGS (AYARLAR SƏHİFƏSİ) 
   ========================================================= */

.gmx-settings-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 50px;
}

.gmx-settings-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.3s ease;
}
body.dark .gmx-settings-card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); }

.gmx-settings-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 95%, var(--text-main) 5%);
}

.gmx-settings-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}
.gmx-settings-title i {
    color: #f97316;
    font-size: 18px;
}

.gmx-settings-chip {
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gmx-settings-body { padding: 30px; }

/* Avatar Qismi */
.gmx-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
}
.gmx-avatar-box {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}
.gmx-avatar-clip {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--bg-surface);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    background: var(--bg-body);
}
.gmx-avatar-clip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* KÜÇÜK NARINCI QƏLƏM İKONU */
.gmx-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
    border: 3px solid var(--bg-surface) !important;
    transition: transform 0.3s;
}
.gmx-avatar-edit-btn:hover { transform: scale(1.15) rotate(10deg); }

.gmx-avatar-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* DÜYMƏLƏR - Dark mode-da rəngləri itməsin deyə !important verildi */
.gmx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none !important;
}
.gmx-btn--orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3) !important;
}
.gmx-btn--orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.5) !important;
}
.gmx-btn--ghost-danger {
    background: transparent !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}
.gmx-btn--ghost-danger:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
}

/* FORMLAR - İç-içə girməməsi üçün */
.gmx-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 30px;
    margin-bottom: 20px;
}
.gmx-form-section-title {
    grid-column: 1 / -1;
    margin: 30px 0 20px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
}
.gmx-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px; /* Sığorta olaraq boşluq qoyuruq */
}

.gmx-form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0.5px;
}
.gmx-form-label .gmx-btn { padding: 6px 12px; font-size: 11px; border-radius: 8px; }

.gmx-form-input, .gmx-form-select {

    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    outline: none;
}
.gmx-form-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

.gmx-form-input:focus, .gmx-form-select:focus {
    border-color: #f97316;
    background: var(--bg-surface);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15);
}

.gmx-form-input[readonly], .gmx-form-input[disabled] {
    background: color-mix(in srgb, var(--bg-body) 90%, #000 10%);
    color: var(--text-muted);
    cursor: not-allowed;
    border-color: transparent;
}
body.dark .gmx-form-input[readonly], 
body.dark .gmx-form-input[disabled] {
    background: color-mix(in srgb, var(--bg-body) 90%, #fff 5%);
}

.gmx-form-actions {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .gmx-settings-card__head, .gmx-settings-body { padding: 20px; }
    .gmx-avatar-wrap { flex-direction: column; text-align: center; gap: 15px; }
    .gmx-avatar-actions { justify-content: center; }
    .gmx-form-grid-2 { grid-template-columns: 1fr; gap: 15px; }
    .gmx-form-actions { justify-content: center; }
    .gmx-form-actions .gmx-btn { width: 100%; }
}

/* =========================================================
   ACCOUNT TABS (ŞƏXSİ MƏLUMATLAR / ŞİFRƏ DƏYİŞDİRMƏ)
   ========================================================= */

.acc-tabs {
    display: flex;
     gap: 4px;
    align-items: center;
    margin-bottom: 15px; 
    overflow-x: auto; 
    padding-top: 10px;   
    padding-bottom: 15px; 
    padding-left: 4px;   
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

/* Sürüşmə zolağını gizlətmək (daha təmiz görünüş üçün) */
.acc-tabs::-webkit-scrollbar {
    display: none;
}
.acc-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}



.acc-tabs__link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
    white-space: nowrap; /* Mətnin alt sətirə düşməsinin qarşısını alır */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
body.dark .acc-tabs__link {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.acc-tabs__icon {
    font-size: 16px;
    transition: color 0.3s ease;
}

/* Hover Effekti */
.acc-tabs__link:hover {
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-color));
    color: var(--text-main);
    transform: translateY(-2px);
}
.acc-tabs__link:hover .acc-tabs__icon {
    color: var(--brand-primary);
}

/* Aktiv Tab Effekti */
.acc-tabs__link--active {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 20px var(--brand-glow) !important;
}

.acc-tabs__link--active .acc-tabs__icon {
    color: #fff !important;
}



/* =========================================================
   PUAN (BONUS) ÇEVİRİCİ XÜSUSİ GRİDİ
   ========================================================= */
.gmx-puan-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: end; /* Inputların alt-alta eyni xətdə durması üçün */
    gap: 15px;
    margin-bottom: 20px;
}

.gmx-puan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 50px; /* Inputla eyni hündürlükdə olmalıdır */
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    color: var(--text-muted);
    font-size: 16px;
    margin-bottom: 2px;
}

@media (max-width: 768px) {
    .gmx-puan-grid {
        grid-template-columns: 1fr; /* Mobildə alt-alta düzülüş */
        align-items: center;
        gap: 20px;
    }
    
    .gmx-puan-icon {
        height: 30px;
        border: none;
        background: transparent;
        margin: -10px auto; /* İkonlar inputların arasına girsin */
        transform: rotate(90deg); /* Ox və bərabər işarəsi aşağı baxsın */
    }
}


/* =========================================================
   GMX GIFTS LIST (HƏDİYYƏLƏR SİYAHISI)
   ========================================================= */

.gmx-gift-list {
    display: flex;
    flex-direction: column;
}

.gmx-gift-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    border-bottom: 1px dashed var(--border-color);
    transition: background 0.3s ease;
}
.gmx-gift-item:last-child {
    border-bottom: none;
}
.gmx-gift-item:hover {
    background: color-mix(in srgb, var(--brand-primary) 2%, transparent);
}

.gmx-gift-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gmx-gift-thumb {
    width: 65px;
    height: 65px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    padding: 4px;
}

.gmx-gift-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gmx-gift-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
}

.gmx-gift-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.gmx-gift-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gmx-gift-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 140px;
}

/* Xəbərdarlıq / İzləmə Statusu (Sarı-Narıncı Badge) */
.gmx-status-badge.warning {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* =========================================================
   RESPONSİVE (MOBİL GÖRÜNÜŞ)
   ========================================================= */
@media (max-width: 768px) {
    .gmx-gift-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 15px;
    }
    
    .gmx-gift-left {
        width: 100%;
        gap: 15px;
    }
    
    .gmx-gift-thumb {
        width: 55px;
        height: 55px;
    }
    
    .gmx-gift-right {
        width: 100%;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        border-top: 1px solid var(--border-color);
        padding-top: 15px;
        margin-top: 5px;
    }

    /* Mobildə "Hədiyyəni Al" düyməsi tam genişlikdə dursun */
    .gmx-gift-right .gmx-btn {
        width: auto !important;
        flex: 1;
    }
    .gmx-gift-right .gmx-status-badge {
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   GMX GIVEAWAY (ÇƏKİLİŞLƏR) KARTLARI
   ========================================================= */

.gmx-giveaway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gmx-gw-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
body.dark .gmx-gw-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.gmx-gw-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-color));
}

.gmx-gw-head {
    position: relative;
    width: 100%;
    height: 150px;
    background: var(--bg-body);
}
.gmx-gw-head img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gmx-gw-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}
.gmx-gw-badge {
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(5px);
}
.gmx-gw-badge.type { background: rgba(34, 197, 94, 0.85); } /* Yaşıl */
.gmx-gw-badge.price { background: rgba(249, 115, 22, 0.85); } /* Narıncı */
.gmx-gw-badge.ended { background: rgba(239, 68, 68, 0.85); } /* Qırmızı */

.gmx-gw-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gmx-gw-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 15px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hədiyyələr Listi (Scroll) */
.gmx-gw-prizes {
    display: flex;
    flex-wrap: nowrap; /* VACİB: Elementlərin alt-alta düşməsinin qarşısını alır */
    gap: 8px;
    overflow-x: auto; /* Sağa sürüşməni aktiv edir */
    padding-bottom: 5px;
    margin-bottom: 15px;
    -webkit-overflow-scrolling: touch; /* Mobildə axıcı sürüşdürmə effekti */
    scrollbar-width: none; /* Firefox-da scroll xəttini gizlədir */
}
.gmx-gw-prizes::-webkit-scrollbar { 
    display: none; /* Chrome/Safari-də scroll xəttini gizlədir */
}
.gmx-gw-prize-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 8px;
    flex-shrink: 0; /* VACİB: Kartların əzilməyib öz ölçüsündə qalmasını təmin edir */
    transition: 0.2s;
    text-decoration: none;
}
.gmx-gw-prize-item:hover { 
    border-color: var(--brand-primary); 
}
.gmx-gw-prize-img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
}
.gmx-gw-prize-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

/* İştirakçı və Qazanan Sayı */
.gmx-gw-stats {
    display: flex;
    justify-content: space-between;
    background: var(--bg-body);
    padding: 10px 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}
.gmx-gw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.gmx-gw-stat span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; }
.gmx-gw-stat strong { font-size: 14px; color: var(--text-main); font-weight: 900; }

/* Geri Sayım */
.gmx-gw-timer {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 20px;
    margin-top: auto;
}
.gmx-gw-time-box {
    flex: 1;
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
}
.gmx-gw-time-box .val { font-size: 14px; font-weight: 900; color: var(--brand-primary); }
.gmx-gw-time-box .lbl { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

/* Düymələr Qrupu */
.gmx-gw-footer {
    display: flex;
    gap: 10px;
}
.gmx-gw-btn-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: 12px;
    font-size: 16px;
    transition: 0.3s;
}
.gmx-gw-btn-icon:hover { background: var(--brand-primary); color: #fff; border-color: transparent; }

/* Modal Dizaynı */
.gmx-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.gmx-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.gmx-modal-box { position: relative; z-index: 10; background: var(--bg-surface); width: 90%; max-width: 400px; border-radius: 20px; padding: 20px; border: 1px solid var(--border-color); }
.gmx-modal-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 15px; }
.gmx-modal-close { background: none; border: none; font-size: 24px; color: var(--text-muted); cursor: pointer; }
.gmx-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center; }
.share-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; padding: 10px; border-radius: 12px; transition: background 0.3s; }
.share-item:hover { background: var(--bg-body); }
.share-item i { font-size: 24px; }
.share-item span { font-size: 12px; color: var(--text-main); font-weight: 600; }



/* =========================================================
   GMX GIVEAWAY DETAILS (ÇƏKİLİŞ DETALLARI)
   ========================================================= */

.gmx-cd-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
    padding-bottom: 50px;
}

/* Sol Tərəf (Əsas) */
.gmx-cd-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.02);
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
body.dark .gmx-cd-card { box-shadow: 0 4px 25px rgba(0,0,0,0.15); }

/* Başlıq qismi */
.gmx-cd-header {
    display: flex;
    padding: 30px;
    gap: 25px;
    border-bottom: 1px dashed var(--border-color);
    align-items: center;
}
.gmx-cd-img-box {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-body);
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    padding: 5px;
}
.gmx-cd-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}
.gmx-cd-ended-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gmx-cd-ended-overlay span {
    background: #ef4444;
    color: #fff;
    padding: 6px 15px;
    border-radius: 10px;
    font-weight: 900;
    font-size: 13px;
    transform: rotate(-15deg);
    border: 2px solid #fff;
}

.gmx-cd-info {
    flex: 1;
}
.gmx-cd-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

/* Badgelər */
.gmx-cd-badges-cek {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gmx-badge-cek {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.gmx-badge-cek.type { background: rgba(34, 197, 94, 0.1); color: #10b981; border-color: rgba(34, 197, 94, 0.2); }
.gmx-badge-cek.free { background: rgba(234, 179, 8, 0.1); color: #eab308; border-color: rgba(234, 179, 8, 0.2); }

/* Statistika */
.gmx-cd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 30px;
    border-bottom: 1px dashed var(--border-color);
}
.gmx-cd-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    background: var(--bg-body);
    padding: 15px 10px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.gmx-cd-stat-box span { font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
.gmx-cd-stat-box strong { font-size: 18px; color: var(--text-main); font-weight: 900; }

/* Böyük Timer */
.gmx-cd-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 30px;
    background: color-mix(in srgb, var(--brand-primary) 3%, transparent);
}
.gmx-cd-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--bg-surface);
    border: 2px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border-color));
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.gmx-cd-time-box .val { font-size: 28px; font-weight: 900; color: var(--brand-primary); line-height: 1; }
.gmx-cd-time-box .lbl { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-top: 5px; }
.gmx-cd-time-sep { font-size: 30px; font-weight: 900; color: var(--text-muted); opacity: 0.5; margin-bottom: 15px; }

/* Düymələr */
.gmx-cd-actions {
    display: flex;
    gap: 15px;
    padding: 30px;
    border-top: 1px dashed var(--border-color);
}

/* Sağ Tərəf (Sidebar) Listləri */
.gmx-cd-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.gmx-list-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
body.dark .gmx-list-card { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.gmx-list-head {
    padding: 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-surface) 95%, var(--text-main) 5%);
    display: flex;
    align-items: center;
    gap: 10px;
}
.gmx-list-body {
    display: flex;
    flex-direction: column;
}
.gmx-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px dashed var(--border-color);
}
.gmx-list-item:last-child { border-bottom: none; }
.gmx-user-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
.gmx-meta { font-size: 11px; color: var(--text-muted); font-weight: 600; }

.gmx-list-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px dashed var(--border-color);
    text-decoration: none;
    transition: 0.3s;
}
.gmx-list-link:last-child { border-bottom: none; }
.gmx-list-link:hover { background: color-mix(in srgb, var(--brand-primary) 3%, transparent); }
.gmx-link-text { font-size: 13px; font-weight: 700; color: var(--text-main); }
.gmx-list-link i { color: var(--brand-primary); font-size: 12px; }

.gmx-empty-text {
    padding: 30px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* =========================================================
   RESPONSİVE (MOBİL)
   ========================================================= */
@media (max-width: 1024px) {
    .gmx-cd-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .gmx-cd-header {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .gmx-cd-badges-cek {
        justify-content: center;
    }
    .gmx-cd-stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px;
    }
    .gmx-cd-timer {
        padding: 20px 10px;
        gap: 5px;
    }
    .gmx-cd-time-box {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }
    .gmx-cd-time-box .val { font-size: 20px; }
    .gmx-cd-time-sep { font-size: 20px; margin-bottom: 10px; }
    .gmx-cd-actions {
        flex-direction: column;
        padding: 20px;
    }
}
/* =========================================================
   GMX ALERTS (ŞÜŞƏ EFFEKTLİ BİLDİRİŞLƏR)
   ========================================================= */
.gmx-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    border-radius: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}
.gmx-alert-success {
    background: color-mix(in srgb, #10b981 10%, transparent);
    border: 1px solid color-mix(in srgb, #10b981 20%, transparent);
    color: #10b981;
}
.gmx-alert-danger {
    background: color-mix(in srgb, #ef4444 10%, transparent);
    border: 1px solid color-mix(in srgb, #ef4444 20%, transparent);
    color: #ef4444;
}
.gmx-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s;
}
.gmx-alert-close:hover {
    opacity: 1;
    transform: scale(1.1);
}
/* =========================================================
   GMX ÇƏKİLİŞ DETALLARI: MƏHSUL SÜRÜŞDÜRMƏ (SCROLL)
   ========================================================= */

/* Gridin sağa doğru daşmasının/cırılmasının qarşısını 100% alır */
.gmx-cd-main { 
    min-width: 0; 
    width: 100%; 
}

/* Ana çərçivə (Sürüşməni idarə edir) */
.gmx-cd-prizes-wrapper {
    width: 100%;
    border-bottom: 1px dashed var(--border-color);
    padding: 20px 30px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: thin; /* Firefox üçün */
}

/* Mouse ilə dartarkən (JS ilə işləyir) */
.gmx-cd-prizes-wrapper.is-dragging { 
    cursor: grabbing; 
}
.gmx-cd-prizes-wrapper.is-dragging * { 
    user-select: none; 
}

/* PC üçün çox zərif və incə sürüşdürmə xətti */
.gmx-cd-prizes-wrapper::-webkit-scrollbar {
    display: block; 
    height: 6px; 
}
.gmx-cd-prizes-wrapper::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-radius: 10px;
}
.gmx-cd-prizes-wrapper::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-primary) 50%, transparent);
    border-radius: 10px;
    cursor: pointer;
}
.gmx-cd-prizes-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

/* Sürüşən sahənin içindəki məzmun (Track) */
.gmx-cd-prizes-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    width: max-content; /* Məhsulları sıxılmaqdan qoruyan QIZIL KOD */
    padding-bottom: 12px; /* Scrollbar üçün altda boşluq yaradır */
}

/* Hər bir məhsul kartı */
.gmx-cd-prize-item {
    flex: 0 0 auto; /* Kartların əzilməməsini və öz ölçüsünü qorumasını təmin edir */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 14px;
    transition: 0.3s;
    text-decoration: none;
}
.gmx-cd-prize-item:hover {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
    transform: translateY(-2px);
}

.gmx-cd-prize-img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
}

.gmx-cd-prize-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap; /* Yazının alt-alta düşməsini QƏTİ əngəlləyir */
}

/* Mobil tənzimləmə */
@media (max-width: 768px) {
    .gmx-cd-prizes-wrapper {
        padding: 15px 20px;
    }
}

/* =========================================================
   GMX PREMIUM TABLE (CƏDVƏLLƏR ÜÇÜN)
   ========================================================= */

.gmx-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gmx-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    white-space: nowrap; /* Mobildə yazıların sınmasının qarşısını alır */
}

/* Başlıqlar */
.gmx-table thead th {
    padding: 15px 25px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-body);
}

/* Sətirlər */
.gmx-table tbody td {
    padding: 18px 25px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    border-bottom: 1px dashed var(--border-color);
    vertical-align: middle;
}
.gmx-table tbody tr:last-child td {
    border-bottom: none;
}
.gmx-table tbody tr:hover td {
    background: color-mix(in srgb, var(--brand-primary) 2%, transparent);
}

/* Cədvəl daxili İstifadəçi bloku */
.gmx-table-user {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gmx-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
}
.gmx-user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gmx-user-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
}
.gmx-user-id {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

/* Tarix */
.gmx-table-date {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Badgelər (Status) */
.gmx-table-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}
.gmx-table-badge.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.gmx-table-badge.badge-warning {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

/* Xüsusi Düymələr (Cədvəl üçün kiçik) */
.gmx-btn--sm {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 10px;
}
.gmx-btn--ghost-primary {
    background: transparent !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    color: #3b82f6 !important;
}
.gmx-btn--ghost-primary:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
}

/* Pagination Qutusu */
.gmx-pagination-wrapper {
    padding: 20px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--border-color);
}

/* =========================================================
   GMX PREMIUM CHAT (YAZIŞMA EKRANI)
   ========================================================= */

.gmx-chat-layout {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: 700px; /* Chat qutusunun ümumi hündürlüyü */
    max-height: 80vh;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    overflow: hidden;
}
body.dark .gmx-chat-layout {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Chat Başlığı */
.gmx-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: color-mix(in srgb, var(--bg-surface) 95%, var(--text-main) 5%);
    border-bottom: 1px solid var(--border-color);
}
.gmx-chat-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.gmx-chat-avatar {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}
.gmx-chat-user-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gmx-chat-username {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}
.gmx-chat-status {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
}

/* Chat İçərisi (Scrollable) */
.gmx-chat-body {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--bg-body);
    scrollbar-width: thin;
}
.gmx-chat-body::-webkit-scrollbar { width: 6px; }
.gmx-chat-body::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

.gmx-chat-loadmore {
    text-align: center;
    margin-bottom: 20px;
}
.gmx-chat-loadmore .gmx-btn {
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 12px;
    border: 1px dashed var(--border-color) !important;
}

/* Mesaj Balonları (Bubbles) */
.gmx-msg-wrap {
    display: flex;
    width: 100%;
}
.gmx-msg-wrap.sent { justify-content: flex-end; }
.gmx-msg-wrap.received { justify-content: flex-start; }
.gmx-msg-wrap.admin { justify-content: flex-start; }

.gmx-msg-bubble {
    max-width: 70%;
    padding: 12px 18px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* Sənin göndərdiyin mesajlar */
.gmx-msg-wrap.sent .gmx-msg-bubble {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}
/* Sənə gələn mesajlar (User) */
.gmx-msg-wrap.received .gmx-msg-bubble {
    background: var(--bg-surface);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
}
/* Admin / Support mesajları */
.gmx-msg-wrap.admin .gmx-msg-bubble {
    background: color-mix(in srgb, #3b82f6 5%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, #3b82f6 20%, transparent);
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

.gmx-msg-admin-label {
    font-size: 10px;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.gmx-msg-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.gmx-msg-time {
    display: flex;
    justify-content: flex-end;
    font-size: 10px;
    font-weight: 600;
    margin-top: 5px;
    opacity: 0.7;
}

/* Fayl əlavəsi dizaynı */
.gmx-msg-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
    transition: 0.3s;
}
.gmx-msg-wrap.received .gmx-msg-file, .gmx-msg-wrap.admin .gmx-msg-file {
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
}
.gmx-msg-file:hover { opacity: 0.8; }

/* Boş Vəziyyət */
.gmx-chat-empty {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
}
.gmx-chat-empty i { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }
.gmx-chat-empty p { font-size: 14px; font-weight: 600; }

/* Chat Yazma Qismi (Footer) */
.gmx-chat-footer {
    padding: 20px 30px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
}
.gmx-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px 15px;
    transition: 0.3s;
}
.gmx-chat-input-wrap:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.gmx-chat-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    padding-top: 10px;
}
.gmx-chat-input::placeholder { color: var(--text-muted); }

.gmx-chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-gradient);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px var(--brand-glow);
}
.gmx-chat-send-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .gmx-chat-layout { height: calc(100vh - 100px); border-radius: 0; border-left: none; border-right: none; }
    .gmx-chat-header, .gmx-chat-body, .gmx-chat-footer { padding: 15px; }
    .gmx-msg-bubble { max-width: 85%; }
}

/* =========================================================
   GMX CONTACT PAGE (ƏLAQƏ SƏHİFƏSİ)
   ========================================================= */

.gmx-contact-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-bottom: 50px;
    margin-top: 10px;
}

/* Info Grid (3-lü Kart Düzülüşü) */
.gmx-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Kart Dizaynı */
.gmx-contact-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
body.dark .gmx-contact-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.gmx-contact-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

/* İkon Qutusu */
.gmx-contact-icon {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

/* Məlumat Mətnləri */
.gmx-contact-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.gmx-contact-title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.gmx-contact-text {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.4;
    word-break: break-word; /* Uzun emaillərin daşmaması üçün */
}

/* Xəritə Qutusu (Map) */
.gmx-contact-map {
    width: 100%;
    height: 450px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
body.dark .gmx-contact-map {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.gmx-contact-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    display: block;
    filter: grayscale(20%); /* Xəritənin dizayna daha yaxşı oturması üçün yüngül solğunluq */
    transition: 0.3s;
}
.gmx-contact-map:hover iframe {
    filter: grayscale(0%);
}

/* =========================================================
   RESPONSİVE (MOBİL)
   ========================================================= */
@media (max-width: 1024px) {
    .gmx-contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .gmx-contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .gmx-contact-card {
        padding: 20px;
    }
    .gmx-contact-icon {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }
    .gmx-contact-text {
        font-size: 14px;
    }
    .gmx-contact-map {
        height: 350px;
        border-radius: 20px;
    }
}


/* =========================================================
   GMX PREMIUM ORDERS (SİFARİŞLƏRİM)
   ========================================================= */

/* Statistika Kartı (Total) */
.gmx-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.gmx-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.gmx-stat-value { font-size: 24px; font-weight: 900; }
.gmx-stat-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }

/* Filtr Barı */
.gmx-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: var(--bg-surface);
    padding: 15px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 25px;
    align-items: center;
}

.gmx-input-icon-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.gmx-input-icon-wrap i {
    position: absolute;
    left: 16px; /* İkonun soldan məsafəsi */
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none; /* İkona kliklənmənin qarşısını alır ki, input rahat seçilsin */
    z-index: 2;
}

/* "pl-icon" klassı olan bütün inputların mətnini sağa itələyirik */
.gmx-input-icon-wrap input.pl-icon,
.gmx-input-icon-wrap .gmx-form-input.pl-icon {
    padding-left: 35px !important; 
}

.gmx-filter-actions { display: flex; gap: 10px; }

/* Sifariş Kartı Əsas */
.gmx-order-list { display: flex; flex-direction: column; gap: 15px; }
.gmx-order-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: 0.3s;
}
.gmx-order-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-color)); }

/* Kartın Başlığı */
.gmx-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
.gmx-order-head-left { display: flex; align-items: center; gap: 20px; }
.gmx-order-thumb { width: 65px; height: 65px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border-color); }
.gmx-order-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0 0 4px 0; }
.gmx-order-subtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }

.gmx-order-meta-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gmx-tag {
    background: var(--bg-body); border: 1px solid var(--border-color);
    padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.gmx-tag i { color: var(--brand-primary); margin-right: 4px; }

.gmx-order-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gmx-order-price { font-size: 18px; font-weight: 900; color: var(--text-main); }
.gmx-order-price span { font-size: 12px; color: var(--text-muted); font-weight: 700; }

/* Status Badgeləri */
.gmx-status-badge { padding: 5px 12px; border-radius: 10px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.gmx-status-success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.gmx-status-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.gmx-status-info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }
.gmx-status-warning { background: rgba(249, 115, 22, 0.1); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.2); }

/* Kartın İçərisi (Detallar) */
.gmx-order-details {
    border-top: 1px dashed var(--border-color);
    background: color-mix(in srgb, var(--bg-body) 50%, transparent);
    padding: 20px;
}
.gmx-order-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 13px; }
.gmx-order-notes .note-item { background: var(--bg-surface); padding: 10px 15px; border-radius: 10px; border: 1px solid var(--border-color); }

/* E-PIN Bölməsi */
.gmx-epin-section { border: 1px solid var(--brand-primary); border-radius: 14px; overflow: hidden; }
.gmx-epin-header {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent); padding: 12px 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.gmx-epin-title { font-size: 13px; font-weight: 800; color: var(--brand-primary); }
.gmx-epin-actions { display: flex; gap: 5px; }
.gmx-btn-icon { width: 32px; height: 32px; background: var(--bg-surface); border: 1px solid var(--brand-primary); color: var(--brand-primary); border-radius: 8px; cursor: pointer; transition: 0.2s; }
.gmx-btn-icon:hover { background: var(--brand-primary); color: #fff; }

.gmx-epin-list { display: flex; flex-direction: column; }
.gmx-epin-item {
    display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px dashed color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.gmx-epin-item:last-child { border-bottom: none; }
.gmx-epin-num { width: 30px; font-size: 12px; font-weight: 800; color: var(--text-muted); }
.gmx-epin-code { flex: 1; font-family: monospace; font-size: 15px; font-weight: 700; color: var(--text-main); letter-spacing: 1px; }
.gmx-btn-inline { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.gmx-btn-inline:hover { background: var(--text-main); color: var(--bg-body); border-color: var(--text-main); }

/* TOAST (Bildiriş) */
.gmx-toast-msg {
    position: fixed; bottom: 30px; right: 30px; background: var(--text-main); color: var(--bg-body);
    padding: 12px 25px; border-radius: 12px; font-size: 14px; font-weight: 700;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); transform: translateY(50px); opacity: 0;
    transition: all 0.3s ease; z-index: 9999; pointer-events: none;
}
.gmx-toast-msg.show { transform: translateY(0); opacity: 1; }

/* =========================================================
   RESPONSİVE (MOBİL) - SİFARİŞLƏRİM
   ========================================================= */
@media (max-width: 768px) {
    .gmx-order-head { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
        padding: 15px;
    }
    .gmx-order-head-left {
        align-items: flex-start;
        width: 100%;
    }
    .gmx-order-thumb {
        width: 55px;
        height: 55px;
    }
    .gmx-order-meta-tags {
        flex-direction: column; /* Tagları şəkildəki kimi alt-alta yığır */
        gap: 6px;
        margin-top: 5px;
    }
    .gmx-tag {
        width: fit-content;
        padding: 4px 12px;
    }
    
    /* Qiymət, Status və Düymə Qismi */
    .gmx-order-head-right { 
        width: 100%; 
        flex-direction: row; 
        flex-wrap: wrap; /* Elementlərin sığmadıqda aşağı düşməsinə icazə verir */
        justify-content: space-between; 
        align-items: center; 
        border-top: 1px dashed var(--border-color); 
        padding-top: 15px; 
        gap: 10px;
    }
    .gmx-order-price {
        font-size: 16px;
    }
    .gmx-status-badge {
        margin-left: auto; /* Statusu sağa itələyir */
    }
    .gmx-order-head-right .gmx-btn { 
        width: 100%; /* Detallar düyməsini tam genişlikdə alt sətrə salır */
        flex: 0 0 100%;
        justify-content: center;
        margin-top: 5px;
    }

    /* E-PIN Hissəsi Mobildə */
    .gmx-epin-header { 
        flex-direction: column; 
        gap: 10px; 
        align-items: flex-start; 
    }
    .gmx-epin-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .gmx-epin-item {
        flex-wrap: wrap;
        gap: 10px;
    }
    .gmx-epin-code {
        word-break: break-all; /* Uzun kodların cədvəli qırmasının qarşısını alır */
        font-size: 14px;
    }
    .gmx-btn-inline {
        width: 100%;
        justify-content: center;
        margin-top: 5px;
    }
}
/* =========================================================
   GMX TOAST BİLDİRİŞ (Kopyalama və s. üçün xüsusi)
   ========================================================= */
.gmx-toast-msg {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); /* Premium narıncı qradient */
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4);
    transform: translateY(100px); /* Başlanğıcda aşağıda gizlənir */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Gözəl yaylanma effekti */
    z-index: 999999; /* Hər şeyin üstündə qalsın deyə */
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* =========================================================
   GMX TOAST BİLDİRİŞ (YUXARI SAĞ KÜNC)
   ========================================================= */
.gmx-toast-msg {
    position: fixed;
    top: 80px; /* Ekranın üstündən nə qədər aşağıda çıxacağı (headerin altına düşməməsi üçün) */
    right: 30px; /* Sağdan boşluq */
    bottom: auto; /* Alt ayarını ləğv edirik */
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4);
    transform: translateY(-100px); /* Əvvəl aşağıda gizlənirdi, indi yuxarıda (mənfi dəyər) gizlənir */
    opacity: 0;                   
    visibility: hidden;           
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 999999;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* JS "show" klassını əlavə edəndə aktiv olur */
.gmx-toast-msg.show {
    transform: translateY(0);    /* Öz yerinə qayıdır */
    opacity: 1 !important;       
    visibility: visible !important; 
}

/* Mobildə tam yuxarı ortada çıxması üçün */
@media (max-width: 768px) {
    .gmx-toast-msg {
        top: 30px; /* Mobildə yuxarıdan boşluq */
        bottom: auto;
        right: 50%;
        transform: translate(50%, -100px); /* Mərkəzləyib yuxarıda gizlədir */
        width: max-content;
        max-width: 90vw;
        padding: 12px 24px;
        font-size: 14px;
    }
    .gmx-toast-msg.show {
        transform: translate(50%, 0); /* Mərkəzdə qalaraq aşağı enir */
    }
}


/* =========================================================
   GMX ÖDƏMƏ (SİFARİŞ) DETALLARI SƏHİFƏSİ
   ========================================================= */

/* Grid Məlumat Cədvəli */
.gmx-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.gmx-info-item {
    background: color-mix(in srgb, var(--bg-body) 50%, transparent);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gmx-info-item .label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gmx-info-item .label i {
    margin-right: 5px;
    color: var(--brand-primary);
}

.gmx-info-item .value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

/* Kopyalama Qutusu (Banka IBAN və s. üçün) */
.gmx-copy-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    padding: 15px 20px;
    border-radius: 12px;
    gap: 15px;
}

.gmx-copy-box strong {
    font-size: 15px;
    color: var(--text-main);
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .gmx-copy-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .gmx-copy-box .gmx-btn-inline {
        width: 100%;
        text-align: center;
    }
}


/* =========================================================
   GMX TRANSACTIONS (BALANS HƏRƏKƏTLƏRİ)
   ========================================================= */

.gmx-trans-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gmx-trans-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.gmx-trans-item:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-color));
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.gmx-trans-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gmx-trans-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    flex-shrink: 0;
}

.gmx-trans-info h4 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
}

.gmx-trans-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.gmx-trans-meta span {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.gmx-trans-right {
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: right;
}

.gmx-trans-amount {
    font-size: 18px;
    font-weight: 900;
}

.gmx-trans-amount small {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .gmx-trans-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
    }
    .gmx-trans-right {
        width: 100%;
        justify-content: space-between;
        border-top: 1px dashed var(--border-color);
        padding-top: 12px;
        margin-top: 5px;
    }
    .is-mobile-hide {
        display: none !important; /* Mobildə status yazısı çox yer tutmasın deyə gizlədirik (rənglər bəs edir) */
    }
}


/* =========================================================
   GMX PREMIUM ALERTS & TOASTS (Success, Danger, Info)
   ========================================================= */

/* Ümumi Alert Modulu */
.alert {
    position: relative;
    padding: 16px 25px;
    margin-bottom: 25px;
    border: 1px solid transparent;
    border-radius: 16px; /* Modern dairəvi künclər */
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px); /* Şüşə effekti */
    transition: all 0.3s ease;
    animation: gmxAlertFadeIn 0.4s ease;
}

/* Uğur Mesajı (Success) */
.alert-success {
    background: rgba(16, 185, 129, 0.1); /* Şəffaf yaşıl */
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}
.alert-success i {
    color: #10b981;
    font-size: 18px;
}

/* Xəta Mesajı (Danger) */
.alert-danger {
    background: rgba(239, 68, 68, 0.1); /* Şəffaf qırmızı */
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}
.alert-danger i {
    color: #ef4444;
    font-size: 18px;
}

/* Alert daxilindəki P teqi */
.alert p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

/* Bağlama düyməsi (Close Button) */
.alert .close, 
.alert .btn-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    transition: 0.2s;
    padding: 0;
    margin: 0;
}

.alert .close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* Giriş Animasiyası */
@keyframes gmxAlertFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobil tənzimləmə */
@media (max-width: 768px) {
    .alert {
        padding: 14px 20px;
        font-size: 13px;
        border-radius: 12px;
    }
}

/* =========================================================
   GMX PREMIUM TICKET (DƏSTƏK TƏLƏBİ VƏ CHAT) DİZAYNI
   ========================================================= */

.gmx-ticket-wrapper {
    display: flex;
    gap: 20px;
    height: 650px; /* Chat ekranının hündürlüyü */
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

/* --- SOL TƏRƏF: SİYAHI --- */
.gmx-ticket-sidebar {
    width: 320px;
    background: color-mix(in srgb, var(--bg-body) 30%, transparent);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.gmx-ticket-sidebar-head {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gmx-ticket-sidebar-head h5 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-main); }

.gmx-ticket-list {
    flex: 1;
    overflow-y: auto;
}
.gmx-ticket-list::-webkit-scrollbar { width: 4px; }

.gmx-ticket-card {
    display: flex;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: 0.2s;
    text-decoration: none;
    position: relative;
}
.gmx-ticket-card:hover { background: color-mix(in srgb, var(--bg-surface) 50%, #fff); }
.gmx-ticket-card.active { background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border-left: 3px solid var(--brand-primary); }

/* Oxunmamış mesaj nöqtəsi */
.gmx-ticket-card.unread::after {
    content: ''; position: absolute; top: 15px; right: 15px;
    width: 10px; height: 10px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 8px rgba(239,68,68,0.5);
}

.ticket-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ticket-info { flex: 1; overflow: hidden; }
.ticket-info-top { display: flex; justify-content: space-between; margin-bottom: 5px; }
.ticket-info-top h6 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-info-top small { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ticket-info p { margin: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- SAĞ TƏRƏF: CHAT --- */
.gmx-chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
}

.gmx-chat-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-subject h4 { margin: 0 0 5px 0; font-size: 16px; font-weight: 800; color: var(--text-main); }
.chat-meta-tags .tag { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-right: 10px; }

/* Mesajlar Qutusu */
.gmx-chat-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: color-mix(in srgb, var(--bg-body) 20%, transparent);
}

.gmx-msg { display: flex; gap: 10px; max-width: 80%; }
.gmx-msg.is-admin { align-self: flex-start; }
.gmx-msg.is-user { align-self: flex-end; justify-content: flex-end; }

.gmx-msg .msg-avatar img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.gmx-msg .msg-bubble {
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.gmx-msg.is-admin .msg-bubble {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-top-left-radius: 4px;
}
.gmx-msg.is-admin .msg-sender { display: block; font-size: 12px; color: var(--brand-primary); margin-bottom: 5px; }

.gmx-msg.is-user .msg-bubble {
    background: var(--brand-primary);
    color: #fff;
    border-top-right-radius: 4px;
}

.gmx-msg .msg-time { display: block; font-size: 10px; opacity: 0.7; text-align: right; margin-top: 5px; }
.gmx-msg .msg-file-link {
    display: inline-block; margin-top: 8px; padding: 6px 12px; background: rgba(0,0,0,0.1); 
    border-radius: 8px; font-size: 12px; font-weight: 700; color: inherit; text-decoration: none;
}

/* Göndərmə Qutusu */
.gmx-chat-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}
.chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 5px;
}
.chat-input-wrap textarea {
    flex: 1; border: none; background: transparent; resize: none; padding: 10px 15px; 
    font-size: 14px; color: var(--text-main); height: 50px; max-height: 120px; outline: none;
}
.chat-actions { display: flex; align-items: center; gap: 5px; padding-bottom: 5px; padding-right: 5px; }
.chat-actions .file-upload-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.chat-actions .file-upload-btn:hover { color: var(--brand-primary); }
.chat-actions .send-btn { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; }

.closed-notice { text-align: center; color: var(--text-muted); font-weight: 600; font-size: 13px; }

/* Mobil Dizayn */
@media (max-width: 992px) {
    .gmx-ticket-wrapper { flex-direction: column; height: calc(100vh - 100px); }
    .gmx-ticket-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); max-height: 30%; }
    .gmx-chat-area { max-height: 70%; }
    .gmx-msg { max-width: 95%; }
}

/* =========================================================
   GMX DİZAYN FIXLƏRİ (Empty State, İkonlu Inputlar, Mobil Daşmalar)
   ========================================================= */

/* 1. İKONLU İNPUTLARIN YAZI BOŞLUĞU (Qəti Həll) */
.gmx-input-icon-wrap input,
.gmx-input-icon-wrap .gmx-form-input {
    padding-left: 46px !important;
}

/* 2. BOŞ SƏHİFƏ (EMPTY STATE) MƏRKƏZLƏMƏSİ */
.gmx-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 40vh;
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    padding: 40px 20px;
    margin: 20px auto;
}
.gmx-empty-state lottie-player {
    margin: 0 auto; /* Animasiyanın tam ortada qalmasını təmin edir */
}

/* 3. MOBİL EKRAN TƏNZİMLƏMƏLƏRİ */
@media (max-width: 768px) {
    
    /* Sifarişlərim Kartı (Düymənin qırılmaması üçün) */
    .gmx-order-head-right {
        display: flex;
        flex-direction: column !important; /* Yan-yana sığışmadığı üçün alt-alta salırıq */
        align-items: flex-start !important;
        width: 100%;
        gap: 10px;
    }
    .gmx-order-head-right .gmx-status-badge {
        margin-left: 0 !important;
    }
    .gmx-order-head-right .gmx-btn,
    .gmx-order-head-right button {
        width: 100% !important;
        display: flex;
        justify-content: center;
        margin-top: 5px;
    }

    /* Səhifələmənin (Pagination) Ekrandan Daşmasının Qarşısının Alınması */
    .rv-pagination nav .pagination,
    ul.pagination {
        flex-wrap: wrap !important; /* Rəqəmlər sığmayanda avtomatik alt sətrə keçəcək */
        justify-content: center !important;
        padding: 10px !important;
        height: auto !important;
    }
}


/* =========================================================
   GMX TICKET CREATE (YENİ TƏLƏB YARAT) DİZAYNI
   ========================================================= */

/* Simvol Sayğacı */
.gmx-char-count {
    position: absolute;
    right: 5px;
    bottom: -22px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    transition: 0.3s ease color;
}

/* Fayl Yükləmə Qutusu (Dropzone) */
.gmx-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 14px;
    padding: 30px 20px;
    text-align: center;
    background: var(--bg-body);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gmx-dropzone:hover, 
.gmx-dropzone.is-dragover {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--bg-body));
}

/* Görünməz Input (Bütün qutunu əhatə edir) */
.gmx-dropzone input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Dropzone İçərisi */
.gmx-dropzone-content {
    position: relative;
    z-index: 5;
    pointer-events: none; /* Kliklərin birbaşa inputa getməsi üçün */
}

.gmx-dropzone-content i {
    font-size: 38px;
    color: var(--text-muted);
    margin-bottom: 12px;
    transition: 0.3s ease color;
}

.gmx-dropzone:hover .gmx-dropzone-content i,
.gmx-dropzone.is-dragover .gmx-dropzone-content i {
    color: var(--brand-primary);
}

.gmx-dropzone-content h6 {
    margin: 0 0 5px 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
}

.gmx-dropzone-content p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}


/* =========================================================
   GMX STREAMERS (YAYIMÇILAR VİTRİNİ) - TAM DİZAYN
   ========================================================= */

.gmx-streamer-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    width: 100%;
}

/* Sol Sidebar */
.gmx-streamer-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gmx-sidebar-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden; /* Sığışmayan elementlərin kənara çıxmasını əngəlləyir */
}

.gmx-sidebar-title {
    margin: 0 0 15px 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gmx-cat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gmx-cat-btn {
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gmx-cat-btn:hover {
    background: color-mix(in srgb, var(--bg-body) 50%, transparent);
    color: var(--text-main);
}

.gmx-cat-btn.active {
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
    border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* Sağ Grid Məzmunu */
.gmx-streamer-main {
    flex: 1;
    width: 100%;
    min-width: 0; /* Qutunun daşmasının (Blowout) qarşısını alır */
    display: block;
}

.gmx-streamer-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}
.gmx-streamer-topbar h4 { margin: 0; font-weight: 900; color: var(--text-main); display: flex; align-items: center; }

.gmx-streamer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* Yayımçı Kartı */
.gmx-streamer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: 0.3s ease;
    position: relative;
}

.gmx-streamer-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-primary);
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15);
}

.st-cover {
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-body);
    position: relative;
}
.st-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
}

.st-body {
    padding: 0 20px 20px 20px;
    text-align: center;
    position: relative;
    margin-top: -35px;
}

.st-avatar-wrap {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px auto;
    position: relative;
    z-index: 2;
}

.st-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg-surface);
    background: var(--bg-body);
}

.st-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--brand-primary);
    animation: stPulse 2s infinite;
    z-index: -1;
}

@keyframes stPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

.st-name {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==============================================
   MOBİL DİZAYN (Səhifənin yoxa çıxma problemi üçün fix)
   ============================================== */

@media (max-width: 992px) {
    .gmx-streamer-layout { 
        flex-direction: column; 
        gap: 20px;
    }
    .gmx-streamer-sidebar { width: 100%; }
    .gmx-streamer-main { width: 100%; } /* İtən div-i məcbur 100% ilə yerinə qaytarır */
}

@media (max-width: 768px) {
    /* 1. Kateqoriyalar horizontal (sağa sürüşən) formatda */
    .gmx-cat-list {
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Alt sətrə düşməsinə icazə vermir! */
        overflow-x: auto;
        padding-bottom: 8px;
        gap: 10px;
        scrollbar-width: none;
    }
    .gmx-cat-list::-webkit-scrollbar { display: none; }
    .gmx-cat-btn {
        width: auto;
        white-space: nowrap; /* Mətnin qırılmasını əngəlləyir */
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 12px;
        background: var(--bg-body);
        border: 1px solid var(--border-color);
    }

    /* 2. Topbar */
    .gmx-streamer-topbar {
        flex-direction: row !important;
        align-items: center;
        margin-bottom: 20px;
        gap: 10px;
    }
    .gmx-streamer-topbar h4 { font-size: 16px; }
    .gmx-streamer-topbar .gmx-btn { padding: 8px 12px; font-size: 12px; white-space: nowrap; }

    /* 3. Grid - Yan yana 2 kart (App görünüşü) */
    .gmx-streamer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* 4. Kart elementləri (Mobilə uyğun kiçildirilir) */
    .gmx-streamer-card { border-radius: 12px; }
    .st-cover { height: 70px; }
    .st-body { padding: 0 10px 15px 10px; margin-top: -30px; }
    .st-avatar-wrap { width: 50px; height: 50px; margin-bottom: 8px; }
    .st-avatar { border-width: 2px; }
    .st-name { font-size: 13px; }
    .st-body .gmx-btn { padding: 8px; font-size: 11px; margin-top: 10px !important; }
}

/* Çox dar ekranlar (iPhone SE və s.) */
@media (max-width: 380px) {
    .gmx-streamer-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   GMX STREAMER APPLICATION FORM DİZAYNI
   ========================================================= */

/* Birləşdirilmiş Input (Məsələn: site.com/donate/ [input]) */
.gmx-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.gmx-input-group-text {
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--bg-body));
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border-color);
    border-right: none;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    white-space: nowrap;
}

.gmx-input-group .gmx-form-input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 15px !important; /* İkon olmadığı üçün padding normala qayıdır */
    flex: 1;
    min-width: 0;
}

.gmx-input-group .gmx-form-input:focus {
    position: relative;
    z-index: 2; /* Focus olanda border bütöv görünsün deyə önə çəkirik */
}

/* Streamlabs Bağlantı Qutusu */
.gmx-streamlabs-box {
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gmx-streamlabs-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(49, 195, 166, 0.1);
    color: #31C3A6;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

/* Canlı (Pulsing) Effekt */
.gmx-streamlabs-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid #31C3A6;
    animation: stAppPulse 2s infinite;
}

@keyframes stAppPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}


/* =========================================================
   GMX STREAMER DASHBOARD (YAYIMÇI PANELİ) DİZAYNI
   ========================================================= */

/* Statistika Grid-i */
.gmx-streamer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* Tab Menyusu */
.gmx-tab-nav {
    display: flex;
    gap: 5px;
    padding: 15px 20px 0 20px;
}

.gmx-tab-nav::-webkit-scrollbar {
    display: none; /* Mobildə üfüqi scrollu gizlədir */
}

.gmx-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 15px 12px 15px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.gmx-tab-btn.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* Tab İçərisi Animasiya */
@keyframes gmxFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .gmx-streamer-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   GMX PUBLIC STREAMER PROFILE (YAYIMÇI PROFİLİ)
   ========================================================= */

.gmx-streamer-profile-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Sol (Pleyer və Profil) */
.gmx-streamer-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.gmx-streamer-header-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.gmx-streamer-header-card .st-avatar-wrap {
    width: 80px; height: 80px;
    position: relative;
}
.gmx-streamer-header-card .st-avatar {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--bg-surface); z-index: 2; position: relative;
}
.gmx-streamer-header-card .st-info h1 {
    margin: 0 0 5px 0; font-size: 22px; font-weight: 900; color: var(--text-main);
}
.gmx-streamer-header-card .st-badge {
    background: rgba(239, 68, 68, 0.1); color: #ef4444; font-size: 12px; font-weight: 700;
    padding: 4px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px;
}

.gmx-player-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* Video formatı */
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Sağ (Donate Qutusu) */
.gmx-streamer-right {
    width: 380px;
    flex-shrink: 0;
}

.gmx-donate-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    position: sticky;
    top: 100px;
}

.gmx-donate-head { text-align: center; margin-bottom: 25px; }
.gmx-donate-head h4 { margin: 0 0 5px 0; font-size: 18px; font-weight: 800; color: var(--text-main); }
.gmx-donate-head p { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Hazır Məbləğ Düymələri */
.gmx-donate-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 15px;
}
.gmx-amt-btn {
    background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-main);
    border-radius: 10px; padding: 10px 0; font-size: 13px; font-weight: 700; cursor: pointer; transition: 0.2s;
}
.gmx-amt-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.gmx-donate-rules p {
    font-size: 11px; color: var(--text-muted); margin: 0 0 5px 0; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4;
}

/* Confirm Popup CSS */
.gmx-confirm-box { background: var(--bg-body); border-radius: 12px; padding: 15px; }
.gmx-confirm-box .row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.gmx-confirm-box .row:last-child { margin-bottom: 0; }
.gmx-confirm-box .label { color: var(--text-muted); }
.gmx-confirm-box .val { color: var(--text-main); font-weight: 700; }
.gmx-confirm-box .message-row { flex-direction: column; gap: 5px; }
.gmx-confirm-box .message-row .val { font-weight: normal; background: rgba(0,0,0,0.05); padding: 10px; border-radius: 8px; }

/* Mobil Dizayn */
@media (max-width: 992px) {
    .gmx-streamer-profile-layout { flex-direction: column; }
    .gmx-streamer-right { width: 100%; }
    .gmx-donate-card { position: static; }
}
/* =========================================================
   GMX BLOG INDEX (ANA SƏHİFƏ) DİZAYNI
   ========================================================= */

/* Hero Section (5 Məqaləli Tərzi) */
.gmx-blog-hero {
    display: flex;
    gap: 15px;
    height: 450px;
}
.gmx-blog-hero img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }
.gmx-bh-content, .gmx-bh-item-content {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.9)); z-index: 2;
}

.gmx-bh-main {
    flex: 2; position: relative; border-radius: 16px; overflow: hidden;
}
.gmx-bh-main:hover img { transform: scale(1.05); }
.gmx-bh-main h2 { color: #fff; font-size: 24px; font-weight: 900; margin: 10px 0 0 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.gmx-badge-blog { background: var(--brand-primary); color: #fff; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }

.gmx-bh-side {
    flex: 1; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); gap: 15px;
}
.gmx-bh-item {
    position: relative; border-radius: 12px; overflow: hidden;
}
.gmx-bh-item:hover img { transform: scale(1.05); }
.gmx-bh-item h4 { color: #fff; font-size: 13px; font-weight: 700; margin: 0 0 5px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gmx-bh-item span { color: #ccc; font-size: 10px; }

/* Slider Section */
.gmx-blog-slider { position: relative; border-radius: 16px; overflow: hidden; height: 400px; }
.gmx-slider-track { display: flex; height: 100%; transition: transform 0.5s ease; }
.gmx-slider-item { min-width: 100%; position: relative; }
.gmx-slider-item img { width: 100%; height: 100%; object-fit: cover; }
.gmx-slider-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 30px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); }
.gmx-slider-content h2 a { color: #fff; font-size: 28px; font-weight: 900; text-decoration: none; }
.gmx-slider-content p { color: #ccc; font-size: 13px; margin: 10px 0 0 0; }
.gmx-slider-nav { position: absolute; bottom: 20px; right: 30px; display: flex; gap: 8px; }
.gmx-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; cursor: pointer; transition: 0.3s; }
.gmx-dot.active { background: var(--brand-primary); width: 25px; border-radius: 10px; }

/* Main Layout (Məqalələr + Sidebar) */
.gmx-blog-layout { display: flex; gap: 30px; align-items: flex-start; }
.gmx-blog-main { flex: 1; min-width: 0; }
.gmx-blog-sidebar { width: 320px; flex-shrink: 0; }

.gmx-blog-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; }
.gmx-blog-head h3 { margin: 0; font-weight: 800; font-size: 20px; color: var(--text-main); }
.gmx-view-controls { display: flex; gap: 5px; background: var(--bg-surface); padding: 5px; border-radius: 10px; border: 1px solid var(--border-color); }
.gmx-view-btn { background: transparent; border: none; color: var(--text-muted); width: 35px; height: 35px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.gmx-view-btn:hover { color: var(--text-main); }
.gmx-view-btn.active { background: var(--brand-primary); color: #fff; }

/* Grid və List Görünüşü */
.gmx-blog-list { display: grid; gap: 20px; }
.gmx-blog-list.view-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gmx-blog-list.view-list { grid-template-columns: 1fr; }

.gmx-blog-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; transition: 0.3s; }
.gmx-blog-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.gmx-blog-card .gb-img { display: block; height: 180px; overflow: hidden; }
.gmx-blog-card .gb-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gmx-blog-card:hover .gb-img img { transform: scale(1.05); }
.gmx-blog-card .gb-body { padding: 20px; }
.gmx-blog-card h4 { margin: 0 0 10px 0; font-size: 16px; font-weight: 800; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gmx-blog-card h4 a { color: var(--text-main); text-decoration: none; transition: 0.2s; }
.gmx-blog-card h4 a:hover { color: var(--brand-primary); }
.gmx-blog-card p { font-size: 13px; color: var(--text-muted); margin: 0 0 15px 0; line-height: 1.5; }
.gb-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); font-weight: 600; border-top: 1px dashed var(--border-color); padding-top: 12px; }

/* List Görünüşündə Dəyişikliklər */
.gmx-blog-list.view-list .gmx-blog-card { display: flex; align-items: center; }
.gmx-blog-list.view-list .gb-img { width: 250px; height: 100%; flex-shrink: 0; }
.gmx-blog-list.view-list .gb-body { flex: 1; }

/* Sosial Şəbəkələr */
.gmx-blog-social { background: var(--bg-surface); padding: 15px 20px; border-radius: 12px; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px; }
.gmx-blog-social span { font-size: 14px; font-weight: 700; color: var(--text-main); }
.gb-social-links { display: flex; gap: 10px; }
.gb-social-links a { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background: var(--bg-body); border-radius: 50%; color: var(--text-muted); transition: 0.3s; }
.gb-social-links a:hover { background: var(--brand-primary); color: #fff; transform: translateY(-3px); }

/* Mobil Dizayn */
@media (max-width: 992px) {
    .gmx-blog-layout { flex-direction: column; }
    .gmx-blog-sidebar { width: 100%; }
    .gmx-blog-hero { flex-direction: column; height: auto; }
    .gmx-bh-side { grid-template-columns: 1fr 1fr; }
    .gmx-bh-item { height: 120px; }
    .gmx-blog-list.view-list .gmx-blog-card { flex-direction: column; align-items: stretch; }
    .gmx-blog-list.view-list .gb-img { width: 100%; height: 200px; }
}


/* =========================================================
   GMX BLOG SIDEBAR (TOP 5 WIDGET) DİZAYNI
   ========================================================= */

.gmx-sidebar-widget {
    width: 100%;
}

.gmx-widget-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
}

.gmx-widget-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}

.gmx-widget-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.gmx-widget-badge i {
    font-size: 14px;
    animation: gmxFire 2s infinite alternate;
}

@keyframes gmxFire {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.1); opacity: 1; }
}

.gmx-top5-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gmx-top5-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px;
    margin: -8px; /* Paddingə görə kənarları tarazlayır */
}

.gmx-top5-item:hover {
    background: color-mix(in srgb, var(--bg-body) 80%, transparent);
}

.gmx-top5-rank {
    font-size: 20px;
    font-weight: 900;
    color: var(--border-color);
    width: 20px;
    text-align: center;
    transition: 0.3s;
}
.gmx-top5-item:hover .gmx-top5-rank {
    color: var(--brand-primary);
}

.gmx-top5-thumb {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
}

.gmx-top5-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.gmx-top5-item:hover .gmx-top5-thumb img {
    transform: scale(1.1);
}

.gmx-top5-info {
    flex: 1;
    min-width: 0; /* Mətnin daşmasının qarşısını alır */
}

.gmx-top5-title {
    margin: 0 0 5px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: 0.3s;
}

.gmx-top5-item:hover .gmx-top5-title {
    color: var(--brand-primary);
}

.gmx-top5-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.gmx-top5-arrow {
    color: var(--text-muted);
    font-size: 12px;
    transition: 0.3s;
    opacity: 0;
    transform: translateX(-10px);
}

.gmx-top5-item:hover .gmx-top5-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--brand-primary);
}
/* =========================================================
   GMX BLOG SINGLE (MƏQALƏ DETAL SƏHİFƏSİ) DİZAYNI
   ========================================================= */

.gmx-blog-single-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.gmx-blog-single-main {
    flex: 1;
    min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
}

.gmx-blog-single-sidebar {
    width: 320px;
    flex-shrink: 0;
}

/* Header (Başlıq hissəsi) */
.gmx-single-header {
    margin-bottom: 25px;
}
.gmx-single-meta {
    display: flex; gap: 10px; margin-bottom: 15px;
}
.gmx-single-meta .badge {
    background: rgba(59, 130, 246, 0.1); color: #3b82f6; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
}

.gmx-single-title {
    font-size: 32px; font-weight: 900; color: var(--text-main); margin: 0 0 10px 0; line-height: 1.3;
}
.gmx-single-subtitle {
    font-size: 15px; color: var(--text-muted); margin: 0 0 20px 0; line-height: 1.6;
}

/* Action Düymələri (Like / Share) */
.gmx-single-actions {
    display: flex; gap: 10px; padding-bottom: 20px; border-bottom: 1px dashed var(--border-color);
}
.gmx-single-actions .gmx-btn {
    padding: 8px 15px; font-size: 13px; font-weight: 800; border-radius: 10px; display: flex; align-items: center; gap: 8px;
}
.js-gmx-like-btn.is-liked {
    background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2);
}

/* Cover (Əsas Şəkil) */
.gmx-single-cover {
    margin: 0 0 30px 0; width: 100%; border-radius: 14px; overflow: hidden;
}
.gmx-single-cover img {
    width: 100%; max-height: 450px; object-fit: cover; display: block;
}

/* İçərik (Prose - Məqalə mətni) */
.gmx-prose {
    font-size: 16px; line-height: 1.8; color: var(--text-main);
}
.gmx-prose h2, .gmx-prose h3 { font-weight: 800; margin: 30px 0 15px 0; color: var(--text-main); }
.gmx-prose p { margin: 0 0 20px 0; }
.gmx-prose img { max-width: 100%; border-radius: 12px; margin: 20px 0; }
.gmx-prose a { color: var(--brand-primary); text-decoration: underline; }
.gmx-prose blockquote { border-left: 4px solid var(--brand-primary); padding-left: 15px; margin: 20px 0; font-style: italic; color: var(--text-muted); background: var(--bg-body); padding: 15px; border-radius: 0 12px 12px 0; }

/* Tövsiyə Olunanlar (Related) */
.gmx-related-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; }
.gmx-related-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.gmx-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.gmx-related-item {
    display: flex; gap: 15px; background: var(--bg-body); padding: 12px; border-radius: 12px; text-decoration: none; border: 1px solid var(--border-color); transition: 0.3s;
}
.gmx-related-item:hover { border-color: var(--brand-primary); transform: translateY(-3px); }
.gr-thumb { width: 90px; height: 70px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.gr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gr-info { display: flex; flex-direction: column; justify-content: center; }
.gr-info h4 { margin: 0 0 5px 0; font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gr-info span { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* Share Modal Sosial Düymələr */
.gmx-share-socials { display: flex; justify-content: center; gap: 15px; }
.gmx-social-btn { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; transition: 0.3s; }
.gmx-social-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.gmx-social-btn.fb { background: #1877F2; }
.gmx-social-btn.tw { background: #1DA1F2; }
.gmx-social-btn.wp { background: #25D366; }
.gmx-social-btn.tg { background: #0088cc; }

/* Mobil Dizayn */
@media (max-width: 992px) {
    .gmx-blog-single-layout { flex-direction: column; }
    .gmx-blog-single-main { padding: 20px; }
    .gmx-blog-single-sidebar { width: 100%; }
    .gmx-single-title { font-size: 24px; }
    .gmx-related-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   GMX DOCUMENTATION (QURUMSAL SƏHİFƏLƏR) DİZAYNI
   ========================================================= */

.gmx-doc-layout {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
}

.gmx-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
    gap: 20px;
}

.gmx-doc-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
}

.gmx-doc-cover {
    width: 100%;
    margin: 0 0 30px 0;
    border-radius: 14px;
    overflow: hidden;
}

.gmx-doc-cover img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* Əgər blok-blok strukturdursa (Static page) */
.gmx-doc-blocks {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.gmx-doc-block {
    display: flex;
    gap: 30px;
    align-items: center;
    background: color-mix(in srgb, var(--bg-body) 50%, transparent);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

/* Blokların istiqamətini bir sağdan, bir soldan etmək üçün: */
.gmx-doc-block:nth-child(even) {
    flex-direction: row-reverse;
}

.doc-block-media {
    width: 40%;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.doc-block-media img {
    width: 100%;
    height: auto;
    display: block;
    transition: 0.3s;
}

.gmx-doc-block:hover .doc-block-media img {
    transform: scale(1.05);
}

.doc-block-content {
    flex: 1;
}

/* Əgər tək mətn hissəsidirsə */
.gmx-doc-text {
    max-width: 900px;
    margin: 0 auto; /* Mətni mərkəzə yığır ki, göz yorulmasın */
}

/* Mobil Dizayn */
@media (max-width: 992px) {
    .gmx-doc-layout {
        padding: 20px;
    }
    .gmx-doc-header {
        flex-direction: column;
    }
    .gmx-doc-title {
        font-size: 24px;
    }
    .gmx-doc-block, .gmx-doc-block:nth-child(even) {
        flex-direction: column;
    }
    .doc-block-media {
        width: 100%;
    }
}
/* =========================================================
   GMX 404 ERROR PAGE (XƏTA SƏHİFƏSİ) DİZAYNI
   ========================================================= */

.gmx-error-card {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 60px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.gmx-error-icon {
    font-size: 80px;
    color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    margin-bottom: 20px;
    animation: gmxFloat 3s ease-in-out infinite;
}

.gmx-error-code {
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--brand-primary), #ff914d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
}

.gmx-error-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 15px;
}

.gmx-error-desc {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 35px;
    line-height: 1.6;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.gmx-error-btn {
    padding: 14px 35px;
    font-size: 16px;
    border-radius: 50px;
}

/* Xəyalət (Ghost) İkonu üçün yuxarı-aşağı uçma animasiyası */
@keyframes gmxFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Mobil Görünüş */
@media (max-width: 768px) {
    .gmx-error-card { 
        padding: 40px 20px; 
        border-radius: 16px; 
    }
    .gmx-error-code { font-size: 80px; }
    .gmx-error-icon { font-size: 60px; }
    .gmx-error-title { font-size: 20px; }
    .gmx-error-desc { max-width: 100%; font-size: 14px; margin-bottom: 25px; }
}

/* =========================================================
   GMX DEALS OF THE DAY (GÜNÜN FÜRSƏTLƏRİ) DİZAYNI
   ========================================================= */

.gmx-deals-wrapper { padding: 20px 0; }

/* Header & Timer */
.gmx-deals-header {
    text-align: center;
    margin-bottom: 40px;
    background: var(--bg-surface);
    padding: 40px 20px;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}
.gmx-deals-header::before {
    content: ''; position: absolute; top: -50%; left: -10%; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(239,68,68,0.1) 0%, transparent 70%); border-radius: 50%; z-index: 0;
}

.deals-title { font-size: 32px; font-weight: 900; color: var(--text-main); margin-bottom: 25px; position: relative; z-index: 1; }

.deals-timer-box {
    display: inline-flex; gap: 20px; align-items: center; position: relative; z-index: 1;
}
.dt-item { display: flex; flex-direction: column; align-items: center; }
.dt-val {
    background: var(--bg-body); color: var(--text-main); font-size: 32px; font-weight: 900;
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    border-radius: 16px; border: 2px solid var(--border-color);
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.05);
}
.dt-label { font-size: 11px; color: var(--text-muted); margin-top: 10px; text-transform: uppercase; font-weight: 800; }
.dt-sep { font-size: 32px; font-weight: 900; color: var(--text-muted); margin-bottom: 30px; }

/* Product Grid */
.gmx-deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 25px;
}

.gmx-deal-card {
    background: var(--bg-surface); border-radius: 16px; border: 1px solid var(--border-color);
    overflow: hidden; transition: 0.3s; display: flex; flex-direction: column; height: 100%; position: relative;
}
.gmx-deal-card:hover {
    transform: translateY(-5px); border-color: var(--brand-primary); box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15);
}

.deal-img-wrapper { position: relative; width: 100%; padding-top: 100%; overflow: hidden; background: var(--bg-body); }
.deal-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gmx-deal-card:hover .deal-img { transform: scale(1.05); }

.deal-badge { position: absolute; top: 10px; right: 10px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px; z-index: 2; }
.deal-cart-qty { position: absolute; top: 10px; left: 10px; background: var(--brand-primary); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; z-index: 2; }

.deal-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.deal-title { font-size: 15px; font-weight: 800; color: var(--text-main); margin-bottom: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; transition: 0.2s; }
.deal-title:hover { color: var(--brand-primary); }
.deal-rating { font-size: 13px; color: #f59e0b; margin-bottom: 15px; font-weight: 700; }
.deal-price-box { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.deal-old-price { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.deal-price { font-size: 20px; font-weight: 900; color: var(--brand-primary); }

.deal-actions { display: grid; grid-template-columns: 1fr 50px; gap: 10px; padding: 0 20px 20px 20px; }

/* Upcoming (Sabahın Fürsətləri) */
.gmx-upcoming-deals { border-top: 1px dashed var(--border-color); padding-top: 40px; }
.upcoming-title { font-size: 22px; font-weight: 900; color: var(--text-main); margin-bottom: 25px; text-align: center; }
.upcoming-wrapper { position: relative; }
.upcoming-grid { filter: grayscale(100%) blur(3px); opacity: 0.5; pointer-events: none; user-select: none; }
.lock-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;
    background: var(--bg-surface); padding: 15px 30px; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px;
    font-weight: 800; color: var(--text-main); border: 2px solid var(--border-color); font-size: 16px;
}

@media (max-width: 768px) {
    .deals-title { font-size: 24px; }
    .dt-val { width: 60px; height: 60px; font-size: 24px; }
    .gmx-deals-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .deal-body { padding: 15px; }
    .deal-title { font-size: 13px; }
    .deal-price { font-size: 16px; }
    .deal-actions { padding: 0 15px 15px 15px; }
}


/* =========================================================
   GMX PACKAGES (PAKETLƏR) DİZAYNI
   ========================================================= */

.gmx-pkg-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

.gmx-pkg-sidebar {
    background: var(--bg-surface);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    position: sticky;
    top: 20px;
}

/* =========================================================
   GMX PRICE SLIDER - ABSOLUTE FIX (TAM DÜZƏLİŞ)
   ========================================================= */
.gmx-slider-box { 
    padding: 0 10px; 
    margin: 30px 0 25px 0; 
    position: relative;
}

/* Track (Xətt) */
.gmx-slider-box .ui-slider {
    height: 6px !important;
    background: var(--bg-body) !important;
    border: none !important;
    border-radius: 10px !important;
    position: relative !important;
    display: block !important; /* Alt-alta düşmənin qarşısını alır */
}

/* Seçilmiş aralıq rəngi */
.gmx-slider-box .ui-slider-range {
    background: var(--brand-primary) !important;
    position: absolute !important;
    z-index: 1 !important;
    height: 100% !important;
    top: 0 !important;
    border-radius: 10px !important;
}


.gmx-slider-box .ui-slider-handle {
    width: 20px !important; 
    height: 20px !important; 
    position: absolute !important;
    z-index: 2 !important;
    cursor: pointer !important;
    
    /* Bütün daxili boşluqları və JQuery UI ikonlarını silirik */
    box-sizing: border-box !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 3px solid var(--brand-primary) !important;
    border-radius: 50% !important;
    
    /* Mərkəzləmə (Oval olmaması üçün ən vacib hissə) */
    top: 50% !important;
    margin-top: -10px !important; /* Hündürlüyün yarısı */
    margin-left: -10px !important; /* Enin yarısı */
    
    outline: none !important;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.4) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.gmx-slider-box .ui-slider-handle:hover,
.gmx-slider-box .ui-slider-handle.ui-state-active {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.6) !important;
    background: #ffffff !important;
}


.gmx-price-inputs {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: 100% !important;
    margin-top: 20px;
}

.gmx-price-inputs .gmx-form-input {
    width: 50% !important;
    flex: 1;
    text-align: center;
    font-weight: 700;
}

.gmx-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.gmx-pkg-card {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.gmx-pkg-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

.gmx-pkg-img-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}
.gmx-pkg-img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: 0.5s;
}
.gmx-pkg-card:hover .gmx-pkg-img { transform: scale(1.1); }

.gmx-pkg-head-title {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    backdrop-filter: blur(5px);
}

.gmx-pkg-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }

.gmx-pkg-sub-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.gmx-pkg-sub-img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--border-color);
    transition: 0.2s; background: var(--bg-body);
}
.gmx-pkg-sub-item:hover .gmx-pkg-sub-img { border-color: var(--brand-primary); transform: scale(1.05); }

.gmx-pkg-footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}
.gmx-pkg-price-old { font-size: 12px; color: var(--text-muted); text-decoration: line-through; display: block; margin-bottom: 2px; }
.gmx-pkg-price-curr { font-size: 20px; font-weight: 900; color: var(--brand-primary); }

@media (max-width: 992px) {
    .gmx-pkg-layout { grid-template-columns: 1fr; }
    .gmx-pkg-sidebar { position: static; margin-bottom: 20px; }
}
@media (max-width: 576px) {
    .gmx-pkg-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .gmx-pkg-img-wrap { height: 140px; }
    .gmx-pkg-sub-list { grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .gmx-pkg-price-curr { font-size: 16px; }
}


/* =========================================================
   GMX PVP LIST (SERVERLƏR) DİZAYNI
   ========================================================= */

.gmx-pvp-header {
    text-align: center;
    margin-bottom: 40px;
    background: var(--bg-surface);
    padding: 40px 20px;
    border-radius: 24px;
    border: 1px solid var(--border-color);
}
.gmx-pvp-header h1 {
    font-size: 36px;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 10px;
}
.gmx-pvp-header h1 span {
    color: var(--brand-primary);
}
.gmx-pvp-header p {
    color: var(--text-muted);
    font-size: 16px;
    margin: 0;
}

/* Cədvəl Konteyneri (Mobildə Sağa-Sola Sürüşməsi Üçün) */
.gmx-table-wrapper {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px;
    overflow-x: auto;
    margin-bottom: 30px;
}

.gmx-table {
    width: 100%;
    min-width: 900px; /* Mobildə əzilməsin deyə */
    border-collapse: collapse;
    text-align: center;
}

.gmx-table th {
    padding: 15px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.gmx-table td {
    padding: 15px;
    font-size: 14px;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.gmx-table tbody tr {
    transition: background 0.2s;
}
.gmx-table tbody tr:hover {
    background: color-mix(in srgb, var(--bg-body) 50%, transparent);
}
.gmx-table tbody tr:last-child td {
    border-bottom: none;
}

/* PVP Özəl Elementləri */
.gmx-pvp-logo {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
}
.gmx-pvp-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gmx-pvp-link {
    color: var(--text-main);
    font-weight: 800;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
}
.gmx-pvp-link:hover {
    color: var(--brand-primary);
}

.gmx-pvp-security {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.gmx-badge-light {
    background: var(--bg-body);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

/* =========================================================
   GMX MARKETPLACE (İSTİFADƏÇİ ELANLARI) DİZAYNI
   ========================================================= */

.gmx-board-header {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gmx-board-title { font-size: 24px; font-weight: 900; color: var(--text-main); margin: 0 0 5px 0; }
.gmx-board-subtitle { color: var(--text-muted); font-size: 14px; margin: 0; }

.gmx-market-my-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Elan Qutusu */
.gmx-market-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 25px;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.gmx-market-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

.mkp-thumb {
    width: 80px; height: 80px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border-color); background: var(--bg-body);
}
.mkp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mkp-info { display: flex; flex-direction: column; gap: 8px; }
.mkp-title { font-size: 16px; font-weight: 800; color: var(--text-main); line-height: 1.3; }
.mkp-date { font-size: 12px; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }

.mkp-meta { display: flex; align-items: center; gap: 15px; margin-top: 5px; }
.mkp-price { font-size: 18px; font-weight: 900; color: var(--brand-primary); }
.mkp-price small { font-size: 12px; font-weight: 700; opacity: 0.8; }

/* Hərəkət Düymələri (Actions) */
.mkp-actions { display: flex; gap: 10px; }
.mkp-btn-action {
    width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; text-decoration: none; transition: 0.3s;
}
.mkp-btn-action.is-edit { background: var(--bg-body); color: var(--text-muted); border: 1px solid var(--border-color); }
.mkp-btn-action.is-edit:hover { background: var(--border-color); color: var(--text-main); }
.mkp-btn-action.is-star { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.mkp-btn-action.is-star:hover { background: #f59e0b; color: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3); }


/* =========================================================
   🔥 VIP VƏ PREMIUM ELAN DİZAYNLARI (GƏLƏCƏK ÜÇÜN HAZIR)
   ========================================================= */

/* VIP Elan (Qalın və Neon Narıncı Çərçivə) */
.gmx-market-item.is-vip {
    border: 2px solid var(--brand-primary);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.15);
    background: linear-gradient(to right, color-mix(in srgb, var(--brand-primary) 5%, transparent), transparent 50%);
}
.gmx-market-item.is-vip::before {
    content: 'VIP'; position: absolute; top: 10px; right: -25px;
    background: var(--brand-primary); color: #fff; font-size: 10px; font-weight: 900;
    padding: 3px 25px; transform: rotate(45deg); letter-spacing: 1px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* PREMIUM Elan (Qalın Bənövşəyi / Qızılı Çərçivə) */
.gmx-market-item.is-premium {
    border: 2px solid #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
    background: linear-gradient(to right, rgba(139, 92, 246, 0.05), transparent 50%);
}
.gmx-market-item.is-premium::before {
    content: 'PREMIUM'; position: absolute; top: 12px; right: -30px;
    background: #8b5cf6; color: #fff; font-size: 9px; font-weight: 900;
    padding: 3px 30px; transform: rotate(45deg); letter-spacing: 1px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Mobil Görünüş */
@media (max-width: 768px) {
    .gmx-board-header { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
    .gmx-market-item { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .mkp-thumb { margin: 0 auto; width: 100px; height: 100px; }
    .mkp-meta { justify-content: center; }
    .mkp-actions { justify-content: center; width: 100%; border-top: 1px dashed var(--border-color); padding-top: 15px; margin-top: 10px; }
}

/* GMX Empty State (Boş Ekran) */
.gmx-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: color-mix(in srgb, var(--bg-surface) 50%, transparent);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gmx-empty-state svg {
    width: 80px;
    height: 80px;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 20px;
}

.gmx-empty-state h4 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
}

.gmx-empty-state p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 25px;
}
/* =========================================================
   GMX MARKETPLACE INDEX (BAZAR) DİZAYNI & VIP SİSTEMİ
   ========================================================= */

/* Canlı Axın (Live Feed) */
.gmx-live-feed-wrap {
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.lf-header { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-right: 15px; border-right: 1px solid var(--border-color); }
.lf-pulse { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: gmxPulse 1.5s infinite; }
.lf-label { font-weight: 800; color: var(--text-main); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.lf-close-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.lf-close-btn:hover { color: #ef4444; }

.gmx-live-swiper { width: 100%; overflow: hidden; }
.lf-item {
    display: inline-flex; align-items: center; gap: 10px; background: var(--bg-body);
    padding: 6px 12px; border-radius: 50px; text-decoration: none; border: 1px solid var(--border-color);
    transition: 0.2s;
}
.lf-item:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.lf-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lf-info { display: flex; flex-direction: column; }
.lf-title-time { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-main); }
.lf-title-time small { color: var(--text-muted); font-weight: 500; }
.lf-price { font-size: 13px; font-weight: 800; color: var(--brand-primary); }

/* Bazar Layout (Sidebar + Main) */
.gmx-market-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.gmx-market-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px; }

/* Widget / Filtlər */
.gmx-market-widget {
    background: var(--bg-surface); border-radius: 16px; border: 1px solid var(--border-color); padding: 20px;
}
.mw-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.mw-cat-list { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; padding-right: 5px; }
.mw-cat-list::-webkit-scrollbar { width: 4px; }
.mw-cat-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.mw-cat-list li a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
    color: var(--text-main); font-weight: 600; font-size: 13px; transition: 0.2s;
}
.mw-cat-list li a:hover { background: var(--bg-body); color: var(--brand-primary); }
.mw-cat-list li a img { width: 20px; height: 20px; object-fit: contain; }

/* Elanlar Siyahısı */
.gm-top-actions { display: flex; gap: 15px; }
.gmx-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

/* Standart Elan Kartı */
.gm-card {
    background: var(--bg-surface); border-radius: 16px; border: 1px solid var(--border-color);
    overflow: hidden; display: flex; flex-direction: column; transition: 0.3s; position: relative;
}
.gm-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: var(--brand-primary); }

.gm-card-img { position: relative; width: 100%; padding-top: 70%; display: block; overflow: hidden; background: var(--bg-body); }
.gm-card-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gm-card:hover .gm-card-img img { transform: scale(1.05); }

.gm-badge-new {
    position: absolute; top: 10px; left: 10px; background: #10b981; color: #fff;
    font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 6px; z-index: 2;
}

.gm-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.gm-card-title {
    font-size: 14px; font-weight: 700; color: var(--text-main); text-decoration: none; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; transition: 0.2s;
}
.gm-card-title:hover { color: var(--brand-primary); }

/* 🔥 QALIN VƏ RƏNGLİ BAŞLIQ (THICK TITLE) DİZAYNI 🔥 */
.gm-card-title.is-thick {
    font-weight: 900;
    color: #ef4444; /* Qırmızı / Neon rəng ola bilər */
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
}

.gm-card-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-card-price { margin-top: auto; font-size: 18px; font-weight: 900; color: var(--brand-primary); }
.gm-card-price small { font-size: 12px; font-weight: 700; opacity: 0.8; }

.gm-card-footer {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 15px;
    background: color-mix(in srgb, var(--bg-body) 50%, transparent); border-top: 1px solid var(--border-color);
}
.gm-card-user { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.gcu-avatar-wrap { position: relative; width: 25px; height: 25px; border-radius: 50%; }
.gcu-avatar-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gcu-status {
    position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--bg-surface);
}
.gcu-status.online { background: #10b981; }
.gcu-status.offline { background: #9ca3af; }
.gcu-name { font-size: 12px; font-weight: 700; color: var(--text-main); }
.gcu-date { font-size: 11px; color: var(--text-muted); font-weight: 600; }


.gm-card.is-vip {
    border: 2px solid #8b5cf6; /* Bənövşəyi / Premium Rəng */
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}
.gm-card.is-vip::after {
    content: 'VIP'; position: absolute; top: -1px; right: -1px;
    background: #8b5cf6; color: #fff; font-size: 9px; font-weight: 900; padding: 4px 10px;
    border-radius: 0 16px 0 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

@media (max-width: 992px) {
    .gmx-market-layout { grid-template-columns: 1fr; }
    .gmx-market-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
}
@media (max-width: 768px) {
    .gmx-live-feed-wrap { flex-direction: column; align-items: flex-start; }
    .gmx-market-sidebar { grid-template-columns: 1fr; }
    .gmx-market-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gm-card-title { font-size: 12px; }
    .gm-card-price { font-size: 14px; }
    .gcu-name { display: none; /* Mobildə yer tutmasın deyə adı gizlədirik, ancaq şəkil qalır */ }
}

/* =========================================================
   GMX SELLER PROFILE (SATICI PROFİLİ) DİZAYN
   ========================================================= */

.gmx-profile-header-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.gmx-profile-cover {
    width: 100%;
    height: 250px;
    position: relative;
    background: var(--bg-body);
}
.gmx-profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.gmx-cover-frame { position: absolute; top:0; left:0; width:100%; height:100%; background-size: cover; pointer-events:none; }

.gmx-profile-info-row {
    display: flex;
    padding: 0 40px 40px 40px;
    margin-top: -60px; /* Avatarı örtüyün üstünə çıxarır */
    gap: 30px;
    position: relative;
    z-index: 2;
}

.gmx-profile-avatar-area { flex-shrink: 0; }
.gmx-main-avatar {
    width: 150px; height: 150px; border-radius: 30px;
    background: var(--bg-surface); border: 5px solid var(--bg-surface);
    position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.gmx-main-avatar img { width: 100%; height: 100%; border-radius: 25px; object-fit: cover; }
.gmx-avatar-frame { position: absolute; top:-10px; left:-10px; width:170px; height:170px; background-size: contain; pointer-events:none; }

.gmx-status-dot {
    position: absolute; bottom: 10px; right: 10px; width: 18px; height: 18px;
    border-radius: 50%; border: 3px solid var(--bg-surface);
}
.gmx-status-dot.online { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
.gmx-status-dot.offline { background: #9ca3af; }

.gmx-profile-details { flex: 1; padding-top: 70px; display: flex; flex-direction: column; gap: 20px; }
.gmx-profile-name { font-size: 28px; font-weight: 900; color: var(--text-main); margin: 0; }
.gmx-profile-bio { font-size: 14px; color: var(--text-muted); margin: 0; max-width: 600px; }

.gmx-profile-stats { display: flex; gap: 40px; }
.stat-box { display: flex; flex-direction: column; }
.stat-box .val { font-size: 22px; font-weight: 900; color: var(--brand-primary); }
.stat-box .lbl { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

.gmx-profile-actions { margin-top: 10px; }

@media (max-width: 992px) {
    .gmx-profile-info-row { flex-direction: column; align-items: center; text-align: center; margin-top: -75px; padding: 0 20px 30px 20px; }
    .gmx-profile-details { padding-top: 10px; align-items: center; }
    .gmx-profile-stats { gap: 20px; }
}

/* =========================================================
   GMX SALES HISTORY (SATIŞLARIM) DİZAYN
   ========================================================= */

.gmx-sale-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gmx-sale-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}
.gmx-sale-item:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.gmx-sale-grid {
    display: grid;
    grid-template-columns: 1fr 300px 200px;
    gap: 30px;
    align-items: center;
}

.gmx-sale-date { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-bottom: 5px; }
.gmx-sale-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin: 0; }
.gmx-sale-meta { font-size: 13px; color: var(--text-muted); }
.gmx-sale-meta strong { color: var(--text-main); }

/* Maliyyə Qutuları */
.gmx-sale-finance {
    display: flex;
    background: var(--bg-body);
    border-radius: 12px;
    padding: 15px;
    gap: 20px;
    justify-content: space-between;
}
.finance-box { display: flex; flex-direction: column; }
.finance-box small { font-size: 10px; text-transform: uppercase; font-weight: 800; color: var(--text-muted); margin-bottom: 3px; }
.finance-box span { font-size: 14px; font-weight: 900; }
.finance-box.is-total span { color: var(--brand-primary); }

.gmx-sale-status-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1200px) {
    .gmx-sale-grid { grid-template-columns: 1fr 1fr; }
    .gmx-sale-status-area { grid-column: span 2; border-top: 1px dashed var(--border-color); padding-top: 15px; }
}

@media (max-width: 768px) {
    .gmx-sale-grid { grid-template-columns: 1fr; gap: 15px; }
    .gmx-sale-status-area { grid-column: span 1; }
    .gmx-sale-finance { flex-direction: column; gap: 10px; }
}

/* =========================================================
   GMX FRAME STORE DİZAYN
   ========================================================= */

.gmx-store-header-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.gmx-store-cover {
    width: 100%; height: 250px; position: relative; background: var(--bg-body);
}
.cover-main-img { width: 100%; height: 100%; object-fit: cover; }
.gmx-cover-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 2; }

.gmx-store-profile-area {
    display: flex; align-items: center; padding: 0 40px 30px 40px; margin-top: -60px; gap: 30px; position: relative; z-index: 5;
}

.gmx-store-avatar-box {
    width: 140px; height: 140px; position: relative; flex-shrink: 0;
}
.avatar-main-img { width: 100%; height: 100%; border-radius: 20px; border: 5px solid var(--bg-surface); object-fit: cover; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.gmx-avatar-overlay { position: absolute; top: -15px; left: -15px; width: 170px; height: 170px; pointer-events: none; z-index: 6; }

.gmx-store-info { padding-top: 60px; flex: 1; }
.gmx-store-name { font-size: 28px; font-weight: 900; color: var(--text-main); margin-bottom: 10px; }

.gmx-store-bio { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 700px; }
.bio-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bio-text.is-expanded { display: block; -webkit-line-clamp: initial; }
.bio-toggle { background: none; border: none; color: var(--brand-primary); font-weight: 800; font-size: 12px; cursor: pointer; padding: 0; margin-top: 5px; }

.gmx-store-badges { display: flex; gap: 10px; margin-top: 15px; }
.badge-item { font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 50px; text-transform: uppercase; }
.badge-item.is-pro { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.badge-item.is-cov { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

/* Frames Grid */
.gmx-frames-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 25px; }

.gmx-frame-card {
    background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 20px;
    overflow: hidden; transition: 0.3s; display: flex; flex-direction: column;
}
.gmx-frame-card:hover { transform: translateY(-7px); border-color: var(--brand-primary); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
.gmx-frame-card.is-active { border: 2px solid var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, transparent); }

.frame-preview { height: 180px; background: var(--bg-body); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border-color); }
.preview-avatar-bg { width: 90px; height: 90px; border-radius: 12px; background-size: cover; background-position: center; }
.preview-overlay { position: absolute; width: 120px; height: 120px; z-index: 2; pointer-events: none; }
.preview-cover-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.8); }
.preview-overlay-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }

.frame-body { padding: 20px; flex: 1; display: flex; flex-direction: column; text-align: center; }
.frame-title { font-size: 16px; font-weight: 800; margin-bottom: 10px; color: var(--text-main); }
.frame-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 20px; }
.tag { font-size: 10px; font-weight: 900; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
.tag.is-type { background: var(--bg-body); color: var(--text-main); }
.tag.is-life { background: #fef3c7; color: #d97706; }
.tag.is-days { background: #f3f4f6; color: #4b5563; }
.tag.is-anim { background: #ef4444; color: #fff; }

.frame-price { font-size: 20px; font-weight: 900; color: var(--brand-primary); margin-bottom: 15px; }

@media (max-width: 768px) {
    .gmx-store-header-card { border-radius: 0; }
    .gmx-store-profile-area { flex-direction: column; align-items: center; text-align: center; margin-top: -70px; }
    .gmx-store-info { padding-top: 10px; }
    .gmx-store-badges { justify-content: center; }
}

/* =========================================================
   GMX SHOP SETTINGS (MAĞAZA AYARLARI) DİZAYN
   ========================================================= */




/* =========================================================
   GMX SHOP SETTINGS (MAĞAZA AYARLARI) DİZAYN
   ========================================================= */

/* Yükləmə (Upload) Qutuları */
.gmx-media-upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.mu-box {
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mu-avatar-preview {
    width: 120px; height: 120px; position: relative; margin-bottom: 15px;
}
.mu-avatar-preview img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
    border: 3px solid var(--bg-surface); box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.mu-overlay { position: absolute; top: -10px; left: -10px; width: 140px; height: 140px; pointer-events: none; z-index: 2; }

.mu-cover-preview {
    width: 100%; height: 120px; position: relative; border-radius: 12px; overflow: hidden; background: #e2e8f0;
}
.mu-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.mu-overlay-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 2; }

.mu-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn-text-danger { background: none; border: none; color: #ef4444; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.btn-text-danger:hover { text-decoration: underline; }

/* Çərçivə və Cover Siyahısı (Grid) */
.gmx-frame-grid {
    display: grid;
    gap: 15px;
}
.gmx-avatar-frames { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gmx-cover-frames { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.gmx-frame-item {
    background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s ease; text-align: center;
}
.gmx-frame-item:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: var(--brand-primary); }
.gmx-frame-item.is-active { border: 2px solid var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, transparent); }

/* Avatar kiçik önizləmə */
.gf-avatar-preview { width: 64px; height: 64px; position: relative; margin: 15px auto 0 auto; }
.gf-avatar-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid var(--bg-surface); }
.gf-overlay { position: absolute; top: -4px; left: -4px; width: 72px; height: 72px; pointer-events: none; }

/* Cover kiçik önizləmə */
.gf-cover-preview { height: 90px; width: 100%; background: #e2e8f0; overflow: hidden; }
.gf-cover-preview img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }
.gmx-frame-item:hover .gf-cover-preview img { transform: scale(1.1); }

.gf-body { padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.gf-title { font-size: 12px; font-weight: 800; color: var(--text-main); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.gf-meta { font-size: 10px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }

/* Responsive */
@media (max-width: 768px) {
    .gmx-media-upload-grid { grid-template-columns: 1fr; }
    .gmx-avatar-frames { grid-template-columns: repeat(2, 1fr); }
    .gmx-cover-frames { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   GMX ORDER DETAILS (SİFARİŞ DETALI) DİZAYN
   ========================================================= */

.gmx-order-top-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.got-label { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.got-id { font-size: 28px; font-weight: 900; color: var(--text-main); margin: 0; }

.gmx-info-list { display: flex; flex-direction: column; gap: 12px; }
.info-item { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-muted); border-bottom: 1px dashed var(--border-color); padding-bottom: 8px; }
.info-item:last-child { border-bottom: none; }
.info-item strong { color: var(--text-main); }

/* Məhsul Sətirləri */
.gmx-order-items { display: flex; flex-direction: column; gap: 10px; }
.gmx-order-row {
    background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 12px;
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px;
}

.gor-title { font-size: 15px; font-weight: 800; color: var(--text-main); text-decoration: none; display: block; margin-bottom: 4px; }
.gor-title:hover { color: var(--brand-primary); }
.gor-meta { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* Kod/Key Sahəsi */
.gor-code-box {
    display: flex; align-items: center; background: var(--bg-surface);
    border: 1px solid var(--border-color); border-radius: 8px; padding: 4px 4px 4px 12px; gap: 15px;
}
.gor-code-box code { font-family: 'Courier New', Courier, monospace; font-size: 14px; font-weight: 700; color: var(--brand-primary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gor-copy-btn {
    background: var(--border-color); color: var(--text-main); border: none; padding: 6px 12px;
    border-radius: 6px; font-size: 11px; font-weight: 800; cursor: pointer; transition: 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.gor-copy-btn:hover { background: var(--brand-primary); color: #fff; }
.gor-copy-btn.is-copied { background: #10b981; color: #fff; }

@media (max-width: 768px) {
    .gmx-order-top-card { flex-direction: column; gap: 15px; text-align: center; }
    .gmx-order-row { flex-direction: column; text-align: center; }
    .gor-code-box { width: 100%; justify-content: space-between; }
}


/* =========================================================
   GMX PACKAGE BOOSTER (ÖNƏ ÇIXARMA) DİZAYN
   ========================================================= */

/* Aktiv Paketlər Listi */
.gmx-active-packages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pkg-active-item {
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main);
    background: var(--bg-body); padding: 8px 15px; border-radius: 10px; border: 1px solid var(--border-color);
}
.pkg-active-item i { color: #10b981; }
.pkg-active-item strong { color: var(--brand-primary); }

/* Paketlər Kart Sistemi */
.gmx-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* -------------------------------------------
   İNLINE CONFIRM (SATIN AL TƏSDİQLƏMƏSİ) 
   ------------------------------------------- */
.gmx-inline-confirm-wrap {
    position: relative;
    width: 100%;
    height: 42px; /* Düymə hündürlüyü fiks edirik ki, daşmasın */
    border-radius: 10px;
    overflow: hidden;
}

/* Ana Düymə (Məsələn: 1 Gün - 5 AZN) */
.gmx-inline-confirm-wrap .gmx-btn--outline {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: flex; align-items: center; padding: 0 15px; border-radius: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 2; background: var(--bg-body);
}

/* Təsdiqləmə Qutusu (Arxadan fırlanan/açılan qutu) */
.gmx-inline-confirm-box {
    position: absolute; inset: 0; width: 100%; height: 100%;
    background: color-mix(in srgb, var(--brand-primary) 15%, var(--bg-surface));
    border: 1px solid var(--brand-primary); border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Aktiv (Açılmış) Vəziyyət */
.gmx-inline-confirm-wrap.is-active .gmx-btn--outline {
    transform: translateY(-10px); opacity: 0; pointer-events: none;
}
.gmx-inline-confirm-wrap.is-active .gmx-inline-confirm-box {
    opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 3;
}

/* Təsdiq Düymələri (Ləğv Et / Bəli) */
.ic-actions { display: flex; gap: 5px; }
.ic-btn {
    display: inline-flex; align-items: center; gap: 5px; border: none; padding: 6px 12px;
    border-radius: 6px; font-size: 11px; font-weight: 800; cursor: pointer; text-decoration: none; transition: 0.2s;
}
.ic-cancel { background: var(--bg-body); color: var(--text-muted); border: 1px solid var(--border-color); }
.ic-cancel:hover { background: #ef4444; color: #fff; border-color: #ef4444; }
.ic-confirm { background: var(--brand-primary); color: #fff; }
.ic-confirm:hover { background: #ea580c; transform: scale(1.05); color: #fff; }

@media (max-width: 768px) {
    .gmx-packages-grid { grid-template-columns: 1fr; }
}




/* OUTLINE DÜYMƏ (Sənin axtardığın lüks düymə) */
.gmx-btn--outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-main);
}

.gmx-btn--outline:hover {
    /* Hover olanda kənarı və mətni narıncı olur, içinə çox yüngül neon narıncı fon çökür */
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.15);
}

/* Əgər aktiv (disabled/basılmış) vəziyyətdədirsə */
.gmx-btn--outline:disabled,
.gmx-btn--outline[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* =========================================================
   GMX PRODUCT EDIT (MƏHSUL REDAKTƏ) DİZAYN
   ========================================================= */

/* FAYL YÜKLƏMƏ QUTUSU (Single & Multi) */
.gmx-file-upload-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-body);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    padding: 0 15px;
    height: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gmx-file-upload-wrap:hover {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 5%, var(--bg-body));
}
.gmx-file-text {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

/* QALEREYA (Mövcud Şəkillər) */
.gmx-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
}
.gallery-item {
    position: relative;
    width: 100%;
    padding-top: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
}
.gallery-item img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.btn-remove {
    position: absolute; top: 5px; right: 5px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(239, 68, 68, 0.9); color: white;
    border: none; display: flex; align-items: center; justify-content: center;
    font-size: 10px; cursor: pointer; transition: 0.2s;
}
.btn-remove:hover { transform: scale(1.1); background: #dc2626; }

/* QALEREYA ÖNİZLƏMƏ (Yeni Seçilən Şəkillər) */
.gmx-preview-thumb {
    width: 60px; height: 60px; border-radius: 8px; object-fit: cover;
    border: 2px solid var(--bg-surface); box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.gmx-preview-rm {
    position: absolute; top: -5px; right: -5px;
    background: #ef4444; color: white; width: 18px; height: 18px;
    border-radius: 50%; font-size: 10px; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   GMX PRODUCT DETAILS (MƏHSUL İNCƏLƏMƏ) DİZAYN
   ========================================================= */

.gmx-product-header {
    display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px; border-bottom: 1px dashed var(--border-color);
}
.gph-title { font-size: 26px; font-weight: 900; color: var(--text-main); margin: 0; line-height: 1.3; }
.gph-share { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.share-btn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 0.2s; text-decoration: none; }
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.1); color: white; }
.share-btn.fb { background: #1877f2; }
.share-btn.tw { background: #1da1f2; }
.share-btn.wa { background: #25d366; }

.gmx-product-layout { display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; margin-top: 25px; }

/* Qalereya */
.gp-gallery { background: var(--bg-body); border-radius: 16px; overflow: hidden; }
.gp-main-img { display: block; width: 100%; padding-top: 55%; position: relative; background: #000; }
.gp-main-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.gp-thumbs { display: flex; gap: 10px; padding: 15px; overflow-x: auto; background: var(--bg-surface); border-top: 1px solid var(--border-color); }
.gp-thumbs::-webkit-scrollbar { height: 4px; }
.gp-thumb { width: 70px; height: 70px; flex-shrink: 0; border-radius: 8px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: 0.2s; opacity: 0.6; }
.gp-thumb:hover, .gp-thumb.is-active { opacity: 1; border-color: var(--brand-primary); }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Tablar */

.gmx-tab-btn { background: none; border: none; padding: 10px 20px; font-size: 14px; font-weight: 800; color: var(--text-muted); cursor: pointer; position: relative; transition: 0.2s; }
.gmx-tab-btn:hover { color: var(--text-main); }
.gmx-tab-btn.is-active { color: var(--brand-primary); }
.gmx-tab-btn.is-active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--brand-primary); }

.gp-desc-text { font-size: 14px; line-height: 1.8; color: var(--text-main); }
.gp-desc-text img { max-width: 100%; height: auto; border-radius: 12px; margin: 15px 0; }
.gp-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 12px; overflow: hidden; }
.gp-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Rəylər */
.gp-comment-item { background: var(--bg-body); border-radius: 12px; padding: 15px; margin-bottom: 10px; border: 1px solid var(--border-color); }
.gp-comment-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.gp-comment-meta .name { color: var(--text-main); font-weight: 800; }
.gp-comment-text { font-size: 13px; color: var(--text-main); line-height: 1.6; }

/* Sağ Sidebar - Qiymət */
.gp-price-huge { font-size: 36px; font-weight: 900; color: var(--brand-primary); }
.gp-price-huge span { font-size: 16px; font-weight: 700; color: var(--text-muted); }

@media (max-width: 992px) {
    .gmx-product-layout { grid-template-columns: 1fr; }
    .gmx-product-header { flex-direction: column; align-items: flex-start; gap: 15px; }
}

/* =========================================================
   GMX ADD PRODUCT (YENİ ELAN) DİZAYN
   ========================================================= */

/* Addım (Stepper) Dizaynı */
.gmx-stepper {
    display: flex;
    justify-content: center;
    gap: 40px;
    border-bottom: 2px dashed var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.gmx-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
    opacity: 0.5;
    position: relative;
}
.gmx-step-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-surface); border: 2px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900;
}
.gmx-step.is-active { opacity: 1; color: var(--brand-primary); }
.gmx-step.is-active .gmx-step-num { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.gmx-step.is-completed { opacity: 1; color: var(--text-main); }
.gmx-step.is-completed .gmx-step-num { border-color: #10b981; background: #10b981; color: #fff; }

/* Kateqoriya Seçimi (Radio Kartlar) */
.gmx-cat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
}
.gmx-cat-card {
    cursor: pointer;
    display: block;
    margin: 0;
}
.gcc-inner {
    background: var(--bg-body);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: all 0.3s ease;
}
.gcc-inner img {
    width: 40px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: 0.3s;
}
.gcc-inner span {
    font-size: 12px; font-weight: 800; color: var(--text-muted); transition: 0.3s;
}

.gmx-cat-card:hover .gcc-inner { border-color: color-mix(in srgb, var(--brand-primary) 50%, transparent); transform: translateY(-3px); }
.gmx-cat-card input:checked + .gcc-inner {
    border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, transparent); box-shadow: 0 5px 15px rgba(249, 115, 22, 0.15);
}
.gmx-cat-card input:checked + .gcc-inner img { filter: grayscale(0); opacity: 1; }
.gmx-cat-card input:checked + .gcc-inner span { color: var(--brand-primary); }

@media (max-width: 768px) {
    .gmx-stepper { gap: 15px; flex-direction: column; align-items: flex-start; }
    .gmx-cat-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   GMX USER DROPDOWN (PREMIUM MENU V2)
   ========================================================= */

.gmx-user-dropdown-wrap { cursor: pointer; }

/* Profil Şəkli və Online Nöqtəsi */
.gmx-user-avatar-btn {
    display: block; width: 46px; height: 46px;
    border-radius: 50%; padding: 3px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.gmx-user-avatar-btn:hover { border-color: var(--brand-primary); }
.gmx-user-avatar-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.gmx-online-dot {
    position: absolute; bottom: 0; right: 0; width: 12px; height: 12px;
    background: #10b981; border: 2px solid var(--bg-body); border-radius: 50%;
}

/* Dropdown Pəncərəsi */
.gmx-user-dropdown-wrap:hover .gmx-user-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.gmx-user-dropdown-menu {
    position: absolute; top: calc(100% + 15px); right: 0;
    width: 360px; background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    z-index: 100;
    opacity: 0; visibility: hidden; transform: translateY(15px); pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
/* BOŞLUQ PROBLEMİ HƏLLİ (KÖRPÜ) */
.gmx-user-dropdown-menu::before {
    content: ''; position: absolute; top: -25px; left: 0; width: 100%; height: 25px; background: transparent;
}

/* Header Hissəsi */
.gmx-ud-header { display: flex; align-items: center; padding: 25px 25px 15px 25px; gap: 15px; position: relative; }
.gmx-ud-avatar { width: 56px; height: 56px; border-radius: 50%; padding: 2px; border: 2px solid var(--brand-primary); flex-shrink: 0; }
.gmx-ud-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gmx-ud-info { flex: 1; }
.gmx-ud-name { font-size: 16px; font-weight: 700; color: var(--text-main); display: block; margin-bottom: 4px; }
.gmx-ud-badge { font-size: 10px; font-weight: 600; color: #fff; background: #64748b; padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; }
.gmx-ud-settings-btn { 
    position: absolute; top: 25px; right: 25px;
    width: 32px; height: 32px; border-radius: 8px; background: var(--bg-body);
    color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: 0.3s;
}
.gmx-ud-settings-btn:hover { background: var(--border-color); color: var(--text-main); transform: rotate(45deg); }

/* Bənövşəyi və Çəhrayı Kartlar (Şəkildəki rənglər) */
.gmx-ud-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0 25px 20px 25px; }
.gmx-ud-card { padding: 18px 15px; border-radius: 18px; color: #fff; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.gmx-ud-balance { background: linear-gradient(135deg, #818cf8, #6366f1); }
.gmx-ud-points { background: linear-gradient(135deg, #fb7185, #f43f5e); }

.ud-card-val { font-size: 22px; font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 5px; }
.ud-card-val small { font-size: 11px; font-weight: 700; opacity: 0.9; }
.ud-card-btn { 
    background: rgba(255,255,255,0.25); color: #fff; font-size: 12px; font-weight: 700; 
    padding: 8px; border-radius: 10px; text-decoration: none; 
    display: flex; align-items: center; justify-content: center; gap: 5px; transition: 0.3s;
}
.ud-card-btn:hover { background: rgba(255,255,255,0.4); color: #fff; }

/* Menyu Linkləri və Modern Hover Animasiyası */
.gmx-ud-menu { padding: 0 15px 15px 15px; max-height: 350px; overflow-y: auto; }
.ud-menu-group { font-size: 10px; font-weight: 800; color: var(--text-muted); padding: 10px 10px 5px 10px; letter-spacing: 0.5px; }

.ud-menu-link { 
    display: flex; align-items: center; padding: 10px; border-radius: 12px; 
    font-size: 14px; font-weight: 600; color: var(--text-main); 
    text-decoration: none; transition: all 0.3s ease;
}
.ud-icon-wrap { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-body); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-right: 12px; transition: 0.3s; }
.ud-menu-link:hover { background: var(--bg-body); transform: translateX(4px); }
.ud-menu-link:hover .ud-icon-wrap { transform: scale(1.1); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.ud-menu-link:hover span { color: var(--brand-primary); }

/* Çıxış Düyməsi (Qırmızı, mərkəzli) */
.gmx-ud-footer { padding: 20px; border-top: 1px solid var(--border-color); background: var(--bg-body); border-radius: 0 0 24px 24px; }
.gmx-ud-logout-btn { 
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #e20000; color: #fff;  padding: 14px; 
    border-radius: 14px; font-size: 14px; font-weight: 700; transition: 0.3s; text-decoration: none;
}
.gmx-ud-logout-btn:hover { background: #cc0000; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(226, 0, 0, 0.3); color: #fff; }


/* =========================================================
   GMX SIDEBAR USER MENU (İSTİFADƏÇİ MENYUSU)
   ========================================================= */

.gmx-sidebar {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
}

/* Lüks Profil Qutusu */
.gmx-sidebar-profile-box {
    padding: 30px 20px 20px 20px;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gmx-sp-avatar-wrap { position: relative; margin-bottom: 15px; }
.gmx-sp-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    padding: 3px; border: 3px solid var(--border-color);
    position: relative; transition: 0.3s;
}
.gmx-sp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.gmx-sp-avatar .user-initial { width: 100%; height: 100%; border-radius: 50%; background: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; }

.avatar-edit-btn {
    position: absolute; bottom: 0; right: -5px; width: 28px; height: 28px;
    background: var(--brand-primary); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    cursor: pointer; border: 2px solid var(--bg-body); transition: 0.2s;
}
.avatar-edit-btn:hover { transform: scale(1.1); }

.gmx-sp-info { width: 100%; }
.gmx-sp-name { font-size: 18px; font-weight: 900; color: var(--text-main); margin: 0 0 5px 0; }
.gmx-sp-email { font-size: 12px; color: var(--text-muted); margin: 0 0 15px 0; word-break: break-all; }

.gmx-sp-badges { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 15px; }
.gmx-sp-badge-status { font-size: 10px; font-weight: 800; color: #fff; padding: 4px 10px; border-radius: 8px; text-transform: uppercase; }
.gmx-sp-badge-id { font-size: 11px; font-weight: 800; color: var(--text-muted); background: var(--bg-surface); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-color); }

.gmx-sp-verify-alert {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
    color: #ef4444; background: rgba(239,68,68,0.1); padding: 6px 12px; border-radius: 8px; text-decoration: none;
}

/* Naviqasiya Menyu */
.gmx-sidebar-nav { padding: 10px; max-height: calc(100vh - 350px); overflow-y: auto; }
.nav-group-title { font-size: 10px; font-weight: 900; color: var(--text-muted); padding: 15px 15px 5px 15px; text-transform: uppercase; letter-spacing: 0.5px; }

.gmx-side-link {
    display: flex; align-items: center; padding: 12px 15px; border-radius: 12px;
    font-size: 14px; font-weight: 700; color: var(--text-main); text-decoration: none;
    transition: all 0.3s ease; margin-bottom: 2px;
}
.side-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--bg-body); display: flex; align-items: center; justify-content: center; font-size: 14px; margin-right: 12px; transition: 0.3s; }
.gmx-side-badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 50px; }

/* Hover & Active Effect (Möhtəşəm Lüks GMX Keçidi) */
.gmx-side-link:hover, .gmx-side-link.is-active { background: color-mix(in srgb, var(--brand-primary) 5%, transparent); transform: translateX(5px); color: var(--brand-primary); }
.gmx-side-link:hover .side-icon, .gmx-side-link.is-active .side-icon { background: var(--brand-primary); color: #fff; transform: scale(1.1); box-shadow: 0 5px 10px rgba(249, 115, 22, 0.3); }

/* Rəngli İkonlar */
.c-pink { color: #ec4899; } .c-blue { color: #3b82f6; } .c-green { color: #10b981; } .c-orange { color: #f97316; } .c-cyan { color: #06b6d4; } .c-purple { color: #a855f7; } .c-indigo { color: #6366f1; } .c-red { color: #ef4444; } .c-gold { color: #eab308; } .c-gray { color: var(--text-muted); }

@media (max-width: 992px) {
    .gmx-sidebar { border-radius: 0; border: none; border-bottom: 1px solid var(--border-color); position: relative; top: 0; }
    .gmx-sidebar-nav { max-height: unset; overflow-y: visible; }
}


.gmx-side-link {
    position: relative;
    overflow: hidden;
 
}


.gmx-slide-arrow {
    margin-left: auto;
    font-size: 14px;
    color: var(--brand-primary);
    opacity: 0;
    transform: translateX(-15px); /* Sola doğru gizlənib */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Üzərinə (hover) gələndə və ya aktiv olanda oxun çıxması */
.gmx-side-link:hover .gmx-slide-arrow,
.gmx-side-link.is-active .gmx-slide-arrow {
    opacity: 1;
    transform: translateX(0); /* Öz yerinə gəlir */
}

    /* AXTARIŞ NƏTİCƏLƏRİ ÜÇÜN XÜSUSİ DİZAYN */
    .gs-item {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        margin-bottom: 10px;
        border-radius: 12px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        text-decoration: none;
        transition: all 0.3s ease;
        gap: 15px;
    }
    .gs-item:hover {
        background: var(--bg-body);
        border-color: var(--brand-primary, #ff4757);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .gs-item-img {
        width: 55px;
        height: 55px;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .gs-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .gs-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .gs-item-title {
        font-size: 14px;
        color: var(--text-main);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 4px;
    }
    .gs-item-cat {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .gs-item-price-box {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .gs-old-price {
        font-size: 11px;
        color: var(--text-muted);
        text-decoration: line-through;
        margin-bottom: 2px;
    }
    .gs-current-price {
        font-size: 15px;
        color: var(--brand-primary, #ff4757);
        font-weight: bold;
    }
    .gs-no-result {
        padding: 40px 20px;
        text-align: center;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        font-size: 16px;
    }
    .gs-no-result i {
        font-size: 40px;
        opacity: 0.5;
    }