/* ============================================================
   Sellstar. Storefront design system — "Graphite, Lime & Magenta"
   Notr grafit zemin, tek kavis jesti; canli limon + canli magenta.
   Arka plan tamamen kodla uretiliyor (bkz. body::before),
   hicbir gorsel dosyasina bagli degil.
   ============================================================ */

:root{
  --bg:#0f1012;
  --bg-2:#191b1e;
  --surface:rgba(238,242,248,.055);
  --surface-2:rgba(238,242,248,.09);
  --border:rgba(232,238,246,.11);
  --border-strong:rgba(232,238,246,.19);
  --text:#fff;
  --muted:rgba(255,255,255,.58);
  --faint:rgba(255,255,255,.36);
  --ghost:rgba(255,255,255,.2);
  --accent:#d8f34a;
  --accent-2:#eaff8a;
  --accent-soft:rgba(216,243,74,.14);
  --success:#34d399;
  --warn:#ffc24d;

  /* Ikinci canli marka rengi. Limonun karsiti; rozetlerde ve
     ikincil eylemlerde kullaniliyor ki iki renk de belirgin olsun. */
  --alt:#ff4fd8;
  --alt-2:#ffb3ec;
  --alt-soft:rgba(255,79,216,.15);

  /* Grafik isaretleri icin AYRI renk.
     Marka aksani limon, durum-amberine cok yakin olculdu
     (dE 11.0, esik 15) — grafik cubuklarinda kullanilsa
     "Pending" durumunu taklit ederdi. Magenta da rozetlerde
     kullaniliyor. Bu yuzden grafiklere olculmus, durum
     renklerinin hicbirine carpmayan bagimsiz bir renk:
     camgobegi (durum-mavisine karsi dE 23.3). */
  --data:#2fe3e0;
  --data-soft:rgba(47,227,224,.22);
  --danger:#f87171;
  --radius:10px;
  --radius-lg:12px;
  --shell:1240px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================================
   ARKA PLAN — "Kavis"

   Desen degil, TEK BIR JEST: ekrandan tasan iki dev daire
   cizgisi. Onceki halkalarin amator durmasinin sebebi
   onlarca tekrarlayan yaydi; burada sadece iki cizgi var
   ve ikisi de ekrandan tasiyor, yani "desen" olarak
   okunmuyor.

   Zemin rengi body'nin kendisinde. Uc katman:
     html::before  ic daire  (magenta, 1px)
     body::before  dis daire (limon, 1.5px)
     body::after   grain + isik + vinyet

   Ek DOM ya da JS yok, hepsi pseudo-element.
   Kasitli olarak animasyon yok: tek bir jestin guveni
   hareketsizliginden geliyor.
   ============================================================ */

/* --- dis daire: limon --- */
body::before{
  content:'';
  position:fixed;
  z-index:-2;
  left:-28vw;
  bottom:-58vh;
  width:104vw;
  height:104vw;
  border-radius:50%;
  border:1.5px solid rgba(216,243,74,.22);
  pointer-events:none;
}

/* --- ic daire: magenta --- */
html::before{
  content:'';
  position:fixed;
  z-index:-2;
  left:-14vw;
  bottom:-44vh;
  width:76vw;
  height:76vw;
  border-radius:50%;
  border:1px solid rgba(255,79,216,.15);
  pointer-events:none;
}

/* --- grain + isik + vinyet --- */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    /* ince film graini */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    /* sol ustte tek yumusak marka isigi */
    radial-gradient(52% 42% at 10% 2%, rgba(216,243,74,.11), transparent 68%),
    /* sag ustte ikinci renkten bir iz */
    radial-gradient(44% 36% at 96% 0%, rgba(255,79,216,.09), transparent 70%),
    /* vinyet */
    radial-gradient(122% 102% at 50% 22%, transparent 44%, rgba(15,16,18,.58) 100%);
  background-size:170px 170px, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
}

/* Kucuk ekranda daireler cok yakin gorunmesin */
@media (max-width:760px){
  body::before{left:-46vw; bottom:-38vh; width:150vw; height:150vw}
  html::before{left:-30vw; bottom:-26vh; width:112vw; height:112vw}
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:#000}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(15,16,18,.6)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:padding-box}

.shell{max-width:var(--shell);margin:0 auto;padding:0 20px;width:100%}
.page{display:flex;flex-direction:column;min-height:100vh}
.main{flex:1;display:flex;flex-direction:column}
[hidden]{display:none !important}

/* Logolar span icinde geliyor. Sarmalayici olcuyu verir,
   svg her zaman onu tam doldurur. */
.brand__mark,.auth__mark,.pd__logo{display:block}
.brand__mark>svg,.auth__mark>svg,.pd__logo>svg{width:100%;height:100%;display:block}

/* ============================================================
   Header
   ============================================================ */
.header{
  position:sticky;top:0;z-index:55;
  background:rgba(15,16,18,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.header__inner{display:flex;align-items:center;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0}
.brand__mark{width:36px;height:36px;border-radius:11px;flex-shrink:0}
.brand__name{font-weight:800;font-size:17px;letter-spacing:-.03em;white-space:nowrap}
.brand__name span{
  background:linear-gradient(100deg,#fff 20%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.nav{display:flex;align-items:center;justify-content:center;gap:2px;flex:0 0 auto}
.nav a{
  padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:500;
  color:var(--muted);transition:.18s var(--ease);
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav a.is-active{color:#fff;background:rgba(255,255,255,.09)}

.header__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 0}
.btn-ghost{
  padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--faint);
  transition:.18s var(--ease);
}
.btn-ghost:hover{color:rgba(255,255,255,.9);background:rgba(255,255,255,.06)}
.btn-accent{
  padding:8px 15px;border-radius:10px;font-size:13.5px;font-weight:600;
  color:#f2ffc4;background:var(--accent-soft);border:1px solid rgba(216,243,74,.24);
  transition:.18s var(--ease);
}
.btn-accent:hover{background:rgba(216,243,74,.26);color:#fff}

.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--border);transition:.18s var(--ease);
}
.cart-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.cart-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-btn__count{
  min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--accent);color:#0f1012;font-size:11px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.auth-who{display:inline-flex;align-items:center;gap:7px;max-width:180px;padding:8px 13px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:13px}
.auth-who svg{width:13px;height:13px;stroke:#6ee7a8;fill:none;stroke-width:2;flex-shrink:0}
.auth-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}

.burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);align-items:center;justify-content:center}
.burger svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round}
.nav__mobile{display:none;flex-direction:column;gap:3px;padding:10px 0 16px;border-top:1px solid var(--border)}
.nav__mobile.on{display:flex}
.nav__mobile a{padding:11px 14px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--muted)}
.nav__mobile a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav__mobile .is-cta{background:var(--accent-soft);border:1px solid rgba(216,243,74,.28);color:#fff;font-weight:600;margin-top:6px;text-align:center}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;padding:74px 0 10px;overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{
  font-size:clamp(42px,7.5vw,74px);font-weight:800;letter-spacing:-.045em;
  background:linear-gradient(170deg,#fff 32%,rgba(255,255,255,.46));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent) 10%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__tag{margin-top:14px;font-size:clamp(15px,2.2vw,18px);color:var(--muted);max-width:560px}

.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:12px;
  font-size:14px;font-weight:600;transition:.2s var(--ease);
}
.cta--primary{background:var(--accent);color:#0f1012}
.cta--primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.cta--ghost{background:var(--surface);border:1px solid var(--border);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cta--ghost:hover{background:var(--surface-2);border-color:var(--border-strong)}
.cta--block{width:100%}
.cta svg{width:16px;height:16px;flex-shrink:0}

.hero__stats{display:grid;grid-template-columns:repeat(3,auto);gap:34px;margin-top:40px;justify-content:start}
.hstat__value{font-size:26px;font-weight:800;letter-spacing:-.04em;display:flex;align-items:center;gap:7px}
.hstat__value .stars{font-size:13px;color:var(--warn);letter-spacing:.06em}
.hstat__label{font-size:12.5px;color:var(--faint);margin-top:2px}

/* Logo duvari */
.vstrip-label{font-size:12px;color:var(--faint);text-align:center;margin-bottom:12px;letter-spacing:.04em}
.vstrip-label b{color:var(--accent-2)}
.vstrip{
  --vh:430px;
  position:relative;height:var(--vh);overflow:hidden;border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
/* Liste asagi iner, sonra geri yukari cikar (alternate).
   Donguyu kapatip gidip-gelme yaptigimiz icin satirlar
   artik iki kez basilmiyor. */
.vstrip__track{
  display:flex;flex-direction:column;gap:12px;padding:12px;
  animation:vscroll 30s ease-in-out infinite alternate;
}
.vstrip:hover .vstrip__track{animation-play-state:paused}
@keyframes vscroll{
  from{transform:translateY(0)}
  to{transform:translateY(calc(var(--vh) - 100%))}
}
@media (prefers-reduced-motion:reduce){
  .vstrip__track{animation:none}
  .vstrip{overflow-y:auto}
}
.vchip{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid var(--border);
}
.vchip svg{width:34px;height:34px;flex-shrink:0}
.vchip__name{font-size:13.5px;font-weight:600}
.vchip__meta{font-size:11.5px;color:var(--faint)}
.vchip__price{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent-2)}

/* ============================================================
   Sections
   ============================================================ */
.section{padding:70px 0}
.section--tight{padding:44px 0 70px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.035em}
.sec-head p{margin-top:7px;color:var(--faint);font-size:14px}
.sec-badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
  background:var(--accent-soft);border:1px solid rgba(216,243,74,.2);
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#eaff8a;margin-bottom:14px;
}

/* ============================================================
   Trust bar
   ============================================================ */
/* Madde sayisi degisebiliyor (sifre maddesi kaldirildi);
   sabit 4 sutun yerine otomatik esit sutun. */
.trustbar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.trust{
  display:flex;align-items:center;gap:11px;padding:16px 18px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.trust svg{width:19px;height:19px;stroke:var(--accent-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.trust b{display:block;font-size:13px;font-weight:600}
.trust span{font-size:11.5px;color:var(--faint)}

/* ============================================================
   Product cards
   ============================================================ */
.shop{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pop-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);
  transform-origin:center;
  transition:transform .26s var(--ease), border-color .2s var(--ease),
             background .2s var(--ease), box-shadow .26s var(--ease);
  text-align:left;width:100%;
}
/* Uzerine gelinen urun buyur, cekilince eski haline doner.
   z-index: buyuyen kart komsularinin ustunde kalsin.

   .reveal.in de transform yaziyor (giris animasyonunu bitirmek
   icin) ve .card:hover ile AYNI ozgullukte. ui.css sonra
   yuklendigi icin kaynak sirasi onu kazandiriyor ve buyume
   silinmis oluyordu. Iki sinifi birden yazarak ozgullugu
   yukseltiyoruz. */
.card.reveal:hover, .card.reveal:focus-visible,
.card:hover, .card:focus-visible{
  z-index:3;
  border-color:rgba(216,243,74,.4);    /* lime kenarlik: hangi kart secili, uzaktan belli */
  background:rgba(255,255,255,.09);
  box-shadow:0 32px 70px -16px rgba(0,0,0,.92);
}

/* Buyume SADECE gercekten fare olan cihazlarda.

   Telefonda kart neredeyse tam genislikte; orada %14 buyutmek
   sayfayi yatay kaydirir. Ayrica dokunmatikte :hover dokunustan
   sonra yapisip kalir. (hover:hover) + (pointer:fine) ikisini de
   keser. */
@media (hover:hover) and (pointer:fine){
  .card.reveal:hover, .card.reveal:focus-visible,
  .card:hover, .card:focus-visible{
    /* Buyume + yukari kalkis: kart yerinde sismek yerine
       izleyiciye dogru geliyormus gibi okunuyor.
       %8: %14 denendi, fazla geldi. Bu oranda kart komsusuna
       degmeden onunde duruyor. */
    transform:translateY(-6px) scale(1.08);
  }
}
/* NOT: burada bir zamanlar "hareketi azalt acikken transform:none"
   kurali vardi ve buyumeyi TAMAMEN siliyordu. Windows'ta animasyon
   efektleri kapali olan herkes hicbir sey gormuyordu.

   Hover'da buyume bir animasyon degil, bir DURUM. Hareketi azalt
   ayari gecisin suresini kisaltir (ui.css'teki global kural zaten
   yapiyor), efektin kendisini kaldirmaz. O yuzden override yok. */
.card__media{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:30px 20px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
  border-bottom:1px solid var(--border);
}
.card__media svg{width:62px;height:62px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.card__flag{
  position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:99px;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(216,243,74,.18);border:1px solid rgba(216,243,74,.3);color:#e8ffa8;
}
.card__flag--hot{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.3);color:#fcd77a}
.card__body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__title{font-size:14px;font-weight:700;letter-spacing:-.02em}
.card__cat{font-size:11.5px;color:var(--faint)}
.card__opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:1px}
.card__opt{
  padding:3px 8px;border-radius:7px;font-size:10.5px;font-weight:500;
  background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);
}
.card__opt--more{color:var(--accent-2);background:rgba(216,243,74,.12);border-color:rgba(216,243,74,.22)}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--border)}
.card__price{font-size:17px;font-weight:800;letter-spacing:-.03em}
.card__price small{font-size:11px;font-weight:500;color:var(--faint);letter-spacing:0}
.card__go{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;
  font-size:12.5px;font-weight:600;background:var(--accent-soft);
  border:1px solid rgba(216,243,74,.24);color:#f2ffc4;transition:.18s var(--ease);
}
.card:hover .card__go{background:var(--accent);border-color:var(--accent);color:#0f1012}
.card__stars{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--faint)}
.card__stars i{color:var(--warn);font-style:normal}

.empty{
  grid-column:1/-1;padding:56px 20px;text-align:center;
  border:1px dashed var(--border-strong);border-radius:var(--radius-lg);color:var(--faint);
}
.empty b{display:block;color:#fff;font-size:15px;margin-bottom:6px}

/* ============================================================
   Filters + toolbar
   ============================================================ */
.filters{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:16px;position:sticky;top:82px;
}
.filters__toggle{display:none;width:100%;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600}
.filters__toggle svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.filters__title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}
.filters__list{display:flex;flex-direction:column;gap:3px}
.fchip{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 11px;border-radius:9px;font-size:13px;font-weight:500;
  color:var(--muted);transition:.16s var(--ease);width:100%;text-align:left;
  border:1px solid transparent;
}
.fchip:hover{background:rgba(255,255,255,.055);color:#fff}
.fchip.on{background:var(--accent-soft);border-color:rgba(216,243,74,.26);color:#fff;font-weight:600}
.fchip span{font-size:11px;color:var(--faint);flex-shrink:0}
.filters__reset{margin-top:12px;width:100%;padding:9px;border-radius:9px;border:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.filters__reset:hover{color:#fff;border-color:var(--border-strong)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.search{position:relative;flex:1;min-width:220px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ghost);fill:none;stroke-width:1.7}
.search input{
  width:100%;padding:11px 14px 11px 39px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:#fff;font-size:13.5px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.18s var(--ease);
}
.search input::placeholder{color:var(--ghost)}
.search input:focus{outline:none;border-color:rgba(216,243,74,.4);background:rgba(255,255,255,.075)}
.select{position:relative}
.select::after{
  content:'';position:absolute;right:14px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
}
.select select{
  appearance:none;-webkit-appearance:none;
  padding:11px 38px 11px 14px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);font-size:13.5px;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.select select:focus{outline:none;border-color:rgba(216,243,74,.4)}
.select select option{background:#191b1e;color:#fff}

/* ============================================================
   Category cards
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cat{
  position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;
  padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:.24s var(--ease);text-align:left;width:100%;
}
.cat:hover{transform:translateY(-3px);border-color:var(--border-strong);background:rgba(255,255,255,.075)}
.cat__ico{
  width:48px;height:48px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);border:1px solid rgba(216,243,74,.22);
}
.cat__ico svg{width:24px;height:24px;stroke:var(--accent-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cat h3{font-size:17px;font-weight:700;letter-spacing:-.03em}
.cat p{margin-top:6px;font-size:13px;color:var(--muted);max-width:420px}
.cat__logos{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}
.cat__logos svg{width:24px;height:24px;opacity:.9}
.cat__n{
  position:absolute;top:20px;right:22px;font-size:11.5px;font-weight:600;
  color:var(--faint);padding:4px 10px;border-radius:99px;border:1px solid var(--border);
}

/* ============================================================
   Policy
   ============================================================ */
.policy{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
.policy__i{padding:22px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.policy__i h4{font-size:13.5px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.policy__i h4 svg{width:16px;height:16px;stroke:var(--accent-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.policy__i p{font-size:12.5px;color:var(--muted);line-height:1.65}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  border-top:1px solid var(--border);margin-top:20px;
  background:rgba(15,16,18,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding:44px 0 30px}
.footer__about p{font-size:13px;color:var(--muted);margin-top:14px;max-width:320px;line-height:1.7}
.footer h5{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.footer li+li{margin-top:9px}
.footer li a{font-size:13px;color:var(--muted);transition:.16s var(--ease)}
.footer li a:hover{color:#fff}
.footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 0 22px;border-top:1px solid var(--border);font-size:12.5px;color:var(--faint);
}
.footer__pay{display:flex;gap:7px;flex-wrap:wrap}
.footer__pay span{padding:4px 10px;border-radius:7px;border:1px solid var(--border);font-size:11px;background:rgba(255,255,255,.04)}

/* ============================================================
   Modal shell. Urun detay + auth
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(10,11,13,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
}
.overlay.on{opacity:1;pointer-events:auto}
.modal{
  position:fixed;z-index:90;left:50%;top:50%;
  transform:translate(-50%,-48%) scale(.98);
  width:min(900px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  /* Kaydirma sutunlarin isi (asagi bak); modal kendisi kaydirinca
     alt bolum ekranin disinda kaliyordu. */
  overflow:hidden;border-radius:16px;
  background:rgba(25,27,30,.9);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transition:.22s var(--ease);
}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal--sm{width:min(430px,calc(100vw - 32px))}
.modal__x{
  position:absolute;top:14px;right:14px;z-index:3;
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid var(--border);
}
.modal__x:hover{background:rgba(255,255,255,.14)}
.modal__x svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}

/* Urun detay */
/* Yukseklik zinciri: #pdModal (max-height) -> #pdBody -> .pd -> sutunlar.
   Her halkada min-height:0 sart; biri eksik olursa flex cocugu
   icerigin altina inemez ve alt bolum ekranin disinda kalir.
   grid-template-rows:minmax(0,1fr) satirin icerikten kisa
   olabilmesini saglar. */
#pdModal{display:flex;flex-direction:column}
#pdBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.pd{display:grid;grid-template-columns:.85fr 1.15fr;
  grid-template-rows:minmax(0,1fr);
  flex:1 1 auto;min-height:0}
.pd__left{
  padding:34px 28px;border-right:1px solid var(--border);
  min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
}
.pd__left .pd__logo{width:88px;height:88px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
.pd__left h3{font-size:21px;font-weight:800;letter-spacing:-.035em;margin-top:18px}
.pd__cat{font-size:12px;color:var(--faint);margin-top:5px}
.pd__stars{color:var(--warn);font-size:13px;letter-spacing:.09em;margin-top:12px}
.pd__sold{font-size:11.5px;color:var(--faint);margin-top:4px}
.pd__blurb{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:16px}
.pd__perks{display:flex;flex-direction:column;gap:8px;margin-top:18px;width:100%;text-align:left}
.pd__perk{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted)}
.pd__perk svg{width:14px;height:14px;stroke:#6ee7a8;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:3px}

/* Sag sutun: baslik ustte, liste ortada (buyuyen), satin alma
   altta sabit. min-height:0 olmadan flex cocugu kuculmez ve
   liste tasar. */
.pd__right{padding:30px 28px 28px;display:flex;flex-direction:column;
  min-height:0;overflow:hidden}
.pd__eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.pd__opts{display:flex;flex-direction:column;gap:8px}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:13px 15px;border-radius:12px;
  border:1px solid var(--border);background:rgba(255,255,255,.035);
  transition:.18s var(--ease);
}
.opt:hover{background:rgba(255,255,255,.07);border-color:var(--border-strong)}
.opt.on{border-color:var(--accent);background:rgba(216,243,74,.13)}
.opt__radio{
  width:17px;height:17px;border-radius:99px;flex-shrink:0;
  border:1.6px solid var(--ghost);display:flex;align-items:center;justify-content:center;
}
.opt.on .opt__radio{border-color:var(--accent)}
.opt.on .opt__radio::after{content:'';width:8px;height:8px;border-radius:99px;background:var(--accent)}
.opt__name{display:block;font-size:13.5px;font-weight:600}
.opt__desc{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.opt__price{margin-left:auto;text-align:right;flex-shrink:0}
.opt__price b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.opt__price span{display:block;font-size:10.5px;color:var(--faint)}

/* Cok opsiyonlu urunlerde (Discord: 14 secenek) liste kaydirilir,
   yoksa modal ekrandan tasar. Basliklar yapiskan kalir. */
/* Ekran alcaldikca liste de kisaliyor; yoksa modal tasip
   satin alma dugmesini ekranin altinda birakiyor. */
.pd__opts{
  flex:1 1 auto;min-height:170px;      /* kalan alanin tamami */
  overflow-y:auto;padding-right:6px;scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent}
/* Liste tasarken alt kenar sert kesilmesin, devami oldugu belli olsun. */
.pd__opts--acc{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);padding-bottom:6px}
/* max-height verilince flex ogeleri kuculup ust uste biniyordu. */
.pd__opts>*{flex-shrink:0}
.pd__opts::-webkit-scrollbar{width:5px}
.pd__opts::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}

.opt-acc{border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.028);overflow:hidden;transition:border-color .16s var(--ease)}
.opt-acc + .opt-acc{margin-top:8px}
.opt-acc:hover{border-color:var(--border-strong)}
.opt-acc.is-open{border-color:rgba(216,243,74,.38);background:rgba(216,243,74,.05)}

.opt-acc__h{display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;text-align:left;background:none;border:none;cursor:pointer}
.opt-acc__txt{flex:1;min-width:0}
.opt-acc__name{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.opt-acc__meta{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.opt-acc.is-open .opt-acc__name{color:var(--accent)}
.opt-acc__chev{width:16px;height:16px;flex-shrink:0;color:var(--faint);
  transition:transform .2s var(--ease)}
.opt-acc.is-open .opt-acc__chev{transform:rotate(180deg);color:var(--accent)}

/* Acilan kademeler. Baslikla ayni kutunun icinde duruyor. */
.opt-acc__p{display:flex;flex-direction:column;gap:6px;
  padding:0 10px 10px;border-top:1px solid var(--border)}
.opt-acc__p[hidden]{display:none}
.opt-acc__p>*{flex-shrink:0}
.opt-acc__p .opt{border-radius:9px}
.opt-acc__p .opt:first-child{margin-top:10px}

/* Kategori secilmeden once aciklama alaninda duran ipucu */
.pd__pick{padding:16px 15px;border:1px dashed var(--border-strong);
  border-radius:var(--radius-lg);font-size:12.5px;color:var(--faint);
  line-height:1.6;text-align:center}

/* Secim yapilmadan sepete atilamaz */
.pd__buy .cta:disabled{
  cursor:not-allowed;background:var(--surface);border:1px solid var(--border);
  color:var(--faint);box-shadow:none;filter:none
}
.pd__buy .cta:disabled:hover{transform:none;background:var(--surface);border-color:var(--border)}
.pd__buy .cta:disabled svg{opacity:.55}

/* Secilen opsiyonun uzun aciklamasi */
.pd__info:empty{display:none}
/* Kod urunlerinde hedef alaninin yerini alan aciklama */
.pd__nodeliver{
  display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;
  padding:11px 13px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
  font-size:12.5px;color:var(--muted);line-height:1.55;
}
.pd__nodeliver svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--accent)}
.co-target__none{margin:6px 0 0;font-size:13px;color:var(--muted)}
/* Odeme adiminin altindaki iletisim satiri. */
.co-help{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin:16px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;
}
.co-help svg{width:14px;height:14px;flex-shrink:0;color:var(--accent)}
.co-help a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.co-help a:hover{color:var(--accent)}
/* Alt bolum dogal yuksekliginde kalsin; yeri listeden calinmasin. */
.pd__info,.pd__target,.qty-row,.pd__buy,.pd__note{flex:0 0 auto}
.pd__info-box{
  margin-top:16px;padding:14px 15px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.035);
}
.pd__info-h{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px;
}
.pd__info-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.pd__info-list li{
  position:relative;padding-left:15px;
  font-size:12px;line-height:1.65;color:var(--muted);
}
.pd__info-list li::before{
  content:'';position:absolute;left:0;top:7px;
  width:5px;height:5px;border-radius:99px;background:var(--accent);opacity:.75;
}
.pd__info-list li.is-head{
  padding-left:0;margin-top:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--alt);
}
.pd__info-list li.is-head::before{display:none}

/* Uzun aciklamalar kirpilir; "more" ile acilir. Boylece modal
   ekrana sigiyor ve satin alma dugmesi asagida kalmiyor. */
.pd__info-box.is-clamped .pd__info-list{
  max-height:min(126px,14vh);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
  mask-image:linear-gradient(180deg,#000 62%,transparent);
}
.pd__info-box.is-clamped.is-open .pd__info-list{
  max-height:none;-webkit-mask-image:none;mask-image:none;
}
.pd__info-more{
  display:flex;align-items:center;gap:5px;margin-top:9px;
  background:none;border:none;cursor:pointer;padding:2px 0;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);
}
.pd__info-more:hover{opacity:.8}
.pd__info-more svg{width:13px;height:13px;transition:transform .2s var(--ease)}
.pd__info-box.is-open .pd__info-more svg{transform:rotate(180deg)}

@media (max-width:980px){
  /* Tek sutuna dusunce flex yuksekligi anlamsiz: modal bir butun
     olarak kaysin, liste dogal boyunda dursun. */
  #pdModal{display:block}
  #pdBody{display:block;min-height:auto}
  .modal{overflow-y:auto}
  .pd{grid-template-rows:auto;min-height:auto}
  .pd__left,.pd__right{overflow:visible;min-height:auto}
  .pd__right{display:block}
  .pd__opts{flex:none;min-height:0;max-height:none;overflow:visible;padding-right:0}
}

.qty-row{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04)}
.qty button{width:34px;height:36px;font-size:17px;font-weight:600;color:var(--muted);transition:.16s}
.qty button:hover{background:rgba(255,255,255,.09);color:#fff}
.qty input{width:46px;height:36px;text-align:center;background:none;border:none;font-size:14px;font-weight:700}
.qty input:focus{outline:none}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-row__lab{font-size:11.5px;color:var(--faint)}
.pd__total{margin-left:auto;text-align:right}
.pd__total span{display:block;font-size:11px;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
.pd__total b{font-size:24px;font-weight:800;letter-spacing:-.04em}
.pd__buy{display:flex;gap:10px;margin-top:18px}
.pd__buy .cta{flex:1}
.pd__note{font-size:11.5px;color:var(--faint);margin-top:14px;display:flex;align-items:flex-start;gap:7px;line-height:1.6}
.pd__note svg{width:14px;height:14px;stroke:var(--accent-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}

/* Alcak ekranlarda (dizustu, 800px ve altina inen pencereler)
   modalin sabit yuksekligi satin alma dugmesini asagi itiyordu.
   Bosluklari daraltip listeyi daha cok kirpiyoruz. */
@media (max-height:880px){
  .pd__left{padding:24px 24px}
  .pd__left .pd__logo{width:66px;height:66px}
  .pd__left h3{font-size:19px;margin-top:13px}
  .pd__blurb{margin-top:12px}
  .pd__perks{margin-top:13px;gap:6px}
  .pd__right{padding:22px 24px 22px}
  .pd__info-box{margin-top:12px;padding:12px 13px}
  .pd__info-box.is-clamped .pd__info-list{max-height:11vh}
  .pd__target{margin-top:12px}
  .qty-row{margin-top:14px;padding-top:13px}
  .pd__buy{margin-top:13px}
  .pd__note{margin-top:10px;font-size:11px}
}
@media (max-height:760px){
  .pd__note{display:none}
  .pd__info-box.is-clamped .pd__info-list{max-height:10vh}
}
/* Cok alcak pencerede sol panel sadece kimlik tasisin. */
@media (max-height:700px){
  .pd__blurb,.pd__perks{display:none}
  .pd__info-box{margin-top:9px;padding:10px 12px}
  .qty-row{margin-top:10px;padding-top:10px}
  .pd__buy{margin-top:10px}
  .pd__target{margin-top:9px}
}

/* ============================================================
   Auth
   ============================================================ */
.auth{padding:30px 28px 28px}
.auth__mark{width:44px;height:44px;border-radius:13px;margin-bottom:16px}
.auth h3{font-size:20px;font-weight:800;letter-spacing:-.035em}
.auth__sub{font-size:13px;color:var(--muted);margin-top:7px}
.auth__tabs{display:flex;gap:3px;padding:3px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--border);margin:20px 0 18px}
.auth__tab{flex:1;padding:9px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);transition:.16s var(--ease)}
.auth__tab.on{background:rgba(255,255,255,.1);color:#fff}
.field{margin-bottom:12px}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--faint);margin-bottom:6px;letter-spacing:.03em}
.field input{
  width:100%;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-size:13.5px;transition:.18s var(--ease);
}
.field input::placeholder{color:var(--ghost)}
.field input:focus{outline:none;border-color:rgba(216,243,74,.42);background:rgba(255,255,255,.08)}
.auth__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 16px;font-size:12px;color:var(--faint);flex-wrap:wrap}
.auth__row label{display:flex;align-items:center;gap:7px;cursor:pointer}
.auth__row input{accent-color:var(--accent);width:14px;height:14px}
.auth__row a:hover{color:#fff}
.auth__msg{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--faint);min-height:18px}
.auth__msg.is-err{color:#ff9090}
.auth__msg.is-ok{color:#6ee7a8}
.auth__alt{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);font-size:12.5px;color:var(--faint);text-align:center}
.auth__alt button{color:var(--accent-2);font-weight:600}
.auth__alt button:hover{color:#fff}

/* ============================================================
   Cart drawer
   ============================================================ */
.drawer{
  position:fixed;z-index:90;top:0;right:0;height:100vh;
  width:min(400px,100vw);display:flex;flex-direction:column;
  background:rgba(25,27,30,.93);
  border-left:1px solid var(--border-strong);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  transform:translateX(102%);transition:transform .26s var(--ease);
}
.drawer.on{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.drawer__head h3{font-size:16px;font-weight:700}
.drawer__body{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:11px}
.drawer__foot{padding:18px 20px 22px;border-top:1px solid var(--border)}
.drawer__sum{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:13px;color:var(--muted)}
.drawer__sum.is-total{margin:12px 0 16px;padding-top:12px;border-top:1px solid var(--border);color:#fff;font-size:15px;font-weight:700}
.drawer__sum.is-total b{font-size:22px;font-weight:800;letter-spacing:-.04em}
.citem{display:flex;gap:11px;align-items:center;padding:11px;border-radius:11px;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.citem svg{width:32px;height:32px;flex-shrink:0}
.citem__t{font-size:13px;font-weight:600}
.citem__o{font-size:11.5px;color:var(--faint);margin-top:2px}
.citem__r{margin-left:auto;text-align:right;flex-shrink:0}
.citem__r b{font-size:13.5px;font-weight:700}
.citem__x{display:block;font-size:11px;color:var(--faint);margin-top:3px}
.citem__x:hover{color:var(--danger)}

/* Toast */
.toast{
  position:fixed;z-index:120;bottom:22px;left:50%;transform:translate(-50%,14px);
  padding:12px 18px;border-radius:12px;
  background:rgba(25,27,30,.95);border:1px solid var(--border-strong);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;
  opacity:0;pointer-events:none;transition:.22s var(--ease);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;stroke:#6ee7a8;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .grid,.pop-row{grid-template-columns:repeat(3,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .hero{padding-top:52px}
  .hero__inner{grid-template-columns:1fr;gap:34px}
  .vstrip{--vh:300px}
  .nav,.header__actions .btn-ghost,.header__actions .btn-accent,.header__actions .auth-who{display:none}
  .burger{display:flex}
  .shop{grid-template-columns:1fr}
  .filters{position:static}
  .filters__toggle{display:flex}
  .filters__panel{display:none;margin-top:14px}
  .filters__panel.on{display:block}
  .trustbar{grid-template-columns:1fr 1fr}
  .policy{grid-template-columns:1fr}
  .pd{grid-template-columns:1fr}
  .pd__left{border-right:none;border-bottom:1px solid var(--border);padding:30px 24px 26px}
}
@media (max-width:760px){
  .grid,.pop-row,.cat-grid{grid-template-columns:1fr 1fr}
  .hero__stats{gap:22px}
  .hstat__value{font-size:22px}
}
@media (max-width:560px){
  .shell{padding:0 16px}
  .section{padding:48px 0}
  .hero h1{letter-spacing:-.035em}
  .grid,.pop-row{grid-template-columns:1fr 1fr;gap:12px}
  .cat-grid{grid-template-columns:1fr}
  .card__body{padding:12px}
  .card__title{font-size:13px}
  .card__media svg{width:50px;height:50px}
  .trustbar{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;gap:26px;padding:34px 0 24px}
  .hero__stats{gap:16px}
  .pd__right,.pd__left,.auth{padding-left:20px;padding-right:20px}
}

/* ============================================================
   Telegram cagrisi
   Odeme sonrasi ekranda ve "siparislerim" panelinde.
   ============================================================ */
.tg-cta{
  display:flex;align-items:center;gap:13px;margin:22px 0 0;
  padding:14px 16px;border-radius:var(--radius);
  background:rgba(34,158,217,.09);border:1px solid rgba(34,158,217,.32);
  text-align:left;
}
.tg-cta__ico{width:22px;height:22px;flex-shrink:0;color:#229ED9}
.tg-cta__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tg-cta__body b{font-size:13.5px;color:var(--text)}
.tg-cta__body span{font-size:12.5px;color:var(--muted);line-height:1.5}
.tg-cta__btn{
  flex-shrink:0;background:#229ED9;color:#fff;text-decoration:none;
  font-size:13px;font-weight:700;padding:9px 16px;border-radius:9px;
  transition:filter .15s;
}
.tg-cta__btn:hover{filter:brightness(1.1)}
@media (max-width:560px){
  .tg-cta{flex-wrap:wrap}
  .tg-cta__btn{width:100%;text-align:center}
}

/* ============================================================
   Canli destek
   Sag altta sabit dugme + panel. Mesaj Worker'a gidiyor,
   oradan Telegram'a; bot jetonu tarayiciya hic inmiyor.
   ============================================================ */
#supRoot{position:fixed;right:18px;bottom:18px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}

.sup-fab{
  width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:#0b0d07;
  display:grid;place-items:center;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.55);
  transition:transform .18s, filter .18s;
}
.sup-fab:hover{filter:brightness(1.07)}
.sup-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sup-fab svg{width:24px;height:24px;grid-area:1/1;transition:opacity .15s, transform .15s}
.sup-fab__x{opacity:0;transform:rotate(-90deg)}
#supRoot.is-open .sup-fab__chat{opacity:0;transform:rotate(90deg)}
#supRoot.is-open .sup-fab__x{opacity:1;transform:none}

.sup-panel{
  order:-1;width:min(340px,calc(100vw - 32px));
  background:var(--surface-solid,#15171a);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.7);
}
.sup-panel__head{padding:16px 18px;border-bottom:1px solid var(--border)}
.sup-panel__head b{display:block;font-size:14.5px;color:var(--text)}
.sup-panel__head span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}

.sup-form{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sup-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sup-form input,.sup-form textarea{
  width:100%;background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:9px;
  padding:10px 12px;font:inherit;font-size:13px;resize:vertical;
}
.sup-form input:focus,.sup-form textarea:focus{
  outline:none;border-color:var(--accent)
}
.sup-form input::placeholder,.sup-form textarea::placeholder{color:var(--muted)}

.sup-ts{display:flex;justify-content:center;min-height:0}
.sup-err{margin:0;font-size:12.5px;color:#ff6b6b;line-height:1.5}
.sup-send{
  background:var(--accent);color:#0b0d07;border:none;border-radius:9px;
  padding:11px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
.sup-send:disabled{opacity:.6;cursor:default}
.sup-alt{margin:0;font-size:12px;color:var(--muted);text-align:center}
.sup-alt a{color:var(--accent)}

.sup-done{padding:26px 18px;text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:7px}
.sup-done svg{width:30px;height:30px;color:var(--accent)}
.sup-done b{font-size:14.5px;color:var(--text)}
.sup-done span{font-size:12.5px;color:var(--muted);line-height:1.55}

@media (max-width:560px){
  #supRoot{right:12px;bottom:12px}
  .sup-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sup-fab,.sup-fab svg{transition:none}
}