/* Generated by server/scripts/build-css.js from wm-fonts.css, wm-tokens.css, wm-home.css, wm-store.css — edit those, then rebuild. */
/* ---- wm-fonts.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — yazı tipleri, kendi sunucumuzdan

   Aynı dosyalar Google Fonts'tan geliyordu: her sayfa önce
   fonts.googleapis.com'dan bir stil dosyası çekiyor, ancak onu okuduktan
   sonra fonts.gstatic.com'dan asıl fontu indiriyordu. İki ayrı alan adına
   gidiş ilk boyamayı geciktiriyordu (Lighthouse: ~0,9 sn). Dosyalar artık
   /assets/fonts/ altında, geri kalan varlıklarla aynı önbellek kuralıyla
   (bir yıl, değişmez) sunuluyor.

   Kapsam latin + latin-ext: İngilizce, Fransızca, İspanyolca, İtalyanca
   ve Türkçe (ğ, ş, İ latin-ext'te). Kiril, Yunan ve Vietnamca alınmadı.
   unicode-range değerleri Google'ın CSS'inden birebir alındı: tarayıcı
   sayfada o aralıktan karakter yoksa dosyayı hiç indirmez.

   İki dosya da değişken font: Archivo'da genişlik ve kalınlık, Manrope'ta
   kalınlık ekseni var, o yüzden ağırlık başına ayrı dosya yok.

   Dosyalar sürüm eki taşımaz (adlarıyla önbelleğe alınırlar): birini
   güncellemek gerekirse yeni bir adla ekle, üzerine yazma. index.html ve
   diğer sayfalar latin dosyalarını <link rel="preload"> ile, latin-ext'i
   ise dili zaten bilen wm-topbar-reserve.js ile önceden yükler.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face{
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- wm-tokens.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — tasarım token'ları
   Bu dosya tasarım sisteminin tek kaynağıdır. Bileşen CSS'i sabit
   renk/ölçü YAZMAZ; her değer buradan okunur.

   Yön: referans mağazanın (oyun-key vitrinlerinin) iskeleti —
   görsel önde kart, hap şeklinde plan chip'leri, oklu yatay raylar,
   eyebrow + dev başlık ritmi — whitemodz'un siyah/sarı paletiyle.

   Ayırt edici tutulan noktalar (aynı görünmesin diye):
   • Zemin lacivert değil düz siyah.
   • Aksan cyan değil sarı; sarı üzerine metin HER ZAMAN siyah.
   • Font çifti farklı: Archivo + Manrope (Bebas Neue + Outfit değil).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Yüzeyler ───────────────────────────────────────────────── */
  --wm-k:          #0a0a0a;   /* sayfa zemini */
  --wm-k-band:     #0d0d0f;   /* bölüm bandı (hafif ayrım) */
  --wm-k-raise:    #121214;   /* kart, panel */
  --wm-k-raise-2:  #17171a;   /* kart içi ikinci kat */
  --wm-k-sink:     #08080a;   /* input, görsel altlığı */

  --wm-line:       rgba(255,255,255,.08);   /* varsayılan çizgi */
  --wm-line-2:     rgba(255,255,255,.14);   /* hover / vurgulu çizgi */
  --wm-line-3:     rgba(255,255,255,.20);

  /* ── Marka ──────────────────────────────────────────────────── */
  --wm-y:          #ffc700;   /* ana sarı — mevcut markadan */
  --wm-y-hi:       #ffd93d;   /* hover, açık uç */
  --wm-y-deep:     #e0ad36;   /* koyu altın */
  --wm-y-soft:     rgba(255,199,0,.09);   /* hafif sarı zemin */
  --wm-y-line:     rgba(255,199,0,.30);   /* sarı çizgi */
  --wm-y-line-2:   rgba(255,199,0,.55);

  /* ── Metin ──────────────────────────────────────────────────── */
  --wm-w:          #f7f7f9;   /* birincil metin */
  --wm-g:          #8a8d94;   /* ikincil metin */
  --wm-g-dim:      #62656c;   /* üçüncül / mikro etiket */
  --wm-on-y:       #0a0a0a;   /* SARI ÜZERİNE HER ZAMAN SİYAH.
                                 Beyaz metin sarıda okunmaz (1.8:1). */

  /* ── Durum ──────────────────────────────────────────────────── */
  --wm-ok:         #5ee08a;   /* undetected / anında teslimat */
  --wm-warn:       #ffb020;   /* riskli / az kaldı */
  --wm-off:        #6b6e73;   /* bakımda / stok yok */
  --wm-bad:        #ff5c5c;   /* hata */
  --wm-ok-soft:    rgba(94,224,138,.09);   /* başarı zemini */
  --wm-ok-line:    rgba(94,224,138,.35);   /* başarı çizgisi */
  --wm-warn-soft:  rgba(255,176,32,.10);   /* uyarı zemini */
  --wm-warn-line:  rgba(255,176,32,.35);   /* uyarı çizgisi */
  --wm-bad-soft:   rgba(255,92,92,.09);
  --wm-bad-line:   rgba(255,92,92,.35);

  /* ── Tipografi ──────────────────────────────────────────────── */
  /* Display: değişken eksenli endüstriyel grotesk (genişlik 75–125,
     ağırlık 400–900). Anton tek ağırlıklıydı; hiyerarşi kuramıyor ve
     küçük boyutta (fiyat, panel başlığı) dağılıyordu. Ağırlık/genişlik
     kademeleri wm-premium.css §T'de tanımlıdır.
     Gövde: geometrik sans; 500–800 arası ağırlık kullanılır. */
  --wm-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Arial, sans-serif;
  --wm-body:    "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Display ölçeği */
  --wm-d1: 62px;   /* hero başlık */
  --wm-d2: 42px;   /* bölüm başlığı */
  --wm-d3: 26px;   /* panel başlığı */
  --wm-d4: 19px;   /* fiyat, küçük başlık */
  --wm-track-d: -.01em;

  /* Gövde ölçeği */
  --wm-t1: 15px;
  --wm-t2: 13.5px;
  --wm-t3: 12.5px;
  --wm-t4: 11px;    /* etiket */
  --wm-t5: 9.5px;   /* mikro etiket — kart içi meta satırı */
  --wm-track-l: .10em;
  --wm-track-m: .13em;   /* mikro etiket aralığı */

  /* ── Geometri ───────────────────────────────────────────────── */
  /* Yumuşak ama abartısız: kart 8, buton 6, rozet 5, chip hap. */
  --wm-r-xs:   4px;
  --wm-r-s:    6px;
  --wm-r:      8px;
  --wm-r-l:    12px;
  --wm-r-pill: 999px;

  /* Geriye dönük adlar — eski bileşenler bunları okuyor. */
  --wm-r0: var(--wm-r-s);
  --wm-r1: var(--wm-r-xs);
  --wm-r2: var(--wm-r);
  --wm-line-hi: var(--wm-line-2);
  --wm-y-dim: var(--wm-y-soft);

  /* Eski tema adları — sayfa JS'inin satır içi stilleri (account.js,
     checkout.js, jobs.js ve birkaç HTML sayfası) bunları okuyor. Kaldırılan
     tema dosyasıyla tanımsız kalmışlardı; tanımsız bir var() kenarlığı ve
     rengi sessizce siler. Yalnız yukarıdaki token'lara yönlenirler. */
  --panel:       var(--wm-k-raise);
  --panel-2:     var(--wm-k-raise-2);
  --bg-soft:     var(--wm-k-band);
  --line:        var(--wm-line);
  --line-strong: var(--wm-line-2);
  --gold:        var(--wm-y);
  --text:        var(--wm-w);
  --muted:       var(--wm-g);
  --dim:         var(--wm-g-dim);
  --radius-sm:   var(--wm-r-s);
  --radius-md:   var(--wm-r);
  --success:     var(--wm-ok);
  --success-bg:  var(--wm-ok-soft);
  --danger:      var(--wm-bad);

  --wm-gut:   clamp(18px, 4vw, 64px);  /* sayfa yan boşluğu */
  --wm-gut-m: 18px;
  --wm-gap:   14px;
  --wm-max:   1265px;   /* içerik genişliği */

  /* ── Gölge ──────────────────────────────────────────────────── */
  /* Sarı tonlu yumuşak gölge birincil aksiyonu yerden kaldırır;
     kart gölgesi nötr ve derindir. Renkli "glow" sadece butonda. */
  --wm-sh-y:    0 10px 24px rgba(255,199,0,.22), inset 0 1px 0 rgba(255,255,255,.42);
  --wm-sh-y-hi: 0 14px 30px rgba(255,199,0,.32), inset 0 1px 0 rgba(255,255,255,.5);
  --wm-sh-card: 0 18px 42px rgba(0,0,0,.45);
  --wm-ring-y:  0 0 0 2px rgba(255,199,0,.14);
  --wm-ring-in: inset 0 0 0 1px rgba(255,199,0,.12);

  /* ── Hareket ────────────────────────────────────────────────── */
  --wm-fast: 140ms cubic-bezier(.4,0,.2,1);
  --wm-med:  260ms cubic-bezier(.4,0,.2,1);
  --wm-mq-dur: 34s;   /* ödeme şeridi tur süresi */
}

/* ── Mobil ölçek ──────────────────────────────────────────────── */
@media (max-width: 860px){
  :root{
    --wm-d1: 38px;
    --wm-d2: 30px;
    --wm-d3: 22px;
  }
}

/* ── Hareket duyarlılığı ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   İLKELLER
   ═══════════════════════════════════════════════════════════════ */

.wm-display{
  font-family: var(--wm-display);
  font-weight: 800;              /* Archivo değişken: display ağırlığı */
  font-variation-settings: "wdth" 112, "wght" 800;
  text-transform: uppercase;
  letter-spacing: -.022em;
  line-height: 1.02;
}

/* Mikro etiket — sistemin ikinci sesi. Kart meta satırı, eyebrow,
   "choose plan" gibi yerlerde. */
.wm-label{
  font-size: var(--wm-t5);
  font-weight: 800;
  letter-spacing: var(--wm-track-m);
  text-transform: uppercase;
  color: var(--wm-g-dim);
}

/* ── Butonlar ─────────────────────────────────────────────────── */
/* Ses düzeni .btn ile aynı: ikincil düğmeler cümle düzeninde ve
   okunur boyutta; yalnız ekranın tek birincil eylemi versal display
   sesini kullanır. */
.wm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border: 0; cursor: pointer;
  font-family: var(--wm-body); font-size: var(--wm-t3); font-weight: 700;
  text-transform: none; letter-spacing: .005em; text-decoration: none;
  border-radius: var(--wm-r-s);
  transition: background var(--wm-fast), box-shadow var(--wm-fast), transform var(--wm-fast), color var(--wm-fast);
}
.wm-btn--primary{
  background: var(--wm-y); color: var(--wm-on-y);
  border: 1px solid var(--wm-y-hi); box-shadow: var(--wm-sh-y);
  font-family: var(--wm-display); font-size: 14px; font-weight: 800;
  font-variation-settings: "wdth" 106, "wght" 800;
  text-transform: uppercase; letter-spacing: .012em;
}
.wm-btn--primary:hover{ background: var(--wm-y-hi); box-shadow: var(--wm-sh-y-hi); transform: translateY(-1px); }
.wm-btn--ghost{
  background: var(--wm-k-sink); color: var(--wm-w);
  border: 1px solid var(--wm-line-2);
}
.wm-btn--ghost:hover{ border-color: var(--wm-y-line); color: var(--wm-y); }
/* Sarı çizgili ikincil — referans mağazanın "add to cart" dili. */
.wm-btn--outline{
  background: var(--wm-k-sink); color: var(--wm-y);
  border: 1px solid var(--wm-y-line);
}
.wm-btn--outline:hover{ background: var(--wm-y-soft); border-color: var(--wm-y-line-2); }
.wm-btn--light{ background: var(--wm-w); color: var(--wm-k); border: 1px solid var(--wm-w); }
.wm-btn:disabled{
  background: var(--wm-k-raise-2); color: var(--wm-g-dim);
  border-color: var(--wm-line); box-shadow: none; cursor: not-allowed; transform: none;
}

/* ── Durum noktası ────────────────────────────────────────────── */
/* Renk tek başına anlam taşımaz; yanında her zaman metin vardır. */
.wm-dot{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-dot::before{ content:""; width:5px; height:5px; border-radius:50%; background: currentColor; flex: none; }
.wm-dot--ok{ color: var(--wm-ok); }
.wm-dot--warn{ color: var(--wm-warn); }
.wm-dot--off{ color: var(--wm-off); }

/* ── Odak halkası ─────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--wm-y); outline-offset: 2px;
}

/* ── i18n anti-FOUC ───────────────────────────────────────────────
   İngilizce dışı ziyaretçide, i18n.js ilk çeviri geçişini bitirene kadar
   sayfa gizli kalır; böylece hiçbir sayfa önce İngilizce boyanıp sonra
   dile atlamaz. Sınıfı wm-topbar-reserve.js (ilk boyamadan önce) ekler,
   i18n.js init'te kaldırır; 1.5sn'lik zaman aşımı da yedektir. İngilizce
   ziyaretçiye hiç uygulanmaz. visibility:hidden layout'u korur (ölçümler
   çalışır), yalnızca boyamayı erteler. */
html.wm-i18n-pending body{ visibility: hidden !important; }

/* ---- wm-home.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — kabuk: temel, navigasyon, hero, footer
   Değerler wm-tokens.css'ten okunur; bileşenler wm-store.css'te.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0; background: var(--wm-k); color: var(--wm-w);
  font-family: var(--wm-body); font-size: var(--wm-t2); font-weight: 500;
  line-height: 1.6; overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }

/* Üst şeritler (flash indirim / duyuru) /api/content geldikten sonra, yani
   ilk boyamadan sonra başlığın üstüne giriyor ve bütün sayfayı aşağı itiyordu.
   wm-topbar-reserve.js bir önceki görüntülemede ölçülen yüksekliği burada
   ayırır; nav.js şeritleri basarken aynı karede sıfırlar. Değer yoksa
   yükseklik 0 — hiçbir şey değişmez. */
body::before{ content: ""; display: block; height: var(--wm-topbar-reserve, 0px); }

/* Several components set an explicit `display`, which would otherwise beat
   the browser's default [hidden] rule and leave an empty box on screen. */
[hidden]{ display: none !important; }

/* The removed legacy sheet sized every inline icon per component, so bare
   SVGs would otherwise render at their intrinsic size (huge). :where() has
   zero specificity, so every explicit rule below still wins. */
:where(svg){ width: 18px; height: 18px; flex: none; }

.wm-skip{
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--wm-y); color: var(--wm-on-y);
  padding: 12px 20px; font-weight: 900; text-decoration: none;
  font-size: var(--wm-t4); letter-spacing: var(--wm-track-l); text-transform: uppercase;
  border-radius: 0 0 var(--wm-r-s) 0;
}
.wm-skip:focus{ left: 0; }
/* Flaş şeridinin sarısı üzerinde de seçilsin: halka içte ve siyah. */
.wm-skip:focus-visible{ outline: 2px solid var(--wm-on-y); outline-offset: -5px; }
/* Atlama hedefi yapışkan başlığın altında kalmasın. */
#main{ scroll-margin-top: 65px; }

/* ═══ Navigasyon ═══════════════════════════════════════════════ */
.wm-nav{
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,10,10,.92); border-bottom: 1px solid var(--wm-line);
}
.wm-nav__in{
  max-width: var(--wm-max); margin: 0 auto; padding: 0 var(--wm-gut);
  height: 64px; display: flex; align-items: center; gap: 22px;
}

.wm-brand{
  display: inline-flex; flex: none; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--wm-display); font-weight: 400; font-size: 25px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--wm-w); line-height: 1;
}
.wm-brand em{ font-style: normal; color: var(--wm-y); }
.wm-brand__badge{
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-top: 3px;
  background: var(--wm-y); color: var(--wm-on-y); border-radius: var(--wm-r-xs);
  font-family: var(--wm-body); font-size: 8px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
}

.wm-nav__links{ display: flex; align-items: center; gap: 4px; flex: none; }
.wm-nav__links a{
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  color: var(--wm-g); text-decoration: none; border-radius: var(--wm-r-pill);
  font-size: var(--wm-t4); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--wm-fast), background var(--wm-fast), box-shadow var(--wm-fast);
}
.wm-nav__links a:hover{ color: var(--wm-w); background: rgba(255,255,255,.05); }
.wm-nav__links a.wm-on{
  color: var(--wm-y); background: var(--wm-y-soft); box-shadow: var(--wm-ring-in);
}

/* Sağ grup hiç sıkışmaz: bir öğe sığmıyorsa taşma ölçülebilsin ve
   nav.js (fitHeader) bir sonraki daraltma adımına geçsin. Metinler
   iki satıra kırılıp hapın dışına taşmaz. */
.wm-nav__right{ margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.wm-nav__right > *{ flex: none; }

.wm-nav__search{
  position: relative;
  display: flex; align-items: center; gap: 8px; width: 200px; height: 34px; padding: 0 8px 0 12px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  color: var(--wm-g-dim); cursor: pointer;
  transition: color var(--wm-fast), border-color var(--wm-fast);
}
.wm-nav__search:hover{ color: var(--wm-g); border-color: var(--wm-line-2); }
.wm-nav__search svg{ width: 14px; height: 14px; color: currentColor; flex: none; pointer-events: none; }
.wm-nav__search input{
  flex: 1; min-width: 0; background: none; border: 0; color: var(--wm-w); cursor: pointer;
  font-family: var(--wm-body); font-size: var(--wm-t3); font-weight: 600; text-overflow: ellipsis;
}
/* Genel form alanı kuralları (wm-page.css, wm-premium.css) arama kutusunu
   hapın içinde ikinci bir kutuya çeviriyordu: yükseklik, kenarlık, gölge. */
.wm-nav__search input[type="search"]{
  min-height: 0; height: 100%; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.wm-nav__search input:focus{ outline: 0; }
.wm-nav__search input::placeholder{ color: var(--wm-g-dim); }
.wm-nav__search:hover input::placeholder{ color: var(--wm-g); }
/* Halka alanın değil hapın çevresinde. */
.wm-nav__search:has(input:focus-visible){ outline: 2px solid var(--wm-y); outline-offset: 2px; }
.wm-nav__kbd{
  flex: none; padding: 2px 5px; border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-xs);
  color: var(--wm-g-dim); font-size: 8.5px; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
}

.wm-nav__cell{
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; min-width: 34px; padding: 0 13px;
  color: var(--wm-g); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  font-size: var(--wm-t4); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--wm-fast), border-color var(--wm-fast), background var(--wm-fast);
}
.wm-nav__cell:hover{ color: var(--wm-w); border-color: var(--wm-line-2); }
.wm-nav__cell svg{ width: 15px; height: 15px; }
.wm-nav__cell--disc{ color: var(--wm-y); border-color: var(--wm-line); background: var(--wm-k-raise); }
.wm-nav__cell--disc:hover{ color: var(--wm-on-y); background: var(--wm-y); border-color: var(--wm-y); }
.wm-nav__cell--cart{ position: relative; }
.cart-badge{
  display: none; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--wm-y); color: var(--wm-on-y); border-radius: var(--wm-r-pill);
  font-size: 9.5px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1;
}

.wm-nav__toggle{ display: none; }

/* Hesap kartı — auth.js tarafından enjekte edilir. */
#accountSlot{ gap: 6px; }
/* Başlık hapları her sayfada aynı görünür: gölge ve hover sıçraması yok
   (wm-page.css'in .btn-primary kuralı sızmasın diye açıkça sıfırlanır). */
#accountSlot a, #accountSlot button{
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-pill);
  color: var(--wm-g); text-decoration: none; cursor: pointer;
  font-family: var(--wm-body); font-size: var(--wm-t4); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: none; transform: none;
  transition: color var(--wm-fast), border-color var(--wm-fast), background var(--wm-fast);
}
#accountSlot a:hover, #accountSlot button:hover{
  color: var(--wm-w); border-color: var(--wm-line-2); box-shadow: none; transform: none;
}

/* Oturum açıkken: avatar + ad düğmesi (.account-chip__btn), yanında açılır
   menü. Düğmeye basınca (.open, auth.js) her genişlikte açılır; fareli geniş
   ekranda üzerine gelince de görünür. Bu dosya wm-page.css'i yüklemeyen
   sayfalarda da (ana sayfa, mağaza, ürün) kullanıldığı için avatar burada
   eksiksiz. */
#accountSlot .account-chip{ position: relative; display: inline-flex; }
#accountSlot .account-chip__btn{
  gap: 8px; padding: 0 13px 0 3px;
  color: var(--wm-w); transition: border-color var(--wm-fast);
}
#accountSlot .account-chip__btn[aria-expanded="true"]{ border-color: var(--wm-line-2); }
/* Uzun adlar hapı büyütmesin. */
#accountSlot .account-chip__btn > span:not(.account-avatar){
  max-width: 11ch; overflow: hidden; text-overflow: ellipsis;
}
#accountSlot .account-chip .account-avatar{
  display: grid; place-items: center; flex: none; width: 26px; height: 26px;
  background: var(--wm-y); color: var(--wm-on-y); border-radius: var(--wm-r-pill);
  font-family: var(--wm-body); font-size: var(--wm-t4); font-weight: 800; letter-spacing: 0;
}
#accountSlot .account-menu{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px;
  min-width: 196px; padding: 6px;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line-2); border-radius: var(--wm-r);
  box-shadow: var(--wm-edge), var(--wm-e3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* Kapanırken görünürlük solma bitince düşer. */
  transition: opacity var(--wm-fast), transform var(--wm-fast), visibility 0s linear 140ms;
}
/* İmleç hapla menü arasındaki boşluğu geçerken menü kapanmasın. */
#accountSlot .account-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* Açık hâlde görünürlük geçişe hiç girmez (azaltılmış hareket ayarında da):
   klavyeyle açılışta ilk bağlantıya hemen odak verilebilsin. */
#accountSlot .account-menu.open{
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--wm-fast), transform var(--wm-fast);
}
@media (hover: hover) and (min-width: 960px){
  #accountSlot .account-chip:hover .account-menu{
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--wm-fast), transform var(--wm-fast);
  }
}
#accountSlot .account-menu a{
  display: flex; gap: 10px; width: 100%; height: 38px; padding: 0 10px;
  background: none; border: 0; border-radius: var(--wm-r-s);
  color: var(--wm-g); font-size: var(--wm-t2); font-weight: 700; letter-spacing: 0; text-transform: none;
}
#accountSlot .account-menu a:hover{ background: var(--wm-k-raise-2); color: var(--wm-w); }
#accountSlot .account-menu svg{ width: 16px; height: 16px; flex: none; }
#accountSlot .account-menu hr{ border: 0; border-top: 1px solid var(--wm-line); margin: 4px 2px; }

/* ═══ Mobil menü ═══════════════════════════════════════════════ */
.mobile-overlay{
  position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 998;
  opacity: 0; pointer-events: none; transition: opacity var(--wm-fast);
}
.mobile-overlay.open{ opacity: 1; pointer-events: auto; }
/* Kapalı çekmece ekran dışında durur ama odak da almaz: görünürlük
   kayma bitince düşer. Canlı destek başlatıcısının (950) üstünde. nav.js kapat düğmesini (.mobile-nav__close)
   ve Discord bağlantısını ekler. */
.mobile-nav{
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); z-index: 999;
  background: var(--wm-k-raise); border-left: 1px solid var(--wm-line);
  padding: 64px 20px 24px; overflow-y: auto;
  transform: translateX(101%); visibility: hidden;
  transition: transform var(--wm-med), visibility 0s linear 260ms;
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav.open{ transform: none; visibility: visible; transition: transform var(--wm-med); }
.mobile-nav__close{
  position: absolute; top: 15px; right: 20px;
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--wm-k-sink); color: var(--wm-g);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  transition: color var(--wm-fast), border-color var(--wm-fast);
}
.mobile-nav__close svg{ width: 16px; height: 16px; }
.mobile-nav__close:hover{ color: var(--wm-w); border-color: var(--wm-line-2); }
.mobile-nav a{
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-radius: var(--wm-r-s); text-decoration: none;
  color: var(--wm-w); font-size: var(--wm-t2); font-weight: 800;
}
.mobile-nav a::after{ content: "→"; color: var(--wm-g-dim); }
.mobile-nav a[target="_blank"]::after{ content: "↗"; }
/* Hesap bağlantıları (auth.js) site bağlantılarından çizgiyle ayrılır. */
#accountSlotMobile{ display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--wm-line); }
#accountSlotMobile:empty{ display: none; }
.mobile-nav a:hover{ background: var(--wm-y-soft); color: var(--wm-y); }

/* ═══ Hero ═════════════════════════════════════════════════════ */
.wm-hero{
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--wm-line);
  background:
    radial-gradient(760px 420px at 82% 12%, rgba(255,199,0,.10), transparent 62%),
    radial-gradient(560px 340px at 8% 92%, rgba(255,199,0,.05), transparent 60%),
    var(--wm-k);
}
/* Zeminde dev, çok soluk kelime işareti — referans mağazanın
   arkaplan wordmark'ının karşılığı. */
.wm-hero__ghost{
  position: absolute; right: -4%; top: 30%; transform: translateY(-50%);
  font-family: var(--wm-display); font-weight: 400; font-size: clamp(120px, 20vw, 300px);
  letter-spacing: -.02em; text-transform: uppercase; line-height: .8;
  color: rgba(255,255,255,.016); pointer-events: none; user-select: none; white-space: nowrap;
}
.wm-hero__in{
  position: relative; z-index: 1;
  max-width: var(--wm-max); margin: 0 auto; padding: 60px var(--wm-gut) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 46px; align-items: center;
}
.wm-hero__eyebrow{
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  height: 30px; padding: 0 13px;
  background: var(--wm-y-soft); border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-pill);
  color: var(--wm-y); font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-hero__eyebrow i{ width: 6px; height: 6px; border-radius: 50%; background: var(--wm-ok); flex: none; }
.wm-hero__title{
  margin: 0 0 16px; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d1); line-height: .96; letter-spacing: var(--wm-track-d);
  text-transform: uppercase; color: var(--wm-w);
}
.wm-hero__title em{ font-style: normal; color: var(--wm-y); }
.wm-hero__lead{ margin: 0 0 26px; color: var(--wm-g); font-size: var(--wm-t1); line-height: 1.65; max-width: 52ch; }
.wm-hero__lead strong{ color: var(--wm-w); font-weight: 800; }
.wm-hero__acts{ display: flex; gap: 11px; flex-wrap: wrap; }
.wm-hero__acts .wm-btn{ padding: 16px 26px; font-size: var(--wm-t2); }
.wm-hero__acts .wm-btn--primary{ font-size: 15.5px; }

/* Sağ sütun: "en çok satan" vitrini */
.wm-hero__stage{ min-width: 0; }
.wm-hero__stagehead{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.wm-hero__stagehead span{
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-g-dim);
}
.wm-hero__stagehead a{
  color: var(--wm-y); text-decoration: none;
  font-size: var(--wm-t5); font-weight: 900; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

/* ═══ Hero — STACKS (kayan oyun-kapağı kolonları) ══════════════════
   Ana sayfa hero'sunun yönü (2026-09-19): solda mesaj + tek CTA, sağda
   yavaş sürüklenen oyun-kapağı kolonları (whitemodz kendi kategori
   görselleri, dekoratif/aria-hidden). Değerler tokendan; sarı bütçesi
   tek dolu buton (eski "Live status" ghost'u sessiz metin bağlantısına
   indi). Ürün rayı kaldırıldı; gerçek gezinme alttaki bölümlerde. */
.wm-hero--stacks{
  position: relative; overflow: hidden;
  background: radial-gradient(680px 420px at 12% 20%, var(--wm-y-soft), transparent 60%), var(--wm-k);
}
.wm-hero--stacks .wm-hero__in{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 45%); gap: clamp(28px, 4vw, 56px);
  align-items: center; max-width: var(--wm-max); margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) var(--wm-gut); position: relative; z-index: 1;
}
.wm-hero--stacks .wm-hero__support{ position: relative; z-index: 2; }
.wm-hero--stacks .wm-hero__title{ font-size: clamp(38px, 4.6vw, 58px); line-height: .96; margin-bottom: 18px; }
.wm-hero--stacks .wm-hero__lead{ max-width: 46ch; }
.wm-hero--stacks .wm-hero__acts{ align-items: center; gap: 22px; margin-top: 26px; }
.wm-hero--stacks .wm-hero__cta{ padding: 16px 34px; font-size: 15.5px; }
/* Sessiz ikincil — dolgu/çerçeve yok, sadece metin. */
.wm-hero__quiet{
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-size: var(--wm-t3); font-weight: 700; color: var(--wm-g);
  transition: color var(--wm-fast);
}
.wm-hero__quiet:hover{ color: var(--wm-y); }

/* Sürüklenen kolonlar: üç sütun, üstte/altta maskeyle erir. */
.wm-hero__cols{
  position: relative; height: clamp(340px, 44vw, 460px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.wm-col{ display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.wm-col img{
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--wm-r); border: 1px solid var(--wm-line-2);
  box-shadow: var(--wm-sh-card); filter: brightness(.94);
}
.wm-col--up{ animation: wm-colUp 26s linear infinite; }
.wm-col--down{ animation: wm-colDown 30s linear infinite; }
.wm-col--up2{ animation: wm-colUp 34s linear infinite; }
@keyframes wm-colUp{ from{ transform: translateY(0); } to{ transform: translateY(-50%); } }
@keyframes wm-colDown{ from{ transform: translateY(-50%); } to{ transform: translateY(0); } }
/* Hareket hassasiyeti: kolonlar durur (token dosyasındaki global kapatmayı
   tamamlar, garanti olsun diye açıkça). */
@media (prefers-reduced-motion: reduce){ .wm-col{ animation: none !important; } }

@media (max-width: 900px){
  .wm-hero--stacks .wm-hero__in{ grid-template-columns: 1fr; gap: 34px; }
  .wm-hero__cols{ height: 280px; }
}
@media (max-width: 560px){ .wm-hero__cols{ height: 230px; } }

/* ═══ Footer ═══════════════════════════════════════════════════ */
.wm-foot{
  margin-top: 70px; border-top: 1px solid var(--wm-line);
  background: linear-gradient(var(--wm-k-band), var(--wm-k));
}
.wm-foot__in{ max-width: var(--wm-max); margin: 0 auto; padding: 48px var(--wm-gut) 0; }
.wm-foot__grid{
  display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 36px; padding-bottom: 40px;
}
/* "Games" sütunu: her sayfadan her kategori sayfasına JS'siz bir bağlantı
   (ziyaretçi ve arama motoru aynı listeyi görür). Oyunlar iki sütunda akar,
   footer uzamaz. Değiştirici sınıf, sütunu taşımayan sayfaları etkilemez;
   dar ekranlarda aşağıdaki .wm-foot__grid medya kuralları geçerli kalır. */
.wm-foot__grid--games{ grid-template-columns: 1.5fr repeat(3, 1fr) 1.6fr; }
.wm-foot__col--games{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
.wm-foot__col--games h4{ grid-column: 1 / -1; }
.wm-foot__brand p{ color: var(--wm-g); font-size: var(--wm-t3); margin: 14px 0 18px; max-width: 42ch; line-height: 1.65; }
.wm-foot__social{ display: flex; gap: 9px; }
.wm-foot__social a{
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  color: var(--wm-g); transition: color var(--wm-fast), border-color var(--wm-fast);
}
.wm-foot__social a:hover{ color: var(--wm-y); border-color: var(--wm-y-line); }
.wm-foot__social svg{ width: 17px; height: 17px; }
.wm-foot__col h4{
  margin: 0 0 14px; font-size: var(--wm-t5); font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-y);
}
.wm-foot__col a{
  display: block; color: var(--wm-g); text-decoration: none;
  font-size: var(--wm-t3); padding: 5px 0; transition: color var(--wm-fast);
}
.wm-foot__col a:hover{ color: var(--wm-w); }
.wm-foot__bar{
  border-top: 1px solid var(--wm-line); padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  /* Telif satırı ve Terms/Privacy/Refunds bağlantıları bilgi taşır: --wm-g-dim
     12.5px'te 3.39:1 ile AA'nın altında kalıyordu (DESIGN.md §9 o rengi sadece
     dekoratif mikro etikete bırakır). --wm-g = 5.9:1. */
  color: var(--wm-g); font-size: var(--wm-t3);
}
/* Uzun dillerde (FR) üç bağlantı 320px'e sığmıyordu: satır sarar. */
.wm-foot__bar nav{ display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wm-foot__bar a{ color: var(--wm-g); text-decoration: none; }
.wm-foot__bar a:hover{ color: var(--wm-y); }

/* ═══ Belirme animasyonu ═══════════════════════════════════════ */
.reveal{ opacity: 0; transform: translateY(16px); transition: opacity var(--wm-med), transform var(--wm-med); }
.reveal.in-view{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; } }

/* ═══ Başlık: kademeli daraltma ══════════════════════════════════
   Sağ grup (arama, Discord, dil, hesap, sepet) bir dilde ya da bir
   oturum hâlinde sığmıyorsa hiçbir öğe kesilmez; en az önemliden
   başlayarak sırayla küçülür. Sırayı nav.js (fitHeader) yürütür:
   her değişiklikte (genişlik, dil, hesap, sepet rozeti) sıfırdan
   başlar, çubuk sığana kadar .wm-nav[data-fit] listesine bir adım
   ekler. Adımlar birikimlidir:

     lang   dil hapı → yalnız bayrak
     cart   sepet → simge + köşe rozeti
     disc   Discord → yalnız simge
     search arama alanı → komut paletini açan yuvarlak düğme
     badge  marka rozeti ("Est.") düşer
     acct   hesap → yalnız avatar / yalnız "Log in" (kayıt, giriş
            sayfasında ve menüde)
     links  sayfa bağlantıları → hamburger menü
     slot   hesap yuvası → hamburger menüde (#accountSlotMobile)
     tight  aralıklar ve marka bir kademe sıkılaşır
     mini   aralıklar en dar telefona göre bir kademe daha
     small  marka bir kademe küçülür
     nodisc Discord hapı → hamburger menüde

   Görünmeyen etiketler ekran okuyucuda kalır (.wm-sr kalıbı).
   Aşağıdaki medya sorguları aynı adımların JS'ten önceki taban
   hâlidir: betik gelene kadar da telefon çubuğu taşmaz.          */

.wm-nav__toggle{
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-s);
  transition: border-color var(--wm-fast);
}
.wm-nav__toggle:hover{ border-color: var(--wm-line-2); }
.wm-nav__toggle span{ display: block; width: 16px; height: 2px; background: var(--wm-w); border-radius: var(--wm-r-pill); }
.wm-nav__toggle[aria-expanded="true"]{ border-color: var(--wm-y-line); }

/* Simge hâlinde etiket görsel olarak düşer, erişilebilir adda kalır. */
.wm-nav[data-fit~="lang"] #langSwitchBtn > span:not(.lang-flag),
.wm-nav[data-fit~="cart"] .wm-nav__cell--cart > span:not(.cart-badge),
.wm-nav[data-fit~="disc"] .wm-nav__cell--disc > span,
.wm-nav[data-fit~="acct"] #accountSlot .account-chip__btn > span:not(.account-avatar){
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.wm-nav[data-fit~="lang"] #langSwitchBtn,
.wm-nav[data-fit~="cart"] .wm-nav__cell--cart,
.wm-nav[data-fit~="disc"] .wm-nav__cell--disc{ position: relative; width: 34px; padding: 0; }

/* Köşe rozeti: zemin rengindeki kenar hapın çizgisinden ayırır. Sağa en
   çok en dar aralık (4px) kadar taşar; komşu düğmeye değmez. */
.wm-nav[data-fit~="cart"] .cart-badge{
  position: absolute; top: -6px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border: 2px solid var(--wm-k);
}

.wm-nav[data-fit~="search"] .wm-nav__search{ width: 34px; padding: 0; justify-content: center; color: var(--wm-g); }
.wm-nav[data-fit~="search"] .wm-nav__search:hover{ color: var(--wm-w); }
.wm-nav[data-fit~="search"] .wm-nav__search svg{ width: 15px; height: 15px; }
/* Alan düğmenin tamamını kaplar: tıklama ve klavye odağı aynı yerde. */
.wm-nav[data-fit~="search"] .wm-nav__search input{
  position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px;
}
.wm-nav[data-fit~="search"] .wm-nav__kbd{ display: none; }

.wm-nav[data-fit~="badge"] .wm-brand__badge{ display: none; }

.wm-nav[data-fit~="acct"] #accountSlot a[href="/register"]{ display: none; }
.wm-nav[data-fit~="acct"] #accountSlot .account-chip__btn{ position: relative; width: 34px; padding: 0; justify-content: center; }

.wm-nav[data-fit~="links"] .wm-nav__links{ display: none; }
.wm-nav[data-fit~="links"] .wm-nav__toggle{ display: inline-flex; }
.wm-nav[data-fit~="links"] .wm-mega{ display: none !important; }

/* Yuvanın satır içi display'i var, o yüzden !important. */
.wm-nav[data-fit~="slot"] #accountSlot{ display: none !important; }

.wm-nav[data-fit~="tight"] .wm-nav__in{ gap: 8px; }
.wm-nav[data-fit~="tight"] .wm-nav__right{ gap: 5px; }
.wm-nav[data-fit~="tight"] .wm-brand{ font-size: 18px; font-variation-settings: "wdth" 104, "wght" 800; }

.wm-nav[data-fit~="mini"] .wm-nav__in{ gap: 6px; }
.wm-nav[data-fit~="mini"] .wm-nav__right{ gap: 4px; }
.wm-nav[data-fit~="small"] .wm-brand{ font-size: 16px; }

.wm-nav[data-fit~="nodisc"] .wm-nav__cell--disc{ display: none; }

/* ═══ Responsive ═══════════════════════════════════════════════ */
@media (max-width: 1180px){
  .wm-hero__in{ grid-template-columns: 1fr; gap: 34px; }
  .wm-hero__stage{ max-width: 560px; }
}
@media (max-width: 1120px){
  /* DESIGN.md §7: sayfa bağlantıları bu genişliğin altında hamburger
     menüde. Mega menü de burada kalkar (wm-shell.css). */
  .wm-nav__links{ display: none; }
  .wm-nav__toggle{ display: inline-flex; }
  .wm-foot__grid{ grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 620px){
  /* Telefon tabanı = lang + cart + disc + search + badge + slot adımları. */
  .wm-nav__in{ gap: 8px; }
  .wm-nav #langSwitchBtn > span:not(.lang-flag),
  .wm-nav .wm-nav__cell--cart > span:not(.cart-badge),
  .wm-nav .wm-nav__cell--disc > span{
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .wm-nav #langSwitchBtn,
  .wm-nav .wm-nav__cell--cart,
  .wm-nav .wm-nav__cell--disc{ position: relative; width: 34px; padding: 0; }
  .wm-nav .cart-badge{
    position: absolute; top: -6px; right: -4px;
    min-width: 19px; height: 19px; padding: 0 5px;
    border: 2px solid var(--wm-k);
  }
  .wm-nav .wm-nav__search{ width: 34px; padding: 0; justify-content: center; color: var(--wm-g); }
  .wm-nav .wm-nav__search svg{ width: 15px; height: 15px; }
  .wm-nav .wm-nav__search input{ position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; }
  .wm-nav .wm-nav__kbd{ display: none; }
  .wm-nav .wm-brand__badge{ display: none; }
  /* Hesap hapı ya da Log In / Sign Up: aynı bağlantılar hamburger
     menüsünde (#accountSlotMobile). */
  #accountSlot{ display: none !important; }

  .wm-foot__grid{ grid-template-columns: 1fr; }
  .wm-hero__in{ padding-block: 40px 44px; }
  /* Üç parçalı sayaç satırı telefonda iki satıra iner; 30px sabit
     yükseklikli hapın dışına taşıyordu. Satır sarınca kutu uzar,
     köşe hap yerine kart yarıçapına döner. */
  /* İki satırlık yer baştan ayrılır: wm-home.js sayıları yazınca
     ("27 products live · 9 categories · instant delivery") kutu tek
     satırdan iki satıra çıkıyor ve altındaki her şeyi 15px aşağı
     itiyordu. */
  .wm-hero__eyebrow{
    height: auto; min-height: calc(30px + 1.5em); padding: 7px 13px; line-height: 1.5;
    align-items: flex-start; border-radius: var(--wm-r);
  }
  .wm-hero__eyebrow i{ margin-top: 5px; }
}
/* Telefon tabanı = tight adımı. wm-premium.css markanın genişlik eksenini
   sonradan yazdığı için seçici bir kademe özgül. */
@media (max-width: 440px){
  .wm-nav .wm-brand{ font-size: 18px; font-variation-settings: "wdth" 104, "wght" 800; }
  .wm-nav__right{ gap: 5px; }
}

/* Toast (.toast-stack, toast.js) ve satış kanıtı kartı (.sale-toast)
   tek tanımlarıyla wm-extra.css'te. */

/* ---- wm-store.css ---- */
/* ═══════════════════════════════════════════════════════════════
   whitemodz — mağaza bileşenleri
   Ana sayfa, katalog ve ürün sayfasının paylaştığı parçalar.
   Referans mağazanın iskeleti, whitemodz paletiyle.
   Her değer wm-tokens.css'ten okunur.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Bölüm kabuğu ve başlık ritmi ═════════════════════════════ */
/* eyebrow → dev başlık (bir kelimesi sarı) → açıklama. Bu üçlü
   sayfadaki her bölümün girişidir. */
.wm-sect{ padding: 56px 0 0; position: relative; }
.wm-sect--band{ background: var(--wm-k-band); padding-block: 56px; margin-top: 56px; }
.wm-inner{ max-width: var(--wm-max); margin: 0 auto; padding-inline: var(--wm-gut); }

.wm-shead{
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.wm-shead__copy{ min-width: 0; flex: 1 1 380px; }
.wm-shead__eyebrow{
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-y);
}
.wm-shead__eyebrow::before{ content: ""; width: 18px; height: 2px; background: var(--wm-y); }
.wm-shead h2{
  margin: 0; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d2); line-height: 1; letter-spacing: var(--wm-track-d);
  text-transform: uppercase; color: var(--wm-w);
}
.wm-shead h2 em{ font-style: normal; color: var(--wm-y); }
.wm-shead p{ margin: 10px 0 0; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.6; max-width: 62ch; }
.wm-shead__acts{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wm-shead__link{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--wm-y); text-decoration: none;
  font-size: var(--wm-t4); font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
}
.wm-shead__link:hover{ color: var(--wm-y-hi); }

/* Ray okları — referans mağazadaki gibi başlığın sağında. */
.wm-rail-nav{ display: flex; gap: 7px; }
.wm-rail-nav button{
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: var(--wm-k-raise); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  font-size: 15px; line-height: 1;
  transition: border-color var(--wm-fast), color var(--wm-fast), background var(--wm-fast);
}
.wm-rail-nav button:hover{ border-color: var(--wm-y-line); color: var(--wm-y); background: var(--wm-y-soft); }
.wm-rail-nav button:disabled{ opacity: .35; cursor: default; }

/* ═══ Yatay ray ════════════════════════════════════════════════ */
/* Kaydırma çubuğu gizli, klavye ve dokunmatik çalışır, oklar
   başlıktan sürer. */
.wm-rail{
  display: flex; gap: var(--wm-gap); overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.wm-rail::-webkit-scrollbar{ display: none; }
.wm-rail > *{ scroll-snap-align: start; flex: 0 0 auto; }

/* ═══ İlk boyama: ray yüksekliğini önceden ayır ════════════════ */
/* Ana sayfanın dört rayı JS kartları basana kadar 0 yükseklikteydi;
   kartlar gelince altlarındaki her şey birden ~800px aşağı kayıyordu
   (966px'te ölçülen CLS 0.92). Kart genişliği kırılım başına sabit
   olduğundan dolu rayın yüksekliği de sabittir — ray flex olduğu için
   bütün kartlar en uzun kartın boyuna uzar. Aşağıdaki değerler o dolu
   yükseklik; kartlar yerleşirken sayfa artık hiç oynamıyor.
   Katalog boşsa (ya da yüklenemezse) wm-home.js bölümü tamamen
   gizliyor, boş kutu kalmıyor. */
#heroRail, #newRail{ min-height: 365px; }
#catsRail{ min-height: 274px; }

/* ═══ Ürün kartı ═══════════════════════════════════════════════ */
/* Sessiz katalog. Bir katalog kartı iki soruya cevap verir: bu nedir,
   kaça? Bu yüzden kartta kare görsel, ürün adı, oyun adı (tek sessiz
   mikro etiket) ve fiyat var — başka hiçbir şey yok. Plan seçimi ve
   satın alma, planın anlatılabildiği ürün sayfasına taşındı.
   Kartın tamamı TEK bağlantı: içinde düğme, chip ya da ikinci bir
   link yok. Izgara hiç sarı harcamıyor; ekrandaki tek dolu sarı
   düğme böylece "tıklanacak şey bu" anlamına gelebiliyor.
   Durum yalnızca normal DEĞİLKEN konuşur (bkz. .wm-pc__state). */
.wm-cards{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px var(--wm-gap); }
.wm-rail .wm-pc{ width: 244px; }

.wm-pc{
  display: block; position: relative; min-width: 0;
  color: inherit; text-decoration: none;
  border-radius: var(--wm-r-l);
}

/* Panel kalktı: fotoğrafın kendisi kart, sayfa da zemin. Kenarlık ve
   hover rengi görselin üstünde. */
.wm-pc__media{
  display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--wm-k-sink); color: var(--wm-g-dim);
  border: 1px solid var(--wm-line); border-radius: var(--wm-r-l);
  transition: border-color var(--wm-fast);
}
.wm-pc__media img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--wm-med); }
.wm-pc:hover .wm-pc__media{ border-color: var(--wm-line-2); }
.wm-pc:hover .wm-pc__media img{ transform: scale(1.035); }
.wm-pc__media .glyph-ph{
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; opacity: .45;
}

/* Durum plakası — sadece durum normal değilse çizilir ("Sold out",
   "Updating", "Use at own risk", "Detected"). Anlamı renk değil kelime
   taşır; "Instant delivery" ve "Undetected" normal hâl olduğu için
   kartta sessizdir. */
.wm-pc__state{
  position: absolute; left: 9px; bottom: 9px;
  max-width: calc(100% - 18px);
  padding: 5px 9px; border-radius: var(--wm-r-s);
  background: var(--wm-k); border: 1px solid var(--wm-line-3); color: var(--wm-w);
  font-size: var(--wm-t5); font-weight: 800; line-height: 1.3;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

/* Ad gövde fontunda ve büyük harfe çevrilmiyor: okunacak metin, etiket
   değil. İki satırda kırpılır, böylece bir satırdaki kartların boyu
   eşit kalır ve ray zıplamaz. */
.wm-pc__name{
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin: 12px 0 0; color: var(--wm-w);
  font-family: var(--wm-body); font-size: 14.5px; font-weight: 700; line-height: 1.32;
  min-height: calc(2 * 1.32em);
}

/* Kategori fiyatın üstünde durur, yanında değil. Yan yana dizildiğinde
   212px'lik ızgara kartında yirmi dördün altısı "COUNTER STRI…" diye
   kesiliyordu (katalogdaki her ürün indirimde olduğu için fiyat satırı
   her zaman uzun). Alt alta hiçbir genişlikte kesilmiyor ve kart her
   kırılımda aynı üç satırı okuyor: ad · kategori · fiyat.
   Meta satırı bilgi taşır (kategori adı), yani DESIGN.md §9'un
   "dekoratif mikro etiket" istisnasına girmez: --wm-g-dim bu boyutta
   3.21:1 veriyordu, --wm-g siyah zeminde 5.9:1. */
.wm-pc__meta{ display: block; margin-top: 6px; min-width: 0; }
.wm-pc__cat{
  display: block; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--wm-t5); font-weight: 800; color: var(--wm-g);
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-pc__price{
  display: block; color: var(--wm-w);
  font-family: var(--wm-display); font-weight: 400;
  font-size: 15px; letter-spacing: .01em; text-transform: uppercase;
}
/* İndirimde eski rakam üstü çizili: indirim renk kapalıyken de okunur.
   Gövde fontunda kalır — display fontunda rakamlar birbirine karışıyor. */
.wm-pc__was{
  margin-left: 7px; color: var(--wm-g-dim); text-decoration: line-through;
  font-family: var(--wm-body); font-weight: 600; font-size: 11.5px;
  font-variation-settings: normal; letter-spacing: 0; text-transform: none;
}

.wm-pc--sold .wm-pc__media img{ filter: grayscale(1); opacity: .38; }
.wm-pc--sold .wm-pc__name,
.wm-pc--sold .wm-pc__price{ color: var(--wm-g); }

/* ═══ Kategori kartı ═══════════════════════════════════════════ */
/* Tam kanama görsel + ağır alt gradyan + ad/sayı + köşe oku. */
.wm-cats{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wm-gap); }
.wm-rail .wm-cat{ width: 210px; }

.wm-cat{
  position: relative; display: block; height: 252px; overflow: hidden;
  border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  background: var(--wm-k-raise); color: var(--wm-w); text-decoration: none;
  transition: border-color var(--wm-fast), transform var(--wm-fast);
}
.wm-cat:hover{ border-color: var(--wm-y-line); transform: translateY(-3px); }
.wm-cat img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--wm-med); }
.wm-cat:hover img{ transform: scale(1.06); }
.wm-cat .glyph-ph{ position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; opacity: .35; }
.wm-cat__shade{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,0) 0%, rgba(10,10,10,.14) 28%, rgba(10,10,10,.94) 100%);
}
.wm-cat__copy{
  position: absolute; inset: auto 12px 12px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.wm-cat__name{
  display: block; font-size: 15px; font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm-cat__count{ display: block; margin-top: 3px; color: var(--wm-g); font-size: var(--wm-t3); font-weight: 600; }
.wm-cat__go{
  flex: none; width: 29px; height: 29px; display: grid; place-items: center;
  background: rgba(8,8,10,.72); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-s);
  transition: background var(--wm-fast), color var(--wm-fast);
}
.wm-cat:hover .wm-cat__go{ background: var(--wm-y); color: var(--wm-on-y); }

/* ═══ Ödeme şeridi ═════════════════════════════════════════════ */
/* Küçük hap rozetleri, yavaş sonsuz kaydırma. Kenarlarda maske. */
.wm-pay{
  display: flex; align-items: center; gap: 18px;
  border-block: 1px solid var(--wm-line); padding: 16px 0; margin-top: 56px;
  background: var(--wm-k-band);
}
.wm-pay__lab{
  flex: none; padding-left: var(--wm-gut);
  font-size: var(--wm-t5); font-weight: 900;
  letter-spacing: var(--wm-track-m); text-transform: uppercase; color: var(--wm-y);
}
.wm-pay__track{
  display: flex; gap: 9px; overflow: hidden; flex: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.wm-pay__row{
  display: flex; gap: 9px; flex: none;
  animation: wm-payscroll var(--wm-mq-dur) linear infinite;
}
.wm-pay__row span{
  display: inline-flex; align-items: center; height: 34px; padding: 0 13px; white-space: nowrap;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r-xs);
  color: var(--wm-g); font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
@keyframes wm-payscroll{ from{ transform: translateX(0) } to{ transform: translateX(-100%) } }

/* ═══ Sayaç / söz bandı ════════════════════════════════════════ */
.wm-stats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wm-gap); }
.wm-stat{
  padding: 26px 18px; text-align: center;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
}
/* Display fontu her zaman büyük harf ("Instant" küçük harfle kalıyordu).
   Çevirisi uzun kelime ("Instantánea") dar kutuda taşmasın: kutu içinde
   kırılır. */
.wm-stat b{
  display: block; font-family: var(--wm-display); font-weight: 400;
  font-size: 34px; line-height: 1; color: var(--wm-y); letter-spacing: .01em;
  text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto;
}
.wm-stat s{
  display: block; margin-top: 9px; text-decoration: none; color: var(--wm-g);
  font-size: var(--wm-t5); font-weight: 800;
  letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

/* ═══ Neden burada ═════════════════════════════════════════════ */
/* Metrik bandı DEĞİL: her satır mağazanın kontrol ettiği bir söz. */
.wm-reasons{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wm-gap); }
.wm-reason{
  padding: 26px 24px 28px; text-align: center;
  background: var(--wm-k-raise); border: 1px solid var(--wm-line); border-radius: var(--wm-r);
  transition: border-color var(--wm-fast), transform var(--wm-fast);
}
.wm-reason:hover{ border-color: var(--wm-y-line); transform: translateY(-3px); }
.wm-reason__ic{
  width: 46px; height: 46px; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r);
}
.wm-reason__ic svg{ width: 21px; height: 21px; }
.wm-reason b{
  display: block; margin-bottom: 8px; color: var(--wm-w);
  font-family: var(--wm-display); font-weight: 400; font-size: 21px;
  letter-spacing: var(--wm-track-d); text-transform: uppercase;
}
.wm-reason s{ display: block; text-decoration: none; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.6; }

/* ═══ Dört adım ════════════════════════════════════════════════ */
.wm-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wm-gap); position: relative; }
.wm-step{ text-align: center; padding: 0 12px; }
.wm-step__n{
  width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--wm-y); color: var(--wm-on-y);
  border: 1px solid var(--wm-y-hi); border-radius: var(--wm-r-pill);
  box-shadow: var(--wm-sh-y);
  font-family: var(--wm-display); font-weight: 400; font-size: 24px; line-height: 1;
}
.wm-step b{
  display: block; margin-bottom: 8px; color: var(--wm-w);
  font-family: var(--wm-display); font-weight: 400; font-size: 20px;
  letter-spacing: var(--wm-track-d); text-transform: uppercase;
}
.wm-step s{ display: block; text-decoration: none; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.6; }

/* ═══ Discord paneli ═══════════════════════════════════════════ */
.wm-disc{
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 30px 32px; border-radius: var(--wm-r-l);
  background: linear-gradient(135deg, var(--wm-k-raise), var(--wm-k-sink));
  border: 1px solid var(--wm-line-2);
}
.wm-disc__ic{
  flex: none; width: 62px; height: 62px; display: grid; place-items: center;
  background: var(--wm-y); color: var(--wm-on-y);
  border-radius: var(--wm-r-l); box-shadow: var(--wm-sh-y);
}
.wm-disc__ic svg{ width: 30px; height: 30px; }
.wm-disc__copy{ flex: 1 1 320px; min-width: 0; }
.wm-disc h2{
  margin: 0 0 7px; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d3); letter-spacing: var(--wm-track-d); text-transform: uppercase; color: var(--wm-w);
}
.wm-disc p{ margin: 0; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.6; max-width: 60ch; }
.wm-disc__right{ margin-left: auto; text-align: right; flex: none; }
.wm-disc__note{
  display: block; margin-top: 9px; color: var(--wm-g-dim);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}

/* ═══ Bülten ═══════════════════════════════════════════════════ */
.wm-nl{ display: grid; grid-template-columns: 1fr 456px; gap: 40px; align-items: center; }
.wm-nl__copy h2{
  margin: 0 0 10px; font-family: var(--wm-display); font-weight: 400;
  font-size: var(--wm-d2); line-height: 1; letter-spacing: var(--wm-track-d);
  text-transform: uppercase; color: var(--wm-w);
}
.wm-nl__copy h2 em{ font-style: normal; color: var(--wm-y); }
.wm-nl__copy p{ margin: 0 0 16px; color: var(--wm-g); font-size: var(--wm-t2); line-height: 1.6; max-width: 52ch; }
.wm-nl__perks{ display: flex; flex-wrap: wrap; gap: 8px; }
.wm-nl__perks span{
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  background: var(--wm-y-soft); color: var(--wm-y);
  border: 1px solid var(--wm-y-line); border-radius: var(--wm-r-pill);
  font-size: var(--wm-t5); font-weight: 800; letter-spacing: var(--wm-track-m); text-transform: uppercase;
}
.wm-nl__card{
  padding: 34px 28px; border-radius: var(--wm-r-s);
  background: linear-gradient(var(--wm-k-raise), var(--wm-k-sink));
  border: 1px solid var(--wm-line-2); box-shadow: var(--wm-sh-card);
}
.wm-nl__card h3{
  margin: 0 0 6px; font-family: var(--wm-display); font-weight: 400; font-size: 22px;
  letter-spacing: var(--wm-track-d); text-transform: uppercase; color: var(--wm-w);
}
.wm-nl__card p{ margin: 0 0 16px; color: var(--wm-g); font-size: var(--wm-t3); }
.wm-nl__form{ display: flex; flex-direction: column; gap: 10px; }
.wm-nl__form input{
  height: 46px; padding: 0 14px; width: 100%;
  background: var(--wm-k-sink); color: var(--wm-w);
  border: 1px solid var(--wm-line-2); border-radius: var(--wm-r-s);
  font-family: var(--wm-body); font-size: var(--wm-t2);
}
.wm-nl__form input::placeholder{ color: var(--wm-g-dim); }
.wm-nl__form input:focus{ outline: 0; border-color: var(--wm-y-line-2); }
.wm-nl__msg{ margin: 10px 0 0; font-size: var(--wm-t3); color: var(--wm-g); min-height: 1.2em; }
.wm-nl__msg[data-state="ok"]{ color: var(--wm-ok); }
.wm-nl__msg[data-state="err"]{ color: var(--wm-bad); }
.wm-nl__fine{ margin: 12px 0 0; color: var(--wm-g-dim); font-size: var(--wm-t5); text-align: center; }

/* ═══ Responsive ═══════════════════════════════════════════════ */
@media (max-width: 1180px){
  .wm-cats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-nl{ grid-template-columns: 1fr; gap: 26px; }
  .wm-nl__card{ max-width: 480px; }
}
@media (max-width: 980px){
  .wm-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wm-reasons{ grid-template-columns: repeat(2, 1fr); }
  .wm-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-steps{ grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media (max-width: 700px){
  .wm-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-rail .wm-pc{ width: 200px; }
  .wm-rail .wm-cat{ width: 168px; }
  .wm-cat{ height: 214px; }
  /* Ray kartı 200px'e iniyor, kart da 44px kısalıyor. */
  #heroRail, #newRail{ min-height: 321px; }
  #catsRail{ min-height: 236px; }
  .wm-disc{ padding: 24px 20px; }
  .wm-disc__right{ margin-left: 0; text-align: left; width: 100%; }
  .wm-shead__acts{ margin-left: 0; width: 100%; }
}
@media (max-width: 460px){
  /* İki sütunlu sayaç kutusu 360px'te ~130px: "INSTANT" 34px'te
     taşıyordu. Bir kademe küçük + hafif dar kesim; çeviri uzunsa kelime
     kutunun içinde kırılır, dışarı taşmaz. (wm-premium.css eksenleri
     sonradan yazıyor; seçici bir kademe özgül.) */
  .wm-stat{ padding: 22px 10px; }
  .wm-stats .wm-stat b{
    font-size: var(--wm-d2);
    font-variation-settings: "wdth" 92, "wght" 750;
  }
  .wm-reasons{ grid-template-columns: 1fr; }
  .wm-steps{ grid-template-columns: 1fr; }
  .wm-nl__card{ padding: 26px 20px; }

  /* Telefonda ızgara iki sütun kalır (~155px kart): ad bir kademe küçük,
     böylece iki satıra iki kelimeden fazlası sığar. Kategori zaten
     700px'te fiyatın üstüne geçmişti. */
  .wm-pc__name{ font-size: 13.5px; }
  .wm-pc__price{ font-size: 14px; }
  /* Ad bir kademe küçüldü: ray kartı da 4px kısalıyor. */
  #heroRail, #newRail{ min-height: 317px; }
}