:root{
  --background-dark: #121620;
  --theme-color:    #6e49ff;  
  --theme-color-2:  #ff4ec7;  
  --theme-hover:    #7f5dff;  
}


*{
  scrollbar-width: thin;
  scrollbar-color: var(--theme-color) var(--background-dark);
}


::-webkit-scrollbar{
  width: 10px;
  height: 6px; 
}

::-webkit-scrollbar-track{
  background: var(--background-dark);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

::-webkit-scrollbar-thumb{

  background: var(--theme-color);
  background: linear-gradient(180deg, var(--theme-color), var(--theme-color-2));
  border-radius: 10px;
  border: 2px solid var(--background-dark); 
  background-clip: padding-box;
  transition: filter .25s ease, background-color .25s ease;
  min-height: 32px;
  min-width: 32px;
}

::-webkit-scrollbar-thumb:hover{
  filter: brightness(1.08);
  background-color: var(--theme-hover);
}

:root{
  --oy-bg: #0c0f15;
  --oy-bg-2:#111624;
  --oy-surface:#141a29;
  --oy-card:#161d2d;
  --oy-text:#e8eeff;
  --oy-muted:#8b94b4;
  --oy-border:#273149;
  --oy-shadow:0 10px 30px rgba(0,0,0,.35);
  --oy-rad:16px;

  /* brand neon */
  --oy-violet: 264 93% 57%;
  --oy-pink:   317 94% 57%;
  --oy-orange:  32 100% 53%;
  --oy-glass: rgba(255,255,255,.04);
}

body.dark{
  background:
    radial-gradient(1200px 700px at -10% -20%, hsl(var(--oy-violet)/.25), transparent),
    radial-gradient(1000px 600px at 110% 0%, hsl(var(--oy-pink)/.22), transparent),
    linear-gradient(180deg, #0b0f17, #0f1421 40%, #0b0f17);
  color:var(--oy-text);
}

/* --------- Utilities --------- */


.oy-container,
.oy-mainbar .oy-container,
.oy-menubar .oy-container {
  max-width: 1400px !important;
  width: 100% !important;
}

.oy-hide-mobile{ display:block; }
.oy-show-mobile{ display:none; }
@media (max-width:768px){
  .oy-hide-mobile{ display:none !important; }
  .oy-show-mobile{ display:block !important; }
}
.oy-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:10px; background:hsl(var(--oy-pink));
  color:#fff; font-size:11px; display:grid; place-items:center;
  box-shadow:0 4px 16px hsl(var(--oy-pink)/.35);
}
/* =============== OY-PREF (Custom dropdown) =============== */
.oy-pref{ position:relative; display:inline-block; }
.oy-pref__trigger{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 12px; border:1px solid var(--border,#273149);
  border-radius:12px; background:var(--surface,#141a29); color:var(--txt,#e8eeff);
  font-weight:600;
}
.oy-pref__panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:1200;
  width:340px; max-width:calc(100vw - 32px);
  background:linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04)), var(--card,#161d2d);
  border:1px solid var(--border,#273149); border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:.18s ease;
}
.oy-pref.is-open .oy-pref__panel{ opacity:1; transform:translateY(0); pointer-events:auto; }

.oy-pref__body{ padding:16px; display:grid; gap:14px; }
.oy-pref__title{ font-weight:700; font-size:15px; }
.oy-pref__desc{ color:var(--muted,#8b94b4); margin:0; font-size:13px; }

.oy-pref__group{ display:grid; gap:6px; }
.oy-pref__label{ font-size:12px; color:var(--muted,#8b94b4); }
.oy-pref__select{
  width:100%; height:44px; border-radius:12px; border:1px solid var(--border,#273149);
  background:var(--surface,#141a29); color:var(--txt,#e8eeff);
  padding:0 14px; outline:none;
}
.oy-pref__select:focus{ box-shadow:0 0 0 2px hsl(264 93% 57% / .45); }

.oy-pref__actions{ display:flex; gap:10px; justify-content:flex-start; margin-top:6px; }
.oy-btn{
}
.oy-btn--primary{
}

/* Kəsilmə olmasın – üst zəncirlər dropdown-u gizlətməsin */
.page_top_header, .header_top_main, .header_top, .page__container, .header_top_colon{
  overflow:visible !important; position:relative;
}

/* Mobil davranış: panel full-width karta çevrilsin */
@media (max-width:576px){
  .oy-pref{ position:static; }
  .oy-pref__panel{
    left:16px; right:16px; width:auto; max-width:none; top:calc(100% + 8px);
  }
  .oy-pref__body{ padding:14px; }
}


/* --------- Topbar (row-1) --------- */
.oy-topbar{
  border-bottom:1px solid var(--oy-border);
  background:linear-gradient(0deg,var(--oy-glass),var(--oy-glass));
  backdrop-filter: blur(8px);
}
.oy-topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 0;
}
.oy-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--oy-surface); border:1px solid var(--oy-border);
  border-radius:999px; padding:8px 12px; font-size:13px; color:var(--oy-text);
}
.oy-top-actions{ display:flex; align-items:center; gap:10px; }

/* Theme pill switch */
.oy-theme{
  position:relative; width:58px; height:30px;
  border-radius:999px; border:1px solid var(--oy-border);
  background:linear-gradient(0deg,var(--oy-glass),var(--oy-glass)), var(--oy-card);
  display:flex; align-items:center; padding:0 6px; gap:6px;
}
.oy-theme input{ display:none; }
.oy-theme__dot{
  position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:999px; background:#1c2234; box-shadow:var(--oy-shadow);
  transition: left .25s ease, background .25s ease;
}
.oy-theme svg{ width:16px; height:16px; color:var(--oy-muted); }
.oy-theme input:checked + .oy-theme__dot{ left:31px; background:#101726; }

/* --------- Header (row-2) --------- */
.oy-header{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(0deg,var(--oy-glass),var(--oy-glass));
  border-bottom:1px solid var(--oy-border);
  backdrop-filter: blur(10px);
}
.oy-header__row{
  display:flex; align-items:center; gap:14px; padding:12px 0;
}

/* brand */
.oy-brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:22px; letter-spacing:.2px; }
.oy-brand i{ color:hsl(var(--oy-violet)); }
.oy-brand__u{ height:3px; width:56px; border-radius:99px; background: linear-gradient(90deg,hsl(var(--oy-violet)),hsl(var(--oy-pink)),hsl(var(--oy-orange))); display:block; margin-top:2px; }

/* search */
.oy-search{ flex:1; display:flex; gap:10px; align-items:center; }
.oy-search__field{ position:relative; flex:1; }
.oy-search__input{
  width:100%; height:46px; border-radius:14px;
  background:var(--oy-surface); border:1px solid var(--oy-border);
  padding:0 54px 0 16px; color:var(--oy-text);
  outline:none; transition: box-shadow .25s ease;
}
.oy-search__input:focus{ box-shadow: 0 0 0 2px hsl(var(--oy-violet)/.6); }
.oy-search__btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:12px; border:1px solid var(--oy-border);
  background:linear-gradient(90deg,hsl(var(--oy-violet)),hsl(var(--oy-pink)));
  display:grid; place-items:center; color:#fff;
}

/* actions (login/register/cart or account area) */
.oy-actions{ display:flex; gap:10px; align-items:center; }
.oy-btn{
}
.oy-btn--primary{
  box-shadow:0 12px 30px hsl(var(--oy-pink)/.28);
}
.oy-iconbtn{
  position:relative; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--oy-border); border-radius:12px; background:var(--oy-surface); color:var(--oy-muted);
}

/* account (logged in) */
.oy-account{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--oy-border); background:var(--oy-surface);
  padding:4px 10px; border-radius:14px;
}
.oy-avatar{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,hsl(var(--oy-violet)),hsl(var(--oy-pink)));
  color:#fff; font-weight:800;
}


.oy-account__arrow{ color:var(--oy-muted); }
.oy-dropdown{
  position:absolute; right:0; top:calc(100% + 8px); min-width:240px;
  background:var(--oy-card); border:1px solid var(--oy-border);
  border-radius:14px; box-shadow:var(--oy-shadow); padding:10px; display:none;
}
.oy-dropdown a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--oy-text);
}
.oy-dropdown a:hover{ background:hsl(var(--oy-violet)/.10); }
.oy-account.is-open .oy-dropdown{ display:block; }

/* messages/notifications list panels */
.oy-pop{
  position:absolute; right:0; top:calc(100% + 8px); width:320px;
  background:var(--oy-card); border:1px solid var(--oy-border);
  border-radius:14px; box-shadow:var(--oy-shadow); display:none;
}
.oy-pop.is-open{ display:block; }
.oy-pop__header{ padding:12px 14px; border-bottom:1px solid var(--oy-border); font-weight:700; color:var(--oy-muted); }
.oy-pop__list{ max-height:360px; overflow:auto; }
.oy-pop__empty{ padding:16px 14px; color:var(--oy-muted); }

/* --------- Tabs (row-3) --------- */
.oy-tabs{
  border-top:1px solid var(--oy-border); border-bottom:1px solid var(--oy-border);
  background:linear-gradient(0deg,var(--oy-glass),var(--oy-glass));
}
.oy-tabs__wrap{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 0;
}
.oy-tab{
  border:1px solid var(--oy-border); border-radius:12px;
  background:var(--oy-surface); color:var(--oy-text);
  padding:10px 14px; display:inline-flex; gap:10px; align-items:center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s;
}
.oy-tab:hover{ transform: translateY(-2px); box-shadow:0 10px 24px hsl(var(--oy-violet)/.18); }
.oy-tab--all{ background:linear-gradient(90deg,hsl(var(--oy-violet)/.12), transparent), var(--oy-surface); }
.oy-tab.is-active{ box-shadow:0 16px 38px hsl(var(--oy-orange)/.18); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--oy-card); }

/* --------- Dropdown “language / currency / prefs” --------- */
.oy-pref{
  position:relative;
}
.oy-pref__panel{
  position:absolute; right:0; top:calc(100% + 8px); width:280px;
  background:var(--oy-card); border:1px solid var(--oy-border); border-radius:12px;
  box-shadow:var(--oy-shadow); padding:12px; display:none;
}
.oy-pref.is-open .oy-pref__panel{ display:block; }
.oy-pref__title{ font-size:13px; color:var(--oy-muted); margin-bottom:6px; }
.oy-pref__group{ margin-bottom:10px; }
.oy-pref__select{
  width:100%; height:40px; border-radius:10px; background:var(--oy-surface);
  border:1px solid var(--oy-border); color:var(--oy-text); padding:0 10px;
}
.oy-pref__actions{ display:flex; gap:10px; }
.oy-pref__btn{
  flex:1; height:40px; border-radius:10px; border:1px solid var(--oy-border);
  background:var(--oy-surface); color:var(--oy-text); font-weight:600;
}
.oy-pref__btn--ok{ background: linear-gradient(90deg,hsl(var(--oy-violet)),hsl(var(--oy-pink))); border-color:transparent; color:#fff; }

/* --------- Mobile Layout ---------- */
@media (max-width:768px){
  .oy-header__row{ flex-direction:column; align-items:flex-start; gap:10px; }
  .oy-actions{ width:100%; justify-content:flex-end; }
  .oy-tabs__wrap{ overflow:auto hidden; white-space:nowrap; padding-bottom:10px; }
  .oy-tab{ flex:0 0 auto; }
}

/* --------- Focus & states --------- */
.oy-btn:focus, .oy-iconbtn:focus, .oy-tab:focus, .oy-pref__btn:focus{
  outline:2px solid hsl(var(--oy-violet)/.6); outline-offset:2px;
}

/* --------- Simple helpers for icons --------- */
.oy-i{ width:18px; height:18px; display:inline-block; }

/* --------- Cart icon badge position fix --------- */
.oy-cart{ position:relative; }
.oy-cart .oy-badge{ top:-5px; right:-5px; }

/* --------- Transitions ---------- */
.oy-fade-enter{ opacity:0; transform: translateY(-4px); }
.oy-fade-enter-active{ opacity:1; transform:none; transition:.18s ease; }
/* Container */
.oy-container{max-width:1400px;margin:0 auto;padding:0 16px}

/* Topbar */
.oy-topbar{    background: radial-gradient(1200px 600px at 10% 0%, rgba(124, 77, 255, .10), transparent 60%), radial-gradient(1000px 500px at 90% 20%, rgba(52, 208, 255, .10), transparent 65%), #0b0f1a;border-bottom:1px solid rgba(255,255,255,.06)}
.oy-topbar__left,.oy-topbar__right{display:flex;align-items:center;gap:16px}
.oy-topbar .oy-container{display:flex;justify-content:space-between;align-items:center;height:56px}

/* Inline links */
.oy-inline-links{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.oy-inline-links a{font-size:13px;opacity:.9}

/* Chips & buttons */
.oy-chip{display:inline-flex;align-items:center;gap:8px;background:#1a2239;border:1px solid #2b3350;color:#d9e1ff;padding:8px 12px;border-radius:999px}
.oy-chip--balance{background:#1f2a48;border-color:#384a8a}
.oy-btn{background:#1b2238;color:#e6eaff;padding:10px 14px;}
.oy-btn--primary{border-color:transparent;}
.oy-btn--ghost{background:transparent;border-color:#3a4160}
.oy-link{color:#c5cfff}

/* Switch */
.oy-switch{position:relative;display:inline-flex;align-items:center}
.oy-switch input{display:none}
.oy-switch__slider{width:44px;height:24px;border-radius:999px;background:#1f2742;display:block;position:relative}
.oy-switch__icons{position:absolute;left:6px;right:6px;display:flex;justify-content:space-between;pointer-events:none;font-size:12px;color:#cbd5ff}

/* Mainbar */
.oy-mainbar{    background: radial-gradient(1200px 600px at 10% 0%, rgba(124, 77, 255, .10), transparent 60%), radial-gradient(1000px 500px at 90% 20%, rgba(52, 208, 255, .10), transparent 65%), #0b0f1a;}
.oy-mainbar .oy-container{display:flex;align-items:center;justify-content:space-between;height:84px}
.oy-mainbar__left,.oy-mainbar__center,.oy-mainbar__right{display:flex;align-items:center;gap:16px}
.oy-burger{display:none;border:0;background:transparent;color:#d8ddff;font-size:20px}
.oy-brand{display:flex;align-items:center}
.oy-brand__img{height:50px}
.dark .oy-brand__img{display:none}
.dark .oy-brand__img--dark{display:block}
.oy-brand__img--dark{display:none}

/* Search */
.oy-search{position:relative;display:flex;align-items:center;min-width:520px;background:#18213a;border:1px solid #2a3350;border-radius:24px;padding:8px 14px}
.oy-search__input{flex:1;border:0;outline:none;background:transparent;color:#e6eaff}
.oy-search__btn{border:0;background:#2a3bff;color:#fff;width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center}

/* Icon buttons & badges */
.oy-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#1a2239;border:1px solid #2b3350;color:#e6eaff}
.oy-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b7d;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}

/* Account */
.oy-account{display:flex;align-items:center;gap:10px;color:#e6eaff}
.oy-avatar{width:36px;height:36px;border-radius:999px;background:#5b64ff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.oy-account__txt{display:flex;flex-direction:column;line-height:1}
.oy-dropdown{min-width:260px;background:#111829;border:1px solid #2b3350;border-radius:14px;padding:8px}
.oy-dropdown .dropdown-item{color:#dbe0ff}
.oy-dropdown .dropdown-divider{border-color:#2b3350}

/* Pop (notifications/messages) */
.oy-pop{min-width:360px;background:#111829;border:1px solid #2b3350;border-radius:14px;padding:8px}
.oy-pop__header{padding:6px 8px 8px;color:#cfd6ff}
.oy-pop__list{max-height:360px;overflow:auto}
.oy-pop__item{display:flex;gap:10px;padding:10px;border-radius:10px;color:#dee4ff}
.oy-pop__item:hover{background:#171f35}
.oy-pop__item.is-new{background:#171f35;border:1px solid #3d4a7c}
.oy-pop__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.oy-pop__row{display:flex;justify-content:space-between;font-size:12px;opacity:.9}
.oy-pop__title{font-weight:600}
.oy-pop__meta{font-size:12px;opacity:.9}
.oy-pop__footer{padding:8px}

/* Menubar */
.oy-menubar{    background: radial-gradient(1200px 600px at 10% 0%, rgba(124, 77, 255, .10), transparent 60%), radial-gradient(1000px 500px at 90% 20%, rgba(52, 208, 255, .10), transparent 65%), #0b0f1a;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}
/* Menyu konteyneri üçün düzəliş */
/* Menyu konteyneri üçün YENİ və DÜZƏLİŞ EDİLMİŞ kod */
.oy-menu {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ƏSAS DƏYİŞİKLİK: Elementləri bərabər məsafədə paylayır */
    list-style: none;
    margin: 0;
    padding: 10px 0;
    width: 100%;
    gap: 2px; 
}

/* Menyu elementlərinin içindəki linklər (a) üçün */
.oy-menu > li > a {
    display: flex;           /* DƏYİŞİKLİK: İkon və mətni yan-yana saxlamaq üçün */
    align-items: center;     /* DƏYİŞİKLİK: İkon və mətni şaquli olaraq mərkəzləşdirir */
    gap: 8px;                /* İkon ilə mətn arasına boşluq əlavə edir */
    white-space: nowrap;     /* Mətni heç bir halda iki sətrə bölmür */
    padding: 8px 15px;       /* Düymələrə daha yaxşı görünüş verir */
}



.oy-menu__item{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#131a31;border:1px solid #2b3350;color:#dfe4ff}
.oy-menu__item.active,.oy-menu__item:hover{background:#1a2140;border-color:#4652a6}
.oy-menu__item--all{background:#1a2244}
.oy-mega{position:relative}
.oy-mega__head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#131a31;border:1px solid #2b3350;color:#dfe4ff}
.oy-mega__head i{font-size:12px}
.oy-mega__body{position:absolute;left:0;top:100%;min-width:360px;padding:10px;background:#0f152b;border:1px solid #2b3350;border-radius:12px;display:none;z-index:50}
.oy-mega:hover .oy-mega__body{display:block}
.oy-mega__link{display:block;padding:8px 10px;border-radius:8px;color:#dfe4ff}
.oy-mega__link:hover,.oy-mega__link.active{background:#171f35}

/* Pref panel */
.oy-pref__panel{background:#0f152b;border:1px solid #2b3350;border-radius:12px;padding:12px;min-width:280px}
.oy-pref__title{color:#cbd3ff;font-weight:600}
.oy-pref__desc{font-size:12px;color:#9aa3cf;margin:4px 0 10px}
.oy-pref__group{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.oy-pref__select{background:#131a31;border:1px solid #2b3350;color:#e6eaff;padding:8px 10px;border-radius:10px}
.oy-pref__actions{display:flex;gap:10px;justify-content:flex-end}

/* Responsive */
@media (max-width:992px){
  .oy-mainbar .oy-container{height:auto;flex-wrap:wrap;gap:12px;padding-top:10px;padding-bottom:10px}
  .oy-burger{display:inline-flex}
  .oy-search{min-width:100%;order:3}
  .oy-mainbar__center{flex:1;min-width:100%}
  .oy-mainbar__right{margin-left:auto}
  .oy-menubar .oy-container{display: none;}
  .oy-menu{flex-wrap:nowrap}
}

/* ====== OYUNAL — Mobile Drawer ====== */
.oy-drawer{position:fixed;inset:0;z-index:99999;pointer-events:none}
.oy-drawer.is-open{pointer-events:auto}
.oy-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
.oy-drawer.is-open .oy-drawer__backdrop{opacity:1}
.oy-drawer__panel{
  position:absolute;top:0;left:0;height:100%;width:min(420px,86vw);
  background:var(--surface,#141a29);border-right:1px solid var(--border,#273149);
  transform:translateX(-100%);transition:transform .3s;box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px;padding:14px;outline:none
}
.oy-drawer.is-open .oy-drawer__panel{transform:translateX(0)}

.oy-drawer__head{display:flex;align-items:center;justify-content:space-between}
.oy-drawer__brand img{height:36px}
.oy-drawer__close{width:36px;height:36px;border:1px solid var(--border,#273149);border-radius:10px;
  background:var(--surface,#141a29);color:var(--txt,#e8eeff);display:grid;place-items:center}

.oy-drawer__search{display:flex;align-items:center;gap:10px;border:1px solid var(--border,#273149);
  background:var(--card,#161d2d);border-radius:12px;padding:8px 12px}
.oy-drawer__search i{color:var(--muted,#8b94b4)}
.oy-drawer__search input{flex:1;background:transparent;border:0;outline:0;color:var(--txt,#e8eeff)}

.oy-drawer__auth{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oy-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  height:42px;
  border-radius:12px;
  font-weight:600;
  }
.oy-btn--ghost{background:var(--surface,#141a29);color:var(--txt,#e8eeff)}
.oy-btn--primary{background:linear-gradient(90deg,hsl(264 93% 57%),hsl(317 94% 57%));color:#fff;border:0}

.oy-drawer__user{display:flex;align-items:center;gap:12px}
.oy-user__avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,hsl(264 93% 57%),hsl(317 94% 57%))}
.oy-user__meta .t-muted{color:var(--muted,#8b94b4);font-size:12px;display:block}

.oy-drawer__nav ul{list-style:none;margin:6px 0 0;padding:0}
.oy-drawer__nav li a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:var(--txt,#e8eeff);
  border:1px solid transparent}
.oy-drawer__nav li a:hover{background:linear-gradient(90deg,hsl(264 93% 57%/.12),transparent);border-color:var(--border,#273149)}

.oy-drawer__footer{display:grid;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border,#273149)}
.oy-drawer__footer a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surface,#141a29);
  border:1px solid var(--border,#273149)}
.oy-drawer__footer a.is-danger{color:#ffb3b3;border-color:#5a2930;background:#2a171b}

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


/* --- Drawer: scroll always works (simple, reliable) --- */

/* Panelin özünü skrol-lanacaq et */
.oy-drawer__panel{
  height: 100dvh;                     /* mobil toolbarlarda stabil hündürlük */
  overflow-y: auto !important;        /* bütün məzmun birlikdə skrol-lansın */
  -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
  overscroll-behavior: contain;       /* arxa səhifəyə keçməsin */
  /* istəsən grid saxlanır; başqa heç nəyi dəyişmirik */
}

/* Orta zonada əvvəl verdiyimiz/nizamda olan iç scroll-u söndür */
.oy-drawer__nav{
  overflow: visible !important;       /* nested scrollu ləğv et */
  min-height: auto !important;
}

/* (opsional) iPhone safe-area üçün alt boşluq */
.oy-drawer__panel{ padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* Drawer search bar */
.oy-drawer__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface, #131a2a);
  border: 1px solid rgba(120,130,170,.18);
}

.oy-drawer__search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--txt, #e7edff);
  font-size: 14px;
  outline: none;
}

.oy-drawer__search-input::placeholder {
  color: rgba(231,237,255,.6);
}

.oy-drawer__search-btn {
  border: none;
  background: #2d46ff;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.oy-drawer__search-btn:hover {
  background: #3b58ff;
}
/* ===== MOBILE SEARCH (mövcud .search strukturu ilə) ===== */
@media (max-width: 768px){

  /* konteyner */
  .search{
    position: relative;
    z-index: 1400;                  /* drawer/diger header elementlərin üstündə olsun */
  }

  /* başlıq (input + düymələr) */
  .search__head{
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 56px 6px 14px;     /* sağda dairəvi düymə üçün yer saxlayırıq */
    height: 56px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  }
  body:not(.dark) .search__head{
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.08);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
  }

  /* input */
  .search__input{
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    line-height: 42px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: inherit;
    font: inherit;
    padding: 0;
  }

  /* sağdakı dairəvi axtar düyməsi (mövcud structure: .search__start) */
  .search__start{
    position: absolute;
    right: 8px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: #2f56ff;           /* istəsən :root --oy-primary istifadə edə bilərsən */
    color: #fff;
    box-shadow: 0 8px 30px rgba(47,86,255,.45);
  }
  .search__start svg{ width: 18px; height: 18px; fill: currentColor; }

  /* "geri" və "bağla" düymələri mobil üçün gizlənsin,
     əgər səndə bunlar iş prosesinin hissəsidirsə, .is-open vəziyyətində göstərə bilərsən */
  .search__direction,
  .search__close{
    display: none;
  }

  /* nəticə paneli */
  .search__body{
    position: absolute;
    left: 0; right: 0;
    top: calc(56px + 8px);          /* inputun altı */
    border-radius: 14px;
    background: rgba(16,18,27,.96);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    padding: 12px;
    display: none;                  /* fokusda açacağıq */
  }
  body:not(.dark) .search__body{
    background: #fff;
    border-color: rgba(0,0,0,0.08);
  }

  .search.is-open .search__body{ display: block; }

  .search__box{ max-height: 50vh; overflow:auto; }
  .search__category{
    font-weight: 600;
    opacity: .8;
    margin: 4px 0 10px;
  }
  .search__list > *{
    border-radius: 10px;
    padding: 10px 12px;
  }
  .search__list > *:hover{
    background: rgba(255,255,255,.06);
  }
}
/* Qeydiyyat düyməsi hover */
.oy-btn--primary:hover {
  background: linear-gradient(90deg, #ff4ec7, #6e49ff);
  box-shadow: 0 0 18px rgba(110, 73, 255, 0.5);
  transform: translateY(-1px);
}

/* Giriş düyməsi hover */
.oy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}

/* Səbət düyməsi hover */
.oy-cart:hover {
  background: rgba(110, 73, 255, 0.15);
  border-color: rgba(110, 73, 255, 0.4);
  box-shadow: 0 0 12px rgba(110, 73, 255, 0.3);
  transform: scale(1.05);
}

/* Hover transition bütün düymələr üçün */
.oy-btn,
.oy-btn--primary,
.oy-cart {
}





/* === Ãœmumi hover infrastrukturunu paylaÅŸaq === */
.oy-btn,
.oy-btn--primary {
  position: relative;
  overflow: hidden;            /* sheen effektini görsətmək üçün */
  transition: all .30s ease;   /* hamısı eyni hamar animasiya */
  will-change: transform, box-shadow, background, border-color;
}

/* Sheen işıq zolağı */
.oy-btn::before,
.oy-btn--primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,.30) 0%, transparent 80%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}

/* Hover zamanı sheen sağa keçir */
.oy-btn:hover::before,
.oy-btn--primary:hover::before {
  left: 125%;
}

/* Iconlar azca hərəkət etsin */
.oy-btn i,
.oy-btn--primary i {
  transition: transform .30s ease, color .30s ease;
}
.oy-btn:hover i,
.oy-btn--primary:hover i {
  transform: translateX(3px);
}

/* === Xüsusi hover stilləri === */

/* Qeydiyyat (primary) */
.oy-btn--primary:hover {
  background: linear-gradient(90deg, #ff4ec7, #6e49ff);
  box-shadow: 0 6px 20px rgba(110,73,255,.45);
  transform: translateY(-2px);
  color: #fff;
  border-color: transparent;
}

/* GiriÅŸ (secondary) */
.oy-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}


/* ================== OYUNAL MENU ITEMS ================== */
.oy-menu__item {
  /*position: relative;           */
  overflow: hidden;             
  z-index: 1;
  transition: all .3s ease;
}

/* Hover zamanı həm neon rənglər, həm də yuxarı qalxma */
.oy-menu__item:hover {
  color: var(--oy-white, #fff);
  border-color: rgba(124,77,255,.4);

  box-shadow: 0 6px 20px rgba(124,77,255,.35);
  transform: translateY(-3px); /* Yuxarı qalxma effekti */
}

/* Sheen işıq */
.oy-menu__item::before {
  content:"";
  position:absolute;
  top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,.30) 0%, transparent 80%);
  transform:skewX(-20deg);
  transition:left .5s ease;
  pointer-events:none;
}
.oy-menu__item:hover::before { left:125%; }

/* Icon hərəkəti */
.oy-menu__item i { transition: transform .3s ease; }
.oy-menu__item:hover i { transform: translateX(4px); }

/* Aktiv (seçilmiş) vəziyyət */
.oy-menu__item.active {
  background: linear-gradient(90deg,#ff4ec7,#6e49ff);
  border-color: transparent;
  color:#fff;
  box-shadow: 0 0 18px rgba(110,73,255,.4);
}




      :root{
        --violet: 256 100% 67%;
        --pink:   317 100% 61%;
        --orange: 26 100% 55%;
        --muted:  rgba(255,255,255,.65);
        --border: rgba(255,255,255,.08);
        --surface: #050810e3;
        --card: rgba(255,255,255,.02);
        --r: 16px;
      }
      /* responsive fix for cards */
      @media (min-width:1281px){ .nd-listing-card{ width:auto } }
      @media (max-width:600px){ .nd-listing-card{ width:100%; margin:0!important; box-sizing:border-box } }

      .nd-page *{ box-sizing:border-box }

      /* Stories */
      .nd-stories{ margin-top:10px }
      .nd-stories-list{
        display:grid; grid-auto-flow:column; grid-auto-columns:86px; gap:16px;
        overflow:auto hidden; padding:10px 16px 6px; scroll-snap-type:x mandatory;
      }
      .nd-stories-list::-webkit-scrollbar{ height:8px }
      .nd-stories-list::-webkit-scrollbar-thumb{ background:hsl(var(--violet)/.35); border-radius:99px }
      .nd-story{ scroll-snap-align:start; text-align:center; font-size:12px; color:var(--muted); text-decoration:none }
      .nd-story__ring{
        width:80px; height:80px; border-radius:50%; padding:3px; margin:0 auto 6px;
        background:conic-gradient(from 0deg, hsl(var(--violet)), hsl(var(--pink)), hsl(var(--orange)), hsl(var(--violet)));
        filter:drop-shadow(0 0 12px hsl(var(--pink)/.4));
      }
      .nd-story__image{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:4px solid #0b1220 }
      .nd-story__image img{ width:100%; height:100%; object-fit:cover }

      /* Slider common */
      .nd-bg{ position:relative }
      .nd-bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0)); pointer-events:none }
      .nd-swiper{ position:relative }
      .nd-swiper .swiper-pagination,
      .nd-swiper .swiper-button{ z-index:3 }

      .nd-slider-wrap{ display:grid; grid-template-columns:260px 1fr 260px; gap:10px }
      @media (max-width:992px){ .nd-slider-wrap{ grid-template-columns:1fr } }
      .nd-slider-side a img{ display:block; width:100%; height:auto; border-radius:12px }

      .nd-right-stack .nd-banner{ background:#0e1424; border-radius:12px; overflow:hidden }
      .nd-banner img{ width:100%; height:auto; display:block }

      .nd-v2{ display:grid; grid-template-columns:260px 1fr; gap:10px }
      @media (max-width:992px){ .nd-v2{ grid-template-columns:1fr } }

      /* Grids */
      .nd-games{ margin-top:24px }
      .nd-games__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
      .nd-title{ display:flex; gap:10px; align-items:center; font-size:18px }
      .nd-all{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:hsl(var(--violet)); text-decoration:none }

      .nd-games__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px }
      @media (max-width:1100px){ .nd-games__grid{ grid-template-columns:repeat(4,1fr) } }
      @media (max-width:740px){ .nd-games__grid{ grid-template-columns:repeat(2,1fr) } }

      .nd-game-card{
        border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface);
        display:grid; grid-template-rows:160px auto; color:#fff; text-decoration:none;
        transition:transform .18s ease, box-shadow .18s ease;
      }
      .nd-game-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px hsl(var(--orange)/.14) }
      .nd-game-card__img{ background:#0d1322 }
      .nd-game-card__img img{ width:100%; height:100%; object-fit:cover }
      .nd-game-card__title{ padding:10px 12px 14px; font-weight:700; font-size:14px; text-align:center }

      /* Product carousel cards */
      .nd-carousel{ margin-top:18px }
      .nd-carousel__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }
      .nd-product{
        border:1px solid var(--border); border-radius:14px;
        background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--card);
        overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
      }
      .nd-product:hover{ transform:translateY(-4px); box-shadow:0 16px 38px hsl(var(--violet)/.2) }
      .nd-product__img{ height:160px; background:#0f1628; display:grid; place-items:center; overflow:hidden }
      .nd-product__img img{ width:100%; height:100%; object-fit:cover }
      .nd-product__body{ padding:12px }
      .nd-product__title{ margin:0 0 6px; font-weight:700 }
      .nd-product__price{ font-weight:800 }
      .nd-product__price .nd-old{ color:var(--muted); text-decoration:line-through; margin-left:6px }

      /* Market list cards */
      .nd-listing-card{ }
      .nd-listing-item{ border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden }
      .nd-listing-preview{ background:#0f1628; display:grid; place-items:center; height:170px }
      .nd-listing-icon img{ width:100%; height:100%; object-fit:cover }
      .nd-price{ padding:10px 12px; font-weight:800 }
      .nd-text{ padding:0 12px 12px }
      .nd-text .nd-t{ margin:0 0 6px; font-weight:700; font-size:15px }
      .nd-desc{ color:var(--muted) }
      .nd-seller{ padding:12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px }
      .nd-seller .nd-name{ font-weight:700 }
      .nd-status{ font-size:12px; display:flex; align-items:center; gap:6px; color:var(--muted) }
      .nd-status .nd-dot{ width:8px; height:8px; border-radius:50% }
      .nd-status.nd-online .nd-dot{ background:#36d399 }
      .nd-status.nd-offline .nd-dot{ background:#b0b6c1 }

      /* Comments & News */
      .nd-comments .nd-comment,
      .nd-news .nd-news-item{ border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:12px; margin-bottom:10px }
      .nd-avatar{ width:44px; height:44px; border-radius:50% }
      .nd-stars{ color:#ffd76a }
      .nd-news-item img{ width:72px; height:72px; object-fit:cover; border-radius:10px; margin-right:10px }

      /* Misc */
      .nd-mobile-banners .nd-banner{ border-radius:12px; overflow:hidden }


/* =========================
   STORIES — Modern Glass UI
   (HTML: .ui-stories ... eyni qalır)
   ========================= */

:root{
  --st-bg: rgba(255,255,255,.04);
  --st-bd: rgba(255,255,255,.10);
  --st-txt: #e6e9ff;
  --st-muted: #b8c0e0;
  --st-ring-1: #7c3aed;
  --st-ring-2: #ec4899;
  --st-ring-3: #06b6d4;
  --st-glow: 0 12px 38px rgba(124,58,237,.25);
}

/* Wrap */
.ui-stories{
  /*width:100%;*/
  margin:16px auto 22px;
  display:flex;
  justify-content:center;
}
.ui-stories__wrap{
  width:min(1400px,96vw);
}

/* List – glass container + gradient border */
.ui-stories__list{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(12px,2.6vw,26px);
  padding:16px 14px;
  border-radius:20px;
  background:
    radial-gradient(1200px 160px at 50% 0%, rgba(124,58,237,.10), transparent 60%),
    var(--st-bg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.ui-stories__list::after{
  /* gradient border using mask */
  content:"";
  position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(124,58,237,.35));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* Mobile – horizontal scroll */
@media (max-width: 768px){
  .ui-stories{ justify-content:flex-start; }
  .ui-stories__wrap{ width:100%; }
  .ui-stories__list{
    overflow-x:auto; justify-content:flex-start;
    padding-inline:16px;
    scroll-snap-type:x mandatory;
  }
  .ui-stories__list::-webkit-scrollbar{ height:0; }
  .ui-story{ scroll-snap-align:start; }
}

/* Item */
.ui-story{
  display:grid; grid-template-rows:auto auto;
  align-items:center; justify-items:center; gap:8px;
  min-width:88px; text-decoration:none;
  color:var(--st-txt);
}

/* Ring (animated gradient + glass inset) */
.ui-story__ring{
  width:clamp(66px,9vw,94px);
  height:clamp(66px,9vw,94px);
  padding:3px; border-radius:999px; position:relative;
  background: conic-gradient(from 0turn, var(--st-ring-1), var(--st-ring-2), var(--st-ring-3), var(--st-ring-1));
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.25);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  will-change: transform, box-shadow, filter;
}
.ui-story__ring::before{
  /* soft inner glass flare */
  content:""; position:absolute; inset:1px; border-radius:inherit;
  background: radial-gradient(circle at 28% 28%, rgba(255,255,255,.35), rgba(255,255,255,.06) 36%, transparent 72%);
  filter: blur(6px); pointer-events:none;
}
.ui-story__ring::after{
  /* sheen sweep (hoverdə görünür) */
  content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,.32) 0%, transparent 75%);
  transform:skewX(-20deg); opacity:0; transition:left .55s ease, opacity .55s ease;
  border-radius:inherit; pointer-events:none;
}

/* Image holder */
.ui-story__img{
  width:100%; height:100%; border-radius:999px; overflow:hidden; display:block;
  background:#0c1324; position:relative;
}
.ui-story__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }

/* Title */
.ui-story__title{
  font-size:12px; line-height:1.5; text-align:center;
  max-width:96px; color:var(--st-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Hover/Focus states */
.ui-story:hover .ui-story__ring,
.ui-story:focus .ui-story__ring{
  transform:translateY(-3px);
  filter:brightness(1.08);
  box-shadow: var(--st-glow);
}
.ui-story:hover .ui-story__ring::after{ left:125%; opacity:1; }
.ui-story:hover .ui-story__img img{ transform:scale(1.06); }

.ui-story:focus-visible .ui-story__ring{
  outline:2px solid rgba(124,58,237,.7);
  outline-offset:3px;
}

/* Active (optional class) — daha güclü vurğulama */
.ui-story.is-active .ui-story__ring{
  box-shadow: 0 0 0 3px rgba(124,58,237,.55), var(--st-glow);
  filter:brightness(1.1);
}

/* Performance / accessibility */
@media (prefers-reduced-motion: reduce){
  .ui-story__ring,
  .ui-story__img img{ transition:none; }
}


.home-banners {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* sol - orta - saÄŸ */
    gap: 15px;
    align-items: stretch;
}

.banner-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Orta banner */
.banner-box.big {
    aspect-ratio: 16/9;
    width: 100%;
    min-height: 320px;
}

/* Kiçik bannerlər */
.banner-box.small {
    aspect-ratio: 16/9;
    width: 100%;
    min-height: 150px;
}

/* Ümumi banner üslubu */
.banner-box {
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    display: block;
    transition: transform 0.3s ease;
}

.banner-box:hover {
    transform: scale(1.03);
}

/* Mobil üçün */
@media (max-width: 768px) {
    .home-banners {
        grid-template-columns: 1fr;
    }
    .banner-column {
        flex-direction: row;
    }
    .banner-box.small {
        flex: 1;
        min-height: 120px;
    }
    .banner-box.big {
        min-height: 200px;
    }
}


/* ===========================
   Popular Oyunlar – Full CSS
   =========================== */

:root{
  --oy-bg-1: rgba(22,24,34,.85);
  --oy-bg-2: rgba(16,18,28,.92);
  --oy-card-bd: rgba(255,255,255,.08);
  --oy-card-grad-1: #7c4dff;
  --oy-card-grad-2: #4dd0ff;
  --oy-text: #eaf0ff;
  --oy-white: #fff;
}

/* Bölmə konteyneri – yumşaq, hərəkətli gradient fon */
.oy-popular-section{
  position:relative;
  padding:28px 24px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--oy-bg-1),var(--oy-bg-2));
  overflow:hidden;
  margin-bottom: 10px;
}

/* Hərəkətli aura */
.oy-popular-section::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(60% 60% at 30% 30%,rgba(111,76,255,.25) 0,transparent 65%),
    radial-gradient(50% 50% at 80% 70%,rgba(64,196,255,.2) 0,transparent 70%),
    radial-gradient(40% 40% at 10% 85%,rgba(255,91,150,.18) 0,transparent 70%);
  filter:blur(40px);
  animation:oy-pop-aura 22s linear infinite alternate;
  z-index:0;
}
@keyframes oy-pop-aura{
  0%{transform:translate3d(-4%,2%,0) rotate(0)}
  50%{transform:translate3d(2%,-3%,0) rotate(15deg)}
  100%{transform:translate3d(5%,4%,0) rotate(30deg)}
}

/* Header */
.oy-popular-header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.oy-popular-title{
  display:flex; align-items:center; gap:10px;
  margin:0; font-size:1.2rem; font-weight:700; color:var(--oy-white);
}
.oy-popular-title i{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg,var(--oy-card-grad-1),var(--oy-card-grad-2));
  color:#0b0d14; box-shadow:0 6px 18px rgba(124,77,255,.35);
}

/* “Bütün oyunlar” düyməsi */
.oy-popular-all{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  font-weight:600; color:#dfe7ff; text-decoration:none;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.08));
  border:1px solid var(--oy-card-bd);
  position:relative; overflow:hidden;
  transition:all .3s ease;
}
.oy-popular-all:hover{
  color:var(--oy-white);
  border-color:rgba(124,77,255,.4);
  background:linear-gradient(135deg,var(--oy-card-grad-1),var(--oy-card-grad-2));
  box-shadow:0 6px 20px rgba(124,77,255,.35);
  transform:translateY(-2px);
}
.oy-popular-all i{ transition:transform .3s ease; }
.oy-popular-all:hover i{ transform:translateX(4px); }
.oy-popular-all::before{
  content:"";
  position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.3) 0%,transparent 80%);
  transform:skewX(-20deg);
  transition:left .5s ease;
}
.oy-popular-all:hover::before{ left:125%; }

/* Grid */
.oy-popular-grid{
  position:relative; z-index:1;
  display:grid; gap:16px;
  grid-template-columns:repeat(6,minmax(0,1fr));
}
@media (max-width:1200px){ .oy-popular-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:992px) { .oy-popular-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:768px) { .oy-popular-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px) { .oy-popular-grid{ grid-template-columns:repeat(2,1fr); } }

/* Kart */
.oy-popular-card{
  position:relative; display:flex; flex-direction:column;
  gap:10px; padding:10px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--oy-card-bd);
  text-decoration:none; isolation:isolate;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  overflow:hidden; /* shine effekti üçün vacib */
}
.oy-popular-card::after{
  /* kənar neon xətti */
  content:""; position:absolute; inset:0; border-radius:16px;
  padding:1px; background:linear-gradient(135deg,var(--oy-card-grad-1),var(--oy-card-grad-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease;
  z-index:1;
}
.oy-popular-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,77,255,.22);
  box-shadow:0 16px 40px rgba(76,110,245,.25), inset 0 0 0 1px rgba(255,255,255,.05);
}
.oy-popular-card:hover::after{ opacity:.9; }

/* Shine / wave overlay */
.oy-popular-card::before{
  content:"";
  position:absolute;
  top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,0.25) 0%,transparent 80%);
  transform:skewX(-20deg);
  transition:left .6s ease;
  z-index:2;
  pointer-events:none;
}
.oy-popular-card:hover::before{ left:125%; }

/* Şəkil qabı – 1:1 kvadrat */
.oy-popular-card__image{
  position:relative; width:100%;
  aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#0f1220,#0b0d16);
}
.oy-popular-card__image::before{
  /* parıltı overlay */
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 30% 20%,rgba(255,255,255,.18),transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.oy-popular-card:hover .oy-popular-card__image::before{ opacity:.5; }

.oy-popular-card__image img{
  width:100%; height:100%; object-fit:contain;
  transform:scale(1);
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.oy-popular-card:hover .oy-popular-card__image img{ transform:scale(1.06); }

/* Başlıq */
.oy-popular-card__title{
  text-align:center; color:var(--oy-text);
  font-weight:700; letter-spacing:.2px; font-size:.96rem;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Az hərəkət xahişi olan istifadəçilər üçün animasiyalar off */
@media (prefers-reduced-motion:reduce){
  .oy-popular-section::before{ animation:none; }
  .oy-popular-card__image img{ transition:none !important; }
}

:root{
  --pp-bg-1: rgba(22,24,34,.86);
  --pp-bg-2: rgba(16,18,28,.94);
  --pp-grad-1:#7c4dff; 
  --pp-grad-2:#4dd0ff;
  --pp-bd: rgba(255,255,255,.08);
  --pp-text:#eaf0ff;
}

/* ===================== SECTION (konteyner) ===================== */
.pp-section{
  position:relative;
  padding:28px 24px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--pp-bg-1),var(--pp-bg-2));
  overflow:hidden;
}
.pp-section::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(60% 60% at 25% 25%, rgba(124,77,255,.25) 0, transparent 65%),
    radial-gradient(50% 50% at 80% 70%, rgba(64,196,255,.22) 0, transparent 70%),
    radial-gradient(40% 40% at 10% 85%, rgba(255,91,150,.18) 0, transparent 70%);
  filter:blur(42px);
  animation:pp-aura 22s linear infinite alternate;
  z-index:0;
}
@keyframes pp-aura{
  0%{transform:translate3d(-4%,2%,0) rotate(0)}
  50%{transform:translate3d(2%,-3%,0) rotate(15deg)}
  100%{transform:translate3d(5%,4%,0) rotate(30deg)}
}

/* Header */
.pp-header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.pp-title{
  display:flex; align-items:center; gap:10px;
  margin:0; color:#fff; font-weight:800; font-size:1.22rem;
}
.pp-title i{
  width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  background:linear-gradient(135deg,var(--pp-grad-1),var(--pp-grad-2));
  color:#0b0d14; box-shadow:0 6px 18px rgba(124,77,255,.35);
}

/* Owl Nav */
.pp-section .owl-nav{    display: flow; gap:10px;}
.pp-section .owl-nav button{
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--pp-bd); color:#fff;
  display:grid; place-items:center; transition:.25s ease;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.pp-section .owl-nav button:hover{
  background:linear-gradient(135deg,var(--pp-grad-1),var(--pp-grad-2));
  border-color:rgba(124,77,255,.35); transform:translateY(-2px);
}

/* Owl kəsmə problemləri */
.pp-section .owl-stage-outer{ overflow:visible !important; }
.pp-section .owl-item{
  overflow:visible;
  position:relative;
  padding:0 12px;
}
.pp-section .owl-stage{ padding:8px 0; }


.pp-section{ margin:28px 0; }
.pp-section + .pp-section{ margin-top:36px; }

/* ===================== CARD ===================== */

.pp-card,
.product-showcase-card{
  position:relative; display:flex; flex-direction:column;
  gap:12px; padding:12px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));
  border:1px solid var(--pp-bd);
  text-decoration:none; isolation:isolate;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  box-shadow:0 8px 28px rgba(0,0,0,.25);
  overflow:hidden;               
  z-index:1;
}
.pp-card::after,
.product-showcase-card::after{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(135deg,var(--pp-grad-1),var(--pp-grad-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; z-index:1;
}

.pp-card::before,
.product-showcase-card::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,.25) 0%, transparent 80%);
  transform:skewX(-20deg); transition:left .6s ease; z-index:2; pointer-events:none;
}
.pp-card:hover,
.product-showcase-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,77,255,.22);
  box-shadow:0 16px 40px rgba(76,110,245,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  z-index:3;                       /* qonşu karta toxunanda kəsilməsin */
}
.pp-card:hover::after,
.product-showcase-card:hover::after{ opacity:.9; }
.pp-card:hover::before,
.product-showcase-card:hover::before{ left:125%; }

/* ===================== IMAGE WRAPPER ===================== */

.pp-card__img,
.product-showcase-card__image-wrapper{
  position:relative; width:100%;
  aspect-ratio:1/1; 
  overflow:visible !important;      
  isolation:isolate;
}


.pp-card__img::before,
.product-showcase-card__image-wrapper::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:12px;
  background:linear-gradient(180deg,#0f1220,#0b0d16);
}


/* Bu isə düzəliş edilmiş versiyadır */

.pp-card::after,
.product-showcase-card::after{
 content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
background:linear-gradient(135deg,var(--pp-grad-1),var(--pp-grad-2));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0; transition:opacity .25s ease; z-index:1;
pointer-events: none; 
}
.pp-card:hover .pp-card__img::after,
.product-showcase-card:hover .product-showcase-card__image-wrapper::after{ opacity:.5; }


.pp-card__img img,
.product-showcase-card__image-wrapper img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain;
  padding:6px;
  transform:scale(1) translateZ(0);
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.pp-card:hover .pp-card__img img,
.product-showcase-card:hover .product-showcase-card__image-wrapper img{
  transform:scale(1.06);
}


.pp-card__body,
.product-showcase-card__body{ display:flex; flex-direction:column; gap:6px; }
.pp-card__name,
.product-showcase-card__title{
  margin:0; text-align:center; color:var(--pp-text);
  font-weight:700; letter-spacing:.2px; font-size:.96rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pp-card__price,
.product-showcase-card__price{
  margin:0; text-align:center; font-weight:800; font-size:.95rem;
  background:linear-gradient(135deg,var(--pp-grad-1),var(--pp-grad-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}


@media (prefers-reduced-motion:reduce){
  .pp-section::before
  {
      animation:none; 
      
  }
  .pp-card__img img,
  .product-showcase-card__image-wrapper img{ transition:none !important; }
}

.owl-theme .owl-nav [class*='owl-']{background:#1b2633 !important;border-radius:12px !important;padding:6px 10px !important}
.owl-theme .owl-nav [class*='owl-']:hover{background:#263445 !important}



/* ================================================================ */
/* =================== OYUNİSHA REVIEWS SLIDER ==================== */
/* ================================================================ */

.oy-reviews{
  position:relative; isolation:isolate; padding:96px 0; overflow:hidden;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); /* tam eni tutur */
  background:#0a0a0a;
  --oy-gutter: clamp(18px, 3vw, 36px);
}

.oy-reviews__bg{
  position:absolute; inset:-12% calc(50% - 50vw);
  filter:blur(100px); opacity:.50; pointer-events:none;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(120,119,198,.30), transparent 60%),
    radial-gradient(60% 80% at 80% 70%, rgba(255,119,198,.28), transparent 60%),
    radial-gradient(60% 80% at 40%  0%, rgba(255,119,198,.18), transparent 60%);
  animation: oyBg 22s ease-in-out infinite alternate;
}
@keyframes oyBg{ to{ transform:rotate(180deg) scale(1.06);} }

.oy-reviews::before{
  content:"";
  position:absolute; top:-100%; left:-100%; width:300%; height:300%;
  background: linear-gradient(45deg, transparent, rgba(0,242,255,.12), transparent);
  transform: rotate(45deg);
  animation: oyShine 6s linear infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
@keyframes oyShine{
  0%   { transform: rotate(45deg) translateX(-100%); }
  100% { transform: rotate(45deg) translateX(100%); }
}

.oy-reviews__cursor{
  --x: 50%; --y: 50%;
  position:absolute; inset:0; pointer-events:none; opacity:.25; mix-blend-mode:screen;
  background: radial-gradient(180px 180px at var(--x) var(--y), rgba(120,119,255,.35), transparent 60%);
}

/* ================= Head ================= */
.oy-reviews__head{ text-align:center; margin-bottom:40px; position:relative; z-index:1; }
.oy-reviews__badge{
  display:inline-block; padding:8px 22px; border-radius:999px; color:#fff;
  background:hsla(0,0%,100%,.1); border:1px solid hsla(0,0%,100%,.2); backdrop-filter:blur(10px);
  font-weight:700; letter-spacing:.6px; text-transform:uppercase; font-size:13px;
}
.oy-reviews__title{ margin:12px 0 10px; font-weight:800; line-height:1.2;
  font-size:clamp(28px,4.2vw,44px); color:#fff;
}
.oy-reviews__title-grad{
  background:linear-gradient(135deg,#667eea,#8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.oy-reviews__sub{ color:rgba(255,255,255,.65); max-width:720px; margin:0 auto; }

/* ================= Viewport & track ================= */
.oy-reviews__viewport{
  position:relative;
  padding-inline: var(--oy-gutter);
}

.oy-reviews__track{
  display:flex;
  gap:18px;
  padding:8px 0 14px;
  /* YAN PADDING OLMAMALIDIR! */
  will-change:transform;
  /* JAVASCRIPT ANIMASIYANI IDARE EDECEK */
  /* transition:transform .6s cubic-bezier(.4,0,.2,1); */
}

/* ================= Cards ================= */
.oy-card{
  flex-shrink: 0; /* Kartların sıxılmasının qarşısını alır */
  width: 20%;
}
@media (max-width: 1399.98px){ .oy-card{ width: 25%; } }
@media (max-width: 1199.98px){ .oy-card{ width: 33.3333%; } }
@media (max-width: 991.98px){  .oy-card{ width: 50%; } }
@media (max-width: 767.98px){  .oy-card{ width: 100%; } }


.oy-card__inner{
  position:relative; height:100%;
  background:hsla(0,0%,100%,.05);
  border:1px solid hsla(0,0%,100%,.12);
  border-radius:22px; padding:26px;
  backdrop-filter:blur(18px);
  transition: all .28s ease;
  overflow:hidden;
}

.oy-card__bar{ display:none; }

.oy-card__inner::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg,#5eead4,#818cf8,#f472b6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.0; transition:opacity .28s ease, filter .28s ease;
  filter: blur(0.5px);
  pointer-events:none;
}
.oy-card__inner:hover{
  transform:translateY(-8px);
  background:hsla(0,0%,100%,.08);
  border-color:rgba(255,255,255,.26);
  box-shadow: 0 18px 60px rgba(0,0,0,.36);
}
.oy-card__inner:hover::after{ opacity:.95; filter: blur(1px); }

.oy-card__glow{
  content:""; position:absolute; inset:-40% -20%; pointer-events:none; opacity:0;
  background:radial-gradient(40% 40% at 50% 40%, rgba(255,255,255,.12), transparent 70%);
  transition:opacity .25s ease;
}
.oy-card__inner:hover .oy-card__glow{ opacity:1; }

.oy-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; position:relative; z-index:1; }

.oy-avatar{ position:relative; }
.oy-avatar img{ width:100%; height:100%; border-radius:50%; border:3px solid #0a0a0a; display:block; }
.oy-avatar::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(#667eea,#8b5cf6,#ff77c3,#667eea);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  animation:oySpin 6s linear infinite;
}
@keyframes oySpin{ to{ transform:rotate(1turn);} }

.oy-avatar__tick{ display:none; }
.oy-avatar.oy-avatar--verified .oy-avatar__tick{
  position:absolute; right:-2px; bottom:-2px; width:22px; height:22px;
  display:grid; place-items:center; color:#fff; font-size:11px;
  background:linear-gradient(135deg,#00c851,#0f0); border-radius:50%; border:3px solid #0a0a0a;
}

.oy-user__name{ color:#fff; font-weight:800; font-size:15px; margin:0 0 4px; line-height:1.2; }
.oy-user__time{ color:rgba(255,255,255,.55); font-size:12px; }

.oy-card__body{ position:relative; padding:22px 0 0; z-index:1; }
.oy-quote{ position:absolute; left:0; top:0; color:hsla(0,0%,100%,.1); }
.oy-text{ color:#e9ecf1; line-height:1.6; margin:0; padding-left:36px; }

.oy-card__foot{
  margin-top:18px; padding-top:16px; border-top:1px solid hsla(0,0%,100%,.1);
  display:flex; align-items:center; justify-content:space-between;
}
.oy-stars{ display:flex; align-items:center; gap:4px; color:#ffd166; font-size:14px; }
.oy-star--off{ opacity:.35; }
.oy-rate{ color:#ffd166; font-weight:700; margin-left:8px; font-size:14px; }

.oy-actions{ display:flex; gap:8px; }
.oy-action{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  color:rgba(255,255,255,.7);
  background:hsla(0,0%,100%,.06); border:1px solid hsla(0,0%,100%,.12);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.oy-action:hover{
  transform:translateY(-1px) scale(1.06);
  background:hsla(0,0%,100%,.12); border-color:hsla(0,0%,100%,.2); color:#fff;
}

/* ================= Nav ================= */
.oy-nav__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:999px; display:grid; place-items:center; color:#fff;
  background:hsla(0,0%,100%,.12); border:1px solid hsla(0,0%,100%,.22); backdrop-filter:blur(8px);
  transition: all .2s ease;
  z-index:3;
}
.oy-nav__btn:hover{ transform:translateY(-50%) scale(1.06); background:hsla(0,0%,100%,.2); }
.oy-nav__btn--prev{ left: max(14px, var(--oy-gutter)); }
.oy-nav__btn--next{ right: max(14px, var(--oy-gutter)); }
.oy-nav__btn.is-disabled{ opacity:.35; pointer-events:none; transform:translateY(-50%) scale(.95); }

/* ================= Dots ================= */
.oy-dots{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.oy-dots button{
  width:42px; height:6px; border-radius:3px; background:hsla(0,0%,100%,.2);
  border:none; position:relative; overflow:hidden; cursor:pointer; padding:0;
}
.oy-dots button .fill{
  position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg,#667eea,#764ba2); transition:inset .3s ease;
}
.oy-dots button.active .fill{ inset:0 0 0 0; }

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



/* ================= Mobile tweaks ================= */
@media (max-width:991.98px){ .oy-reviews{ padding:72px 0; } }
@media (max-width:767.98px){
  .oy-reviews{ padding:56px 0; }
  .oy-nav__btn{ width:42px; height:42px; }
}















/* =========================
   News / Blog panel (modern)
   ========================= */

/* Rənglər – istəsən dəyiş */
:root{
  --news-glow-a:#6d77ff;   /* bənövşəyi-mavi */
  --news-glow-b:#ff77c3;   /* neon çəhrayı  */
  --news-glow-c:#00f2ff;   /* neon cyan     */
  --news-card-bg:hsla(0,0%,100%,.04);
  --news-border:hsla(0,0%,100%,.12);
  --news-text:#e9ecf1;
}

/* Kök panel */
.feed-panel.feed-panel--news{
  position:relative;
  border-radius:20px;
  background:var(--news-card-bg);
  border:1px solid var(--news-border);
  backdrop-filter:blur(10px);
  box-shadow:0 0 30px rgba(0,242,255,.08);
  padding:18px 18px 8px;
  overflow:hidden;
}

/* Şüşə səth üzərində “shine” xətti (yavaş animasiya) */
.feed-panel--news::before{
  content:"";
  position:absolute; inset:-60% -40%;
  background:linear-gradient(45deg,transparent,rgba(0,242,255,.12),transparent);
  transform:rotate(35deg) translateX(-100%);
  animation:newsShine 7s linear infinite;
  pointer-events:none;
}
@keyframes newsShine{
  0%{ transform:rotate(35deg) translateX(-100%); }
  100%{ transform:rotate(35deg) translateX(100%); }
}

/* Header */
.feed-panel__header{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:12px;
}
.feed-panel__title{
  display:flex; align-items:center; gap:10px; color:#fff; font-weight:800;
}
.feed-panel__title i{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-size:14px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
  position:relative; isolation:isolate;
  border:1px solid var(--news-border);
}
.feed-panel__title i::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from 0deg, var(--news-glow-a), var(--news-glow-b), var(--news-glow-c), var(--news-glow-a));
  filter:blur(6px); opacity:.55;
}

/* “Bütün Xəbərlər” linki – neon chip */
.feed-panel__action{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; text-decoration:none;
  color:#fff; font-weight:700; font-size:14px;
  background:hsla(0,0%,100%,.06); border:1px solid var(--news-border);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feed-panel__action:hover{
  transform:translateY(-1px);
  background:hsla(0,0%,100%,.12);
  border-color:hsla(0,0%,100%,.2);
  box-shadow:0 0 20px color-mix(in srgb, var(--news-glow-c) 40%, transparent);
}

/* Body – grid (tam fərqli layout) */
.feed-panel__body{
  display:grid; gap:14px;
  grid-template-columns:repeat(12,1fr);
}

/* Kartların kolon payı: 3 sütun / 2 sütun / 1 sütun */
.feed-news{ grid-column:span 4; }
@media (max-width:1199.98px){ .feed-news{ grid-column:span 6; } }
@media (max-width:639.98px){  .feed-news{ grid-column:span 12; } }

/* Kart */
.feed-news__wrap{
  display:block; position:relative; overflow:hidden; border-radius:16px;
  background:hsla(0,0%,100%,.03);
  border:1px solid var(--news-border);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

/* Sol kənarda neon “accent” – rəylərdən fərqli */
.feed-news__wrap::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; opacity:.9;
  background:linear-gradient(180deg, var(--news-glow-a), var(--news-glow-b), var(--news-glow-c));
  box-shadow:0 0 20px color-mix(in srgb, var(--news-glow-b) 40%, transparent);
}

/* Hover: yüngül qalxma + neon şüa */
.feed-news__wrap:hover{
  transform:translateY(-6px);
  background:hsla(0,0%,100%,.06);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 18px 40px rgba(0,0,0,.3),
    0 0 0 1px color-mix(in srgb, var(--news-glow-a) 24%, transparent);
}

/* Şəkil */
.feed-news__thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.feed-news__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1); transition:transform .5s ease;
}
/* üst overlay + shine */
.feed-news__thumb::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.22) 60%, rgba(0,0,0,.35) 100%),
    radial-gradient(120% 50% at 0% 0%, color-mix(in srgb, var(--news-glow-a) 28%, transparent), transparent 60%);
  pointer-events:none;
  transition:opacity .3s ease;
  opacity:.9;
}
.feed-news__thumb::before{
  /* hər kartın üzərindən keçən “shine” zolağı */
  content:""; position:absolute; top:0; bottom:0; width:55px; left:-80px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:skewX(-20deg);
  transition:transform .6s ease;
}
.feed-news__wrap:hover .feed-news__thumb img{ transform:scale(1.06); }
.feed-news__wrap:hover .feed-news__thumb::before{ transform:translateX(220%) skewX(-20deg); }

/* Məzmun */
.feed-news__content{ padding:14px 14px 16px; color:var(--news-text); }
.feed-news__title{
  margin:0 0 6px; font-weight:800; line-height:1.25;
  font-size:16px; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.feed-news__desc{
  margin:0 0 10px; font-size:14px; color:rgba(255,255,255,.75); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.feed-news__time{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.6);
  padding:6px 10px; border-radius:999px;
  background:hsla(0,0%,100%,.06); border:1px solid var(--news-border);
}
.feed-news__time::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--news-glow-c); box-shadow:0 0 10px var(--news-glow-c);
}

/* İstəyə görə: panel daxilində dikey scrollbar istifadə edəcəksə */
.feed-scroll{ max-height:unset; overflow:visible; }

/* Bölmənin üst–alt boşluğu buradan idarə et */
.feed-panel--news{
  margin-block: clamp(36px, 6vw, 72px);
}

/* Grid quruluşu (3 sütun) */
.feed-panel--news .feed-panel__body{

  padding: clamp(12px, 1.6vw, 24px);
  border-radius: 18px;
}
/* Ana səhifədə yalnız ilk 6 kart görünsün */
.feed-panel--news .feed-panel__body > .feed-news:nth-child(n+7){
  display: none;
}

/* Bölmənin üst–alt boşluğu */
.feed-panel--news{
  margin-block: clamp(36px, 6vw, 72px);
}

/* ------------------ MOBILE: 1 sətir, sağ-sola sürüşdürmə ------------------ */
@media (max-width: 767.98px){

  /* konteyner – horizontal scroll + snap */
  .feed-panel--news .feed-panel__body{
    display: flex;
    align-items: stretch;
    gap: 12px;

    padding: 0 14px;
    margin: 0 -14px;              /* kənarlara nəfəs */

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;

    scrollbar-width: none;        /* Firefox scrollbar gizlə */
  }
  .feed-panel--news .feed-panel__body::-webkit-scrollbar{ display:none; }

  /* kart – sabit en + snap */
  .feed-panel--news .feed-news{
    flex: 0 0 min(86vw, 360px);   /* kartın eni */
    max-width: 360px;
    scroll-snap-align: start;
  }

  /* kart içinin stabil olması üçün (şəkil dartılmasın) */
  .feed-panel--news .feed-news__wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .feed-panel--news .feed-news__thumb{
    width: 100%;
    aspect-ratio: 16/9;           /* sabit nisbət */
    overflow: hidden;
    border-radius: inherit;
  }
  .feed-panel--news .feed-news__thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* sağda son kartın divara yapışmaması üçün “end padding” */
  .feed-panel--news .feed-panel__body::after{
    content: "";
    flex: 0 0 14px;
  }
}



/* Yeni qiymət – vurğulu (səndə artıq gradient ola bilər) */
.pp-card__price--new{
  font-weight: 800;
  font-size: .98rem;
  color: #fff; /* gradient text istifadə edirsə bunu silə bilərsən */
}

/* Köhnə qiymət – üstündən xətt + solğun rəng */
.pp-card__price--old{
  font-weight: 600;
  font-size: .9rem;
  color: rgba(234,240,255,.65);
  text-decoration: line-through;
  text-decoration-thickness: 2px; /* xətt bir az qalın */
  text-decoration-color: rgba(234,240,255,.5);
  opacity: .9;
}


.pp-card__price--old{
  position: relative;
  color: rgba(234,240,255,.5);
}
.pp-card__price--old::after{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:2px; background:rgba(234,240,255,.45);
  transform: translateY(-50%);
}



/* ====== Hizalama: digər bölmələrlə eyni en ====== */
.oy-info-wrap{ padding: 12px 0 0; }                   /* üst-üstə sıxmasın */
.oy-info{ margin: 0; border-radius: 20px;
  background:
    radial-gradient(1200px 600px at -10% 50%, hsl(var(--oy-violet)/.10), transparent 60%),
    radial-gradient(900px 500px at 110% 40%, hsl(var(--oy-pink)/.10), transparent 60%),
    linear-gradient(0deg, var(--oy-glass), var(--oy-glass));
  border:1px solid color-mix(in oklab, var(--oy-border), transparent 40%);
}

/* Grid */
.oy-info__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  padding: 18px 6px;                                    /* iç spacing, header kartları ilə balans */
}

/* Hover tokenləri (məşhur məhsul kartlarına uyğun) */
:root{
  --oy-hover-lift: 6px;
  --oy-outline: color-mix(in oklab, var(--oy-border), hsl(var(--oy-violet)) 45%);
  --pp-grad-1: hsl(var(--oy-violet));
  --pp-grad-2: hsl(var(--oy-pink));
}

/* Kart baza */
.oy-info__card{
  position:relative; display:flex; align-items:flex-start; gap:14px;
  padding: 24px 20px;
  border-radius: 18px;
  background: var(--oy-surface);
  border: 1px solid var(--oy-border);
  box-shadow: 0 6px 20px rgba(0,0,0,.22) inset, var(--oy-shadow);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, outline-color .25s ease, background .25s ease;
  outline: 2px solid transparent; outline-offset: 0;
  overflow: hidden; isolation: isolate;                 /* pseudo-laylar üçün */
  z-index: 0;
}

/* Neon-outline (sənin nümunəndəki ::after) */
.oy-info__card::after{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(135deg,var(--pp-grad-1),var(--pp-grad-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; z-index:1; pointer-events:none;
}

/* Shine / wave (sənin nümunəndəki ::before) */
.oy-info__card::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,.22) 0%, transparent 80%);
  transform:skewX(-20deg); transition:left .6s ease; z-index:2; pointer-events:none;
}

/* Hover davranış */
.oy-info__card:hover{
  transform: translateY(calc(-1 * var(--oy-hover-lift)));
  border-color: rgba(124,77,255,.22);                  /* yüngül vurğu */
  outline-color: hsl(var(--oy-violet)/.55);
  box-shadow: 0 16px 40px rgba(76,110,245,.15), inset 0 0 0 1px rgba(255,255,255,.05);
  z-index: 3;
}
.oy-info__card:hover::after{ opacity:.9; }
.oy-info__card:hover::before{ left:125%; }

/* Icon kapsul */
.oy-info__icon{
  flex:0 0 auto; width:56px; height:56px; display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg,hsl(var(--oy-violet)),hsl(var(--oy-pink)));
  color:#fff;
  box-shadow: 0 10px 28px hsl(var(--oy-pink)/.35);
  z-index:3;                                           /* shine altında itməsin */
}
.oy-info__icon svg{ width:24px; height:24px; color:#fff }

/* Title & text */
.oy-info__text h4{
  margin:2px 0 6px; font-size:16px; font-weight:800; letter-spacing:.2px; color:var(--oy-text)
}
.oy-info__text p{
  margin:0; color:var(--oy-muted); font-size:13.5px; line-height:1.55
}

/* Yumşaq tema fərqləri */
.oy-info__card.is-shopping .oy-info__icon{background:linear-gradient(135deg,hsl(var(--oy-violet)),hsl(var(--oy-orange)))}
.oy-info__card.is-delivery .oy-info__icon{background:linear-gradient(135deg,hsl(var(--oy-pink)),hsl(var(--oy-violet)))}
.oy-info__card.is-support .oy-info__icon{ background:linear-gradient(135deg,hsl(var(--oy-violet)),hsl(var(--oy-pink)))}
.oy-info__card.is-satisfaction .oy-info__icon{background:linear-gradient(135deg,hsl(var(--oy-orange)),hsl(var(--oy-pink)))}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .oy-info__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .oy-info-wrap{ padding: 6px 0 0; }
  .oy-info__grid{ grid-template-columns: 1fr; gap: 12px; padding: 14px 4px; }
  .oy-info__card{ padding:18px 14px; border-radius:16px }
  .oy-info__icon{ width:48px; height:48px; border-radius:12px }
}
/* ============== INFO STRIP — OVERRIDES ============== */

/* 1) Full-bleed zolaq: fonu wrapper-ə daşıyırıq, tam eni tutsun */
.oy-info-wrap{
  position: relative;
  padding: 26px 0;                    /* zolağın dikey boşluğu */
  background:
    radial-gradient(1200px 600px at -10% 50%, hsl(var(--oy-violet)/.10), transparent 60%),
    radial-gradient(900px 500px at 110% 40%, hsl(var(--oy-pink)/.10), transparent 60%),
    linear-gradient(0deg, var(--oy-glass), var(--oy-glass));
  border-top: 1px solid color-mix(in oklab, var(--oy-border), transparent 40%);
  border-bottom: 1px solid color-mix(in oklab, var(--oy-border), transparent 40%);
}

/* iç panel artıq ayrıca fon/border almasın */
.oy-info{
  background: transparent !important;
  border: 0 !important;
  margin: 0;
}

/* 2) Neon outline incəlsin, hover lift azalsın */
:root{
  --oy-hover-lift: 4px;         /* əvvəl 6px idi */
  --oy-neon-width: .6px;        /* neon kənarın qalınlığı */
}

/* kart baza (dəymirik, sadəcə hover və pseudo-lar) */
.oy-info__card{
  border-radius: 18px;
}

/* Neon-outline — daha incə */
.oy-info__card::after{
  padding: var(--oy-neon-width);             /* əvvəl 1px idi */
  border-radius: inherit;
  opacity: 0;                                 /* default */
  transition: opacity .25s ease;
}

/* Shine/ wave davranışı eyni qalır, yalnız lift azaldı */
.oy-info__card:hover{
  transform: translateY(calc(-1 * var(--oy-hover-lift)));
  border-color: rgba(124,77,255,.18);         /* bir az da yumÅŸaq */
  outline-color: hsl(var(--oy-violet)/.5);
}

/* Neon şəffaflığı bir az az — daha təmiz görünüş üçün */
.oy-info__card:hover::after{ opacity: .75; }

/* Mobil/planşetdə də eyni zolaq: yalnız yüngül padding */
@media (max-width: 640px){
  .oy-info-wrap{ padding: 18px 0; }
}




/* ========== Preferences Dropdown (oyf-pref) ========== */
:root{
  --oyf-bg: #0c1019;
  --oyf-panel: rgba(18,23,35,.82);
  --oyf-text: #c9d1ff;
  --oyf-sub: #98a3c7;
  --oyf-accent-1: #7c4dff;
  --oyf-accent-2: #34d0ff;
  --oyf-ring: rgba(124,77,255,.35);
  --oyf-border: rgba(255,255,255,.08);
}

.oyf-pref{
  position: relative;
  display:inline-block;
}

.oyf-pref__trigger{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  color:var(--oyf-text);
  font-weight:600; letter-spacing:.2px;
  border:1px solid var(--oyf-border);
  transition:all .25s ease;
}
.oyf-pref__trigger:hover{
  border-color:var(--oyf-ring);
  box-shadow:0 8px 30px rgba(124,77,255,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  transform:translateY(-1px);
}
.oyf-pref__caret{
  transition:transform .25s ease; opacity:.85;
}
/* Bootstrap dropdown adds .show to menu; style trigger via adjacent sibling */
.oyf-pref .dropdown-menu.show + .dummy{} /* no-op: keep specificity slot */

/* MENU */
.oyf-pref__menu{
  min-width: 320px;
  padding:0;
  margin-top:10px;
  background:linear-gradient(180deg, var(--oyf-panel), rgba(12,16,25,.9));
  border:1px solid var(--oyf-border);
  border-radius:16px;
  box-shadow:
    0 12px 40px rgba(8,10,18,.6),
    inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
  backdrop-filter: blur(10px);
}

/* inner container with gradient ring on hover */
.oyf-pref__container{
  position:relative;
  padding:18px 16px 14px;
}
.oyf-pref__container::after{
  content:"";
  position:absolute; inset:0; border-radius:16px; padding:1px;
  background:linear-gradient(135deg,var(--oyf-accent-1),var(--oyf-accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.0; pointer-events:none; transition:opacity .25s ease;
}
.oyf-pref__menu.show .oyf-pref__container::after{ opacity:.7; }

/* heading / text */
.oyf-pref__head{
  display:block; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:#e7ebff; margin-bottom:4px;
}
.oyf-pref__desc{
  margin:0 0 12px; font-size:13px; color:var(--oyf-sub);
}

/* groups */
.oyf-pref__group{ margin-bottom:12px; }
.oyf-pref__label{
  display:block; font-size:12px; color:#aeb7de; margin-bottom:6px;
}
.oyf-pref__select{
  width:100%; border-radius:10px; padding:10px 12px;
  background:#121827; color:var(--oyf-text); border:1px solid var(--oyf-border);
  outline:none; transition: box-shadow .2s, border-color .2s;
}
.oyf-pref__select:focus{
  border-color:var(--oyf-ring);
  box-shadow:0 0 0 3px rgba(124,77,255,.15);
}

/* actions */
.oyf-pref__actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:6px;
}
.oyf-pref__btn{
  appearance:none; border:0; cursor:pointer;
  padding:10px 14px; border-radius:10px; font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.oyf-pref__btn--primary{
  background: linear-gradient(135deg, var(--oyf-accent-1), var(--oyf-accent-2));
  color:#0c0f18;
  box-shadow:0 6px 18px rgba(52,208,255,.25);
}
.oyf-pref__btn--primary:hover{ transform: translateY(-1px); }
.oyf-pref__btn--ghost{
  background: transparent; color: var(--oyf-text);
  border:1px solid var(--oyf-border);
}
.oyf-pref__btn--ghost:hover{
  border-color: var(--oyf-ring);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Shine line on open */
.oyf-pref__menu::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); opacity:0;
}
.oyf-pref__menu.show::before{
  animation:oyfShine 1.1s ease forwards;
  opacity:1;
}
@keyframes oyfShine{
  0%{left:-60%;}
  100%{left:120%;}
}

/* Responsive */
@media (max-width: 480px){
  .oyf-pref__menu{ min-width: 92vw; }
}

/* --- Footer container --- */
.oyf-footer{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(124,77,255,.10), transparent 60%),
              radial-gradient(1000px 500px at 90% 20%, rgba(52,208,255,.10), transparent 65%),
              #0b0f1a;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.oyf-footer__container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 16px 28px;
}

/* --- Grid --- */
.oyf-footer__grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 16px;
}

/* --- Brand --- */
.oyf-footer__brand{
  grid-column: span 12;
  display:flex; align-items:center; justify-content:center;
  padding-bottom: 10px;
}
.oyf-footer__logo{ height: 48px; opacity:.85; transition:opacity .25s ease, transform .25s ease; }
.oyf-footer__logo--dark{ display:none; }
.oyf-footer__logo:hover{ opacity:1; transform:translateY(-1px); }

/* --- Column --- */
.oyf-footer__col{
  grid-column: span 6;
  min-width: 0;
}

/* --- Only-title links (no submenu) --- */
.oyf-footer__item{
  display:block; padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border:1px solid rgba(255,255,255,.06);
  color:#cfd6ff; text-decoration:none; font-weight:600;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.oyf-footer__item:hover{
  border-color: rgba(124,77,255,.35);
  box-shadow:0 8px 24px rgba(124,77,255,.18);
  transform: translateY(-1px);
}
.oyf-footer__title{ display:block; }

/* --- Groups with sublinks --- */
.oyf-footer__group{ position:relative; padding-top:4px; }
.oyf-footer__groupHead{ margin-bottom:10px; }
.oyf-footer__groupTitle{
  color:#e7ebff; font-weight:700; font-size:14px; margin:0;
  position:relative; display:inline-block;
}
.oyf-footer__groupTitle::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background: linear-gradient(90deg,#7c4dff,#34d0ff);
  transition: width .35s ease;
}
.oyf-footer__group.is-active .oyf-footer__groupTitle::after,
.oyf-footer__group:hover .oyf-footer__groupTitle::after{ width:100%; }

/* --- Sublinks --- */
.oyf-footer__sublinks{ display:flex; flex-direction:column; gap:6px; }
.oyf-footer__sublink{
  color:#aeb7de; text-decoration:none; padding:6px 4px; border-radius:8px;
  position:relative; transition: color .2s, transform .15s, background .2s;
}
.oyf-footer__sublink::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:linear-gradient(90deg,#7c4dff,#34d0ff);
  transform:translateY(-50%); transition: width .25s ease;
}
.oyf-footer__sublink:hover{
  color:#dbe1ff; background: rgba(255,255,255,.03);
  transform: translateX(2px);
}
.oyf-footer__sublink:hover::before{ width:14px; }

/* --- Responsive --- */
@media (min-width: 576px){
  .oyf-footer__col{ grid-column: span 4; }
}
@media (min-width: 992px){
  .oyf-footer__brand{ grid-column: span 12; justify-content:flex-start; }
  .oyf-footer__col{ grid-column: span 3; }
}

/* Optional: dark-mode toggle of logo, əgər səhifə dark/light dəyişirsə */
@media (prefers-color-scheme: light){
  .oyf-footer{ background:#0c0f1a; }
}
/* Kontakt sütunu */
.oyf-footer__contact{
  grid-column: span 12;
}

.oyf-contact{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
  backdrop-filter: blur(6px);
}
.oyf-contact::before{
  /* yüngül shine */
  content:"";
  position:absolute; top:-40%; left:-20%;
  width:60%; height:200%;
  transform: rotate(25deg);
  background: radial-gradient(40% 60% at 50% 50%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.oyf-contact:hover{
  border-color: rgba(124,77,255,.35);
  box-shadow: 0 12px 36px rgba(124,77,255,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(-2px);
}

.oyf-contact__title{
  color:#e7ebff;
  font-weight:700;
  font-size:15px;
  margin: 6px 0 10px;
  position:relative;
  display:inline-block;
}
.oyf-contact__title::after{
  content:"";
  position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background: linear-gradient(90deg,#7c4dff,#34d0ff);
  border-radius:2px;
}

.oyf-contact__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.oyf-contact__item{
  position:relative;
  padding:10px 12px;
  border-radius:10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .25s, background .25s, transform .2s;
}
.oyf-contact__item a{
  color:#cfd6ff; text-decoration:none;
}
.oyf-contact__item:hover{
  background: rgba(124,77,255,.06);
  border-color: rgba(124,77,255,.35);
  transform: translateX(2px);
}

/* Sosial düymələr qutusu */
.oyf-contact__social{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:12px;
  padding-top:8px;
  border-top:1px dashed rgba(255,255,255,.08);
}
.oyf-contact__social a{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  transition: transform .15s, box-shadow .25s, border-color .25s;
}
.oyf-contact__social a:hover{
  transform: translateY(-2px);
  border-color: rgba(52,208,255,.4);
  box-shadow: 0 8px 22px rgba(52,208,255,.18);
}

/* Sürətli əlaqə xətti (alt hissə) */
.oyf-quickcontacts{
  margin-top: 16px;
}
.oyf-quickcontacts__menu{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.oyf-quickcontacts__menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.oyf-quickcontacts__menu a i{ font-size:18px; }
.oyf-quickcontacts__text{ color:#d6dcff; font-weight:600; }
.oyf-quickcontacts__menu a:hover{
  border-color: rgba(124,77,255,.35);
  box-shadow: 0 10px 26px rgba(124,77,255,.18);
  transform: translateY(-1px);
}

/* Copyright xətti */
.oyf-footer__copy{
  text-align:center;
  margin-top: 16px;
  color:#aeb7de;
  opacity:.85;
}

/* Responsiv */
@media (min-width:576px){
  .oyf-footer__contact{ grid-column: span 6; }
  .oyf-quickcontacts__menu{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width:992px){
  .oyf-footer__contact{ grid-column: span 3; }
}







.oym-bottomNav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14,20,30,.72);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(146,169,201,.15);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 9999;
}

.oym-bottomNav__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;
  color:#a9b4c8;
  padding:6px 4px;
  border-radius:12px;
  transition:.2s;
}
.oym-bottomNav__icon{font-size:22px;margin-bottom:4px;color:#cfd7e6;}
.oym-bottomNav__label{font-size:10px;font-weight:600;}

.oym-bottomNav__item.is-active{
  color:#fff;
  background:linear-gradient(180deg,rgba(104,224,255,.1),rgba(169,139,255,.05));
  border:1px solid rgba(169,139,255,.22);
}
.oym-bottomNav__item.is-active .oym-bottomNav__icon{
  background:linear-gradient(90deg,#68e0ff,#a98bff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.oym-bottomNav__badge{
    position: absolute;
    top: -10px;
    left: 192px;
    min-width: 18px;
    height: 18px;
    padding: 0px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6a6a, #ff9a6a);
    color: #fff;
}
/* Footerun ən aşağı hissəsindəki kontakt düymələri */
.footer-contact-buttons {
  margin-bottom: 80px; /* alt nav ilə arasında boşluq */
}

/* Mobile nav hündürlüyü nəzərə alınsın */
@media (max-width: 991.98px){
  .footer-contact-buttons {
    margin-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Quick Contacts blok */
.oyf-quickcontacts {
  margin-top: 20px;
  margin-bottom: 80px; /* Alt nav ilə arasına boşluq */
}

.oyf-quickcontacts__menu {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.oyf-quickcontacts__menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  padding: 10px 16px;
  border-radius: 10px;
  color: #e0e6ff;
  font-size: 14px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.oyf-quickcontacts__menu a:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

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

/* Text yanındakı yazılar */
.oyf-quickcontacts__text {
  white-space: nowrap;
}

/* Footer copy */
.oyf-footer__copy {
  text-align: center;
  padding: 15px 0;
  font-size: 13px;
  color: #8b94b4;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 10px;
}



/* ====== All Categories (oyc-*) ====== */
.oyc-cats{display:block;margin-top:8px}
.oyc-tools{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}

/* Search */
.oyc-search{
  position:relative;flex:1 1 720px;height:48px;border-radius:14px;
  background:linear-gradient(0deg,rgba(255,255,255,.04),rgba(255,255,255,.04)),#141a29;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  overflow:hidden;
}
.oyc-search:focus-within{
  border-color:rgba(110,73,255,.45);
  box-shadow:0 10px 24px rgba(110,73,255,.22), inset 0 0 0 1px rgba(110,73,255,.25);
  transform:translateY(-1px);
}
.oyc-search__icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:#aeb6d4;pointer-events:none
}
.oyc-search__input{
  width:100%;height:100%;border:0;outline:0;background:transparent;color:#e9ecff;
  padding:0 54px 0 42px;font-weight:600
}
.oyc-search__btn{
  position:absolute;right:6px;top:6px;height:36px;min-width:36px;padding:0 10px;border:0;
  border-radius:12px;background:#2a5bff;color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:6px;justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.oyc-search__btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(42,91,255,.35)}

/* Filter button */
.oyc-filter{
  display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:#dfe6ff;font-weight:700;
  position:relative;overflow:hidden;transition:all .3s ease;
}
.oyc-filter::before{
  content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.30) 0%,transparent 80%);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none
}
.oyc-filter:hover{color:#fff;border-color:rgba(110,73,255,.40);background:rgba(110,73,255,.14);box-shadow:0 6px 18px rgba(110,73,255,.35);transform:translateY(-2px)}
.oyc-filter:hover::before{left:125%}


/* Grid */
.oyc-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(6,minmax(0,1fr));
margin-bottom: 10px;
}
@media (max-width:1200px){.oyc-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:992px){.oyc-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:768px){.oyc-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:576px){.oyc-grid{grid-template-columns:repeat(2,1fr)}}

/* Card */
.oyc-card{
  position:relative;display:flex;flex-direction:column;gap:12px;isolation:isolate;
  padding:16px;border-radius:18px;text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  color:#e9ecff;min-height:220px;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.oyc-card__border{
  position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(110,73,255,.25));-webkit-mask:
    linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events:none
}
.oyc-card__glow{
  position:absolute;inset:auto 0 0 0;height:60%;filter:blur(24px);border-radius:50%;
  background:radial-gradient(60% 60% at var(--gx,50%) var(--gy,80%), rgba(110,73,255,.35), transparent 60%);
  opacity:.0;transition:opacity .25s ease
}
.oyc-card__thumb{
  display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
}
.oyc-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.oyc-card__title{
   
    font-size:16px;
   
    
}

/* Hover: lift + sheen + zoom */
.oyc-card::before{
  content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.28) 0%,transparent 75%);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none
}
.oyc-card:hover{
  transform:translateY(-4px);
  border-color:rgba(110,73,255,.35);
  box-shadow:0 16px 34px rgba(110,73,255,.25);
}
.oyc-card:hover::before{left:125%}
.oyc-card:hover .oyc-card__thumb img{transform:scale(1.06)}
.oyc-card:hover .oyc-card__glow{opacity:.9}

/* Small helpers */
.lazy{filter:blur(0);transform:translateZ(0)}





.oyc-card__title{
  font-weight:700;
  line-height:1.25;
  color:#e6ebff;
}


/* ====== Breadcrumb Default Override ====== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03)), #1a1d27;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  margin-bottom: 18px;
}

.breadcrumb-item {
  font-size: 14px;
  font-weight: 600;
  color: #cfd3e0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-item a {
  color: #cfd3e0;
  text-decoration: none;
  transition: color .25s ease;
}
.breadcrumb-item a:hover {
  color: #6e49ff;
}

/* icon */
.breadcrumb-item i {
  color: #9ea6c7;
  font-size: 15px;
  transition: color .25s ease;
}
.breadcrumb-item a:hover i {
  color: #6e49ff;
}

/* Active sonuncu element */
.breadcrumb-item.active {
  color: #fff;
  font-weight: 700;
}
.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  color: #8a8f9d;
  margin: 0 6px;
}






/* ==================== OYC CARD ==================== */
.oycCard{
  position:relative; display:block; text-decoration:none; color:#eef2ff;
  background: linear-gradient(0deg,rgba(255,255,255,.04),rgba(255,255,255,.04)), #141a29;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  overflow:hidden; transform:translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

/* Hover effektləri */
.oycCard:hover{
  transform: translateY(-6px);
  border-color: rgba(110,73,255,.35);
  background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.05)), #1b2235;
  box-shadow:0 18px 42px rgba(0,0,0,.38), 0 16px 34px rgba(110,73,255,.25);
}

/* Glow layer */
.oycCard__glow{
  position:absolute; inset:-20% -20%;
  background: radial-gradient(40% 35% at 70% 30%, rgba(110,73,255,.20), transparent 60%),
              radial-gradient(35% 30% at 30% 70%, rgba(44,219,255,.14), transparent 60%);
  filter: blur(18px);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none;
}
.oycCard:hover .oycCard__glow{ opacity:1 }

/* İç sərhəd */
.oycCard__border{
  position:absolute; inset:0; pointer-events:none;
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Məzmun */
.oycCard__content{
  display:flex; flex-direction:column; gap:12px; padding:14px;
}

/* Şəkil konteyneri */
.oycCard__thumb{
  position:relative; border-radius:12px; overflow:hidden;
  aspect-ratio:1/1; background:#0d1322;
}
.oycCard__img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1) translateZ(0);
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.oycCard:hover .oycCard__img{ transform:scale(1.06) }

/* Shine xətti */
.oycCard::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.22) 0%,transparent 75%);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none; opacity:.0;
}
.oycCard:hover::before{ left:125%; opacity:.9 }

/* Başlıq */
.oycCard__title{
  font-weight:800; font-size:16px; line-height:1.25; letter-spacing:.2px;
  color:#fff; margin:0 2px 6px;
}

/* Adaptasiya */
@media(max-width:520px){
  .oycCard__content{ padding:12px }
  .oycCard__title{ font-size:15px }
}


/* ============ Hero Slider (oy-hero*) ============ */
.oy-hero{
  position: relative;
  border-radius: 18px;
  background: radial-gradient(120% 140% at 10% 0%, rgba(110,73,255,.16) 0%, rgba(14,19,31,.0) 60%),
              radial-gradient(140% 120% at 100% 100%, rgba(255,78,199,.08) 0%, rgba(14,19,31,.0) 60%),
              #121722;
  padding: 10px; /* swiper-in daxili oxları üçün nəfəs */
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.oy-hero .swiper-sld{ border-radius: 14px; overflow: hidden; }
.oy-hero__slide{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  padding: 32px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  isolation:isolate;
}
.oy-hero__glow{
  position:absolute; inset:auto -15% -20% -15%; height:60%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(110,73,255,.25), transparent 70%);
  filter:blur(28px); pointer-events:none;
}

/* Sol mətn sütunu */
.oy-hero__content{
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.oy-hero__title{
  font-size: clamp(22px, 2.8vw, 42px);
  line-height: 1.1;
  font-weight: 800;
  color: #EAEFFF;
  letter-spacing: .2px;
  text-wrap: balance;
}
.oy-hero__title b, .oy-hero__title strong{
  color:#ff4ec7; text-shadow: 0 0 24px rgba(255,78,199,.45);
}
.oy-hero__desc{
  margin:0;
  color:#9FA7C7;
  font-size: clamp(14px, 1.2vw, 16px);
}
.oy-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Sağ vizual */
.oy-hero__visual{
  display:block;
  align-self:center;
  justify-self:end;
  width:100%;
  max-width: 600px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  position:relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.oy-hero__visual img{
  width:100%; height:auto; display:block; transition: transform .35s ease;
}
.oy-hero__visual:hover{
  transform: translateY(-3px);
  border-color: rgba(110,73,255,.35);
  box-shadow: 0 18px 40px rgba(110,73,255,.30);
}
.oy-hero__visual:hover img{ transform: scale(1.04); }

/* Düymələr – mövcud oy-btn sisteminizə uyğundur */
.oy-btn,
.oy-btn--primary{
  position:relative; overflow:hidden; transition: all .3s ease; will-change:transform,box-shadow;
  height:42px; padding:0 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#EAEFFF; background:rgba(255,255,255,.04);
}
.oy-btn--primary{
  border:0; color:#fff;
  background: linear-gradient(90deg,#ff4ec7,#6e49ff);
  box-shadow: 0 10px 28px rgba(110,73,255,.35);
}
.oy-btn::before, .oy-btn--primary::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg,rgba(255,255,255,.28) 0%,transparent 75%);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.oy-btn:hover::before, .oy-btn--primary:hover::before{ left:125%; }
.oy-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.25); }
.oy-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(110,73,255,.45); }

/* Swiper control-ları görünən şəkildə qalsın */
.oy-hero .swiper-button-prev,
.oy-hero .swiper-button-next{
  width:44px; height:44px; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.oy-hero .swiper-button-prev:after,
.oy-hero .swiper-button-next:after{ font-size:18px; color:#EAEFFF; }
.oy-hero .swiper-pagination-bullet{ background:#6e49ff; opacity:.35; }
.oy-hero .swiper-pagination-bullet-active{ opacity:1; }

/* Responsiv */
@media (max-width: 1100px){
  .oy-hero__slide{ grid-template-columns: 1fr; gap:18px; }
  .oy-hero__visual{justify-self:stretch;}
}
@media (max-width: 576px){
  .oy-hero__slide{ padding:18px; }
  .oy-hero__actions{ gap:8px; }
  .oy-hero__visual{
 aspect-ratio: 1000 / 360 !important;    
         
}
}



.oy-hero__visual {
    aspect-ratio: 1000 / 500;
}

/* === OY AUTH MODAL — FINAL (responsive + performant) === */
.oy-authmodal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center; z-index:1200;
}
.oy-authmodal.is-open{ display:flex; }

.oy-authmodal__overlay{
  position:absolute; inset:0;
  background:rgba(3,6,20,.62);
  backdrop-filter:blur(4px);
}

.oy-authmodal__dialog{
  position:relative; z-index:1;
  width:min(860px,96vw);
  max-height:calc(100dvh - 24px);        /* real mobil viewport */
  overflow-y:auto;                       /* iç scroll */
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:40px;
  box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.oy-authmodal__close{
  position:absolute; top:10px; right:10px;
  height:34px; width:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06); color:#e5e9ff; cursor:pointer; z-index:3;
}

/* Tabs — həmişə yan-yana */
.oy-authmodal__tabs{ display:flex; gap:8px; margin:6px 6px 14px; }
.oy-authmodal__tab{
  flex:1 1 auto; height:42px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03); color:#e9ecff; font-weight:800;
}
.oy-authmodal__tab.is-active{
  background:linear-gradient(90deg,#ff4ec7,#6e49ff);
  border-color:transparent; box-shadow:0 0 12px rgba(110,73,255,.35);
}

/* Panes */
.oy-authmodal__panes{ background:rgba(0,0,0,.25); border-radius:16px; padding:16px; }
.oy-authmodal__pane{ display:none; }
.oy-authmodal__pane.is-active{ display:block; }

/* Alerts */
.oy-authmodal__alert{ border-radius:12px; padding:12px 14px; margin-bottom:10px; font-size:14px; }
.oy-authmodal__alert--danger{ background:rgba(255,68,68,.1); border:1px solid rgba(255,68,68,.35); color:#ffd1d1; }
.oy-authmodal__alert--success{ background:rgba(92,214,92,.1); border:1px solid rgba(92,214,92,.35); color:#d9ffde; }

/* Form */
.oy-authmodal__form{ display:grid; gap:12px; }
.oy-authmodal__label{ font-size:13px; color:#9ea7c9; }
.oy-authmodal__inputWrap{ position:relative; }
.oy-authmodal__inputWrap i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.8; }
.oy-authmodal__input{
  width:100%; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04); color:#e9ecff;
  padding:0 12px 0 36px; font-weight:600;
}

.oy-authmodal__row{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.oy-authmodal__check{ display:flex; gap:6px; align-items:center; font-size:14px; color:#dbe0ff; }
.oy-authmodal__link{ font-size:14px; color:#bcd1ff; }

/* Submit */
.oy-authmodal__submit{
  height:46px; border-radius:12px; border:0; cursor:pointer;
  font-weight:800; color:#fff; margin-top:6px;
  background:linear-gradient(90deg,#ff4ec7,#6e49ff);
  box-shadow:0 8px 20px rgba(110,73,255,.35);
}

/* Divider */
.oy-authmodal__divider{
  display:flex; align-items:center; gap:8px; margin:14px 0; color:#aab2d9; font-size:13px;
}
.oy-authmodal__divider:before,
.oy-authmodal__divider:after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}

/* Socials */
.oy-authmodal__socials{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.oy-authmodal__social{
  display:flex; gap:8px; align-items:center; justify-content:center;
  height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  color:#e9ecff; font-size:14px; font-weight:600;
}
.oy-authmodal__social--fb{ background:rgba(59,89,152,.15); }
.oy-authmodal__social--tw{ background:rgba(29,161,242,.12); }
.oy-authmodal__social--gg{ background:rgba(255,255,255,.06); }

/* Util: iki sahəni yan-yana göstərmək üçün wrapper */
.oy-authgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Responsive tweaks */
@media (max-width:768px){
  .oy-authmodal__dialog{ width:92vw; padding:20px; border-radius:14px; }
  /* tablar yenə də YAN-YANA qalır */
  .oy-authmodal__tab{ height:38px; font-size:14px; }
}
@media (max-width:640px){
  .oy-authmodal__dialog{ max-height:calc(100dvh - 20px); }
  .oy-authmodal__socials{ grid-template-columns:1fr; }
  .oy-authmodal__input{ font-size:14px; }
  .oy-authmodal__submit{ font-size:14px; }
  .oy-authgrid{ grid-template-columns:1fr; } /* çox dar ekranda 1 sütun */
}

/* Turnstile mobil overflow düzəlişi */
@media (max-width:480px){
  .cf-turnstile{ transform:scale(.92); transform-origin:left top; width:100%; }
}
/* Modal hər şeyin üstündə olsun */
.oy-authmodal{ z-index: 10000; }
.oy-authmodal__overlay{ z-index: 10000; }
.oy-authmodal__dialog{ z-index: 10001; }

/* ALT MENYU: sənin layihəndəki class-ı seç */
/* Məs: .mobile-nav, .bottom-nav, .oy-bottomnav və s. */
.bottom-nav,
.mobile-nav,
.oy-bottomnav{ z-index: 900 !important; }  /* modalın altında qalsın */







/* =======================
   Chips segmented sidebar
   ======================= */
:root{
  --cc-bg:#0f1420;
  --cc-hero:#151a26;
  --cc-chip:#1c2230;
  --cc-chip-b:#283043;
  --cc-text:#d7ddf3;
  --cc-dim:#aab2c9;
  --cc-active1:#5a5ff1;      /* gradient start */
  --cc-active2:#7c5bff;      /* gradient end   */
  --cc-glow:rgba(98,82,255,.45);
}

/* konteyner */
.catchips{display:block}
.catchips__hero{
  background:var(--cc-hero);border-radius:18px;overflow:hidden;margin-bottom:16px
}
.catchips__hero img{display:block;width:100%;height:auto;object-fit:cover}

/* bar — horizontal pill-lər; kiçik ekranlarda da yan-a sürüşür */
.catchips__bar{
  display:flex; gap:14px; padding:12px;
  background:var(--cc-hero); border-radius:16px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;  /* FF/IE */
}
.catchips__bar::-webkit-scrollbar{display:none}   /* WebKit */

/* CHIP düyməsi */
.catchips__btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  white-space:nowrap; text-decoration:none; user-select:none;
  padding:12px 18px; border-radius:14px;
  color:var(--cc-text); font-weight:700; line-height:1;
  background:
    radial-gradient(120% 140% at 10% 10%, rgba(255,255,255,.06) 0%, transparent 60%) /* inner sheen */,
    var(--cc-chip);
  border:1px solid var(--cc-chip-b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* ikon */
.catchips__btn i{font-size:16px;opacity:.9;transition:transform .2s ease}

/* --- Hover effekt: Lift + Sheen (diagonal zolaq) --- */
.catchips__btn::before{
  content:""; position:absolute; top:0; left:-75%;
  width:55%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,.35) 0%, transparent 70%);
  transform:skewX(-20deg);
  transition:left .55s ease; pointer-events:none;
}
.catchips__btn:hover{ transform:translateY(-4px); border-color:rgba(110,73,255,.35);
  box-shadow:0 16px 34px rgba(56,62,134,.25) }
.catchips__btn:hover::before{ left:125% }
.catchips__btn:hover i{ transform:scale(1.06) }

/* AKTİV: bənövşəyi gradient + yumşaq parıltı */
.catchips__btn.is-active{
 background: linear-gradient(90deg, #ff4ec7, #6e49ff);
  color:#fff; border-color:rgba(124,91,255,.65);
  box-shadow:0 10px 26px var(--cc-glow);
}

/* təsvir (istəyə görə) */
.catchips__desc{margin-top:10px;color:var(--cc-dim);font-size:14px;line-height:1.55}

/* focus görünürlüğü (klaviatura üçün) */
.catchips__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(124,91,255,.35), 0 10px 26px var(--cc-glow)
}

/* ====== Responsive ====== */
/* dar ekran: pill-lər bir sətirdə, yan-a sürüşür; 
   istəyirsənsə 2 sətir “wrap” etmək üçün bu modifikatoru ver: class="cat chips__bar is-wrap" */
.catchips__bar.is-wrap{flex-wrap:wrap; overflow-x:visible}
.catchips__bar.is-wrap .catchips__btn{flex:1 1 auto}

/* ===== Mobile: 1 sütunlu grid, tam adlar ===== */
@media (max-width: 640px){
  /* pill-ləri grid-ə çeviririk */
  .catchips__bar{
    display: grid !important;
    grid-template-columns: 1fr;     /* 1 sətirdə 1 kateqoriya */
    gap: 12px !important;
    padding: 12px !important;
    overflow-x: visible !important; /* horizontal scroll-u söndür */
  }

  /* düymə tam eni tutsun, içlik bir az artsın */
  .catchips__btn{
    width: 100%;
    min-width: 0;
    justify-content: flex-start;    /* ikon + mətn sola hizalansın (istəsən center elə) */
    padding: 14px 16px;
    border-radius: 16px;
  }

  /* adlar tam görünsün – heç yeri kəsmə */
  .catchips__btn span{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* kiçik ikon balansı */
  .catchips__btn i{ font-size: 15px }
}

/* çox kiçik telefonlar üçün (≤360px) bir az kompaktlaşdır */
@media (max-width: 360px){
  .catchips__btn{ padding: 12px 14px }
}




/* ---- Tabs konteyneri ---- */
.header-row.nav{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:14px;
  padding:16px;
  border-radius:18px;
  background:#171a22;
  border:1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 8px 26px rgba(0,0,0,.25);
  /* hover pseudo-ların kənara daşmasını kəs */
  overflow:hidden;
}

/* ---- Hər tab (klas eynidir) ---- */
.header-column{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  width:100%;
  padding:16px 18px;
  border-radius:14px;
  background:#1f2430;
  border:1px solid #2a2f3b;
  color:#c7cfe6;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s;
  /* pseudo-ların “çıxıntı”sını kəsmək üçün */
  overflow:hidden;             /* <- əsas fix */
  isolation:isolate;           /* shadow bleed-in qarşısını alır */
  will-change: transform;
}
.header-column i{ font-size:18px; opacity:.95 }

/* Hover – yüngül qaldırma + parıltı */
.header-column:hover{
  transform: translateY(-2px);
  border-color:#364058;
  box-shadow: 0 8px 22px rgba(36,46,68,.35);
}

/* Hover “sheen” – elementin içində qalsın */
.header-column::after{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  left:-60%;
  width:45%; height:100%;
  transform: skewX(-20deg);
  background: linear-gradient(120deg, rgba(255,255,255,.26) 0%, transparent 70%);
  transition:left .55s ease;
  pointer-events:none;
}
.header-column:hover::after{ left:115%; }

/* Aktiv hal – gradient pill */
.header-column.active{
  color:#fff;
 background: linear-gradient(90deg, #ff4ec7, #6e49ff);
  border-color: rgba(118,104,255,.55);
  box-shadow:
    0 12px 28px rgba(82,74,255,.32),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.header-column.active i{ opacity:1 }

/* Aktivdə yumşaq işıq (sheen) — kənara daşmır */
.header-column.active::before{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;
  background:
    radial-gradient(900px 150px at -15% -25%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(700px 140px at 115% 140%, rgba(255,255,255,.12), transparent 60%);
  mix-blend-mode: screen;
  pointer-events:none;
}

/* ---- Responsiv ---- */
@media (max-width: 992px){
  .header-row.nav{ grid-template-columns: repeat(2,1fr); gap:12px; padding:12px; }
  .header-column{ padding:14px 14px; font-size:15px; }
}
@media (max-width: 540px){
  .header-row.nav{ grid-template-columns: 1fr; gap:10px; padding:10px; }
  .header-column{ justify-content:flex-start; padding:14px 16px; }
  .header-column i{ width:22px; text-align:center; }
}



/* === Category Hero === */
.cat-hero{position:relative;border-radius:24px;overflow:hidden;background:#151821;height:220px}
.cat-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:saturate(1.05);transform:scale(1.02)}
.cat-hero__bg--placeholder{background:linear-gradient(180deg,#1d2130 0%,#0f1118 100%)}
.cat-hero__overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.75) 100%)}
.cat-hero:hover .cat-hero__bg{transform:scale(1.04);transition:transform .45s ease}

/* Glass panel */
.cat-hero__glass{    
    width: 100%;
    margin: 0 auto;
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(15, 17, 24, .65), rgba(15, 17, 24, .35));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    backdrop-filter: blur(8px);
    color: #fff;
    
}
.cat-hero__glass:before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 120% at 0% 0%,rgba(124,73,255,.25) 0%,transparent 55%);opacity:.35}

/* İç sıra */
.cat-hero__row{display:flex;align-items:center;gap:16px;min-width:0}
.cat-hero__thumb{position:relative;flex:0 0 auto;width:88px;height:88px;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);background:#0f1118}
.cat-hero__thumb img{width:100%;height:100%;object-fit:cover}
.cat-hero__badge{position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#5f7aff,#7c49ff);
  border:1px solid rgba(124,73,255,.6)}

/* Mətni blok */
.cat-hero__content{min-width:0}
.cat-hero__title{margin:0 0 6px;font-weight:800;line-height:1.1;font-size:clamp(22px,2.4vw,38px);
  text-shadow:0 3px 18px rgba(0,0,0,.45)}
.cat-hero__desc{margin:0;color:#d6daf1;opacity:.95;font-size:clamp(12px,1.1vw,15px)}
.cat-hero__meta{margin-top:10px;display:flex;gap:16px;align-items:center;color:#d6daf1;font-weight:600;font-size:14px}
.cat-hero__meta .stat i{margin-right:6px;opacity:.9}
.cat-hero__meta .stat--cat{padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}

/* Responsiv */
@media (max-width:992px){
  .cat-hero{height:clamp(160px,36vw,280px)}
  .cat-hero__thumb{width:72px;height:72px;border-radius:14px}
  .cat-hero__meta{gap:12px;font-size:13px}
}
@media (max-width:600px){
  .cat-hero{border-radius:16px;height:clamp(150px,42vw,220px)}
  .cat-hero__glass{padding:10px 12px;border-radius:12px}
  .cat-hero__row{gap:12px}
  .cat-hero__thumb{width:60px;height:60px;border-radius:12px}
  .cat-hero__title{font-size:clamp(18px,5.8vw,24px)}
  .cat-hero__desc{font-size:12px;max-width:95%}
  .cat-hero__meta{gap:10px;font-size:12px}
}


/* ==== Neo product card (dark + neon glass) ==== */
:root{
  --neo-card-bg: #171a22;
  --neo-card-border: #232736;
  --neo-card-glow: 0 10px 30px rgba(0,0,0,.35);
  --neo-accent: #6c5ce7;       /* bənövşəyi */
  --neo-accent-2: #21c164;     /* yaşıl */
  --neo-text: #e9ecf1;
  --neo-text-dim: #a8b0c2;
  --neo-danger: #ef4444;
}

.neo-card{
  background: linear-gradient(180deg, #1a1e28 0%, #151824 100%);
  border: 1px solid var(--neo-card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--neo-card-glow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
}

.neo-card:is(:hover, .is-in-cart){
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--neo-accent) 55%, var(--neo-card-border));
  box-shadow: 0 16px 50px rgba(108,92,231,.25);
}

.neo-card__media{
  position: relative;
  aspect-ratio: 16 / 11;      /* səndə onsuz da var */
  background: radial-gradient(60% 80% at 50% 0%, rgba(108,92,231,.25), transparent 55%);
  padding: 30px;              /* 4 tərəfdən bərabər məsafə */
  box-sizing: border-box;     /* padding hündürlüyə daxil olsun */
  overflow: hidden;           /* ehtiyat üçün */
}

.neo-card__img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* cover → contain */
  object-position: center;    /* mərkəzləşdir */
  display: block;
  filter: saturate(1.02) contrast(1.03);
}
/* üst badge-lər */
.neo-badge{
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.neo-badge--ok{ background: linear-gradient(180deg, rgba(33,193,100,.25), rgba(33,193,100,.15)); }
.neo-badge--no{ background: linear-gradient(180deg, rgba(239,68,68,.25), rgba(239,68,68,.15)); }

.neo-inbasket{
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(180deg, rgba(108,92,231,.25), rgba(108,92,231,.15));
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.neo-points{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: linear-gradient(180deg, rgba(245,179,1,.25), rgba(245,179,1,.12));
  border: 1px solid rgba(255,255,255,.12);
  padding: 6px 10px;
  border-radius: 10px;
  color: #ffd66b;
  font-weight: 700;
  display: inline-flex; gap: 6px; align-items: center;
}

.neo-card__content{
  padding: 14px 14px 16px;
  display: grid;
  gap: 12px;
}

.neo-card__title{
  color: var(--neo-text);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.neo-card__title:hover{ color: #fff; }

.neo-price{
  display: flex; align-items: baseline; gap: 10px;
}
.neo-price__old{
  color: var(--neo-text-dim);
  text-decoration: line-through;
  font-size: 13px;
}
.neo-price__now{
  color: #8cf7b8;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 16px;
}

/* Alt kontrol zonası */
.neo-controls{
  /*display: grid;*/
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}


.gamex-quantity-calc{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 4px;
  display: inline-flex; gap: 6px; align-items: center;
}
.gamex-qty-btn{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.06);
  color: var(--neo-text);
  font-weight: 800;
  transition: background .2s ease, transform .2s ease;
}
.gamex-qty-btn:active{ transform: scale(.96); }
.gamex-input-quantity{
  width: 54px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--neo-text);
  font-weight: 700;
}


.neo-cart-btn{
  border-radius: 12px !important;
  background: linear-gradient(90deg, var(--neo-accent) 0%, #8b5cf6 100%) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 10px 14px !important;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(139,92,246,.25);
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.neo-cart-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(139,92,246,.35);
}


.neo-card.is-in-cart{
  outline: 2px solid color-mix(in srgb, var(--neo-accent-2) 55%, transparent);
  box-shadow: 0 0 0 6px rgba(33,193,100,.08), var(--neo-card-glow);
}
/* ====== GRID / ROW SPACING & CONSISTENT HEIGHT ====== */

.neo-card { margin-bottom: 24px; }        /* fallback */
[class*="col-"] > .neo-card { margin-bottom: 24px; } 
.neo-card__content { min-height: 130px; }             


.neo-card__media { aspect-ratio: 16/11; }



.gamex-quantity-calc { min-width: 150px; }


.neo-cart-btn { white-space: nowrap; }

/* ====== RESPONSIVE TUNING ====== */


@media (max-width: 1199.98px) {
  .neo-card__content { padding: 0px 0px 0px; }
  .neo-controls {
    grid-template-columns: 1fr;      
    gap: 12px;
  }
  .neo-cart-btn { width: 100% !important; justify-content: center; }
  .gamex-quantity-calc { justify-content: center; width: 100%; }
}


@media (max-width: 991.98px) {
  .neo-card__title { font-size: clamp(14px, 3.6vw, 16px); }
  .neo-price__now  { font-size: 15px; }
  .neo-badge, .neo-inbasket, .neo-points {
    padding: 5px 8px; font-size: 11px; border-radius: 8px;
  }
  .gamex-qty-btn { width: 32px; height: 32px; }
  .gamex-input-quantity { width: 48px; }
}


@media (max-width: 767.98px) {

  .neo-card { margin-bottom: 16px; }
  .neo-card__content { gap: 8px; }


  .neo-badge { top: 8px; left: 8px; }
  .neo-inbasket { top: 8px; right: 8px; }
  .neo-points { right: 8px; bottom: 8px; }
 
}


@media (max-width: 479.98px) {
  .neo-card__media { aspect-ratio: 16/12; }         
  .neo-cart-btn { padding: 12px 14px !important; font-size: 14px; }
  .gamex-quantity-calc { padding: 3px; }
  .gamex-input-quantity { font-size: 14px; }
}
.neo-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Shine layı */
.neo-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 46%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.12) 54%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-120%) rotate(25deg);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Hover effekti */
.neo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(108,92,231,.4);
}

.neo-card:hover::after {
  opacity: 1;
  transform: translateX(120%) rotate(25deg);
  transition: transform 1s cubic-bezier(.2,.6,.2,1), opacity .3s ease;
}

/* ===== Fix: Cart button text overflow on small screens ===== */

/* 576px və aşağı enlər */
@media (max-width: 575.98px){
  .neo-cart-btn{
    width: 100% !important;
    justify-content: center;
    padding: 10px 10px !important;   /* daha dar padding */
    font-size: 13px;                 /* mətn kiçik */
    gap: 6px;                        /* ikonla aranı azaldır */
  }
  /* nowrap-ı söndür: mətn sığsın */
  .neo-cart-btn { white-space: normal; line-height: 1.2; }
  /* alternativ: 1 sətir + ellipsis istəyirsənsə, yuxarıdakı 2 sətiri sil, bunu aç */
  /* .neo-cart-btn span{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } */

  /* ikon ölçüsünü də azaldırıq */
  .neo-cart-btn i{ font-size: 14px; }

  /* quantity blokunun həddən böyük min-width-ünü kiçilt */
  .gamex-quantity-calc{ min-width: 130px; }
}

/* daha dar cihazlar (420px və aşağı) üçün ekstra sıxlıq */
@media (max-width: 420px){
  .neo-cart-btn{ font-size: 12px; padding: 9px 10px !important; gap: 5px; }
  .gamex-quantity-calc{ min-width: 120px; }
}

/* Skeleton wrapper */
.skeleton-wrapper{ position: relative; overflow: hidden; border-radius: inherit; }

/* Şəkil yüklənənə qədər üstündə şimmer */
.skeleton-shimmer{
  position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:
    linear-gradient(180deg,#1a1e28,#151824),
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.06) 40%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,.06) 60%,
      rgba(255,255,255,0) 100%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, -120% 0;
  animation: skelSweep 1.2s linear infinite;
  transition: opacity .25s ease, visibility .25s ease;
}

/* LazySizes şəkil yükləyəndə img-ə .lazyloaded verir — overlay-i gizlə */
.skeleton-wrapper img.lazyloaded + .skeleton-shimmer{
  opacity:0; visibility:hidden;
}

/* Badge-lər həmişə üst qatda qalsın */
.neo-badge, .neo-inbasket, .neo-points{ z-index:2; position:absolute; }

@keyframes skelSweep{
  to{ background-position: 0 0, 120% 0; }
}

/* =========================
   oySearch – SIMPLE BAR + RESULTS
   ========================= */
#oySearch{
  --bg: var(--neo-card-bg);
  --bd: var(--neo-card-border);
  --txt: var(--neo-text);
  --dim: var(--neo-text-dim);
  --accent: var(--neo-accent);
}

/* bar konteyneri – mərkəzdə və kifayət qədər geniş */
.ht_navbar_search{ display:flex; justify-content:center; flex:1 1 auto; }
#oySearch.search--modern{ position:relative; width:min(600px,90vw); }

/* === pill bar === */
#oySearch .search__head{
  position:relative;
  height:48px;
  padding:0 54px 0 14px;                 /* sağ ikon üçün boşluq */
  border-radius:999px;
  background:linear-gradient(180deg,#1a1e28,#151824);
  border:1px solid var(--bd);
  display:flex; align-items:center; gap:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.25);
}

/* input */
#oySearch .search__input{
  flex:1 1 auto; height:100%;
  background:transparent; border:0; outline:0;
  color:var(--txt); font-size:15px; padding:0;
}
#oySearch .search__input::placeholder{ color:var(--dim); }

/* sağdakı 🔍 – kliklənəndir, yazanda itmir */
#oySearch .search__start{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:44px; height:42px; border-radius:0 999px 999px 0;
  border-left:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center;
  color:var(--dim); background:transparent;
}
#oySearch .icon{ width:18px; height:18px; display:block; fill:currentColor; }

/* bu dizaynda geri/bağla düymələri lazım deyil */
#oySearch .search__direction, #oySearch .search__close{ display:none !important; }

/* fokus vurğusu */
#oySearch .search__head:has(.search__input:focus){
  border-color: color-mix(in srgb, var(--accent) 42%, var(--bd));
  box-shadow: 0 0 0 3px rgba(108,92,231,.16);
}

/* === RESULTS PANEL === */
/* panel barın eni qədərdir və onun altına yapışır */
#oySearch .search__body{
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  width:100%;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  display:none; z-index:1200;
  max-height:clamp(260px, 50vh, 520px);
  overflow:auto;
  /* daxili boşluq */
  padding:6px 6px 8px;
}
/* Sənin JS hansı sınıfı verirsə – hər iki halda açılsın */
#oySearch.is-open .search__body,
#oySearch.has-text .search__body{ display:block; }

/* başlıq xətti */
#oySearch .search__category{
  margin: 0 6px 6px;
  padding: 6px 0 4px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  color: var(--dim); font-size:12px; letter-spacing:.4px; text-transform:uppercase;
}

/* siyahı */
.search__list{ display:grid; gap:6px; }

/* item – 3 sütun: thumb | (title linki) | price */
.search__item{
  position:relative;
  display:grid;
  grid-template-columns: 64px 1fr auto;
  align-items:center; gap:12px;
  min-height:68px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.search__item:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

/* LINK – Safari ilə uyğundur: “contents” YOX, özündə grid */
.search__link{
  grid-column: 1 / 3;           /* 1-ci və 2-ci sütunu tutur */
  display:grid;
  grid-template-columns: 64px 1fr;
  align-items:center; gap:12px;
  min-width:0;                  /* ellipsis üçün */
  text-decoration:none;
}

/* thumb */
.search__preview{
  width:64px; height:64px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#10131e,#0b0f19);
}
.search__preview img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .25s ease;
}
.search__preview img.lazyloaded,
.search__preview img.ls-is-cached{ opacity:1; }

/* başlıq */
.search__details{ min-width:0; }
.search__title{
  color:#e9ecf1; font-weight:700; font-size:14px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* qiymət sağda */
.summary_price_box{ justify-self:end; }
.summary_prices_inner{ display:flex; align-items:center; gap:6px; }
.summary__price{ color:#8cf7b8; font-weight:800; font-size:13px; white-space:nowrap; }

/* mobil kompakt */
@media (max-width:575.98px){
  #oySearch.search--modern{ width:min(100%, 92vw); }
  #oySearch .search__head{ height:44px; }
  #oySearch .search__start{ width:42px; height:40px; }
  .search__item{ grid-template-columns:56px 1fr; gap:10px; padding:8px; min-height:62px; }
  .search__link{ grid-template-columns:56px 1fr; }
  .search__preview{ width:56px; height:56px; }
  .summary_price_box{ grid-column:2; justify-self:end; margin-top:2px; }
  .search__title{ font-size:13px; }
  .summary__price{ font-size:12px; }
}
/* --- Icon heç vaxt itməsin --- */
#oySearch .search__start{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 42px;
  border-left: 1px solid rgba(255,255,255,.08);
  border-radius: 0 999px 999px 0;
  display: grid; place-items: center;
  color: var(--neo-text-dim);
  background: transparent;
  z-index: 2;
}

/* Hər hansı state onu gizlətsə, məcburi göstər */
#oySearch.is-open .search__start,
#oySearch.has-text .search__start,
#oySearch .search__start[hidden]{
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mətn ikonun altına girməsin */
#oySearch .search__input{
  padding-right: 56px;   /* ikon üçün boşluq */
}

/* Əlavə: bəzən başqa stylesheet-lər start/close düymələrini dəyişir */
#oySearch .search__direction,
#oySearch .search__close{
  display: none !important;
}
@media (min-width: 1281px) {
        .listing-card-wrapper {
            width: auto;
        }
}
@media (max-width: 600px) {
    .listing-card-wrapper {
            width: 100%;
            margin: 0 !important;
            box-sizing: border-box;
    }
}
    
/* ===================== usermenu (scoped) ===================== */
.usermenu{
  /* local theme vars (qəsdən :root yerinə burada saxladıq ki, site-in qalan hissəsinə təsir etməsin) */
  --um-bg: #14161b;
  --um-card: rgba(255,255,255,.05);
  --um-stroke: rgba(255,255,255,.12);
  --um-stroke-strong: rgba(255,255,255,.18);
  --um-text: #e8ecf3;
  --um-muted: rgba(255,255,255,.65);
  --um-grad: linear-gradient(135deg,#5eead4,#818cf8,#f472b6);
  --um-success-bg: rgba(34,197,94,.12);
  --um-success-stroke: rgba(34,197,94,.35);
  --um-success-text: #86efac;

  position: sticky; top:24px;
  background: var(--um-card);
  border: 1px solid var(--um-stroke);
  border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 60px rgba(0,0,0,.40);
  isolation: isolate; overflow: hidden;
}
.usermenu::before{
  content:""; position:absolute; inset:-60% -40% auto auto; width:200px; height:200px;
  background: radial-gradient(120px 120px at 70% 30%, rgba(129,140,248,.22), transparent 60%);
  filter: blur(18px); pointer-events:none;
}

/* mobile toggle */
.usermenu__toggle{
  width:100%; display:flex; align-items:center; gap:10px;
  border:1px solid var(--um-stroke); border-radius:14px;
  background: rgba(255,255,255,.05); color:var(--um-text);
  padding:10px 12px; margin-bottom:12px;
}
.usermenu__toggle i{font-size:16px}

/* profile */
.usermenu__profile{ display:flex; align-items:center; gap:14px; padding:10px 6px 16px; }
.usermenu__avatar{
  width:80px; height:60px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:#121212; font-weight:800; font-size:20px;
  position:relative; isolation:isolate;
}
.usermenu__avatar{width:48px;height:48px;border-radius:9999px;overflow:hidden;flex:0 0 48px;}
.usermenu__avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}


@keyframes usermenuSpin{to{transform:rotate(1turn)}}

.usermenu__info{min-width:0}
.usermenu__headline{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; }
.usermenu__name{ color:var(--um-text); font-weight:800; line-height:1; font-size:16px; white-space:nowrap; }

/* status pill */
.usermenu__status{
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:999px;
  font-size:13px; line-height:1; white-space:nowrap;
  color:var(--um-muted);
  border:1px solid var(--um-stroke);
  background: rgba(255,255,255,.06);
  text-decoration:none;
}
.usermenu__status i{font-size:14px}
.usermenu__status--success{
  background: var(--um-success-bg); border-color: var(--um-success-stroke); color: var(--um-success-text);
}
.usermenu__status--danger{
  background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.32); color:#fecaca;
}

/* nav */
.usermenu__nav{ margin-top:6px }
.usermenu__title{
  color:var(--um-muted); text-transform:uppercase; letter-spacing:.8px;
  font-weight:700; font-size:11px; margin:10px 6px;
}

/* item */
.usermenu__item{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:14px 14px; margin:8px 0;
  color:var(--um-text); text-decoration:none; border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--um-stroke);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  overflow:hidden;
}
.usermenu__item i{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:10px; background: rgba(255,255,255,.06); border:1px solid var(--um-stroke-strong);
  color: var(--um-muted);
}
.usermenu__item::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:4px 0 0 4px;
  background: var(--um-grad); opacity:0; transition:opacity .18s ease;
}
.usermenu__item:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: var(--um-stroke-strong);
  box-shadow: 0 10px 40px rgba(129,140,248,.20);
}
.usermenu__item:hover::before{opacity:1}
.usermenu__item.is-active{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 12px 46px rgba(129,140,248,.28);
}
.usermenu__item.is-active::before{opacity:1}
.usermenu__item--danger{
  color:#ffb3b3;
}
.usermenu__item--danger i{
  background: rgba(255,0,0,.06); border-color: rgba(255,0,0,.18);
}

/* footer */
.usermenu__footer{ margin-top:8px }
.usermenu__divider{
  border:0; height:1px; margin:10px 0 6px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}

/* mobile behaviour: toggle açıq deyilsə naviqasiya gizlənir */
@media (max-width: 991.98px){
  .usermenu{ top:12px ;        margin-bottom: 4px; }
  .usermenu:not(.is-open) .usermenu__nav,
  .usermenu:not(.is-open) .usermenu__footer{ display:none }
  .usermenu__avatar{
  width:80px; height:65px; 
}
}
/* ===== DASHBOARD – dense stats (dashx-*) ===== */
.dashx{position:relative; isolation:isolate}
.dashx::before{
  content:""; position:absolute; inset:-25% -10% auto -10%;
  background: radial-gradient(300px 280px at 10% 10%, rgba(129,140,248,.14), transparent 60%),
              radial-gradient(260px 240px at 85% 35%, rgba(94,234,212,.10), transparent 60%);
  filter: blur(50px); pointer-events:none;
}

/* Grid */
.dashx-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
}
@media (max-width: 1199.98px){ .dashx-grid{ grid-template-columns: repeat(3, minmax(220px,1fr)); } }
@media (max-width: 991.98px) { .dashx-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width: 575.98px){ .dashx-grid{ grid-template-columns: 1fr; } }

.dashx-span-2{ grid-column: span 2; }
@media (max-width: 991.98px){ .dashx-span-2{ grid-column: span 2; } }
@media (max-width: 575.98px){ .dashx-span-2{ grid-column: span 1; } }

/* Card base */
.dashx-card{
  position:relative; overflow:hidden;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  text-decoration:none; color:#e8ecf3; display:block;
  min-height: 152px;
}
.dashx-card::after{ /* neon edge */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg,#5eead4,#818cf8,#f472b6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.0; transition:opacity .2s ease, filter .2s ease; filter:blur(.6px);
}
.dashx-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 60px rgba(129,140,248,.25);
}
.dashx-card:hover::after{ opacity:1; filter:blur(.9px); }

/* Header */
.dashx-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 14px 2px 14px;
}
.dashx-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:18px;
}
.dashx-action{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:#e8ecf3; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
}
.dashx-action:hover{ background:rgba(255,255,255,.12); }

/* Body */
.dashx-body{ padding:10px 16px 16px; }
.dashx-value{ font-size:28px; font-weight:800; line-height:1.15; }
.dashx-label{ color:rgba(232,236,243,.65); margin-top:6px; }

.dashx-title{ font-weight:700; font-size:16px; padding:18px 16px 16px; }
.dashx-sub{ color:rgba(232,236,243,.65); margin:-6px 16px 16px; }

/* Themes */
.dashx-is-primary .dashx-ico{ background: linear-gradient(180deg,#4f46e5,#6366f1); border-color: transparent; }
.dashx-is-warning .dashx-ico{ background: linear-gradient(180deg,#f59e0b,#eab308); border-color: transparent; }
.dashx-is-success .dashx-ico{ background: linear-gradient(180deg,#10b981,#22c55e); border-color: transparent; }
.dashx-is-cta{
  background: rgba(99,102,241,.12);
  border-style:dashed; border-color: rgba(129,140,248,.35);
}
.dashx-is-cta .dashx-ico{ background: linear-gradient(180deg,#60a5fa,#a78bfa); border-color:transparent; }

/* Small “glass link” cards */
.dashx-is-glass{
  min-height: 112px;
  display:flex; align-items:center; gap:14px;
}
.dashx-is-glass .dashx-ico{ margin-left:14px; }
.dashx-is-glass .dashx-title{ padding:0; }

/* Copy toast (very small) */
.dashx-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:rgba(17,24,39,.9); color:#e8ecf3; border:1px solid rgba(255,255,255,.14);
  padding:10px 14px; border-radius:10px; z-index:9999; box-shadow:0 10px 30px rgba(0,0,0,.35);
}




/* =======================
   Wallet History – balance__
   ======================= */
:root{
  --b-bg: #0e1218;
  --b-surface: rgba(255,255,255,.05);
  --b-stroke: rgba(255,255,255,.12);
  --b-strong: rgba(255,255,255,.2);
  --b-text: #e9edf6;
  --b-muted: rgba(233,237,246,.65);
  --b-green: #16c784;
  --b-red: #ff6b6b;
  --b-blue: #5fa8ff;
  --b-yellow:#fdb74a;
  --b-grad: linear-gradient(135deg,#5eead4,#818cf8,#f472b6);
}

.balance__wrap{margin-top:12px}

/* Summary */
.balance__summary{
  display:flex; align-items:center; gap:16px;
  background:var(--b-surface); border:1px solid var(--b-stroke);
  border-radius:16px; padding:16px; margin-bottom:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.balance__chip{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--b-stroke); color:var(--b-text);
}
.balance__sum-texts h3{margin:0;font-weight:800;color:var(--b-text);font-size:22px}
.balance__sum-sub{margin:2px 0 0; color:var(--b-muted);font-size:13px}

/* Tools */
.balance__tools{margin-left:auto; display:flex; align-items:center; gap:12px}
.balance__search{position:relative}
.balance__search i{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--b-muted)}
.balance__search input{
  padding:10px 12px 10px 34px; border-radius:12px; border:1px solid var(--b-stroke);
  background:rgba(255,255,255,.04); color:var(--b-text); outline:none; width:220px;
}
.balance__page-size label{display:block; color:var(--b-muted); font-size:11px; margin-bottom:4px}
.balance__page-size select{
  padding:8px 10px; border-radius:10px; border:1px solid var(--b-stroke);
  background:rgba(255,255,255,.04); color:var(--b-text); outline:none;
}

/* Empty */
.balance__empty{
  display:grid; place-items:center; text-align:center; gap:10px;
  background:var(--b-surface); border:1px solid var(--b-stroke);
  padding:28px; border-radius:16px;
}
.balance__empty-title{color:var(--b-text); margin:0; font-weight:800}
.balance__empty-sub{color:var(--b-muted); margin:0}
.balance__cta{
  margin-top:6px; display:inline-flex; align-items:center; gap:8px;
  color:#111; background:var(--b-grad); border-radius:999px; padding:10px 14px;
  text-decoration:none; font-weight:700;
}

/* Scroll container (drag + sticky head üçün ayrıca JS var) */
.balance__table-scroll{
  border:1px solid var(--b-stroke); border-radius:16px; overflow:auto; background:var(--b-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* Table */
.balance__table{width:100%; border-collapse:separate; border-spacing:0; min-width:780px}
.balance__table thead th{
  position:sticky; top:0; z-index:2;
  background:rgba(255,255,255,.06);
  color:var(--b-text); font-weight:700; text-align:left;
  padding:12px 14px; border-bottom:1px solid var(--b-stroke);
}
.balance__table tbody td{
  color:var(--b-text); padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07);
}
.balance__table tbody tr:hover{background:rgba(255,255,255,.04)}

/* Badges */
.balance__badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px; line-height:1;
  border:1px solid var(--b-stroke); color:var(--b-text); background:rgba(255,255,255,.05);
}
.balance__badge--success{background:rgba(22,199,132,.14); border-color:rgba(22,199,132,.35); color:#aaf0cf}
.balance__badge--danger{background:rgba(255,107,107,.14); border-color:rgba(255,107,107,.35); color:#ffc6c6}
.balance__badge--info{background:rgba(95,168,255,.14); border-color:rgba(95,168,255,.35); color:#cfe3ff}

/* Action button */
.balance__btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none;
  color:var(--b-text); background:rgba(255,255,255,.06); border:1px solid var(--b-stroke);
  padding:8px 12px; border-radius:10px;
}
.balance__btn:hover{background:rgba(255,255,255,.1); border-color:var(--b-strong)}

/* Pagination */
.balance__pagination{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
}
.balance__page-btn{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--b-stroke); color:var(--b-text);
}
.balance__page-btn:disabled{opacity:.5; cursor:not-allowed}
.balance__page-numbers{display:flex; gap:6px; flex-wrap:wrap; max-width:100%}
.balance__page-numbers button{
  min-width:38px; height:38px; padding:0 10px; border-radius:10px; border:1px solid var(--b-stroke);
  background:rgba(255,255,255,.06); color:var(--b-text); font-weight:700;
}
.balance__page-numbers button.is-active{
  background:var(--b-grad); color:#101318; border-color:transparent;
}

/* Drag cue */
.balance__table-scroll.is-dragging{cursor:grabbing}

/* Mobile */
@media (max-width: 576px){
  .balance__tools{width:100%; flex-wrap:wrap; justify-content:flex-end}
  .balance__search input{width:180px}
}
/* ===== Balance – polish for page-size select & paginator ===== */

:root{
  --bl-surface:#131820;
  --bl-card:rgba(255,255,255,.06);
  --bl-stroke:rgba(255,255,255,.12);
  --bl-stroke-2:rgba(255,255,255,.18);
  --bl-text:#E9EDF6;
  --bl-muted:rgba(233,237,246,.65);
  --bl-grad:linear-gradient(135deg,#5eead4,#7c83ff,#f472b6);
}

/* ---------- Page size (select) ---------- */
.balance__page-size{position:relative; display:flex; align-items:center; gap:10px;}
.balance__page-size label{color:var(--bl-muted); font-weight:700; font-size:12px; letter-spacing:.4px}

.balance__page-size select:hover{border-color:var(--bl-stroke-2); background:rgba(255,255,255,.08)}
.balance__page-size select:focus{outline:none; box-shadow:0 0 0 3px rgba(124,131,255,.25)}
/* custom arrow */
.balance__page-size::after{
  content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:var(--bl-muted); pointer-events:none; font-size:14px;
}
/* dark dropdown on most browsers */
.balance__page-size select option{background:#161C25; color:var(--bl-text)}




.balance__page-size select{
  appearance:none; -webkit-appearance:none; color-scheme:dark;
  min-width:112px; padding:.62rem 2.2rem .62rem .9rem;   /* sağda ox üçün boşluq */
  border-radius:12px; border:1px solid var(--bl-stroke);
  background:var(--bl-card); color:var(--bl-text); font-weight:700;
  transition:box-shadow .2s ease, border-color .2s ease, background .2s ease, transform .12s ease;
}


/* Ox: CSS border-lə çəkilmiş chevron — heç bir font lazım deyil */
.balance__page-size::after{
  content:"";
  position:absolute; right:12px; top:50%;
  width:8px; height:8px;
  border-right:2px solid var(--bl-muted);
  border-bottom:2px solid var(--bl-muted);
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
}

/* Hover/focus vizualı eyni qalsın */
.balance__page-size select:hover{ border-color:var(--bl-stroke-2); background:rgba(255,255,255,.08); }
.balance__page-size select:focus{ outline:none; box-shadow:0 0 0 3px rgba(124,131,255,.25); }




/* ---------- Laravel paginator (nav > .pagination) ---------- */
.balance-pager{display:flex; justify-content:center; margin-top:18px;}
.balance-pager .pagination{
  display:flex; gap:10px; padding:10px 14px; border-radius:16px;
  background:rgba(255,255,255,.05); border:1px solid var(--bl-stroke);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.balance-pager .page-item{list-style:none}
.balance-pager .page-link{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--bl-stroke);
  background:var(--bl-card); color:var(--bl-text); font-weight:700;
  padding:0; line-height:1; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.balance-pager .page-link:hover{
  background:rgba(255,255,255,.08); border-color:var(--bl-stroke-2);
  transform:translateY(-1px);
}
.balance-pager .page-item.active .page-link{
  color:#fff; border-color:transparent; background:var(--bl-grad);
  box-shadow:0 8px 26px rgba(124,131,255,.35), 0 0 0 3px rgba(124,131,255,.18) inset;
}
.balance-pager .page-item.disabled .page-link{opacity:.45; pointer-events:none}
/* prev/next icons a little narrower */
.balance-pager .page-item:first-child .page-link,
.balance-pager .page-item:last-child .page-link{width:36px; height:36px}

/* optional: make the box that holds the table + controls breathe */
.balance__summary{ gap:14px; }
.balance__tools{ display:flex; align-items:center; gap:14px; margin-left:auto }









/* ========== Product list v2 (pl-) — FINAL ========== */

/* Hər kart konteyneri; foreach-də hər məhsul üçün gəlir */
.pl-list{
  width:100%;
  display:block;
  margin:0 0 18px;          /* kartlar arası məsafə */
}
.pl-list:last-child{ margin-bottom:0; }

.pl-row{
  --pl-bg:#151a21; --pl-bg2:#10141a; --pl-border:#232a34;
  --pl-text:#cfd6e4; --pl-muted:#9aa4b2;
  --pl-accent:#5b7cff; --pl-green:#24c28a; --pl-red:#e26767;

  position:relative;
  display:flex; gap:16px; align-items:flex-start;
  background:linear-gradient(180deg,var(--pl-bg),var(--pl-bg2));
  border:1px solid var(--pl-border);
  border-radius:14px; padding:16px;

  transition:
    box-shadow .25s ease,
    transform .18s ease,
    background .25s ease,
    border-color .25s ease;
    margin-bottom: 10px;
}

/* hover — kart qalxsın, yumşaq halo, fon bir az işıqlansın */
.pl-row::before{
  content:"";
  position:absolute; inset:-2px; border-radius:16px;
  background:radial-gradient(120px 80px at 20% 0% , rgba(91,124,255,.25), transparent 60%),
             radial-gradient(140px 100px at 100% 100%, rgba(32,207,114,.22), transparent 65%);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.pl-row:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(7,15,30,.55), 0 0 0 1px rgba(93,114,255,.22);
  background:linear-gradient(180deg,#171d25,#11161d);
  border-color:#2a3340;
}
.pl-row:hover::before{ opacity:1; }

.pl-thumb{ flex:0 0 78px; display:block; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#0e1217; }
.pl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.pl-row:hover .pl-thumb img{ transform:scale(1.03); }

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

.pl-head{ display:flex; align-items:center; gap:12px; justify-content:space-between; }
.pl-title{
  color:var(--pl-text); font-size:18px; font-weight:700; line-height:1.2;
  margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--pl-border); color:#b9c3d4; background:#0f141b;
}
.pl-badge.is-success{ color:#c9ffe9; background:rgba(36,194,138,.12); border-color:rgba(36,194,138,.35); }
.pl-badge.is-success i{ color:var(--pl-green); }
.pl-badge.is-danger { color:#ffd7d7; background:rgba(226,103,103,.1); border-color:rgba(226,103,103,.35); }
.pl-badge.is-danger i{ color:var(--pl-red); }

.pl-sub{ margin:6px 0 0; color:var(--pl-muted); font-size:13px; line-height:1.4; }

.pl-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  margin-top:10px;
}
.pl-points{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#f8e08c; }
.pl-points i{ color:#f6c441; }

.pl-price{ margin-left:auto; display:flex; align-items:baseline; gap:10px; }
.products-price-old{
  color:#8690a2; text-decoration:line-through; font-size:13px;
}
.products-price-current{
  color:#eaf0ff; font-size:20px; font-weight:800; letter-spacing:.2px;
}

.pl-actions{
  display:flex; gap:16px; align-items:center; margin-top:14px; flex-wrap:wrap;
}

/* Qty */
.pl-qty{
  display:inline-flex; align-items:center; background:#0f141b;
  border:1px solid var(--pl-border); border-radius:12px; padding:2px;
}
.pl-qty-btn{
  width:40px; height:40px; border:none; outline:0; cursor:pointer;
  background:transparent; color:#cdd5e3; font-size:20px; font-weight:800;
  display:grid; place-items:center; border-radius:10px; transition:background .15s, transform .08s;
}
.pl-qty-btn:hover{ background:#1a2130; }
.pl-qty-btn:active{ transform:scale(.96); }
.pl-qty-input{
  width:62px; height:40px; border:none; outline:0; text-align:center;
  background:transparent; color:#e9f0ff; font-weight:800; font-size:16px;
}

/* Buttons */
.pl-buttons{ display:flex; gap:10px; flex:1; min-width:260px; }
.pl-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; border-radius:12px; border:1px solid transparent;
  font-weight:800; letter-spacing:.2px; font-size:14px; cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.pl-btn i{ font-size:14px; }

.pl-btn--cart{
  background:linear-gradient(180deg,#5b7cff,#6d63ff);
  color:#fff; box-shadow:0 3px 12px rgba(93,114,255,.35);
}
.pl-btn--cart:hover{ transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 6px 18px rgba(93,114,255,.45); }

.pl-btn--buy{
  background:linear-gradient(180deg,#20cf72,#0fb35e);
  color:#fff; box-shadow:0 3px 12px rgba(32,207,114,.33);
}
.pl-btn--buy i{ font-size:15px; }
.pl-btn--buy:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 6px 18px rgba(32,207,114,.42); }

.pl-btn--disabled{
  background:#262d39; color:#8b94a6; cursor:not-allowed;
  border-color:#303847;
}

/* Responsive */
@media (max-width: 992px){
  .pl-title{ font-size:16px; }
  .pl-price .products-price-current{ font-size:18px; }
}
@media (max-width: 768px){
  .pl-row{ padding:14px; gap:12px; }
  .pl-thumb{ flex-basis:64px; }
  .pl-meta{ gap:10px 12px; }
  .pl-price{ margin-left:0; }
  .pl-actions{ flex-direction:column; align-items:stretch; }
  .pl-buttons{ width:100%; min-width:0; }
  .pl-btn{ height:44px; }
}
@media (max-width: 420px){
  .pl-thumb{ flex-basis:56px; }
  .pl-title{ font-size:15px; }
  .pl-badge{ padding:4px 8px; }
}



/* ===== Reviews (rv-) ===== */
.rv-wrap{--rv-bg:#0f141b;--rv-bg2:#0b1016;--rv-b:#1f2732;--rv-soft:#232d3a;--rv-t:#e6edf7;--rv-m:#98a4b5;--rv-ac:#6b78ff;--rv-green:#1fcf7a;--rv-warn:#f6b93b;--rv-red:#ea6b6b}
.rv-wrap{background:linear-gradient(180deg,var(--rv-bg),var(--rv-bg2));border:1px solid var(--rv-b);border-radius:16px;padding:18px 18px 6px}

/* head */
.rv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px dashed var(--rv-soft)}
.rv-head__l{display:flex;align-items:center;gap:10px}
.rv-head__l i{color:#ffd04d}
.rv-head__l h5{margin:0;color:var(--rv-t);font-weight:800}
.rv-head__r{color:var(--rv-m);display:flex;align-items:center;gap:8px}

/* alerts / empty */
.rv-alert{padding:12px 14px;border-radius:12px;margin:12px 0;font-weight:600}
.rv-alert--info{background:#0f1b2a;border:1px solid #1f2a3a;color:#c7d3e6}
.rv-alert--warn{background:rgba(246,185,59,.08);border:1px solid rgba(246,185,59,.35);color:#ffd78e}
.rv-alert--danger{background:rgba(234,107,107,.08);border:1px solid rgba(234,107,107,.35);color:#ffc9c9}
.rv-alert--success{background:rgba(31,207,122,.08);border:1px solid rgba(31,207,122,.35);color:#baf2d7}
.rv-list{margin:0;padding-left:20px}

.rv-empty{display:grid;place-items:center;border:1px dashed var(--rv-soft);border-radius:14px;padding:20px;margin:8px 0 18px}
.rv-empty__icon{width:64px;height:64px;display:grid;place-items:center;border-radius:14px;background:#121a25;color:#7aa2ff;margin-bottom:8px}
.rv-empty__title{color:var(--rv-t);margin:0 0 6px}
.rv-empty__desc{color:var(--rv-m);margin:0}

/* form */
.rv-form{display:grid;grid-template-columns:88px 1fr;gap:14px;background:#0f141b;border:1px solid var(--rv-b);border-radius:14px;padding:14px 14px 12px;margin:10px 0 20px;position:relative;overflow:hidden}
.rv-form::before{content:"";position:absolute;inset:-2px;border-radius:16px;pointer-events:none;background:radial-gradient(120px 80px at 6% 0%,rgba(107,120,255,.18),transparent 60%),radial-gradient(140px 100px at 100% 100%,rgba(31,207,122,.15),transparent 60%);opacity:.6}
.rv-form__thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--rv-b)}
.rv-form__body{display:flex;flex-direction:column;gap:10px}
.rv-field label{display:block;color:var(--rv-m);font-size:13px;margin-bottom:6px}
.rv-select,.rv-textarea{width:100%;background:#0b1016;border:1px solid var(--rv-b);border-radius:12px;color:var(--rv-t);padding:10px 12px;outline:0}
.rv-select{height:44px}
.rv-textarea{min-height:90px;resize:vertical}
.rv-form__footer{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:2px}

/* rating (write) – keep radio structure; JS-də rəngləyirik */
.rating2{display:flex;gap:6px}
.rating2 input{display:none}
.rating2 label{color:#3b4557;font-size:22px;cursor:pointer;transition:transform .1s,color .15s}
.rating2 label:hover{transform:scale(1.08)}

/* send button */
.rv-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;font-weight:800;border:1px solid transparent;cursor:pointer;transition:transform .06s,filter .15s,box-shadow .15s}
.rv-btn--send{background:linear-gradient(180deg,#6b78ff,#6261ff);color:#fff;box-shadow:0 4px 14px rgba(107,120,255,.35)}
.rv-btn--send:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* comments list */
.rv-listing{display:grid;gap:14px}
.rv-card{background:#0f141b;border:1px solid var(--rv-b);border-radius:14px;padding:14px;transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease}
.rv-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,14,26,.5);border-color:#2a3341}
.rv-card__top{display:flex;align-items:flex-start;gap:12px}
.rv-card__thumb{flex:0 0 64px}
.rv-card__thumb img{width:64px;height:64px;border-radius:10px;border:1px solid var(--rv-b);object-fit:cover}
.rv-card__titles h5{margin:2px 0 2px;font-weight:800}
.rv-card__titles h6{margin:0;color:var(--rv-m);font-size:13px}
.rv-card__titles a{color:#eaf1ff}
.rv-card__titles a:hover{color:#bfc9ff}
.rv-card__rating{margin-left:auto;display:flex;align-items:center;gap:8px;color:#f6b81e}
.rv-stars-read i{color:#f6b81e}
.rv-card__content{color:#cfd6e4;margin:10px 2px 6px}
.rv-card__meta{display:flex;gap:14px;color:var(--rv-m);font-size:13px;border-top:1px dashed var(--rv-soft);padding-top:8px}

/* utilities */
.rv-list li{margin:2px 0}

/* responsive */
@media (max-width:768px){
  .rv-form{grid-template-columns:64px 1fr}
  .rv-form__thumb img{border-radius:10px}
  .rv-card__top{gap:10px}
  .rv-card__thumb{flex-basis:56px}
}

/* ===== Reviews (rv-) — Mobile overrides ===== */

/* 768px və aşağı: daha sıx layout, düzgün sətirləmə, düymə tam en */
@media (max-width: 768px){
  .rv-wrap{ padding:14px 12px 6px; }
  .rv-head{ margin-bottom:12px; padding-bottom:8px; }
  .rv-head__l h5{ font-size:16px; }
  .rv-head__r{ font-size:13px; gap:6px; }

  /* Form */
  .rv-form{
    grid-template-columns:64px 1fr;
    gap:12px;
    padding:12px;
    overflow:visible;           /* mobil-də düymə kölgəsi/kənarı kəsilməsin */
  }
  .rv-form__thumb img{ border-radius:10px; }
  .rv-select, .rv-textarea{ font-size:14px; }
  .rv-textarea{ min-height:84px; }

  /* Ulduz seçimi + göndər düyməsi */
  .rv-form__footer{
    flex-direction:column;      /* alt-alta */
    align-items:stretch;
    gap:10px;
    margin-top:4px;
  }
  .rating2{ justify-content:center; gap:8px; }
  .rating2 label{ font-size:20px; }
  .rv-btn--send{ width:100%; height:44px; }

  /* Siyahı kartları */
  .rv-listing{ gap:12px; }
  .rv-card{ padding:12px; }
  .rv-card__top{
    gap:10px;
    align-items:flex-start;
    flex-wrap:wrap;             /* başlıq/rating sətirə düşə bilsin */
  }
  .rv-card__thumb{ flex-basis:56px; }
  .rv-card__thumb img{ width:56px; height:56px; }
  .rv-card__titles h5{ font-size:15px; margin:0 0 2px; }
  .rv-card__titles h6{ font-size:12px; }
  .rv-card__rating{
    margin-left:0;
    margin-top:2px;
    width:100%;
    display:flex;
    justify-content:flex-start;
  }
  .rv-card__content{ margin:8px 2px 6px; font-size:14px; }
  .rv-card__meta{
    padding-top:8px;
    flex-direction:column;      /* istifadəçi + tarix alt-alta */
    gap:6px;
    font-size:13px;
  }
}

/* 600px və aşağı: daha kompakt ikon ölçüləri */
@media (max-width: 600px){
  .rv-form{ grid-template-columns:52px 1fr; }
  .rv-card__thumb{ flex-basis:48px; }
  .rv-card__thumb img{ width:48px; height:48px; }
  .rating2 label{ font-size:19px; }
}

/* 420px və aşağı: ən sıx hündürlüklər, yazı ölçüləri */
@media (max-width: 420px){
  .rv-head__r{ font-size:12px; }
  .rv-btn{ height:42px; }
  .rating2 label{ font-size:18px; }
  .rv-select, .rv-textarea{ font-size:13px; }
}

/* =========================================================
   OFFER CARD  — modern, animated, fully responsive
   (HTML class-ları: .offer-card, .offer-seller, .offer-price,
    .pl-qty, .pl-btn, .pl-btn--cart, .pl-btn--buy)
   ========================================================= */

/* THEME TOKENS (dark) */
.offer-card{
  --oc-bg-0:#0b1017;
  --oc-bg-1:#0e141d;
  --oc-border:#1b2440;
  --oc-border-2:#243053;
  --oc-text:#ebf2ff;
  --oc-muted:#9aa4bb;
  --oc-accent:#5e6bff;   /* cart */
  --oc-accent-2:#4050ff;
  --oc-success:#22c55e;  /* buy */
  --oc-success-2:#16a34a;
  --oc-focus:#7aa2ff;
  --oc-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* CARD */
.offer-card{
  position:relative;
  padding:18px 18px 20px;
  border-radius:18px;
  color:var(--oc-text);
  background:
    radial-gradient(150% 130% at 10% 0%, #14203b40, transparent 60%),
    linear-gradient(180deg, var(--oc-bg-1), var(--oc-bg-0));
  border:1px solid var(--oc-border);
  box-shadow:var(--oc-shadow);
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  animation:oc-pop .35s cubic-bezier(.2,.9,.25,1) both;
  will-change:transform, box-shadow;
}
.offer-card::after{
  /* parıldayan highlight (hover-da yüngül hərəkət) */
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  width:70%; height:70%;
  background:radial-gradient(closest-side, #6b7cff18, transparent 60%);
  transform:rotate(12deg) translate3d(0,0,0);
  transition:transform .6s ease;
  pointer-events:none;
}
.offer-card:hover{
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transform:translateY(-3px);
}
.offer-card:hover::after{ transform:rotate(0deg) translate3d(10px,-6px,0); }

.offer-card__label{
  position:absolute; top:12px; left:12px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  color:#d6def7;
  background:linear-gradient(180deg,#141c2b,#0e1626);
  border:1px solid var(--oc-border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  z-index:2;
}

/* SELLER */
.offer-seller{ display:flex; gap:12px; align-items:center; margin-top:22px; }
.offer-seller__avatar{
  width:46px; height:46px; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; flex-shrink:0;
  background:#0a0f16; border:1px solid var(--oc-border-2);
  box-shadow:inset 0 0 0 1px #0006;
}
.offer-seller__avatar img{ width:100%; height:100%; object-fit:cover; }
.offer-seller__name{ font-weight:800; line-height:1.1; }
.offer-seller__score{ color:var(--oc-muted); font-size:12px; margin-top:2px; }

/* PRICE */
.offer-price{ margin:14px 2px 12px; }
.offer-price__current{
  font-size:34px; font-weight:900; letter-spacing:.2px;
  line-height:1; font-feature-settings:"tnum" 1, "ss01" 1;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.offer-price__old{
  color:#8f9ab3; font-size:13px; margin-top:4px;
}

/* QTY */
.pl-qty{
  display:inline-flex; align-items:center; gap:6px;
  background:#101827; border:1px solid var(--oc-border);
  border-radius:14px; padding:6px;
  box-shadow:inset 0 0 0 1px #0006;
}
.pl-qty-btn{
  width:42px; height:42px; border:0; border-radius:12px;
  cursor:pointer; font-size:20px; font-weight:900; color:#dfE7ff;
  background:linear-gradient(180deg,#162037,#121a2d);
  display:grid; place-items:center;
  transition:transform .12s ease, background .18s ease, box-shadow .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pl-qty-btn:hover{ background:#1a2540; }
.pl-qty-btn:active{ transform:scale(.96); }
.pl-qty-input{
  width:70px; height:42px; border:0; outline:0;
  background:transparent; color:#fff; font-weight:800; font-size:16px;
  text-align:center; letter-spacing:.2px;
}
.pl-qty-input:focus-visible{
  outline:2px solid var(--oc-focus); outline-offset:2px; border-radius:10px;
}

/* ACTIONS */
.offer-actions{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }




/* ACCESSIBILITY */
.offer-card a, .offer-card button{ outline:none; }
.offer-card a:focus-visible, .offer-card button:focus-visible{
  box-shadow:0 0 0 3px #ffffff22, 0 0 0 6px #6287ff55;
  border-radius:12px;
}

/* ENTRANCE ANIM */
@keyframes oc-pop{
  from{ opacity:0; transform:translateY(6px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 992px){
  .offer-card{ padding:16px; }
  .offer-price__current{ font-size:30px; }
}
@media (max-width: 576px){
  .offer-card{ border-radius:16px; }
  .offer-seller{ gap:10px; }
  .offer-seller__avatar{ width:42px; height:42px; border-radius:12px; }
  .offer-price__current{ font-size:26px; }
  .pl-qty-btn{ width:40px; height:40px; }
  .pl-qty-input{ width:62px; height:40px; }
  .pl-btn{ height:46px; }
}



/* =========================================================
   PRODUCT DETAIL — Modern surface + hover + responsive
   ========================================================= */
:root{
  --pd-bg-1:#0e1117;
  --pd-bg-2:#0b0d13;
  --pd-surface:#131a24;
  --pd-surface-2:#0f1620;
  --pd-border:rgba(255,255,255,.08);
  --pd-soft:rgba(255,255,255,.04);
  --pd-soft-2:rgba(255,255,255,.06);
  --pd-text:#e9edf6;
  --pd-muted:#9aa6bd;
  --pd-accent:#5c7cfa;
  --pd-green:#16a34a;
  --pd-star:#f5b301;
}

/* Panelin arxa fonu – yumşaq radial-lar + gradient */
/* ====== Təmiz, minimal kart effekti ====== */
:root{
  --pk-bg-1:#0f141c;
  --pk-bg-2:#0c1017;
  --pk-border:rgba(255,255,255,.08);
  --pk-soft:rgba(255,255,255,.06);
  --pk-accent:#7aa2ff;     /* brend rəngini buradan dəyiş */
}

.pk{
  position:relative;
  padding:18px 16px 24px;
  border-radius:20px;
  border:1px solid var(--pk-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 24px rgba(0,0,0,.35);
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* Yuxarıdan çox zərif accent parıltı */




/* Ümumi kart */
.pd-card{
  background: linear-gradient(180deg, var(--pd-surface), var(--pd-surface-2));
  border: 1px solid var(--pd-border);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Qalereya */
.pd-gallery{
  display:flex; align-items:center; justify-content:center;
  min-height: 360px;
}
.pd-gallery .item--box{
  width:100%;
  border-radius: 14px;
  overflow:hidden;

}
.pd-gallery img{
  width:100%; height:auto; display:block;
  transform: scale(1);
  transition: transform .35s ease, filter .35s ease;
}
.pd-gallery:hover img{ transform: scale(1.03); filter: saturate(1.05); }

/* Info blokları */
.pd-info{ padding: 18px; }
.pd-title{ font-weight:700; color:var(--pd-text); letter-spacing:.2px; }
.pd-sep{ border:0; height:1px; background:var(--pd-border); margin:14px 0 10px; }

.pd-rating{ display:flex; align-items:center; gap:10px; color:var(--pd-muted); }
.pd-rating__avg{ font-weight:700; color:var(--pd-text); }
.pd-rating__stars i{ color:var(--pd-star); margin-right:2px; }

/* Xüsusiyyət listi */
.pd-fe{ list-style:none; margin: 14px 0 2px; padding:0; display:grid; gap:12px; }
.pd-fe li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; border:1px solid var(--pd-border);
  border-radius:12px; background:linear-gradient(180deg, #121923, #0f1620);
}
.pd-fe__icon{
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--pd-soft-2); color:#9bb1ff;
  flex: none;
}
.pd-fe__txt small{ display:block; color:var(--pd-muted); font-size:12px; }
.pd-fe__txt strong{ color:var(--pd-text); font-weight:600; font-size:14px; }
.pd-fe__txt span + span::before{ content:"·"; margin:0 6px; color:var(--pd-muted); }

/* =========================================================
   “Kateqoriya məhsulları” — kart grid + hover
   ========================================================= */
.pd-rel-list{
  position: relative;
  margin-top: 6px;
  padding: 14px;
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  background:
    radial-gradient(700px 300px at 0% 0%, rgba(92,124,250,.08) 0%, transparent 60%),
    linear-gradient(180deg, #0f1620, #0c121a);
  box-shadow: inset 0 0 0 1px var(--pd-soft);
}

/* kart link */
.pd-rel{
  display:block; text-decoration:none; color:inherit;
}
.pd-rel__in{
  border:1px solid var(--pd-border);
  background: linear-gradient(180deg, #121923, #0e141d);
  border-radius:14px;
  padding:10px;
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.pd-rel__in::after{            /* yüngül parıltı */
  content:"";
  position:absolute; inset:-120% -40% auto auto;
  width:140%; height:140%;
  background: radial-gradient(120px 60px at 100% 0%, rgba(255,255,255,.08), transparent 60%);
  transform: rotate(12deg);
  transition: opacity .35s ease, transform .35s ease;
  opacity:.35;
}
.pd-rel:hover .pd-rel__in{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pd-accent) 35%, var(--pd-border));
  box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(92,124,250,.22) inset;
}
.pd-rel:hover .pd-rel__in::after{ transform: rotate(0deg) translate(-6px,-4px); opacity:.6; }

.pd-rel .skeleton-wrapper{
  width:56px; height:56px; border-radius:10px; overflow:hidden;
  flex: none; border:1px solid var(--pd-soft);
  background: linear-gradient(180deg, #0f1520, #0c121a);
}
.pd-rel .skeleton-wrapper img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1); transition: transform .25s ease;
}
.pd-rel:hover .skeleton-wrapper img{ transform: scale(1.05); }

.pd-rel__title{
  color:var(--pd-text); font-weight:600; font-size:13.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Grid spacing (Bootstrap row daxilində də işləyir) */
.pd-rel-list .col-md-4, .pd-rel-list .col-6{ padding:6px; }

/* Başlıq */
.pd-info h6{ font-weight:700; color:var(--pd-text); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1199.98px){
  .pd-gallery{ min-height: 320px; }
}
@media (max-width:991.98px){
  .pd-card{ margin-top:12px; }
  .pd-gallery{ min-height: 260px; }
}
@media (max-width:575.98px){
  .pd{ padding: 10px; }
  .pd-info{ padding:14px; }
  .pd-rel-list{ padding:10px; }
  .pd-rel__in{ padding:9px; }
}


/* ===== 1. Ümumi Stil Ayarları və Dəyişənlər ===== */
:root {
    --gmx-bg-main: #10121a;
    --gmx-bg-dark: #171a22;
    --gmx-bg-light: #1f2430;
    --gmx-border-color: #2a2f3b;
    --gmx-border-hover: #364058;
    --gmx-gradient-start: #ff4ec7;
    --gmx-gradient-end: #6e49ff;
    --gmx-epin-color: #00d4a1; /* E-PIN üçün yaşıl rəng */
    --gmx-text-primary: #e0e0e0;
    --gmx-text-secondary: #a0a4b8;
    --gmx-star-on: #ffc107;
    --gmx-star-off: #4a4e5f;
    --gmx-border-radius: 14px;
    --gmx-border-radius-sm: 10px;
    --gmx-transition: all 0.25s ease;
}

body {
    background-color: var(--gmx-bg-main);
}

/* ===== 2. Tab Sistemi ===== */
.gmx-tabs__header {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid var(--gmx-border-color);
    margin-bottom: 0;
}
.gmx-tab {
    position: relative; background: none; border: none; padding: 15px 5px; color: var(--gmx-text-secondary);
    font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--gmx-transition);
    display: flex; align-items: center; gap: 8px;
}
.gmx-tab::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--gmx-gradient-start), var(--gmx-gradient-end));
    transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease;
}
.gmx-tab:hover { color: var(--gmx-text-primary); }
.gmx-tab.is-active { color: var(--gmx-text-primary); }
.gmx-tab.is-active::after { transform: scaleX(1); }

/* ===== 3. Panellər ===== */
.gmx-panel {
    display: none; background-color: var(--gmx-bg-dark); padding: 30px;
    border: 1px solid var(--gmx-border-color); border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--gmx-gradient-start), var(--gmx-gradient-end)) 1;
    border-radius: 0 0 var(--gmx-border-radius) var(--gmx-border-radius);
    animation: fadeIn 0.5s ease;
}
.gmx-panel.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== 4. Məzmun Stilləri ("Məhsul Məlumatı", "Qeyd" və s.) ===== */
.gmx-info__content { color: var(--gmx-text-secondary); line-height: 1.8; }
.gmx-info__content h3 { color: var(--gmx-text-primary); font-size: 18px; margin: 25px 0 10px 0; font-weight: 600; }
.gmx-info__content strong { color: var(--gmx-text-primary); font-weight: 600; }
.gmx-info__content ul { list-style: none; padding-left: 0; }
.gmx-info__content ul li { padding-left: 25px; position: relative; margin-bottom: 12px; }
.gmx-info__content ul li::before { content: '✓'; color: var(--gmx-gradient-end); font-weight: bold; position: absolute; left: 0; }

/* ===== 5. Müasir Xal Ortalaması (SVG) ===== */
.gmx-reviews__grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; background-color: var(--gmx-bg-light); padding: 24px; border-radius: var(--gmx-border-radius); }
.gmx-score { width: 160px; height: 160px; position: relative; display: grid; place-items: center; }
.gmx-score__svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.gmx-score__track, .gmx-score__bar { fill: none; stroke-width: 3; }
.gmx-score__track { stroke: var(--gmx-border-color); }
.gmx-score__bar { stroke: url(#gmx-gradient); stroke-linecap: round; animation: progress-anim 1.5s ease-out forwards; }
@keyframes progress-anim { from { stroke-dasharray: 0, 100; } }
.gmx-score__content { position: absolute; text-align: center; }
.gmx-score__num { font-size: 36px; font-weight: 700; color: var(--gmx-text-primary); }
.gmx-score__label { font-size: 14px; color: var(--gmx-text-secondary); }

/* ===== 6. Reytinq Zolaqları ===== */
.gmx-rating { display: flex; flex-direction: column; gap: 12px; }
.gmx-rating__row { display: flex; align-items: center; gap: 12px; }
.gmx-bar { flex-grow: 1; height: 8px; background-color: var(--gmx-border-color); border-radius: 4px; overflow: hidden; }
.gmx-bar__fill { height: 100%; background: linear-gradient(90deg, var(--gmx-gradient-start), var(--gmx-gradient-end)); border-radius: 4px; }

/* ===== 7. Rəy Kartları ===== */
.gmx-comment { background: transparent; border-radius: var(--gmx-border-radius); padding: 20px; border: 1px solid var(--gmx-border-color); transition: var(--gmx-transition); margin-top: 20px; }
.gmx-comment:hover { border-color: var(--gmx-border-hover); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36, 46, 68, .25); }
.gmx-comment__head { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.gmx-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--gmx-gradient-start), var(--gmx-gradient-end)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.gmx-comment__meta { flex-grow: 1; }
.gmx-author { font-weight: 600; color: var(--gmx-text-primary); }
.gmx-date { font-size: 13px; color: var(--gmx-text-secondary); }
.gmx-stars .fa-star.gmx-star--on { color: var(--gmx-star-on); }
.gmx-comment__ops { display: flex; gap: 10px; margin-left: auto; }
.gmx-comment__body { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--gmx-border-color); }

/* ===== 8. YENİ DÜZƏLİŞ: Rəy Yazma və Cavablama Formları ===== */
.gmx-editor, .gmx-replyform {
    background-color: var(--gmx-bg-light);
    border: 1px solid var(--gmx-border-color);
    border-radius: var(--gmx-border-radius);
    padding: 20px;
    margin-top: 30px;
}
.gmx-replyform { margin-left: 40px; } /* Cavab formu üçün soldan boşluq */
.gmx-editor__label, .gmx-replyform__form p {
    font-weight: 600;
    color: var(--gmx-text-primary);
    margin-bottom: 15px;
}
.gmx-textarea {
    width: 100%;
    background-color: var(--gmx-bg-dark);
    border: 1px solid var(--gmx-border-color);
    border-radius: var(--gmx-border-radius-sm);
    padding: 12px;
    color: var(--gmx-text-primary);
    min-height: 100px;
    resize: vertical;
    transition: var(--gmx-transition);
}
.gmx-textarea:focus {
    outline: none;
    border-color: var(--gmx-gradient-end);
    box-shadow: 0 0 0 3px rgba(110, 73, 255, 0.3);
}
.gmx-editor__actions, .gmx-replyform__actions {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ===== 9. Ümumi Düymə Stilləri ===== */
.gmx-btn {
    border-radius: var(--gmx-border-radius-sm); font-weight: 600; padding: 10px 20px;
    transition: var(--gmx-transition); border: 1px solid transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.gmx-btn--primary { background: linear-gradient(90deg, var(--gmx-gradient-start), var(--gmx-gradient-end)); color: #fff; border-color: rgba(118, 104, 255, .55); }
.gmx-btn--primary:hover { transform: scale(1.03); box-shadow: 0 8px 22px rgba(82, 74, 255, .32); }
.gmx-btn--ghost { background-color: var(--gmx-bg-light); color: var(--gmx-text-secondary); border-color: var(--gmx-border-color); }
.gmx-btn--ghost:hover { border-color: var(--gmx-border-hover); color: var(--gmx-text-primary); }

/* ===== 10. YENİ DÜZƏLİŞ: Oxşar Məhsullar ===== */
.gmx-related {
    margin-top: 30px;
}
.gmx-card__head { margin-bottom: 20px; }
.gmx-card__title { font-size: 20px; font-weight: 600; color: var(--gmx-text-primary); padding-bottom: 10px; border-bottom: 1px solid var(--gmx-border-color); }
.gmx-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

.gmx-relcard:hover { transform: translateY(-5px); }
/* 1) Kartı sütun kimi qur – alt başlıq həmişə eyni xəttdə olsun */
.gmx-relcard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2) Media sahəsini sabit nisbətdə saxla və iç boşluq ver */
.gmx-relcard__media{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;   /* eyni hündürlük */
  padding: 12px;          /* 4 tərəfdən eyni məsafə */
  box-sizing: border-box;
  overflow: hidden;
}

/* 3) Şəkli kəsmə – mərkəzdə contain */
.gmx-relcard__img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* 4) Başlıq bloku üçün kiçik aralıq – alt sırada xəttlər düz olsun */
.gmx-relcard__body{ margin-top: 12px; }


/* Etiketlər (TOPUP, E-PIN) */
.gmx-relcard__label {
    position: absolute;
    bottom: 20px; /* Dəyəri şəkilə görə tənzimləyə bilərsiniz */
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.gmx-relcard__label--topup {
    background: rgba(110, 73, 255, 0.5); /* Bənövşəyi */
}
.gmx-relcard__label--epin {
    background: rgba(0, 212, 161, 0.5); /* Yaşıl */
}
.gmx-relcard__body { padding: 15px; background-color: var(--gmx-bg-dark); border-radius: 0 0 var(--gmx-border-radius) var(--gmx-border-radius); }
.gmx-relcard__title { color: var(--gmx-text-secondary); text-decoration: none; font-weight: 500; }
.gmx-relcard:hover .gmx-relcard__title { color: var(--gmx-text-primary); }

/* ===== 11. Paylaşım Düymələri ===== */
.gmx-share { display: flex; gap: 15px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--gmx-border-color); }
.gmx-share__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--gmx-bg-light); border: 1px solid var(--gmx-border-color); transition: var(--gmx-transition); }
.gmx-share__btn .icon { width: 18px; height: 18px; fill: var(--gmx-text-secondary); transition: var(--gmx-transition); }
.gmx-share__btn:hover { border-color: var(--gmx-gradient-end); background-color: transparent; }
.gmx-share__btn:hover .icon { fill: var(--gmx-gradient-end); }

/* ===== 12. Responsivlik ===== */
@media (max-width: 768px) {
    .gmx-reviews__grid { grid-template-columns: 1fr; }
    .gmx-score { margin: 20px auto; }
    .gmx-comment__head { flex-direction: column; align-items: flex-start; }
    .gmx-comment__ops { margin-left: 0; margin-top: 15px; width:100%; }
    .gmx-replyform { margin-left: 0; }
}


/* ===== 1. Ümumi Stil Ayarları və Dəyişənlər (Sizin Nümunəyə Əsasən) ===== */
:root {
    --gmx-bg-dark: #171a22; /* Konteyner arxa fonu */
    --gmx-bg-light: #1f2430; /* Element arxa fonu */
    --gmx-border-color: #2a2f3b;
    --gmx-border-hover: #364058;
    --gmx-border-active: rgba(118, 104, 255, .55);
    --gmx-gradient-start: #ff4ec7;
    --gmx-gradient-end: #6e49ff;
    --gmx-text-primary: #e0e0e0;
    --gmx-text-secondary: #a0a4b8;
    --gmx-star-on: #ffc107;
    --gmx-star-off: #4a4e5f;
    --gmx-border-radius-lg: 18px; /* Konteynerlər üçün */
    --gmx-border-radius-md: 14px; /* Elementlər üçün */
    --gmx-shadow-main: 0 12px 28px rgba(82, 74, 255, .32);
    --gmx-shadow-hover: 0 8px 22px rgba(36, 46, 68, .35);
    --gmx-shadow-inset: inset 0 8px 26px rgba(0, 0, 0, .25);
    --gmx-transition: all 0.25s ease;
}

body {
    background-color: #10121a; /* Əsas səhifə fonu */
}

/* ===== 2. Tab Sistemi (Sizin Kodunuz Əsasında) ===== */
.gmx-tabs__header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: var(--gmx-border-radius-lg) var(--gmx-border-radius-lg) 0 0;
    background: var(--gmx-bg-dark);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--gmx-shadow-inset);
    overflow: hidden;
    margin-bottom: 0;
}

.gmx-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 18px;
    border-radius: var(--gmx-border-radius-md);
    background: var(--gmx-bg-light);
    border: 1px solid var(--gmx-border-color);
    color: var(--gmx-text-secondary);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
}
.gmx-tab i { font-size: 18px; opacity: .95; }

.gmx-tab:hover {
    transform: translateY(-2px);
    border-color: var(--gmx-border-hover);
    box-shadow: var(--gmx-shadow-hover);
}

.gmx-tab::after {
    content: ""; position: absolute; inset: 0; border-radius: 12px;
    left: -60%; width: 45%; height: 100%; transform: skewX(-20deg);
    background: linear-gradient(120deg, rgba(255, 255, 255, .26) 0%, transparent 70%);
    transition: left .55s ease; pointer-events: none;
}
.gmx-tab:hover::after { left: 115%; }

.gmx-tab.is-active {
    color: #fff;
    background: linear-gradient(90deg, var(--gmx-gradient-start), var(--gmx-gradient-end));
    border-color: var(--gmx-border-active);
    box-shadow: var(--gmx-shadow-main), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.gmx-tab.is-active i { opacity: 1; }

.gmx-tab.is-active::before {
    content: ""; position: absolute; inset: 0; border-radius: var(--gmx-border-radius-md);
    background: radial-gradient(900px 150px at -15% -25%, rgba(255, 255, 255, .20), transparent 60%), radial-gradient(700px 140px at 115% 140%, rgba(255, 255, 255, .12), transparent 60%);
    mix-blend-mode: screen; pointer-events: none;
}

/* ===== 3. Panellər (Tablara Uyğun) ===== */
.gmx-panel {
    display: none;
    background-color: var(--gmx-bg-dark);
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-top: none;
    border-radius: 0 0 var(--gmx-border-radius-lg) var(--gmx-border-radius-lg);
    margin-top: -1px;
    animation: fadeIn 0.5s ease;
}
.gmx-panel.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== 4. Məzmun Stilləri (Xüsusiyyətlər, Qeyd) ===== */
.gmx-info__content { color: var(--gmx-text-secondary); line-height: 1.8; }
.gmx-info__content h3 { color: #fff; font-size: 18px; margin: 25px 0 15px 0; font-weight: 700; }
.gmx-info__content strong { color: #fff; font-weight: 700; }
.gmx-info__content ul { list-style: none; padding-left: 0; }
.gmx-info__content ul li { padding-left: 25px; position: relative; margin-bottom: 12px; }
.gmx-info__content ul li::before {
    content: '✓'; font-family: "Font Awesome 5 Free"; font-weight: 900;
    color: var(--gmx-gradient-end); position: absolute; left: 0;
}

/* ===== 5. Rəy Bölməsi (Vahid Konsept) ===== */
.gmx-reviews__grid {
    display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
    background-color: var(--gmx-bg-light); padding: 24px; border-radius: var(--gmx-border-radius-md);
}
.gmx-comment {
    background: transparent; border-radius: var(--gmx-border-radius-md); padding: 20px;
    border: 1px solid var(--gmx-border-color); margin-top: 20px;
}
.gmx-editor, .gmx-replyform {
    background-color: var(--gmx-bg-light); border: 1px solid var(--gmx-border-color);
    border-radius: var(--gmx-border-radius-md); padding: 20px; margin-top: 30px;
}
.gmx-textarea {
    background-color: var(--gmx-bg-dark); border: 1px solid var(--gmx-border-color);
    border-radius: 10px; padding: 12px; color: var(--gmx-text-primary);
    min-height: 100px; width: 100%; resize: vertical;
}
.gmx-textarea:focus { outline: none; border-color: var(--gmx-border-active); }

/* Bütün Düymələrin Vahid Stili */
.gmx-btn {
    border-radius: 10px; font-weight: 700; padding: 10px 20px;
    transition: var(--gmx-transition); border: 1px solid transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.gmx-btn--primary { /* Göndər, Paylaş, Cavabla */
    color: #fff; background: linear-gradient(90deg, var(--gmx-gradient-start), var(--gmx-gradient-end));
    border-color: var(--gmx-border-active); box-shadow: var(--gmx-shadow-main);
}
.gmx-btn--primary:hover { transform: translateY(-2px); }
.gmx-btn--ghost { /* Ləğv et, Şərhlər */
    background-color: var(--gmx-bg-light); color: var(--gmx-text-secondary);
    border-color: var(--gmx-border-color);
}
.gmx-btn--ghost:hover { border-color: var(--gmx-border-hover); color: var(--gmx-text-primary); }

/* Digər Rəy Elementləri */
.gmx-avatar { background: linear-gradient(135deg, var(--gmx-gradient-start), var(--gmx-gradient-end)); /* ...əvvəlki stillər... */ }

/* ===== 6. Oxşar Məhsullar (Vahid Konsept) ===== */
.gmx-related {
    margin-bottom: 20px !important;
    background: var(--gmx-bg-dark);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--gmx-shadow-inset);
    border-radius: var(--gmx-border-radius-lg);
    padding: 24px;
}
.gmx-card__head { margin-bottom: 20px; }
.gmx-card__title { font-size: 20px; font-weight: 700; color: #fff; padding-bottom: 15px; border-bottom: 1px solid var(--gmx-border-color); }
.gmx-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.gmx-relcard { transition: var(--gmx-transition); }
.gmx-relcard:hover { transform: translateY(-5px); }
.gmx-relcard__media { position: relative; display: block; }
.gmx-relcard__img { display: block; width: 100%; height: auto; }
.gmx-relcard__label { /* ...əvvəlki etiket stilləri... */ }
.gmx-relcard__body { padding: 15px; background-color: var(--gmx-bg-light); border: 1px solid var(--gmx-border-color); border-top: none; border-radius: 0 0 var(--gmx-border-radius-md) var(--gmx-border-radius-md); }
.gmx-relcard__title { color: var(--gmx-text-secondary); text-decoration: none; font-weight: 500; }
.gmx-relcard:hover .gmx-relcard__title { color: #fff; }

/* ===== 7. Responsivlik (Sizin Kod Əsasında) ===== */
@media (max-width: 992px) {
    .gmx-tabs__header { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
    .gmx-tab { padding: 14px; font-size: 15px; }
}
@media (max-width: 540px) {
    .gmx-tabs__header { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
    .gmx-tab { justify-content: flex-start; padding: 14px 16px; }
    .gmx-tab i { width: 22px; text-align: center; }
}

/* ===== YENİ: Oxşar Məhsullar üçün Mobil Sürüşdürmə (Carousel) Effekti ===== */

@media (max-width: 768px) {
    
    .gmx-related {
        /* Konteynerin kənarlarında boşluq olmasın deyə padding-i sıfırlayırıq */
        padding-left: 0;
        padding-right: 0;
    }
    
    .gmx-related__grid {
        /* 1. Grid-i Flexbox-a çeviririk ki, elementlər yan-yana düzülsün */
        display: flex;
        overflow-x: auto; /* Horizontal scroll-u aktiv edir */
        
        /* 2. "Sticky" scroll-snap effektini tətbiq edirik */
        scroll-snap-type: x mandatory;
        
        /* 3. Məhsulların konteynerə yapışması üçün daxili boşluq */
        /* Ekranın kənarından 20px məsafədə dayanacaq */
        scroll-padding: 0 20px;

        /* Konteynerin öz daxili boşluqları */
        padding: 0 20px;

        /* Mövcud grid xüsusiyyətlərini ləğv edirik */
        grid-template-columns: none;
    }
    
    .gmx-relcard {
        /* 4. Hər bir məhsulun enini təyin edirik */
        /* Ekranın 85%-ni tutacaq, qalan 15% isə növbəti məhsulun görünməsi üçündür */
        flex: 0 0 85%;
        
        /* 5. Məhsulun scroll zamanı ortada dayanmasını təmin edirik */
        scroll-snap-align: center;
    }

    /* 6. Scrollbar-ı gizlədirik ki, daha səliqəli görünsün */
    .gmx-related__grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    .gmx-related__grid {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}


/* ===== Giriş Səhifəsi Ümumi Stilləri ===== */
:root {
    --auth-bg-main: #10121a;
    --auth-bg-dark: #171a22;
    --auth-bg-light: #1f2430;
    --auth-border: #2a2f3b;
    --auth-border-hover: #364058;
    --auth-grad-start: #ff4ec7;
    --auth-grad-end: #6e49ff;
    --auth-text-primary: #e0e0e0;
    --auth-text-secondary: #a0a4b8;
    --auth-shadow-inset: inset 0 8px 26px rgba(0, 0, 0, .25);
    --auth-shadow-main: 0 12px 28px rgba(82, 74, 255, .32);
    --auth-radius-lg: 18px;
    --auth-radius-md: 14px;
    --auth-transition: all 0.25s ease;
}

.gmx-auth-wrapper {
    padding: 40px 20px;
    background-color: var(--auth-bg-main);
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gmx-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
}

/* ===== SOL TƏRƏF: Məlumat Kartları ===== */
.gmx-auth-info__grid {
    display: grid;
    gap: 20px;
}

.gmx-auth-infocard {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--auth-bg-dark);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-md);
    transition: var(--auth-transition);
}
.gmx-auth-infocard:hover {
    transform: translateY(-5px);
    border-color: var(--auth-border-hover);
    box-shadow: 0 8px 22px rgba(36, 46, 68, .35);
}

.gmx-auth-infocard__icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--auth-grad-start), var(--auth-grad-end));
    border-radius: 50%;
}
.gmx-auth-infocard__icon img {
    width: 28px;
    height: 28px;
}
.gmx-auth-infocard__title {
    color: var(--auth-text-primary);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
}
.gmx-auth-infocard__desc {
    color: var(--auth-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* ===== SAĞ TƏRƏF: Giriş Forması ===== */
.gmx-auth-card {
    background: var(--auth-bg-dark);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: var(--auth-shadow-inset);
    border-radius: var(--auth-radius-lg);
    overflow: hidden;
}

.gmx-auth-tabs {
    display: flex;
}
.gmx-auth-tab {
    flex: 1;
    padding: 18px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    background: var(--auth-bg-light);
    color: var(--auth-text-secondary);
    border-bottom: 3px solid transparent;
    transition: var(--auth-transition);
}
.gmx-auth-tab:hover {
    background: #2a2f3b;
    color: var(--auth-text-primary);
}
.gmx-auth-tab.is-active {
    background: transparent;
    color: #fff;
    border-image: linear-gradient(90deg, var(--auth-grad-start), var(--auth-grad-end)) 1;
}

.gmx-auth-content {
    padding: 30px;
}

/* Form Elementləri */
.gmx-auth-formgroup { margin-bottom: 20px; }
.gmx-auth-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--auth-text-secondary); }
.gmx-auth-input-wrapper { position: relative; }
.gmx-auth-input-wrapper i { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: var(--auth-text-secondary); }
.gmx-auth-input {
    width: 100%; padding: 12px 15px 12px 45px; background: var(--auth-bg-light);
    border: 1px solid var(--auth-border); border-radius: 10px; color: var(--auth-text-primary);
    transition: var(--auth-transition);
}
.gmx-auth-input:focus { outline: none; border-color: var(--auth-grad-end); box-shadow: 0 0 0 3px rgba(110, 73, 255, 0.3); }

/* Checkbox və Link */
.gmx-auth-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.gmx-auth-link { color: var(--auth-grad-end); text-decoration: none; font-weight: 500; }
.gmx-auth-link:hover { text-decoration: underline; }

.gmx-auth-checkbox { display: flex; align-items: center; cursor: pointer; color: var(--auth-text-secondary); }
.gmx-auth-checkbox input { display: none; }
.gmx-auth-checkbox__marker {
    width: 18px; height: 18px; border: 2px solid var(--auth-border);
    border-radius: 4px; margin-right: 10px; position: relative;
}
.gmx-auth-checkbox input:checked + .gmx-auth-checkbox__marker {
    background: var(--auth-grad-end); border-color: var(--auth-grad-end);
}
.gmx-auth-checkbox input:checked + .gmx-auth-checkbox__marker::after {
    content: '✓'; color: #fff; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-size: 12px;
}

/* Submit Düyməsi */
.gmx-auth-submit-btn {
    width: 100%; padding: 14px; border: none; border-radius: 10px; font-weight: 700;
    color: #fff; background: linear-gradient(90deg, var(--auth-grad-start), var(--auth-grad-end));
    box-shadow: var(--auth-shadow-main); cursor: pointer; transition: var(--auth-transition);
}
.gmx-auth-submit-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(82, 74, 255, .4); }

/* Divider */
.gmx-auth-divider { display: flex; align-items: center; text-align: center; color: var(--auth-text-secondary); margin: 25px 0; }
.gmx-auth-divider::before, .gmx-auth-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--auth-border); }
.gmx-auth-divider:not(:empty)::before { margin-right: .5em; }
.gmx-auth-divider:not(:empty)::after { margin-left: .5em; }

/* Sosial Giriş Düymələri */
.gmx-auth-social-grid { display: grid; gap: 15px; }
.gmx-auth-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px;
    border-radius: 10px; text-decoration: none; font-weight: 600;
    background-color: var(--auth-bg-light); color: var(--auth-text-primary);
    border: 1px solid var(--auth-border); transition: var(--auth-transition);
}
.gmx-auth-social-btn:hover { border-color: var(--auth-border-hover); transform: translateY(-2px); }
.gmx-auth-social-btn--facebook:hover { color: #1877F2; border-color: #1877F2; }
.gmx-auth-social-btn--twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }

/* Alert Mesajları */
.gmx-auth-alert { padding: 15px; border-radius: 10px; margin-bottom: 20px; }
.gmx-auth-alert--error { background-color: rgba(255, 78, 99, 0.1); border: 1px solid rgba(255, 78, 99, 0.5); color: #ff4e63; }
.gmx-auth-alert--success { background-color: rgba(0, 212, 161, 0.1); border: 1px solid rgba(0, 212, 161, 0.5); color: #00d4a1; }

/* ===== Responsivlik ===== */
@media (max-width: 992px) {
    .gmx-auth-grid {
        grid-template-columns: 1fr;
    }
    .gmx-auth-info {
        display: none; /* Mobil cihazlarda sol tərəfi gizlədirik */
    }
    .gmx-auth-wrapper {
        padding: 20px 10px;
    }
}

/* Yan-yana olan form qrupları üçün */
.gmx-auth-formrow {
    display: flex;
    gap: 20px;
}
.gmx-auth-formrow > .gmx-auth-formgroup {
    flex: 1; /* Xanaların bərabər en almasını təmin edir */
    margin-bottom: 0; /* Sətir daxilindəki boşluğu ləğv edir */
}
/* Ümumi form qrupu boşluğunu qorumaq üçün */
.gmx-auth-mainform > .gmx-auth-formrow {
    margin-bottom: 20px;
}

/* ===== YENİ: Giriş və Qeydiyyat Səhifələri Üçün Mobil Uyğunluq ===== */

@media (max-width: 768px) {
    
    /* 1. Əsas quruluşu tək sütuna keçiririk */
    .gmx-auth-grid {
        grid-template-columns: 1fr;
    }

    /* 2. Sol tərəfdəki məlumat blokunu mobil cihazlarda gizlədirik */
    .gmx-auth-info {
        display: none;
    }
    
    /* 3. Yan-yana olan form xanalarını (Ad, Soyad və s.) alt-alta düzürük */
    .gmx-auth-formrow {
        flex-direction: column;
        gap: 0; /* Aralarındakı boşluğu sıfırlayırıq, çünki hər formgroup-un öz boşluğu var */
    }

    .gmx-auth-mainform > .gmx-auth-formrow {
        margin-bottom: 0; /* Sətirin öz boşluğunu ləğv edirik */
    }

    .gmx-auth-formrow > .gmx-auth-formgroup {
        margin-bottom: 20px; /* Hər bir xana arasında boşluq əlavə edirik */
    }
    
    /* 4. Müqavilə checkbox-larını alt-alta və səliqəli düzürük */
    .gmx-auth-options {
        flex-direction: column;
        align-items: flex-start; /* Sola düzürük */
        gap: 15px; /* Aralarında boşluq yaradırıq */
    }
    
    /* 5. Ümumi boşluqları mobil üçün azaldırıq */
    .gmx-auth-wrapper {
        padding: 20px 15px; /* Kənar boşluqları azaldırıq */
        min-height: auto;
    }
    
    .gmx-auth-content {
        padding: 20px; /* Formanın daxili boşluğunu azaldırıq */
    }
    
    .gmx-auth-tab {
        padding: 15px 10px; /* Tabların daxili boşluğunu azaldırıq */
        font-size: 15px;
    }
}

/* ===== YENİ: Şifrə Sıfırlama Səhifəsi üçün Əlavə Stillər ===== */

/* Tək sütunlu layout üçün */
.gmx-auth-grid--single {
    grid-template-columns: 1fr;
    max-width: 450px; /* Kartın maksimal enini təyin edir */
    margin: 0 auto;
}

/* Kartın başlığı üçün stillər */
.gmx-auth-card__header {
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid var(--auth-border);
}

.gmx-auth-card__logo {
    display: block;
    margin-bottom: 20px;
}

.gmx-auth-card__logo img {
    height: 40px; /* Logonun hündürlüyü */
    width: auto;
}

.gmx-auth-card__title {
    color: var(--auth-text-primary);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.gmx-auth-card__subtitle {
    color: var(--auth-text-secondary);
    font-size: 15px;
}

/* Google reCAPTCHA-nı mərkəzləşdirmək */
.gmx-auth-formgroup .g-recaptcha {
    display: flex;
    justify-content: center;
}

/* Ən altdakı kiçik mətn üçün stil */
.gmx-auth-note {
    text-align: center;
    color: var(--auth-text-secondary);
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.5;
}


.action-button.js-buy-now {
  background: #16a34a; /* yaşıl */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.25s ease, transform 0.2s ease;
}

.action-button.js-buy-now i {
  font-size: 15px;
}

.action-button.js-buy-now:hover {
  background: #15803d; /* daha tünd yaşıl */
  transform: translateY(-2px);
}

.action-button.js-buy-now:active {
  transform: translateY(0);
}
/* ========================================================== */
/* QUICKBUY MODAL - YENİ MODERN DİZAYN (TAM RESPONSİV)      */
/* ========================================================== */

/* Gündüz/Gecə Rejimi üçün Rəng Dəyişənləri */
:root {
    /* Gecə Rejimi (Default) */
    --qb-backdrop-bg: rgba(10, 10, 12, 0.6);
    --qb-panel-bg: #1e1e21;
    --qb-summary-bg: #2a2a2e;
    --qb-text-primary: #f0f0f0;
    --qb-text-secondary: #a0a0b0;
    --qb-text-total: #e54257;
    --qb-border-color: #3a3a40;
    --qb-input-bg: #2a2a2e;
    --qb-input-border: #4a4a52;
    --qb-input-focus-border: #e54257;
    --qb-balance-bg: rgba(34, 197, 94, 0.1);
    --qb-balance-border: #22c55e;
    --qb-balance-icon-bg: #22c55e;
    --qb-button-bg: #e54257;
    --qb-button-text: #ffffff;
    --qb-button-hover-bg: #d63348;
}

[data-theme="light"] {
    --qb-backdrop-bg: rgba(255, 255, 255, 0.7);
    --qb-panel-bg: #ffffff;
    --qb-summary-bg: #f7f7f9;
    --qb-text-primary: #1e1e21;
    --qb-text-secondary: #6c757d;
    --qb-text-total: #e54257;
    --qb-border-color: #e0e0e0;
    --qb-input-bg: #ffffff;
    --qb-input-border: #ced4da;
    --qb-input-focus-border: #e54257;
    --qb-balance-bg: rgba(34, 197, 94, 0.1);
    --qb-balance-border: #22c55e;
    --qb-balance-icon-bg: #22c55e;
    --qb-button-bg: #e54257;
    --qb-button-text: #ffffff;
    --qb-button-hover-bg: #d63348;
}

/* Modal Ümumi Stillər */
.qb-modal { position:fixed; inset:0; z-index:9999; display:none; }
.qb-modal.qb-show { display:flex; align-items:center; justify-content:center;    z-index: 99999; }
.qb-backdrop { position:absolute; inset:0; background:var(--qb-backdrop-bg); backdrop-filter: blur(5px); }
.qb-panel {
    position:relative; margin: 24px; padding:0; border-radius:18px; max-width:860px;
    width: 95%; background:var(--qb-panel-bg); color:var(--qb-text-primary);
    box-shadow:0 20px 80px rgba(0,0,0,.45); overflow:hidden;
    animation: qbModalIn 0.3s ease-out;
}
@keyframes qbModalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Başlıq */
.qb-head { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--qb-border-color); }
.qb-title { font-weight:600; font-size:18px; }
.qb-close { border:0; background:transparent; color:var(--qb-text-secondary); font-size:24px; line-height:1; cursor:pointer; padding: 0; }

/* Gövdə (Layout) */
.qb-body { display:grid; gap:24px; padding:24px; }
@media(min-width: 768px){ 
    .qb-body { grid-template-columns: 1fr 1.5fr; } 
}

/* Ümumi Kart Stili */
.qb-card { padding: 0; border: none; background: transparent; }

/* Sol Panel: Məhsul Xülasəsi */
.qb-summary { background:var(--qb-summary-bg); border-radius:16px; padding: 20px; display: flex; flex-direction: column; }
.qb-prod { display:flex; gap:16px; }
.qb-prod img { width:80px; height:auto; object-fit:cover; border-radius:10px; flex-shrink: 0; }
.qb-prod-title { margin:0; font-size:17px; font-weight:600; }
.qb-meta { margin-top:8px; color:var(--qb-text-secondary); font-size:14px; display:flex; flex-direction:column; gap: 4px; }
.qb-meta div { display:flex; align-items:center; gap: 6px; }
.qb-separator { border:none; border-top:1px solid var(--qb-border-color); margin: 20px 0; }
.qb-total { display:flex; justify-content:space-between; align-items:baseline; font-size: 16px; font-weight: 600; }
.qb-total span:last-child { font-size: 22px; font-weight: 700; color: var(--qb-text-total); }

/* Sağ Panel: Form */
.qb-section-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.qb-form .qb-label { font-size:14px; color:var(--qb-text-secondary); margin-bottom: 8px; display: block; }

/* Inputlar */
.qb-input-wrap { position: relative; }
.qb-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--qb-text-secondary); }
.qb-input {
    width:100%; background:var(--qb-input-bg); border:1px solid var(--qb-input-border);
    border-radius:12px; padding:12px 16px 12px 44px; color:var(--qb-text-primary);
    font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.qb-input:focus {
    outline: none; border-color: var(--qb-input-focus-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qb-input-focus-border) 20%, transparent);
}
#qbSpesificWrap > div { margin-bottom: 16px; }
#qbQtyInput { padding: 12px; text-align: center; }

/* Miqdar Seçimi */
.qb-qty { display:flex; align-items:center; gap:8px; margin-bottom: 24px; }
.qb-qty .qb-step {
    width:44px; height:44px; border-radius:12px; border:1px solid var(--qb-border-color);
    background:var(--qb-card); color:var(--qb-text-primary); font-weight:500; font-size: 20px;
    cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.qb-qty .qb-step:hover { background-color: var(--qb-input-bg); border-color: var(--qb-text-secondary); }
.qb-qty .qb-max { color: var(--qb-text-secondary); }

/* Balans Bloku */
.qb-balance {
    display:flex; gap:16px; align-items:center; border:1px solid var(--qb-balance-border);
    border-radius:14px; padding:16px; margin-top:10px; background: var(--qb-balance-bg);
}
.qb-balance-icon {
    width: 48px; height: 48px; border-radius: 12px; background: var(--qb-balance-icon-bg);
    display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0;
}
.qb-balance-title { font-weight: 600; }
#qbBalanceText { font-size: 14px; color: var(--qb-text-secondary); }

/* Düymə */
.qb-badge {
    display:inline-flex; align-items:center; gap:6px; padding:14px; border-radius:14px;
    background:var(--qb-button-bg); color:var(--qb-button-text); border:0; width:100%; 
    justify-content:center; font-weight:600; font-size: 16px; cursor: pointer;
    text-decoration: none; margin-top: 24px; transition: background-color .2s;
}
.qb-badge:hover { background-color: var(--qb-button-hover-bg); }
.qb-badge[disabled] { opacity:.6; cursor:not-allowed; }

/* Xəta Mesajı */
.qb-err { display:none; margin-top:16px; border-radius:12px; padding:12px 16px; background:#7f1d1d; color:#fee2e2; }


/* ========================================================== */
/* MOBİL ADAPTASİYA DÜZƏLİŞLƏRİ (YENİ)                       */
/* ========================================================== */
@media (max-width: 767px) {
    .qb-panel {
        margin: 10px; /* Kənar boşluğu azaldırıq */
        width: calc(100% - 20px); /* Ekranın 100%-ni tutsun, kənarlardan 10px boşluqla */
    }
    .qb-head {
        padding: 16px; /* Başlıq üçün yan boşluqları azaldırıq */
    }
    .qb-body {
        padding: 16px; /* Əsas gövdə üçün yan boşluqları azaldırıq */
        gap: 20px; /* Kartlar arasındakı boşluğu azaldırıq */
    }
    .qb-summary {
        padding: 16px; /* Sol panelin daxili boşluğunu azaldırıq */
    }
    .qb-prod {
        gap: 12px; /* Şəkil və mətn arasındakı boşluğu azaldırıq */
    }
    .qb-prod img {
        width: 60px; /* Şəkli bir az kiçildirirk */
    }
    .qb-prod-title {
        font-size: 16px; /* Başlığı bir az kiçildirirk */
    }
    .qb-total span:last-child {
        font-size: 20px; /* Məbləğ yazısını bir az kiçildirirk */
    }
    .qb-qty .qb-step {
        width: 40px; /* +/- düymələrini bir az kiçildirirk */
        height: 40px;
    }
    .qb-balance {
        padding: 12px; /* Balans blokunun daxili boşluğunu azaldırıq */
        gap: 12px;
    }
    .qb-balance-icon {
        width: 40px; /* Balans ikonunu bir az kiçildirirk */
        height: 40px;
    }
}

/* ÜMUMİ TOAST STİLİ */
.qb-toast-notification {
    position: fixed !important;
    right: 20px !important;
    top: 20px !important;
    left: auto !important;
    transform: none !important;
    
    min-width: 320px;
    max-width: 380px;
    color: #fff !important;
    border-radius: 24px !important;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 99999 !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Şüşə Effekti (Glassmorphism) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    display: flex !important;
    align-items: center;
    gap: 12px;
    
    opacity: 0;
    animation: qbToastIn 0.4s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    pointer-events: auto;
    transition: transform 0.2s ease;
    
    /* DƏYİŞİKLİK: overflow: hidden əlavə edildi */
    overflow: hidden; /* Bu, kənara çıxan elementləri gizlədir */
}

.qb-toast-notification:hover {
    transform: scale(1.03) !important;
}
.qb-toast-notification:hover::before {
    animation-play-state: paused;
}

/* İKON, MƏTN, BAĞLAMA DÜYMƏSİ */
.qb-toast-notification .toast-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.qb-toast-notification .toast-message {
    flex-grow: 1;
    margin: 0;
    padding: 0;
    font-size: 15px;
}
.qb-toast-notification .toast-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.qb-toast-notification .toast-close:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* PROQRESS XƏTTİ (taymer) */
.qb-toast-notification::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    /* DƏYİŞİKLİK: border-radius ləğv edildi, çünki artıq lazımsızdır */
    /* border-radius: 0 0 24px 24px; */ 
    transform-origin: left;
    animation: qbToastBar 3000ms linear forwards; 
}


/* RƏNG STİLLƏRİ */
/* Uğurlu (Yaşıl) - .qb-ok-note */
.qb-ok-note { background: rgba(22, 163, 74, 0.7) !important; }
.qb-ok-note .toast-icon { background: #16a34a; }
.qb-ok-note::before { background: #6ee7b7; }

/* Xəta (Qırmızı) - .qb-err-note */
.qb-err-note { background: rgba(239, 68, 68, 0.7) !important; }
.qb-err-note .toast-icon { background: #ef4444; }
.qb-err-note::before { background: #fca5a5; }


/* ANİMASİYALAR */
@keyframes qbToastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes qbToastBar {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* MOBİL ADAPTASİYA */
@media (max-width: 480px) {
    .qb-toast-notification {
        min-width: auto;
        width: calc(100% - 20px);
        right: 10px !important;
        top: 10px !important;
    }
}
              



/* --- SweetAlert2 Glass/Neon Toast (dark) --- */
.swal2-container.gx-toast-container{
  background: transparent !important;   /* overlay yoxdur */
  pointer-events: none;
  padding: 0 !important;
}
.swal2-container.gx-toast-container.swal2-top-end{
  top: 14px !important; right: 14px !important;
}

/* GÜCLÜ spesifiklik + !important -> ağ fonu sıxışdırır */
.swal2-container.gx-toast-container .swal2-popup.gx-toast.swal2-toast{
  --swal2-background: transparent !important;   /* SweetAlert2 var-ı */
  background: linear-gradient(180deg, rgba(18,26,40,.88), rgba(12,18,30,.88)) !important;
  color: #e9eef7 !important;
  border: 1px solid rgba(120,150,200,.25) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  min-width: 320px; max-width: 520px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.swal2-container.gx-toast-container .swal2-popup.gx-toast .swal2-title{
  color:#e9eef7 !important;
  font-size:15px !important; line-height:1.35 !important;
  font-weight:600 !important; margin:0 !important; text-align:left !important;
}
.swal2-container.gx-toast-container .swal2-icon{
  margin:0 10px 0 2px !important; width:28px !important; height:28px !important;
  border-width:2px !important;
}
.swal2-container.gx-toast-container .swal2-icon.swal2-info{
  border-color: rgba(100,160,255,.8) !important; color:#7fb4ff !important;
}
/* aşağıdakı ağ xətt = timer bar */
.swal2-container.gx-toast-container .swal2-timer-progress-bar{
  background: rgba(127,180,255,.6) !important;
}

/* (istəyə görə) Light mode */
:root:not(.dark) .swal2-container.gx-toast-container .swal2-popup.gx-toast.swal2-toast{
 
  color:#1e2a3a !important; border-color: rgba(70,100,160,.25) !important;
}
:root:not(.dark) .swal2-container.gx-toast-container .swal2-icon.swal2-info{
  border-color:#3a7bff !important; color:#3a7bff !important;
}


/* ====== PRODUCT LIST – HORIZONTAL CARD (view 3) ====== */
.productyataylist{
  --card-bg: #121420;            /* kart fonu */
  --card-border: #2a2e45;        /* sərhəd */
  --card-hover: #7c3aed;         /* vurğu */
  --muted: #a3a7be;              /* köməkçi mətn */
  --accent: #f59e0b;             /* sarı akssent (məhsul meta) */

  display:flex;
  gap:16px;
  align-items:stretch;
  background: linear-gradient(180deg,#ffffff05,#ffffff00), var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:16px;
  margin:14px 0;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.productyataylist:hover{
  border-color: color-mix(in srgb, var(--card-hover) 40%, var(--card-border));
  box-shadow: 0 6px 20px rgba(124,58,237,.18);
}

/* left: image */
.productyataylist .product-detail .pimg-base{
  width:132px;
  flex:0 0 132px;
}
.productyataylist .product-image{
  width:100%;
  padding-top:70%;                /* 7:10 ratio */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:14px;
  outline:1px solid #262a3f;
  outline-offset:-1px;
  filter: saturate(1.08);
}

/* middle: info */
.productyataylist .product-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.productyataylist .product-name-detailed .product-name{
  font-size:16px;
  font-weight:700;
  color:#e7e9ff;
  letter-spacing:.2px;
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.productyataylist .text-overlay{
  margin-top:2px;
}
.productyataylist .text-overlay span{
  display:block;
  font-size:13px;
  line-height:1.5;
  color:var(--accent);
  opacity:.95;
}
.productyataylist .text-overlay b{
  color:#e9eafc;
  font-weight:600;
}

/* right: actions block */
.productyataylist .bottom-block{
  flex:0 0 320px;
  display:flex;
  align-items:center;
}
.productyataylist .market-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.productyataylist .market-action{
  padding:12px;
  border:1px solid #23263b;
  border-radius:14px;
  background: linear-gradient(180deg,#ffffff06,#ffffff00), #161827;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
}
.productyataylist .market-action:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-hover) 40%, #23263b);
}

/* price chips */
.productyataylist .buy-price-span,
.productyataylist .sell-price-span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#cdd1ea;
  background:#1b1e30;
  border:1px solid #262a3f;
  border-radius:999px;
  padding:6px 10px;
  line-height:1;
  user-select:none;
}

/* buttons */
.productyataylist .btn{
  width:100%;
  border-radius:12px !important;
  font-weight:700;
  padding:10px 14px;
  letter-spacing:.2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.productyataylist .btn:active{ transform: translateY(1px); }

/* primary (Satın Al) */
.productyataylist .btn-success{
  background: linear-gradient(90deg,#7c3aed,#6d28d9);
  border-color: #6d28d9;
}
.productyataylist .btn-success:hover{
  background: linear-gradient(90deg,#8b5cf6,#7c3aed);
}

/* secondary (Bize Sat) */
.productyataylist .btn-secondary{
  background:#21243b;
  border-color:#32365a;
  color:#e5e7ff;
}
.productyataylist .btn-secondary:hover{
  background:#262a48;
  border-color:#3a3f67;
}

/* disabled */
.productyataylist .btn-danger{
  background:#3a1f1f;
  border-color:#5c2a2a;
  color:#f7dada;
}

/* tiny helpers */
.productyataylist .fs-15{ font-size:15px; }
.productyataylist .fw-600{ font-weight:600; }

/* ====== RESPONSIVE ====== */
@media (max-width: 992px){
  .productyataylist{ flex-wrap:wrap; }
  .productyataylist .product-detail .pimg-base{ width:110px; flex-basis:110px; }
  .productyataylist .bottom-block{ flex: 1 1 100%; }
}
@media (max-width: 576px){
  .productyataylist{
    padding:12px;
    gap:12px;
  }
  .productyataylist .product-detail .pimg-base{ width:100%; flex-basis:100%; }
  .productyataylist{ flex-direction:column; }
  .productyataylist .bottom-block{ width:100%; }
  .productyataylist .market-actions{ gap:10px; }
  .productyataylist .product-name-detailed .product-name{ font-size:15px; }
  .productyataylist .text-overlay span{ font-size:12px; }
}
/* ===========================================================
   Cart Modal (cm-*) — FULL & RESPONSIVE
   =========================================================== */

/* --- Theme palette (easy to tweak) --- */
:root{
  --cm-bg:#121524;
  --cm-card:#0f1221;
  --cm-head-grad-a:#1c2140;
  --cm-head-grad-b:#151a31;
  --cm-border:#232943;
  --cm-border-2:#1e2545;
  --cm-txt:#e9ecff;
  --cm-txt-dim:#9aa3bf;

  /* Primary button tuned to match header */
  --cm-primary:#222742;
  --cm-primary-2:#2b325a;

  --cm-ghost:#19203a;
  --cm-ghost-2:#21294b;

  --cm-card-hover:#2f3660;
  --cm-price:#9ec6ff;
}

/* --- Bootstrap modal host tweaks --- */
.cm-modal .modal-dialog{ max-width:980px; }
.cm-modal .modal-content{ background:transparent; border:0; box-shadow:none; }
.cm-modal .modal-body{ padding:0; }

/* ========== MOBILE/LAYOUT FIX (scroll inside modal, not page) ========== */
.cm-modal .cm-dialog{
  max-width:960px;
  width:calc(100% - 20px);
  margin:10px auto;
}
.cm-modal .cm{
  display:flex;
  flex-direction:column;
  max-height:90vh;                /* ekrana sığsın */
  background:var(--cm-bg);
  color:var(--cm-txt);
  border:1px solid var(--cm-border);
  border-radius:18px;
  overflow:hidden;                /* kənardan daşmasın */
}
.cm-head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(180deg,var(--cm-head-grad-a),var(--cm-head-grad-b));
  border-bottom:1px solid var(--cm-border);
}
.cm-body{
  flex:1 1 auto;
  overflow:auto;                  /* içəridə skrollansın */
  -webkit-overflow-scrolling:touch;
  padding:18px;
}

/* --- Header content --- */
.cm-head__title{ display:flex; gap:10px; align-items:center; font-weight:700; color:#fff; }
.cm-close{
  background:transparent; border:0; color:var(--cm-txt-dim);
  font-size:22px; line-height:1; padding:0 6px; border-radius:8px;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.cm-close:hover{ background:#232845; color:#fff; transform:scale(1.05); }

/* --- Top row --- */
.cm-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.cm-product{ display:flex; align-items:center; gap:12px; min-width:260px; }
.cm-thumb{
  width:64px; height:64px; object-fit:cover; border-radius:12px;
  background:#0e1122; border:1px solid #252b45;
}
.cm-meta{ display:flex; flex-direction:column; gap:4px; }
.cm-cat{ font-size:12px; color:var(--cm-txt-dim); }
.cm-name{ font-weight:700; color:#fff; font-size:14px; }

.cm-actions{ display:flex; align-items:center; gap:10px; }
.cm-btn{
  border:1px solid transparent; border-radius:10px; padding:10px 14px;
  font-weight:700; display:inline-flex; align-items:center; gap:8px;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .08s ease;
}
.cm-btn--primary{
  background:var(--cm-primary);
  border-color:var(--cm-primary-2);
  color:#e9ecff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.cm-btn--primary:hover{ background:var(--cm-primary-2); border-color:#394276; transform:translateY(-1px); }
.cm-btn--ghost{ background:var(--cm-ghost); border-color:#2a3154; color:#c8cdea; }
.cm-btn--ghost:hover{ background:var(--cm-ghost-2); }

/* --- Suggestions block: same bg vibe as header --- */
.cm-suggest{
  background:linear-gradient(180deg,var(--cm-head-grad-a),var(--cm-head-grad-b));
  border:1px solid var(--cm-border);
  border-radius:14px;
  padding:14px;
  margin-top:6px;
}
.cm-suggest__head{ font-weight:700; color:#fff; margin-bottom:10px; }

/* Grid */
.cm-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width: 1200px){ .cm-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 992px){ .cm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px){ .cm-grid{ grid-template-columns:1fr; } }

/* Cards */
.cm-card{
  display:flex; flex-direction:column;
  background:var(--cm-card);
  border:1px solid var(--cm-border);
  border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.cm-card:hover{ transform:translateY(-2px); border-color:var(--cm-card-hover); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.cm-card__media{ position:relative; padding-top:64%; background:#0b0e1c; border-bottom:1px solid var(--cm-border); }
.cm-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cm-card__body{ padding:10px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.cm-card__title{ font-size:13px; line-height:1.25; color:var(--cm-txt); max-height:34px; overflow:hidden; }
.cm-card__price{ font-weight:800; font-size:13px; color:var(--cm-price); white-space:nowrap; }

/* Separator (unused) */
.cm-sep{ height:1px; background:var(--cm-border); margin:16px 0; display:none; }

/* --- Animation --- */
.cm-modal .cm{ animation:cmPop .18s ease-out; }
@keyframes cmPop{ from{ transform:translateY(6px); opacity:.92; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){ .cm-modal .cm{ animation:none; } }

/* ========== EXTRA RESPONSIVE TUNING ==========
   (full-width on phones, better spacing on small screens) */
@media (max-width: 992px){
  .cm-modal .cm-dialog{ width:calc(100% - 16px); margin:8px auto; }
}
@media (max-width: 768px){
  .cm-body{ padding:14px 16px 16px; }
  .cm-actions .cm-btn{ padding:12px; }
  .cm-card__media{ padding-top:70%; }
}
@media (max-width: 576px){
  .cm-modal .cm-dialog{ max-width:100%; width:100%; margin:0; }
  .cm{ border-radius:0; }                         /* full-screen modal hissi */
  .cm-top{ flex-direction:column; align-items:stretch; gap:10px; }
  .cm-actions{ width:100%; gap:8px; }
  .cm-actions .cm-btn{ flex:1 1 0; }
  .cm-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .cm-card__media{ padding-top:72%; }
}
@media (max-width: 380px){
  .cm-grid{ grid-template-columns:1fr !important; }
  .cm-card__title, .cm-card__price{ font-size:12.5px; }
  .cm-thumb{ width:52px; height:52px; }
}


@supports (padding: max(0px)){
  .cm-body{ padding-bottom:max(18px, env(safe-area-inset-bottom)); }
}


#quickBuyModal .ff-chip{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .7rem; border-radius:.6rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(130%) blur(2px);
}
#quickBuyModal .ff-chip.is-ok{ border-color:rgba(16,185,129,.35); box-shadow:0 0 0 3px rgba(16,185,129,.12) inset; }
#quickBuyModal .ff-chip.is-err{ border-color:rgba(239,68,68,.4); box-shadow:0 0 0 3px rgba(239,68,68,.12) inset; }

#quickBuyModal .ff-chip__icon{
  width:28px; height:28px; min-width:28px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}
#quickBuyModal .ff-chip.is-ok .ff-chip__icon{ color:#10b981; }
#quickBuyModal .ff-chip.is-err .ff-chip__icon{ color:#ef4444; }

#quickBuyModal .ff-chip__text{ line-height:1.2; }
#quickBuyModal .ff-chip__label{
  font-size:.72rem; opacity:.7; margin-bottom:.1rem;
}
#quickBuyModal .ff-chip__name{
  font-weight:600; font-size:.95rem; word-break:break-word;
}

#quickBuyModal .ff-chip__tag{
  margin-left:auto;
  font-size:.72rem; font-weight:600;
  padding:.25rem .45rem; border-radius:.4rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  letter-spacing:.02em;
}


#quickBuyModal .qb-input-wrap{ position:relative; }
#quickBuyModal .qb-input-wrap > svg{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.7; pointer-events:none;
}
#quickBuyModal .qb-input-wrap .qb-input{ padding-left:36px; height:44px; line-height:44px; }
#quickBuyModal .ff-spinner,
#quickBuyModal .ff-result,