/* ==========================================================================
   XARETH STUDIO — Tasarım Sistemi
   Tüm renkler HOME/GAMES/CONTACT.png üzerinde piksel ölçümü ile elde edildi.
   Bu dosya WordPress child temasına birebir taşınır.
   ========================================================================== */

/* ---------- 0. Yazı tipleri — KENDİ SUNUCUMUZDAN ----------

   NEDEN: bu üç aile Google'dan, ÜÇÜNCÜ TARAF ve RENDER ENGELLEYEN bir
   stil dosyasıyla geliyordu. Ölçüldü (2026-08-17, E4 turu):

     · CLS ihlallerinin TAMAMI bundandı. A/B: aynı sayfalarda
       0,203 / 0,156 -> 0,000 (fontlar engellenince). Yedek yazı tipiyle
       çizip sonra takas etmek yerleşimi kaydırıyordu.
     · 354 dış istek · iki ayrı kökene DNS + TLS + gidiş-dönüş.
     · Her ziyaretçinin adresi Google'a gidiyordu.

   AYNI DOSYALAR, AYNI GÖRÜNÜM — yalnız kaynak değişti. Tasarım kararı
   değil, dağıtım kararı. (İlker onayı: 2026-08-17.)

   Archivo ve Inter DEĞİŞKEN font: tek dosya bütün ağırlıkları taşıyor.
   Ölçüldü: 16 indirilen dosyanın yalnız 6'sı benzersizdi (759 KB ->
   224 KB). Bu yüzden `font-weight` bir ARALIK.

   Kiril/Yunan/Vietnam alt kümeleri ALINMADI — site metni kullanmıyor.
   `latin-ext` ALINDI: Türkçe ş/ğ/ı/İ oradadır ve panelden Türkçe
   içerik girilebilir.

   YÜKLEME DAVRANIŞI — üçü de `swap`, ve BU ÖLÇÜMLE SEÇİLDİ:

   `launcher` sayfasında başlık gerçek font gelince 1 satırdan 2 satıra
   çıkıyor ve altındaki her şey 62 px kayıyordu — **CLS 0,127**.

   DENENDİ: Archivo'ya `font-display:optional` (takası hiç yapmaz).
   CLS **0,000** oldu, LCP maliyeti de yoktu — AMA KAPI YAKALADI:
   **79 kutu küçülmesi.** Sebep: prototip `file://` ile açılıyor ve
   yazı tipi anında geliyor, üretimde ise 100 ms bloklama penceresi
   kaçınca yedekle çiziliyordu. İki taraf farklı satır sayısına düşüyor
   ve İlker'in **"kutu küçülmez"** kuralı çiğneniyordu. GERİ ALINDI.

   SEÇİLEN: `swap` + **yalnız Archivo önyüklemesi**. Gerçek yazı tipi
   ilk boyamadan önce geliyor, takas hiç görünmüyor:
   CLS **0,000**, kutu küçülmesi **0**, bedeli ana sayfada ~100 ms.

   ⚠️ INTER ÖNYÜKLENMEZ: ikisi birden önyüklendiğinde 81 KB yüksek
   öncelikle LCP görselinin önüne geçiyor ve sayfayı **560 ms
   YAVAŞLATIYORDU** (ölçüldü: 2.620 -> 2.060 ms). Inter'in takası
   zaten kaydırmıyor — yedeği ölçüsü eşlenmiş. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:600 800;
  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:'Archivo';
  font-style:normal;
  font-weight:600 800;
  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:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-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:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/inter-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:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-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:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-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;
}

/* ---------- 0b. YEDEK yazı tipleri — GERÇEĞİNİN ÖLÇÜSÜNDE ----------

   Yazı tiplerini kendi sunucumuza almak 354 dış isteği ve gizlilik
   açığını kaldırdı — AMA CLS'i kaldırmadı (0,203 kaldı). Ölçüldü
   (`cwv_guard --font-kapat`): yazı tipi HİÇ gelmezse CLS **0,000**.
   Yani sebep köken değil, TAKAS'tı: sayfa önce yedek yazı tipiyle
   çiziliyor, gerçek gelince satırlar başka yer kaplıyor, altındaki
   her şey kayıyor.

   Aşağıdaki sayılar TAHMİN DEĞİL — `node tools/font_metrics.mjs`
   tarayıcının kendi yazı tipi ölçülerinden (`TextMetrics`) türetti:

     Inter     ↔ Segoe UI     genişlik 5635,5 ↔ 5236,9 px
     Archivo   ↔ Arial Black  genişlik 5900,7 ↔ 6532,3 px
     Marcellus ↔ Georgia      genişlik 5340,3 ↔ 5218,6 px

   Yedek artık gerçeğiyle AYNI yeri kaplıyor; takas görsel olarak olur,
   YERLEŞİM DEĞİŞMEZ. Görünen tasarım değişmiyor: nihai çizim yine
   gerçek yazı tipiyle.

   `local()` birden çok ad sayar — hangisi varsa o kullanılır. Hiçbiri
   yoksa kural düşer ve yığındaki bir sonraki aileye geçilir. */

@font-face{
  font-family:'Inter Yedek';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial');
  size-adjust:107.61%;
  ascent-override:90.14%;
  descent-override:22.30%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Archivo Yedek';
  src:local('Arial Black'),local('Impact'),local('Arial Bold');
  size-adjust:90.33%;
  ascent-override:97.42%;
  descent-override:23.25%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Marcellus Yedek';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  size-adjust:102.33%;
  ascent-override:94.79%;
  descent-override:27.36%;
  line-gap-override:0%;
}

/* ---------- 1. Token'lar ---------- */
:root{
  /* Renk — ölçülmüş */
  --x-bg:#F3F3FA;
  --x-bg-alt:#EDEDF6;
  --x-surface:#FFFFFF;
  --x-ink:#0F1020;
  --x-body:#4A4A6C;
  --x-muted:#6D6D89;            /* AA için #6E6E8A'dan koyultuldu (4.46 -> 4.53) */
  --x-primary:#6B4CF0;
  /* Mor hâle (İlker, 2026-08-14). xareth.com'daki etkinin aynısı; oradaki
     mor rgb(123,77,255) idi, biz KENDİ marka morumuzu kullanıyoruz ki
     sisteme ikinci bir mor girmesin. Yalnız RGB bileşenleri tutulur,
     çünkü rgba() içinde opaklık değiştirerek kullanılacak. */
  --x-primary-rgb:107,76,240;
  --x-primary-strong:#5F3FD0;
  --x-primary-soft:#825FDF;      /* AA için #8763E8'den %3.5 koyultuldu */
  --x-primary-tint:#EFEBFE;
  --x-navy:#0C1848;
  --x-navy-2:#111E5C;
  --x-border:#E4E4F0;
  --x-border-strong:#D6D6E8;

  --x-grad:linear-gradient(90deg,var(--x-primary-strong) 0%,var(--x-primary-soft) 100%);
  --x-grad-cta:linear-gradient(100deg,#4B33A8 0%,#6B4CF0 45%,#8C6FF0 100%);

  /* Tipografi */
  /* Yedekler ölçüsü ayarlanmış eşleriyle (§0b) — takas kaydırmıyor. */
  --x-font-display:'Archivo','Archivo Yedek','Arial Black',system-ui,sans-serif;
  --x-font-serif:'Marcellus','Marcellus Yedek','Georgia',serif;
  --x-font-body:'Inter','Inter Yedek',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Ölçü — TAM GENİŞLİK düzeni.
     Konteyner sabit bir max-width kullanmaz; paneller sayfanın tamamına oturur
     ve yanlarda yalnızca --x-gutter kadar boşluk kalır. */
  --x-container:100%;
  --x-gutter:30px;

  /* Okuma sütunu — uzun metin (haber gövdesi) için. Tam genişlik düzeni
     makale metni için okunmaz: satır 90+ karaktere çıkıyor. Bu token
     `.x-container--read` ile kullanılır ve içerik genişliğini tam olarak
     bu değere sabitler (konteynerin max-width'i buna oluk eklenmiş halidir). */
  --x-read:720px;

  /* Öne çıkan panelin oranı. TEK KAYNAK: hem panelin kendisi hem de küçük
     seçim kartları bunu kullanır, böylece kart panelin birebir
     küçültülmüşü olur. `tools/mk_proto_art.py` görselleri de bu oranda
     üretir (1800x740) — tarayıcının kırpacak bir şeyi kalmaz, kimsenin
     kafası kesilmez. Değiştirilirse üretici de değişmeli. */
  --x-featured-ratio:2.4324;

  /* Öne çıkan panelde açıklama şeridinin üstten payı — amblemin altına
     denk gelsin diye. Sanat değişirse tek satırda ayarlanır. */
  --x-caption-top:clamp(70px,13.5vw,250px);

  /* Haber kapağının oranı. TEK KAYNAK: `tools/mk_proto_art.py` kapakları
     1920x720 üretir, `.x-newshero` de bu oranı alır — böylece tarayıcı
     görseli hiç kırpmaz. Değiştirilirse üretici de değişmeli. */
  --x-cover-ratio:2.6667;

  /* Haber gövde metni alanı (İlker ölçüsü, 2026-08-13): 1870x470. */
  --x-article-w:1870px;
  --x-article-h:470px;
  /* Köşe yuvarlaklığı DÜŞÜRÜLDÜ (İlker, 2026-08-13): yumuşak köşe
     "uygulama" hissi veriyordu, keskin köşe daha kurumsal/premium duruyor.
     Tek kaynak — paneller, kartlar, düğmeler ve pop-up pencereler hepsi
     bu üç değişkenden besleniyor, tek yerden değişir.
     Eski değerler: 14 / 10 / 8. */
  --x-radius:6px;
  --x-radius-sm:4px;
  --x-radius-xs:3px;
  --x-section:72px;
  --x-gap:20px;

  /* Kart minimum genişlikleri — yalnızca flex tabanlı ızgaralar (.x-eco) ve
     mobil tek sütun geçişleri için. Sütun sayıları breakpoint'lerde
     eleman sayısının bölenlerinden seçilir (bkz. §19). */
  --x-min-eco:220px;
  --x-min-card:290px;
  --x-min-social:225px;
  --x-min-method:165px;
  --x-min-office:130px;
  --x-min-gallery:250px;
  --x-min-stat:200px;

  /* Carousel'de görünen kart sayısı. JS bunu ekran genişliğine göre
     her yeniden boyutlandırmada günceller; buradaki değer JS kapalıyken
     kullanılan güvenli varsayılandır. */
  --pv:3;

  /* Gölge */
  --x-shadow-sm:0 1px 2px rgba(15,16,32,.05);
  --x-shadow:0 4px 16px rgba(15,16,32,.06);
  --x-shadow-lg:0 12px 40px rgba(15,16,32,.10);
  --x-shadow-primary:0 8px 24px rgba(107,76,240,.28);

  --x-t:.22s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* SAYFA ARKA PLANI (İlker, 2026-08-13).
   `background.png` bütün sayfaların EN ARKA katmanı. `body` üzerinde
   durduğu için başlık, paneller, kartlar, düğmeler ve yazılar —
   hepsi bunun ÖNÜNDE kalır; hiçbir bileşenin ölçüsü veya yeri değişmez.

   `cover`      : alanı TAM DOLDURUR, boşluk kalmaz.
   `center top` : taşma olursa alttan gider (İlker'in kırpma kuralı).
   `fixed`      : sayfa kayarken arka plan yerinde durur, hep tam ekran.
   `--x-bg`     : görsel yüklenene kadar (ve altında) zemin rengi.

   Dosya `tools/mk_proto_art.py` ile 1920px genişliğinde üretilir
   (kaynak 941px); büyütmeyi tarayıcıya bırakmamak için. */
body{
  margin:0;color:var(--x-body);
  background-color:var(--x-bg);
  background-image:url("../img/page-bg.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family:var(--x-font-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* `background-attachment:fixed` mobil tarayıcılarda ya yok sayılır ya da
   kaydırmayı ağırlaştırır; dar ekranda normal akışa alınır. Görsel yine
   alanı tam doldurur. */
@media (max-width:860px){
  body{background-attachment:scroll}
}
img,video{display:block;max-width:100%;height:auto}
/* SVG bilerek AYRI tutulur: height:auto, viewBox'lu ikonlarda width/height
   özniteliklerini ezip `display:grid;place-items:center` kullanan 13 ikon
   kapsayıcısında yüksekliği 0'a düşürüyordu (staging'de ölçüldü: .x-fav-sm
   içindeki svg 0x0, .x-game__plat içindeki 15x15). Tam genişlik isteyen iki
   SVG (.x-hero__curve, .x-map) height:auto'yu kendi kuralında veriyor. */
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--x-primary);outline-offset:2px;border-radius:4px}

.x-container{width:100%;max-width:var(--x-container);margin-inline:auto;padding-inline:var(--x-gutter)}
/* Okuma sütunu: içerik genişliği tam olarak --x-read olur (oluk hariç). */
.x-container--read{max-width:calc(var(--x-read) + var(--x-gutter) * 2)}
/* Haber gövde alanı: İlker ölçüsü 1870 px (2026-08-13).
   Oluk burada 30 değil 16 px: 30 px oluk ile 1920'lik pencerede (kaydırma
   çubuğu düşünce 1905) içerik 1845'te kalıyordu, 1870'e ulaşamıyordu.
   16 px oluk ile 1905'lik alanda içerik TAM 1870 px olur; dar ekranda da
   metin kenara yapışmaz. */
.x-container--article{
  --x-article-gutter:16px;
  max-width:calc(var(--x-article-w) + var(--x-article-gutter) * 2);
  padding-inline:var(--x-article-gutter);
}
.x-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.x-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--x-primary);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:600}
.x-skip:focus{left:0}

/* ---------- 3. Tipografi yardımcıları ---------- */
.x-display{
  font-family:var(--x-font-display);font-weight:800;color:var(--x-ink);
  line-height:1.06;letter-spacing:-.02em;text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.7rem);
}
.x-display .hl{color:var(--x-primary)}
.x-eyebrow{
  font-family:var(--x-font-body);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--x-primary);
}
.x-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.x-sec-head .ico{color:var(--x-primary);flex:none;display:grid;place-items:center}
.x-sec-title{
  font-family:var(--x-font-serif);font-size:19px;font-weight:400;
  letter-spacing:.11em;text-transform:uppercase;color:var(--x-ink);
}
.x-sec-sub{font-size:13px;color:var(--x-muted);margin-top:2px}
.x-sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- 4. Butonlar ---------- */
.x-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--x-radius-sm);
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  transition:transform var(--x-t),box-shadow var(--x-t),background var(--x-t),color var(--x-t),border-color var(--x-t);
  border:1px solid transparent;white-space:nowrap;
}
/* `.x-btn{display:inline-flex}` yazar kuralı olduğu için tarayıcının
   `[hidden]{display:none}` kuralını EZER — `hidden` yazan düğme yine de
   GÖRÜNÜR. Ölçüldü (2026-08-20, canlı `/account`): 2FA KAPALIYKEN bile
   "Verify and Turn On", "New Recovery Codes" ve "Turn Off" düğmeleri
   `hidden` taşıdıkları hâlde `display:flex` ile ekranda duruyordu.
   Aynı kusur sınıfı `.x-games` için daha önce yakalanıp yamanmıştı
   (bu dosyada aşağıda); `.x-btn` atlanmış. Canlı CSS'te tek tek ölçüldü:
   `.x-field`, `.x-input` ve düz `div` doğru gizleniyor — bozuk olan
   TEK sınıf buydu. */
.x-btn[hidden]{display:none}

.x-btn:hover{transform:translateY(-2px)}
.x-btn:active{transform:translateY(0)}
/* Pasif düğme (örn. seçili görsele video bağlı değilse WATCH TRAILER).
   Düğme SİLİNMEZ, yerinde durur ama tıklanamaz olduğu görülür. */
.x-btn:disabled{opacity:.42;cursor:not-allowed}
.x-btn:disabled:hover{transform:none;box-shadow:none}
.x-btn svg{flex:none}
.x-btn--primary{background:var(--x-grad);color:#fff;box-shadow:var(--x-shadow-primary)}
.x-btn--primary:hover{box-shadow:0 12px 30px rgba(107,76,240,.38)}
.x-btn--dark{background:var(--x-ink);color:#fff}
.x-btn--dark:hover{background:#1c1d36}
.x-btn--ghost{background:var(--x-surface);color:var(--x-ink);border-color:var(--x-border-strong);box-shadow:var(--x-shadow-sm)}
.x-btn--ghost:hover{border-color:var(--x-primary);color:var(--x-primary)}
.x-btn--outline-light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.34)}
.x-btn--outline-light:hover{background:rgba(255,255,255,.16)}
.x-btn--white{background:#fff;color:var(--x-ink)}
.x-btn--sm{padding:9px 16px;font-size:11.5px}
.x-btn--block{width:100%}
.x-link-arrow{
  display:inline-flex;align-items:center;gap:7px;color:var(--x-primary);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.x-link-arrow svg{transition:transform var(--x-t)}
.x-link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 5. Kart temeli ---------- */
.x-card{
  background:var(--x-surface);border:1px solid var(--x-border);
  border-radius:var(--x-radius);transition:transform var(--x-t),box-shadow var(--x-t),border-color var(--x-t);
}
.x-card--hover:hover{transform:translateY(-4px);box-shadow:var(--x-shadow-lg);border-color:#D3CBF6}
.x-panel{background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-radius);box-shadow:var(--x-shadow-sm)}
.x-section{padding-block:var(--x-section)}
.x-section--tight{padding-block:40px}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.x-header{
  position:sticky;top:0;z-index:100;
  background:rgba(243,243,250,.86);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(228,228,240,.9);
}
.x-header__inner{display:flex;align-items:center;gap:26px;height:64px}
/* MARKA LOGOSU (İlker, 2026-08-13). Eskiden SVG amblem + "XARETH STUDIO"
   yazısı vardı; ikisi de gerçek logoyla değişti. Logo DİKEY kilit
   (amblem üstte, kelime markası altta) ve oranı ~1.06:1.

   Yükseklik ÖLÇÜLEREK seçildi: 52px'te logonun içindeki "XARETH STUDIO"
   kelime markası ~14px'e düşüyor ve okunmuyordu. 64px'te okunur hale
   geliyor. ÖLÇÜLDÜ: başlık şeridi yine de 65px'te kaldı — mevcut dolgu
   64px'lik logoyu zaten alıyor, yani panel HİÇ büyümedi.
   Genişlik oranla gelir (`width:auto`), logo ASLA ezilmez.

   Metin sürümü kaldırıldığı için `.x-logo__name` / `__sub` kuralları da
   silindi — §19'da onlara dokunan mobil kurallar da temizlendi. */
.x-logo{display:flex;align-items:center;flex:none}
/* İlker ölçüleri (2026-08-13): başlıkta 75x75, altbilgide 100x100.
   Logonun kendi oranı 1.0625 olduğu için kutuyu birebir kare yapıp
   görseli ESNETMEK 6'lık bir yamukluk yaratırdı. `object-fit:contain`
   ile ALAN tam istenen ölçüde, logo o alana oranını bozmadan oturur. */
.x-logo__img{width:75px;height:75px;object-fit:contain;display:block}

/* Altbilgide logo, altındaki marka metnine göre ORTALI. */
.x-logo--footer{justify-content:center;width:100%}
/* Altbilgi logosu 100 -> 140 (İlker, 2026-08-13): 100px'te küçük
   kalıyordu. Marka sütunu zaten `minmax(230px,300px)`, yani genişlik
   payı var; sütun genişlikleri ve yanındaki bağlantı sütunları
   etkilenmez. */
.x-logo--footer .x-logo__img{width:140px;height:140px}

.x-nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.x-nav__link{
  display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:var(--x-radius-xs);
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--x-body);position:relative;transition:color var(--x-t),background var(--x-t);
}
.x-nav__link:hover{color:var(--x-primary);background:rgba(107,76,240,.06)}
.x-nav__link[aria-current="page"]{color:var(--x-primary)}
.x-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--x-primary);border-radius:2px;
}
.x-nav__link svg{flex:none;opacity:.85}

.x-header__actions{display:flex;align-items:center;gap:9px;flex:none}
.x-lang{
  display:flex;align-items:center;gap:5px;padding:8px 11px;border-radius:var(--x-radius-xs);
  border:1px solid var(--x-border-strong);background:var(--x-surface);
  font-size:11.5px;font-weight:600;color:var(--x-body);
}
.x-lang:hover{border-color:var(--x-primary);color:var(--x-primary)}

/* Dil listesi (2026-08-18). Düğme prototipte VARDI ama açılacak liste
   yoktu — ölü bir düğmeydi (§19.1). Liste işaretlemede DEĞİL, JS ile
   üretiliyor; bu yüzden prototipin kutu ölçüleri değişmiyor.
   Biçim başlıktaki öteki yüzeylerle aynı dili konuşuyor: aynı kenarlık,
   aynı yarıçap, aynı yüzey rengi. */
.x-lang__list{
  /* ⚠️ `absolute` DEĞİL — ÖLÇÜLMÜŞ KUSUR (İlker bildirdi, 2026-08-18).
     `.x-header__actions` konumlandırılmamış bir flex kabı; `absolute`
     liste en yakın KONUMLANDIRILMIŞ ataya göre yerleşiyor ve öyle bir
     ata olmadığı için sayfaya göre açılıyordu — "Xareth Launcher"
     düğmesinin üstüne taşıyordu. Dokunmatikte daha da kötü:
     `@media (pointer:coarse)` o düğmeye `position:relative` veriyor,
     yani ÇAPA Launcher düğmesi oluyordu.

     `fixed` görüntü alanına göredir, hiçbir atadan etkilenmez;
     koordinatı JS düğmenin kendi dikdörtgeninden hesaplıyor. Böylece
     liste HER ZAMAN düğmenin hemen altında açılır ve işaretlemeye
     (sarmalayıcı kap vb.) hiç dokunulmaz — kutu ölçüleri korunur. */
  position:fixed;z-index:60;margin:0;padding:6px;list-style:none;
  min-width:132px;border-radius:var(--x-radius-xs);
  border:1px solid var(--x-border-strong);background:var(--x-surface);
  box-shadow:0 10px 30px rgba(15,16,32,.14);
}
.x-lang__list [role="option"]{
  padding:8px 10px;border-radius:var(--x-radius-xs);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--x-body);white-space:nowrap;
}
.x-lang__list [role="option"]:hover,
.x-lang__list [role="option"]:focus-visible{background:var(--x-bg-alt);color:var(--x-primary)}
.x-lang__list [role="option"][aria-selected="true"]{color:var(--x-primary)}
.x-icon-btn{
  width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:var(--x-radius-xs);
  border:1px solid var(--x-border-strong);background:var(--x-surface);color:var(--x-body);
  transition:all var(--x-t);
}
.x-icon-btn:hover{border-color:var(--x-primary);color:var(--x-primary)}
.x-burger{display:none}

/* Arama katmanı */
.x-search{
  position:fixed;inset:0;z-index:150;background:rgba(15,16,32,.55);
  backdrop-filter:blur(6px);display:grid;place-items:start center;padding-top:14vh;padding-top:14dvh;
  /* `place-items` tek başına sütun izini `auto` bırakıyor; o zaman
     `width:min(640px,92vw)` max-content'e göre çözülüyor ve kutu ekrandan
     taşıyor. 320px'te "Ara" düğmesi 369px'e kadar taşıyordu (ölçüldü).
     Aynı hata daha önce oyun penceresinde de çıkmıştı. */
  grid-template-columns:minmax(0,1fr);
  opacity:0;visibility:hidden;transition:opacity var(--x-t),visibility var(--x-t);
}
.x-search[data-open="true"]{opacity:1;visibility:visible}
/* ÖLÇÜLEN KUSUR (2026-08-16): 320 px'te 5 px, 360 px'te 2 px taşıyordu.
   Sebep `92vw`: `vw` birimi DİKEY KAYDIRMA ÇUBUĞUNU DA sayar. Sayfa
   uzun olduğunda kullanılabilir genişlik 320 değil 305 olur, ama
   `92vw` yine 294 hesaplanır ve kutu 16 px soldan başlayınca sağdan
   taşar. `%` ise kabın gerçek genişliğine göre çözülür — üst kap zaten
   `minmax(0,1fr)` olduğu için doğru sayı odur.
   Ölçüm: 462 ölçümde taşma 2 -> 0. */
.x-search__box{
  width:min(640px,calc(100% - 32px));margin-inline:auto;background:#fff;border-radius:var(--x-radius);
  padding:8px;display:flex;gap:8px;box-shadow:var(--x-shadow-lg);
  transform:translateY(-12px);transition:transform var(--x-t);
}
.x-search[data-open="true"] .x-search__box{transform:none}
/* Esnek satırda `min-width:auto` girdinin kendi asgari genişliğinin altına
   inmesini engelliyor — düğmeyi dışarı itiyordu. */
.x-search__input{flex:1;min-width:0;border:0;padding:14px 16px;font-size:16px;background:transparent}
.x-search__input:focus{outline:none}

/* ==========================================================================
   7. HERO
   ========================================================================== */
/* Zemin SAYDAM: sayfa arka planı banner'ın da ARKASINA uzanır
   (İlker, 2026-08-13: "banner'ın altında kesikmiş gibi kalmasın").
   Eskiden `background:var(--x-bg)` opak bir blok basıyordu ve arka plan
   banner'ın altında başlıyormuş gibi duruyordu. Banner'ın KENDİ görseli
   `.x-hero__media` ile `inset:0` üzerinde durduğu için görünüşte hiçbir
   şey kaybolmaz. */
.x-hero{position:relative;overflow:hidden;background:transparent}

/* ⚠️ BANNER İLE ARKA PLAN ARASINDAKİ "İKİ PARÇA" GÖRÜNTÜSÜ (İlker, 2026-08-13)
   İki sebebi vardı:
     1) Banner görseli OPAK bir blok olarak bitiyordu.
     2) Altındaki dalga (`.x-hero__curve`) düz `#F3F3FA` bir bant
        basıyordu; arka plan dokulu olduğu için o bant kesik gibi
        görünüyordu.
   Çözüm: dalga kaldırıldı ve banner görselinin ALT KENARI maskeyle
   saydama eriyor. Böylece arka plan banner'ın ARKASINDAN görünüp
   kesintisiz aşağı uzanıyor — arada ne boşluk ne çizgi kalıyor.
   `--x-hero-fade` erime payı; tek satırda ayarlanır. */
.x-hero{--x-hero-fade:26%}
.x-hero .x-hero__curve{display:none}
.x-hero .x-hero__media{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - var(--x-hero-fade)),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - var(--x-hero-fade)),transparent 100%);
}
.x-hero__media{position:absolute;inset:0;z-index:0}
/* KIRPMA YALNIZCA ALTTAN (İlker kuralı, 2026-08-13). Eskiden
   `center 30%` idi: görselin hem ÜSTÜNDEN hem altından kesiyordu.
   `center top` üst kenarı korur, fazlalık alttan gider. */
.x-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* BANNER GÖRSELİ ARTIK TAM GENİŞLİK VE PERDESİZ (İlker, 2026-08-13).
   Eskiden iki şey vardı: görsel `left:34%` ile sayfanın ancak sağ üçte
   ikisinden başlıyordu ve üstüne soldan sağa BEYAZ bir perde
   (`var(--x-bg)` -> saydam) çekiliyordu. Perde metni okunur kılıyordu ama
   görselin canlılığını öldürüyordu.
   Perde yerine: metin beyaza döner ve gölge alır. Görsele hiç dokunulmaz. */
.x-hero--home .x-hero__media{left:0}
.x-hero--home .x-hero__inner{color:#fff}
.x-hero--home .x-hero__copy{
  text-shadow:0 2px 16px rgba(7,8,26,.92), 0 1px 4px rgba(7,8,26,.8);
}
.x-hero--home .x-hero__copy .x-display,
.x-hero--home .x-hero__copy .x-hero__lead{color:#fff}
/* Açık (bulutlu) banner'larda leylak ton okunmuyordu — beyaz + gölge. */
.x-hero--home .x-hero__copy .x-eyebrow{color:#fff}
.x-hero--home .x-hero__copy .x-display .hl{color:#C9B8FF}
.x-hero__inner{position:relative;z-index:2;padding-block:clamp(56px,8vw,104px)}

/* Yalnızca METİNLİ banner'lar (news · launcher · assets · about …) biraz
   daha yüksek olsun (İlker: "az daha, ama çok değil"). Ölçüldü: 1920px'te
   news 349px, launcher/assets 377px — şerit gibi kalıyordu.
   `min-height` kullanıldı, sabit oran DEĞİL: contact banner'ı içeriği
   yüzünden zaten daha yüksek (684px) ve ona dokunulmamalı. */
.x-hero--home:not(.x-hero--art){min-height:clamp(360px,23vw,440px)}
.x-hero--home:not(.x-hero--art) .x-hero__inner{display:flex;align-items:center}

/* Yalnızca görsel taşıyan kahraman (metin ve düğmeler kaldırıldı).
   Metin çıkınca yükseklik çöküyordu ve banner kaybolmuş gibi görünüyordu.
   Burada yükseklik görselin KENDİ oranından gelir: kırpma da esneme de yok. */
/* Banner SABİT orandadır — hangi görsel gelirse gelsin yüksekliği değişmez.
   Görselin tamamını göstermek yükseklığı çok büyütüyordu (İlker: "ekranı
   komple bir görsel kaplamış gibi"). Bu yüzden sinematik bir şerit oranı
   seçildi ve kırpma ALTTAN yapılır: `object-position:center top` üst
   kenarı korur, alt kısım kırpılır. */
.x-hero--art{aspect-ratio:3.1/1}
.x-hero--art .x-hero__media{position:absolute;inset:0}
.x-hero--art .x-hero__media::before{display:none}
.x-hero--art .x-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.x-hero--art .x-hero__inner{position:absolute;inset:0;padding-block:0}
.x-hero__copy{max-width:min(46vw,720px)}
.x-hero__lead{margin-top:20px;font-size:16px;line-height:1.72;color:var(--x-body);max-width:540px}
.x-hero__actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.x-hero__curve{position:absolute;left:0;right:0;bottom:-1px;z-index:3;pointer-events:none}
.x-hero__curve svg{width:100%;height:auto;display:block}

/* Hero istatistik barı (GAMES) */
.x-hero-stats{
  margin-top:30px;display:inline-flex;flex-wrap:wrap;background:rgba(15,16,32,.86);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--x-radius);overflow:hidden;
}
.x-hero-stats__item{display:flex;align-items:center;gap:12px;padding:16px 26px;color:#fff}
.x-hero-stats__item+.x-hero-stats__item{border-left:1px solid rgba(255,255,255,.14)}
.x-hero-stats__ico{color:#B9A6FF;flex:none}
.x-hero-stats__num{font-family:var(--x-font-display);font-weight:800;font-size:22px;line-height:1}
.x-hero-stats__lbl{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.74);margin-top:3px}

/* İletişim yöntemi kartları (CONTACT hero) */
.x-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;max-width:760px}
/* Kartlar `.x-hero__copy` içinde olduğu için beyaz metin rengini ve
   gölgeyi MİRAS ALIYORDU; banner perdesi kalkınca üstündeki yazı
   okunmaz hale geldi. Kart kendi zeminini ve rengini geri alır.
   Ayrıca parçalar `<span>`, yani satır içi: `display:block` olmadan
   ad/e-posta/açıklama yan yana akıp birbirine giriyordu (ölçüldü). */
.x-method{
  background:#fff;backdrop-filter:none;
  border:1px solid var(--x-border);border-radius:var(--x-radius);
  padding:20px 14px;text-align:center;transition:all var(--x-t);
  text-shadow:none;
}
.x-method__ico,.x-method__t,.x-method__v,.x-method__d{display:block}
.x-method:hover{transform:translateY(-4px);box-shadow:var(--x-shadow-lg);border-color:#D3CBF6}
.x-method__ico{color:var(--x-primary);margin-inline:auto;margin-bottom:11px}
.x-method__t{font-size:14px;font-weight:700;color:var(--x-ink)}
.x-method__v{font-size:11.5px;color:var(--x-primary);margin-top:6px;font-weight:600;word-break:break-word}

/* ═══ İÇERİK BOŞ KALIR, KUTU KÜÇÜLMEZ ═══════════════════════════════
   İlker, 2026-08-17: "içerikleri yok eklemeyeceğiz diye panellerin
   boyutlarında küçülme daraltma kısılma bozulma olmasın! sonra gerçek
   işlevsel ve çalışır şekilde dolduracağız zaten."

   Bu alanlar `display:block` ve metni boşalınca YÜKSEKLİKLERİ SIFIRA
   ÇÖKÜYOR — yani değer girilmediği için kart kısalıyor. `:empty`
   yalnızca BOŞ hâli hedefler; dolu kartlar bu kuraldan hiç etkilenmez,
   dolayısıyla mevcut tasarım risk altında değil.

   `.x-slot` cümle İÇİNDEKİ boşluğu korur (SSS'teki e-posta gibi):
   satır sayısı değişmesin diye genişlik rezerve eder. */
.x-method__v:empty,
.x-social__h:empty,
.x-social__d:empty,
.x-cinfo__t:empty,
.x-cinfo__v:empty{min-height:1.35em}

.x-cinfo__v:empty[data-lines="2"]{min-height:2.7em}
.x-cinfo__v:empty[data-lines="3"]{min-height:4.05em}

/* §19.1 turunda boşalan değer satırları (2026-08-18).
   `about` sayıları, `press` künyesi ve `launcher` gereksinimleri artık
   uydurulmuyor; İlker doldurana kadar boşlar. Kutu KÜÇÜLMEZ (§3b):
   satır kendi yüksekliğini burada koruyor. Ölçüm: layout_guard. */
.x-statsrow__v:empty{min-height:1em}
/* Ana sayfa "Development Intelligence" panelinde iki sayı İlker isteğiyle
   kaldırıldı (2026-08-19): Team Members ve Community. Etiket ve kutu
   duruyor — kutu KÜÇÜLMEZ, dört kutucuk aynı boyda kalır (§3b). */
.x-stat__v:empty{min-height:1.1em}
.x-eco__t:empty{min-height:1.2em}
.x-eco__d:empty{min-height:1.5em}
.x-prose:empty{min-height:1.6em}
.x-badge:empty{min-height:1em;min-width:2.5em}

.x-slot{display:inline-block;min-width:9.5em;min-height:1em;vertical-align:baseline}

/* REZERVE EDİLMİŞ KUTU — içeriği HENÜZ YOK, yeri duruyor.
   `display:none` kutuyu tamamen yok eder ve panel çöker; `visibility`
   ise kutuyu OLDUĞU GİBİ bırakıp yalnız boyamayı keser. Ölçüldü: video
   kaydı olmayan oyun sayfalarında fragman bloğu 0×0'a düşüyor ve panel
   128 px kısalıyordu (`layout_guard.mjs`, 888 küçülme).
   Tıklanamaz ve ekran okuyucuya duyurulmaz — hiçbir şey İDDİA ETMEZ. */
.x-reserved{visibility:hidden;pointer-events:none}
.x-method__d{font-size:11px;color:var(--x-muted);margin-top:5px}

/* ==========================================================================
   8. MEDIA SHOWCASE (carousel)
   ========================================================================== */
.x-carousel{position:relative}
.x-carousel__viewport{overflow:hidden;border-radius:var(--x-radius)}
.x-carousel__track{display:flex;gap:var(--x-gap);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.x-media-card{
  position:relative;
  flex:0 0 calc((100% - (var(--x-gap) * (var(--pv,3) - 1))) / var(--pv,3));
  border-radius:var(--x-radius);overflow:hidden;aspect-ratio:16/9;
  background:var(--x-ink);
}
.x-media-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.x-media-card:hover img{transform:scale(1.06)}
.x-media-card__tag{
  position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:3px;
  background:rgba(10,10,26,.78);backdrop-filter:blur(4px);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.x-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--x-border);color:var(--x-ink);
  box-shadow:var(--x-shadow);transition:all var(--x-t);
}
.x-carousel__nav:hover{background:var(--x-primary);color:#fff;border-color:var(--x-primary)}
.x-carousel__nav:disabled{opacity:.35;cursor:not-allowed}
.x-carousel__nav--prev{left:-19px}
.x-carousel__nav--next{right:-19px}
.x-dots{display:flex;justify-content:center;gap:7px;margin-top:20px}
.x-dots button{width:7px;height:7px;border-radius:99px;background:var(--x-border-strong);transition:all var(--x-t)}
.x-dots button[aria-selected="true"]{width:22px;background:var(--x-primary)}

/* ==========================================================================
   9. FEATURED PROJECT
   ========================================================================== */
.x-featured{
  position:relative;border-radius:var(--x-radius);overflow:hidden;
  background:#07081A;color:#fff;box-shadow:var(--x-shadow-lg);
}
.x-featured__bg{position:absolute;inset:0}
/* `cover` + `center` = görsel paneli tam doldurur, ASLA esnemez/bozulmaz;
   yalnızca taşan kenar kırpılır ve kırpma her zaman ortadan olur. */
.x-featured__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.x-featured__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,8,26,.96) 0%,rgba(7,8,26,.86) 34%,rgba(7,8,26,.15) 72%,rgba(7,8,26,.5) 100%);
}
.x-featured__inner{position:relative;z-index:2;padding:clamp(28px,2.6vw,48px);display:flex;flex-direction:column;min-height:420px}
.x-featured__badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:6px 13px;border-radius:3px;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.2);color:#D9CEFF;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.x-featured__logo{
  font-family:var(--x-font-display);font-weight:800;line-height:.94;margin-top:26px;
  font-size:clamp(2rem,3.4vw,3.6rem);text-transform:uppercase;
  background:linear-gradient(180deg,#FFE9A8 0%,#F0A84A 55%,#C4561E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 12px rgba(240,168,74,.35));max-width:min(40vw,560px);
}
.x-featured__logo small{display:block;font-size:.42em;letter-spacing:.22em;margin-top:6px}
.x-featured__desc{margin-top:18px;max-width:min(42vw,560px);color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.7}
.x-featured__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.x-tag{
  padding:5px 11px;border-radius:3px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.x-featured__meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:11px}
.x-meta-group{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.62);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.x-platforms{display:flex;gap:9px;color:rgba(255,255,255,.9)}
.x-status{color:#B9A6FF;font-weight:700}
.x-featured__actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:auto;padding-top:26px}
.x-fav{
  width:44px;height:44px;padding:0;border-radius:var(--x-radius-sm);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;transition:all var(--x-t);
}
.x-fav:hover,.x-fav[aria-pressed="true"]{background:var(--x-primary);border-color:var(--x-primary);color:#fff}
.x-fav[aria-pressed="true"] svg{fill:currentColor}

/* `overflow-x:auto` dikeyde de kırpar; üzerine gelince kart 3 px yukarı
   kalktığı için ÜST KENARI kesiliyordu. Üstte pay bırakılıyor. */
/* ---------- Öne çıkan panel: görsel başına açıklama şeridi ----------
   İlker (2026-08-13): "ELEMENT TD WARS yazısının hemen altında gelecek
   şekilde hem yazı ekleyebilme hemde altına buton gibi görünen ama
   tıklanamayan etiketler, onun da altına oynanabilir cihaz ikonları".

   İçerik KARTIN KENDİ `data-*` özniteliklerinden gelir; her görsel için
   ayrı yazılır ve boş bırakılırsa o satır hiç basılmaz.

   `--x-caption-top` amblemin altına denk gelmesi için bırakılan pay;
   sanat değişirse tek satırda ayarlanır. */
/* Açıklama şeridi PANELİN ALTINA, düğmelerin hemen üstüne yaslanır
   (İlker, 2026-08-13: "çok yukarda kalmışlar, VIEW DETAILS'in hemen
   üstünde olsun"). Boşluğun tamamı yukarıda toplanır. */
.x-featured__caption{
  margin-top:auto;
  max-width:min(52%,660px);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  text-shadow:0 2px 14px rgba(7,8,26,.92), 0 1px 4px rgba(7,8,26,.8);
}
.x-featured__caption:empty{display:none;margin-top:0}
.x-featured__cap{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.94);margin:0}
.x-featured__chips{display:flex;flex-wrap:wrap;gap:7px}
/* Etiketler buton GİBİ görünür ama tıklanamaz: <span>, imleç yok,
   odaklanamaz. İşlevsel bir düğme taklidi yapılmıyor. */
.x-featured__chips .x-tag{text-shadow:none;cursor:default;user-select:none}
.x-featured__plats{display:flex;flex-wrap:wrap;gap:11px;color:#fff;opacity:.92}
.x-featured__plats svg{filter:drop-shadow(0 1px 3px rgba(7,8,26,.9))}

.x-featured__thumbs{
  position:absolute;right:22px;bottom:22px;z-index:3;
  display:flex;gap:10px;max-width:52%;overflow-x:auto;
  padding-top:8px;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;
}
.x-featured__thumbs::-webkit-scrollbar{height:4px}
/* Şerit gerçekten parmakla kaysın (İlker, gerçek iPhone, 2026-08-14):
   `pan-x` iOS'a hareketin YATAY olduğunu bildirir — bildirilmediğinde
   Safari hareketi sayfa kaydırması sayıp şeridi hiç kaydırmıyordu.
   `overscroll-behavior-x:contain` şeridin sonuna gelince hareketin
   sayfaya/karusele sıçramasını engeller. */
.x-featured__thumbs{touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}

/* Şerit + iki uçtaki ok düğmeleri. Oklar ŞERİDİN UCUNDA, panelin dikey
   ortasında DEĞİL: games.html'de orada zaten dış karuselin okları var
   (ölçüldü: 390px'te t=647), çakışırdı. */
.x-thumbnav{display:flex;align-items:center;gap:8px;min-width:0}
.x-thumbnav .x-featured__thumbs{flex:1 1 auto;min-width:0;margin-top:0}
.x-thumbnav__btn{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  border-radius:var(--x-radius-xs);color:#fff;
  border:1px solid rgba(255,255,255,.34);background:rgba(7,8,26,.46);
  backdrop-filter:blur(6px);transition:all var(--x-t);
}
.x-thumbnav__btn:hover{background:var(--x-primary);border-color:var(--x-primary)}
.x-thumbnav__btn:disabled{opacity:.32;pointer-events:none}
.x-thumbnav__btn:focus-visible{outline:3px solid var(--x-primary);outline-offset:2px}
/* Masaüstünde şerit `position:absolute` ile panelin ALTINA yapışıyor.
   Sarmalayıcı eklenince şerit onun içinden KAÇIYOR ve oklar panelin sol
   üstüne düşüyordu (ölçüldü, ekran görüntüsüyle görüldü). Konumlandırma
   sarmalayıcıya devredilir, şerit onun içinde akışa döner. */
.x-featured--home .x-thumbnav{
  position:absolute;left:32px;right:32px;bottom:26px;z-index:3;
}
.x-featured--home .x-thumbnav .x-featured__thumbs{
  position:static;left:auto;right:auto;bottom:auto;max-width:none;
}

.x-featured__thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:9px}
/* Kart, PANELİN oranını taşır — 16/9 olduğu sürece kart ile büyük alan
   farklı bölgeleri gösteriyordu (panel 2.43:1). */
.x-thumb{
  flex:none;width:104px;aspect-ratio:var(--x-featured-ratio);
  border-radius:3px;overflow:hidden;
  /* Seçili olmayan kart artık SOLDURULMUYOR (İlker: görsellerin üstüne
     karartma gelmesin). Seçili durumu beyaz kenarlık ve yükselme
     gösteriyor — bilgi kaybı yok, görsel canlı kalıyor. */
  border:2px solid rgba(255,255,255,.28);transition:all var(--x-t);
}
.x-thumb img{width:100%;height:100%;object-fit:cover}
.x-thumb:hover,.x-thumb[aria-current="true"]{border-color:#fff;opacity:1;transform:translateY(-3px)}

/* Featured — HOME varyantı (alt şerit tam genişlik)
   `padding-bottom` şeridin GERÇEK yüksekliğinden hesaplanır:
   kart 122px + üst pay 8 + alt pay 6 + kaydırma çubuğu ~6 + alt boşluk 26
   + düğmelerle arasında nefes payı 24  ->  ~192px.
   Eskiden 130px'ti ve düğmeler şeridin altına giriyordu. */
/* `padding-bottom` küçük kart şeridine ayrılan pay. Şeridin GERÇEK
   yüksekliği: kart 74px (180px genişlik ÷ 2.4324 oran) + üst pay 8 +
   alt pay 6 + kaydırma çubuğu ~6 + alt boşluk 26 = ~120px.
   Üstüne düğmelerle şerit arasında istenen 20px eklenir. Ölçülen değere
   göre 140 -> 134 düzeltildi (140'ta boşluk 26px çıkıyordu).
   Eskiden 192px'ti; kartlar 16/9'ken şerit daha yüksekti ve düğmeler
   şeritten 78px yukarıda kalıyordu (ölçüldü, İlker bildirdi). */
.x-featured--home .x-featured__inner{min-height:0;padding-bottom:134px}
/* Açıklama varsa düğmeler ona yapışır (aradaki tek boşluk 18px);
   açıklama yoksa düğmeler kendi `margin-top:auto` ile en alta iner.
   Sınıfı JS ekler (renderCaption) — CSS `:has()` desteğine bağlı
   kalmamak için. */
.x-featured--home.has-caption .x-featured__actions{margin-top:18px}

/* Panel, görselin KENDİ oranını alır (kaynak 1800x900 = 2:1). Böylece görsel
   ne kırpılır ne esner — tam oturur. Eskiden sabit yükseklik vardı ve panel
   3.3:1'e kadar yayılınca görselin üstü/altı büyük ölçüde kırpılıyordu. */
/* Panel oranı SABİTTİR. Küçük karta tıklayınca ana görsel değişiyor; panel
   görsele göre esnerse sayfa her tıklamada zıplıyordu (İlker bildirdi,
   2026-08-13). Oran, ilk/ana görselin oranından alındı (1800x740 = 2.433)
   ve bir daha değişmez. Sonradan hangi görsel eklenirse eklensin `cover`
   ile aynı çerçeveye ortadan oturur: ne esner ne panel boyutu değişir. */
.x-featured--home{aspect-ratio:var(--x-featured-ratio)}
.x-featured--home .x-featured__bg{position:absolute;inset:0}
.x-featured--home .x-featured__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.x-featured--home .x-featured__inner{position:absolute;inset:0}
.x-featured--home .x-featured__actions{margin-top:auto}

/* Metinler kaldırıldığı için soldaki ağır karartma perdesi gereksiz kaldı;
   görseli bastırıyordu. Yerine yalnızca ALT tarafta hafif bir perde: düğmeler
   ve küçük kartlar okunur kalsın, görselin geri kalanı açık görünsün. */
.x-featured--home .x-featured__bg::after{
  background:linear-gradient(180deg,rgba(7,8,26,.10) 0%,rgba(7,8,26,0) 34%,rgba(7,8,26,.30) 68%,rgba(7,8,26,.82) 100%);
}
.x-featured--home .x-featured__thumbs{left:32px;right:32px;bottom:26px;max-width:none}

/* Kartlar SABİT genişlikte: sayıları artınca sığmak için küçülmezler,
   şerit yatay kayar. `scroll-snap` ile kayma kartın kenarına oturur. */
.x-featured--home .x-featured__thumbs{scroll-snap-type:x proximity;scroll-padding-inline:4px}
.x-featured--home .x-thumb{flex:0 0 auto;width:clamp(120px,13vw,180px);scroll-snap-align:start}

/* ==========================================================================
   10. ECOSYSTEM
   ========================================================================== */
.x-eco{display:flex;flex-wrap:wrap;gap:var(--x-gap)}
.x-eco>*{flex:1 1 calc((100% - 4*var(--x-gap))/5);min-width:var(--x-min-eco)}
/* Varsayılan satırda 5 kart. Altı kartlı diziler 5+1 kırılıyordu; bu iki
   değişke sütun sayısını sabitler. Opt-in — mevcut sayfalar etkilenmez. */
.x-eco--3>*{flex-basis:calc((100% - 2*var(--x-gap))/3)}
.x-eco--2>*{flex-basis:calc((100% - var(--x-gap))/2)}
.x-eco__card{padding:16px 20px 22px;text-align:center;display:flex;flex-direction:column;align-items:center}
/* Amblem büyütüldü 64 -> 92px (İlker: "çok küçük kalmışlar"). Kart
   yüksekliği yerinde kalsın diye alt boşluk ve kart üst dolgusu kısıldı;
   ölçülen fark birkaç piksel. */
.x-eco__ico{
  width:92px;height:92px;display:grid;place-items:center;margin-bottom:6px;
  color:var(--x-primary);
}
/* SVG sembolün yerini alan gerçek amblem görselleri (İlker, 2026-08-13).
   `contain` — amblem ASLA kırpılmaz ve esnemez, kutuya sığar. */
.x-eco__ico img{width:100%;height:100%;object-fit:contain;display:block}
.x-eco__t{
  font-family:var(--x-font-serif);font-size:13.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--x-ink);
}
.x-eco__d{font-size:12.5px;color:var(--x-muted);margin-top:10px;line-height:1.62;flex:1}
.x-eco__card .x-link-arrow{margin-top:16px}

/* ==========================================================================
   11. TRIO (Worlds / Technology / Dev Intelligence)
   ========================================================================== */
.x-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x-gap);align-items:stretch}
.x-trio>.x-panel{padding:22px;display:flex;flex-direction:column}

.x-worlds__img{position:relative;border-radius:var(--x-radius-sm);overflow:hidden;margin-top:16px;flex:1;min-height:170px}
.x-worlds__img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* Düğme aynı konumda (ortada, altta) ama daha GENİŞ (İlker, 2026-08-13).
   Yükseklik ve konum değişmedi. */
.x-worlds__img .x-btn{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  min-width:min(280px,72%);justify-content:center;
}

.x-tech{display:flex;flex-direction:column;gap:9px;margin-top:16px;flex:1}
.x-tech__item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--x-border);border-radius:var(--x-radius-sm);
  background:#FBFBFE;transition:all var(--x-t);
}
.x-tech__item:hover{border-color:#CFC4F5;background:var(--x-primary-tint);transform:translateX(3px)}
.x-tech__ico{width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--x-primary);
  background:var(--x-primary-tint);border-radius:3px}
.x-tech__n{font-size:12.5px;font-weight:700;color:var(--x-ink);letter-spacing:.05em}
.x-tech__d{font-size:11.5px;color:var(--x-muted);margin-top:2px}

/* Panel dikeyde üç bölge: başlık (üstte) · istatistikler (ORTADA) ·
   VIEW ROADMAP (EN ALTTA). Eskiden hepsi yukarı yığılıyordu
   (İlker, 2026-08-13). Genişlik ve yatay konum değişmedi. */
.x-di{position:relative;overflow:hidden;display:flex;flex-direction:column}
.x-di>.x-di__grid{margin-block:auto}
.x-di>.x-link-arrow{margin-top:auto;position:relative;z-index:1}
/* Soldurma kaldırıldı — görsellerin üstüne perde/opaklık gelmeyecek. */
/* Portre YUKARI doğru büyür ama panelin dışına taşmaz: `top:0` +
   `bottom:0` ile panelin TAM yüksekliğini kaplar, görsel de o alana
   alttan hizalı oturur. Eskiden yalnızca `bottom:0` vardı ve görsel
   kendi yüksekliğinde (256px) kalıp panelin (438px) altında "yarım"
   duruyordu (İlker, 2026-08-13). */
.x-di__portrait{
  position:absolute;right:-10px;top:0;bottom:0;width:44%;max-width:190px;
  z-index:0;pointer-events:none;display:flex;align-items:flex-end;
}
.x-di__portrait img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
.x-di__grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:11px;margin-top:16px;
  /* Portre görsel sağda 190px yer kaplıyor; ızgara onun ÜSTÜNE taşmasın.
     Ölçüldü: yer ayrılmadan 158px çakışma vardı (2026-08-13). */
  max-width:calc(100% - 208px);
}
.x-stat{
  padding:14px 16px;border:1px solid var(--x-border);border-radius:var(--x-radius-sm);
  background:rgba(255,255,255,.88);backdrop-filter:blur(4px);
}
.x-stat__l{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--x-muted);font-weight:600}
.x-stat__v{font-family:var(--x-font-display);font-weight:800;font-size:26px;color:var(--x-ink);line-height:1.1;margin-top:5px}
.x-di .x-link-arrow{position:relative;z-index:1;margin-top:16px}

/* ==========================================================================
   12. HABER KARTLARI
   ========================================================================== */
.x-news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x-gap)}
/* ÜÇLÜ şerit (haber detayındaki "İlgili Haberler"). §19'daki sütun sayıları
   6 ÖĞELİK haber arşivine göre seçilmiştir; 3 öğelik bir şeride uygulanınca
   ≥1500px'te 6 sütun açılıyor ve kartlar bandın yalnızca yarısını dolduruyordu
   (1920px'te ölçüldü: 3 × 288px, bandın kalan 920px'i boş). İki sınıflı
   seçici (0,2,0) §19'daki tek sınıflı kuralları sıra bağımsız yener. */
.x-news.x-news--trio{grid-template-columns:repeat(3,1fr)}

.x-news__card{overflow:hidden;display:flex;flex-direction:column}
.x-news__img{aspect-ratio:16/9;overflow:hidden;background:var(--x-ink)}
.x-news__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.x-news__card:hover .x-news__img img{transform:scale(1.06)}
.x-news__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.x-news__date{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--x-muted);font-weight:600}
/* Kategori rozeti — ilgili haberler şeridinde kullanılır. Ziyaretçi hangi
   tür içeriğe gittiğini kartın üzerinde görsün. */
.x-news__cat{
  /* `.x-news__body` bir flex sütun: `align-self` olmadan rozet kartın
     tamamına yayılıyor (tarayıcıda görüldü, 2026-08-13). */
  display:inline-block;align-self:flex-start;
  margin-bottom:9px;padding:3px 9px;border-radius:999px;
  background:var(--x-primary-tint);color:var(--x-primary-strong);
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.x-news__t{font-size:14.5px;font-weight:700;color:var(--x-ink);margin-top:8px;line-height:1.4}
.x-news__card:hover .x-news__t{color:var(--x-primary)}
.x-news__x{font-size:12.5px;color:var(--x-muted);margin-top:9px;line-height:1.62;flex:1}
.x-news__body .x-link-arrow{margin-top:14px}

/* ==========================================================================
   13. CTA BANDI
   ========================================================================== */
.x-cta{
  position:relative;border-radius:var(--x-radius);overflow:hidden;color:#fff;
  background:var(--x-grad-cta);
}

/* TAM GENİŞLİK CTA BANDI — YALNIZCA BU PANEL (İlker, 2026-08-13).
   Konteynerin oluğunu negatif kenar boşluğuyla iptal eder, böylece band
   sayfanın sağ ve sol kenarına birebir oturur. Yuvarlaklık da kalkar,
   çünkü kenara dayanan bir bandın köşesi yuvarlak olmaz.
   Başka hiçbir panele uygulanmayacak. */
.x-cta--full{
  margin-inline:calc(var(--x-gutter) * -1);
  width:calc(100% + var(--x-gutter) * 2);
  border-radius:0;
}
/* Görsel TAM OPAKLIKTA. Eskiden `opacity:.42` + `mix-blend-mode:screen`
   vardı; mor zeminle karışınca sanat solup gidiyordu (İlker: "resimlerin
   üstüne gölge/karartma gelmesin"). Metin beyaz + gölgeli olduğu için
   perdeye gerek yok. */
.x-cta__bg{position:absolute;inset:0}
.x-cta__bg img{width:100%;height:100%;object-fit:cover;object-position:top}
.x-cta__inner{text-shadow:0 2px 16px rgba(7,8,26,.9), 0 1px 4px rgba(7,8,26,.8)}
.x-cta__inner{
  position:relative;z-index:2;padding:30px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.x-cta__t{font-family:var(--x-font-display);font-weight:800;font-size:clamp(1.25rem,2.4vw,1.7rem);text-transform:uppercase;letter-spacing:-.01em}
.x-cta__d{margin-top:8px;font-size:14px;color:rgba(255,255,255,.86);max-width:520px}
.x-cta__actions{display:flex;gap:11px;flex-wrap:wrap}

/* MAĞAZA ROZETLERİ (İlker, 2026-08-14) — CTA bandındaki üç indirme düğmesi.
   İlker'in başka bir şablonundaki rozet biçimi örnek alındı: solda marka
   ikonu, sağda iki satır (küçük üst satır + kalın marka satırı).

   YÜKSEKLİK NEDEN 62px: band 134px, `.x-cta__inner` dolgusu 30px alt+üst
   -> içerik alanı 74px. Soldaki metin bloğu (başlık 44 + açıklama 22) 66px.
   62px rozet, metin bloğuyla göz hizasında durur ve 74px'lik içerik alanına
   üstte/altta 6'şar px boşlukla sığar. Ölçülerek seçildi.

   `text-shadow:none` ZORUNLU: `.x-cta__inner` bütün metne gölge veriyor
   (beyaz yazı koyu görselin üstünde okunsun diye). Rozetin zemini beyaz
   olduğu için o gölge burada kir gibi duruyordu. */
/* İNCELTME TURU (İlker, 2026-08-14): "biraz daha küçültüp premium hissi
   verelim, köşe ovalliğini de düşürelim."
   Değişenler ve ölçüleri:
     yükseklik 62 -> 52 · dolgu 9/20 -> 7/15 · boşluk 12 -> 10
     ikon 26 -> 21 · üst satır 10.5 -> 9.5 · marka satırı 16 -> 14
     yuvarlaklık 12 -> 7 · gölge yayılımı 20 -> 10, opaklık .26 -> .16
     hover kalkışı 2px -> 1px
   Premium hissi büyütmekten değil SIKILAŞTIRMAKTAN geliyor: küçük ve dar
   yayılan gölge, ince kenarlık, sert köşe, üst satırda geniş harf aralığı. */
.x-store{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:7px 15px;
  position:relative;isolation:isolate;overflow:hidden;
  background:#fff;color:var(--x-ink);
  border:1px solid rgba(15,16,32,.09);border-radius:5px;
  box-shadow:0 2px 10px rgba(7,8,26,.16);
  text-decoration:none;text-shadow:none;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease;
}
/* İÇERİDEKİ mor parıltı — rozetin ortasından dışa doğru sönen radyal katman.
   Sürekli duruyor ama `opacity:0`; yalnızca hover'da açılıyor, böylece
   geçiş yumuşak. `pointer-events:none` şart: üstteki katman tıklamayı
   yutmasın. `z-index:-1` + kapsayıcıda `isolation:isolate` -> katman
   metnin ALTINDA kalır ama rozetin dışına taşmaz. */
.x-store::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .24s ease;
  background:radial-gradient(circle at center, rgba(var(--x-primary-rgb),.22), transparent 62%);
}
/* DIŞARIDAKİ mor hâle — xareth.com'daki ölçüyle aynı: 42px yayılım, 7px
   büyüme, %42 opaklık. Üstüne beyaz iç çizgi (üstten ışık) ve yumuşak
   düşey gölge; rozet zeminden kalkıyormuş gibi dursun. */
.x-store:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--x-primary-rgb),.55);
  filter:brightness(1.04);
  /* ÖLÇÜLEREK AYARLANDI (2026-08-14): referanstaki değerler (koyu düşey
     gölge + %42 mor) BİREBİR denendi ve KOYU BANT ÜZERİNDE SÖNÜK kaldı —
     xareth.com'da rozetler AÇIK altbilgide duruyor, bizimkiler koyu CTA
     bandında. Koyu gölge koyu zeminde çamur gibi görünüp hâleyi yutuyordu.
     Düzeltme: koyu düşey gölge kaldırıldı, mor iki katmana çıkarıldı
     (yakın sert halka + uzak yumuşak yayılım). Etki aynı, sayılar zemine
     göre. Rozet açık bir zemine taşınırsa bu blok yeniden ölçülmeli. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(7,8,26,.08),
    0 0 0 4px rgba(var(--x-primary-rgb),.28),
    0 0 38px 10px rgba(var(--x-primary-rgb),.72);
}
.x-store:hover::before{opacity:1}
/* Hareket azaltma tercihi: hâle kalır, sıçrama kalkar. */

.x-store:focus-visible{outline:3px solid var(--x-primary);outline-offset:3px}
.x-store__ico{flex:none;display:grid;place-items:center;width:21px;height:21px}
.x-store__ico svg{width:21px;height:21px;display:block}
/* Metin sütunu: iki satır, sola dayalı. `min-width:0` esnek satırda
   daralmayı serbest bırakır (tekrarlayan hata sınıfı #4). */
.x-store__txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.14}
.x-store__top{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--x-muted);white-space:nowrap}
.x-store__name{font-size:14px;font-weight:700;letter-spacing:-.005em;white-space:nowrap}

/* Dar ekranda üç rozet alt alta düşer; tam genişlik olurlarsa hizalı durur. */

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.x-footer{background:var(--x-surface);border-top:1px solid var(--x-border);padding-top:48px}
/* Marka sütunu 2 birim + 5 bağlantı sütunu (Company · Games · Launcher ·
   Community · Support) = 7. Bunu 6'ya indirmek SUPPORT sütununu alt satıra
   düşürüyordu (İlker bildirdi, 2026-08-11). */
/* Üç bölge: marka | beş bağlantı sütunu | Stay Connected.
   Aradaki iki boşluk AYNI (`--x-footer-gap`), böylece
   "XARETH STUDIO ↔ COMPANY" ile "SUPPORT ↔ STAY CONNECTED" mesafesi eşit
   oluyor (İlker, 2026-08-13). Beş sütun kendi kabı içinde daha DAR ve
   eşit boşlukla yayılır; `max-content` + `space-between` sayesinde
   birbirine yaklaşırlar ama `column-gap` en az boşluğu garanti eder —
   dip dibe girmezler. */
/* Uçlardaki iki boşluk SABİT 90 px (İlker ölçüsü, 2026-08-13):
   XARETH STUDIO ↔ COMPANY  ve  SUPPORT ↔ Stay Connected ikonları.
   Ortadaki alan `1fr`, beş sütun oraya EŞİT aralıklarla yayılır. */
.x-footer__grid{
  --x-footer-edge:90px;
  display:grid;
  grid-template-columns:minmax(230px,300px) 1fr max-content;
  column-gap:var(--x-footer-edge);
  row-gap:var(--x-gap);
  align-items:start;
}
/* ÖLÇÜLEN KUSUR (2026-08-16, 42 sayfa × 11 genişlik = 462 ölçüm):
   1200 px genişlikte SAYFANIN TAMAMI 12 px taşıyordu — 42 sayfanın
   42'sinde, çünkü altbilgi ortak parça.

   Sebep tekrarlayan hata sınıfı #1 + #4'ün birleşimi (DEVAM §6):
   orta sütun `1fr` ve `1fr`in örtük alt sınırı `auto`dur, yani
   `min-content`. `.x-footer__links` beş `max-content` sütun taşıdığı
   için o iz KÜÇÜLEMİYOR; üç sütun + 2×90 px boşluk kabı 42 px aşıyordu.

   Neden yalnız 1200 px'te: masaüstünde klasik kaydırma çubuğu 15 px yer
   kapıyor, medya sorgusu ise 1200'ü görüyor. Kap 1185 px kalıyor ve
   90 px'lik uç boşlukları o bantta artık sığmıyor.

   Çözüm 90 px'i SİLMEK değil — o İlker'in ölçüsü ve geniş ekranda
   aynen duruyor. Yalnızca sığmadığı dar bantta daraltılıyor.
   Ölçüm: 47 taşma -> 5 (kalan 5'i index ve search sayfalarının mobil
   kusuru, ayrı ve prototipte de var). */
@media (max-width:1260px){
  .x-footer__grid{--x-footer-edge:48px}
}
.x-footer__links{
  display:grid;
  grid-template-columns:repeat(5,max-content);
  /* `space-between` yerine `space-evenly`: sütunlar birbirine YAKLAŞIR,
     artan genişlik uçlara da pay edilir (İlker: "aralarını daralt"). */
  justify-content:space-evenly;
  column-gap:18px;                 /* en az boşluk — dip dibe girmesinler */
  row-gap:var(--x-gap);
}
/* Başlık ikon şeridine göre ORTALI (İlker): sola kayık durmasın. */
.x-footer__social{display:flex;flex-direction:column;align-items:center}
/* `margin-top:22px` marka metninin ALTINDAYKEN gerekliydi. Sütun olarak
   sağa taşınınca başlığı Company/Games/... hizasından 22px aşağı
   kaydırıyordu (tarayıcıda ölçüldü). Diğer sütun başlıklarıyla birebir
   aynı ölçüler. */
.x-footer__social-title{
  font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--x-ink);margin-top:0;margin-bottom:16px;white-space:nowrap;
}
.x-footer__about{max-width:300px}

.x-footer__about p{font-size:12.5px;color:var(--x-muted);margin-top:16px;line-height:1.7}
/* ⚠️ SEÇİCİ `h3` — işaretlemeyle BİRLİKTE değişti (2026-08-19).
   Altbilgi sütun başlıkları `h4`tü ve sayfadaki son başlık `h2` olduğu
   için 41 sayfanın 41'inde `h2 → h4` SEVİYE ATLAMASI vardı (WCAG 1.3.1;
   ekran okuyucu belge planını yanlış kuruyordu). Etiket `h3` oldu.
   Biçem etiketle yazıldığı için seçici de değişmek ZORUNDAYDI — yoksa
   başlıklar biçemsiz kalırdı. Görünen tasarım aynı: ölçüldü. */
.x-footer__col h3{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--x-ink);margin-bottom:14px;
}
.x-footer__col li+li{margin-top:9px}
.x-footer__col a{font-size:12.5px;color:var(--x-muted);transition:color var(--x-t)}
.x-footer__col a:hover{color:var(--x-primary)}
/* İkonlar büyütüldü (İlker, 2026-08-13): 34px kutular altbilgide fazla
   siliktı. 44px kutu + 20px simge. */
.x-social-row{display:flex;gap:11px;margin-bottom:16px}
.x-social-row a{
  width:44px;height:44px;border-radius:3px;display:grid;place-items:center;
  border:1px solid var(--x-border);color:var(--x-body);transition:all var(--x-t);
}
.x-social-row a svg{width:20px;height:20px}
/* Üstüne gelince arkada MOR HÂLE (İlker, 2026-08-14 — xareth.com'daki
   davranışın aynısı: `0 0 20px` yayılım, %22 opaklık, 3px kalkış).
   Mevcut dolu mor zemin KORUNDU; İlker yalnızca hâleyi istedi, dolguyu
   kaldırmayı değil. Referansta kutu açık kalıp yalnızca simge moraran
   bir varyant var; istenirse tek satırla ona geçilir. */
.x-social-row a:hover{
  background:var(--x-primary);border-color:var(--x-primary);color:#fff;
  transform:translateY(-3px);
  box-shadow:0 0 20px rgba(var(--x-primary-rgb),.42);
}
.x-newsletter{display:flex;gap:7px;margin-top:12px}
.x-newsletter input{
  flex:1;min-width:0;padding:10px 13px;border:1px solid var(--x-border-strong);
  border-radius:var(--x-radius-xs);background:#FBFBFE;font-size:12.5px;
}
.x-newsletter input:focus{outline:none;border-color:var(--x-primary);box-shadow:0 0 0 3px rgba(107,76,240,.13)}
.x-newsletter button{
  width:40px;flex:none;border-radius:var(--x-radius-xs);background:var(--x-grad);
  color:#fff;display:grid;place-items:center;transition:all var(--x-t);
}
.x-newsletter button:hover{box-shadow:var(--x-shadow-primary)}
/* Telif satırı sayfaya ortalanır (İlker, 2026-08-11); yasal bağlantılar
   da altında ortalı durur. */
.x-footer__bottom{
  margin-top:36px;padding-block:18px;border-top:1px solid var(--x-border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;
  font-size:11.5px;color:var(--x-muted);
}
.x-footer__bottom nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.x-footer__bottom a:hover{color:var(--x-primary)}

/* ==========================================================================
   15. GAMES SAYFASI
   ========================================================================== */
.x-filterbar{
  display:flex;align-items:center;gap:10px;padding:12px;
  background:var(--x-surface);border:1px solid var(--x-border);
  border-radius:var(--x-radius);box-shadow:var(--x-shadow-sm);
}
/* Düğmeler panele EŞİT yayılır (İlker, 2026-08-13): eskiden `gap:7px` ile
   sola yığılıyor, şeridin sağında büyük bir boşluk kalıyordu. Artık her
   düğme kalan genişliği eşit paylaşır (`flex:1`), aralarındaki boşluk da
   eşit. `min-width:0` + `white-space:nowrap` ile metin taşmaz; şerit
   sığmazsa yine yatay kayar. */
.x-filters{display:flex;gap:10px;overflow-x:auto;flex:1 1 0;min-width:0;scrollbar-width:none}
.x-filters>.x-filter{flex:1 1 0;min-width:max-content;justify-content:center}
.x-filters::-webkit-scrollbar{display:none}
/* Sıralama listesi form alanlarından width:100% miras alıyor ve filtre
   şeridini 0 piksele sıkıştırıyordu (staging'de ölçüldü: .x-filters 0px,
   .x-select 1819px). Filtre çubuğundaki liste sabit genişlikte kalır. */
.x-filterbar .x-select{flex:none;width:auto;min-width:150px;max-width:220px}
.x-filter{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;flex:none;
  border-radius:var(--x-radius-xs);border:1px solid var(--x-border);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--x-body);background:var(--x-surface);transition:all var(--x-t);
}
.x-filter:hover{border-color:var(--x-primary);color:var(--x-primary)}
.x-filter[aria-pressed="true"]{background:var(--x-grad);border-color:transparent;color:#fff;box-shadow:var(--x-shadow-primary)}
.x-select{
  padding:10px 34px 10px 14px;border-radius:var(--x-radius-xs);
  border:1px solid var(--x-border-strong);background:var(--x-surface);
  font-size:11.5px;font-weight:600;color:var(--x-body);flex:none;
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A4A6C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.x-select:focus{outline:none;border-color:var(--x-primary)}

.x-games{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--x-gap)}
.x-game{overflow:hidden;display:flex;flex-direction:column}
.x-game__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--x-ink)}
.x-game__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.x-game:hover .x-game__media img{transform:scale(1.07)}
.x-game__title{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;
  font-family:var(--x-font-display);font-weight:800;font-size:clamp(1rem,1.5vw,1.35rem);
  text-transform:uppercase;letter-spacing:.03em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.7);pointer-events:none;line-height:1.1;
}
.x-game__title small{display:block;font-size:.44em;letter-spacing:.3em;opacity:.86;margin-bottom:5px;font-weight:600}
.x-badge{
  position:absolute;left:10px;bottom:10px;z-index:2;padding:5px 10px;border-radius:3px;
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;
}
/* `.x-badge` oyun kartında GÖRSELİN üstüne mutlak konumlanmak için yazıldı.
   İskelet sayfalarda satır içi bir etiket olarak kullanılınca konumlanacak
   atası olmadığı için sayfanın sol altına kaçıyordu (careers.html'de
   "COMMUNITY" rozeti ekranın köşesinde duruyordu — ekran görüntüsüyle
   görüldü, 2026-08-13). Panel/kart doğrudan çocuğu olduğunda satır içi
   davranır. Oyun kartlarındaki rozet `.x-game__media` içindedir,
   bu kuraldan etkilenmez. */
.x-panel > .x-badge,
.x-eco__card > .x-badge{position:static;display:inline-block;align-self:flex-start}
.x-badge--dev{background:var(--x-primary)}
.x-badge--pre{background:#2A6BD4}
.x-badge--con{background:#4A4A6C}
.x-badge--live{background:#1E9E63}
.x-game__body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.x-game__d{font-size:12.5px;color:var(--x-muted);line-height:1.6;flex:1}
.x-game__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.x-game__plat{display:flex;gap:9px;color:var(--x-body);opacity:.72}
.x-fav-sm{width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:3px;color:var(--x-muted);transition:all var(--x-t)}
.x-fav-sm:hover{color:var(--x-primary);background:var(--x-primary-tint)}
.x-fav-sm[aria-pressed="true"]{color:var(--x-primary)}
.x-fav-sm[aria-pressed="true"] svg{fill:currentColor}

.x-loadmore{display:flex;justify-content:center;margin-top:32px}
.x-empty{
  grid-column:1/-1;padding:56px 20px;text-align:center;color:var(--x-muted);
  border:1px dashed var(--x-border-strong);border-radius:var(--x-radius);
}

/* İstatistik + bülten satırı */
.x-statsrow{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--x-gap);align-items:stretch}
.x-statsrow>.x-statsrow__item{grid-column:span 1}
.x-statsrow>.x-follow{grid-column:span 2}
/* ÜÇ ÖLÇÜT + PANEL (`games`, İlker 2026-08-19: "50+ Team Members" silindi).
   Sütun sayısı öğe sayısından gelir — 3×1 + panel 2 = 5. Taban kural
   (6 sütun) DEĞİŞTİRİLMEDİ: `x-statsrow`u `about` da kullanıyor ve orada
   dört ölçüt var (§6 hata sınıfı 30 — ortak dosya iki sayfayı birden
   değiştirir). Ölçüldü: 6 sütun bırakılsaydı 1600 px'te satır sonunda
   316 px boşluk kalırdı. Öğe:panel oranı 1:2 olarak korunuyor. */
.x-statsrow--3{grid-template-columns:repeat(5,1fr)}
/* DÖRT ÖLÇÜT, PANEL YOK (`about`). Taban kural 6 sütun ve `games`in
   takip paneli 2 sütun tutuyor; `about`ta panel olmadığı için satırın
   sağında 515 px (1600 px'te) ve 408 px (1280 px'te) BOŞLUK kalıyordu.
   Kapı bunu göremiyordu: ne taşma var ne küçülme — satır yalnızca
   dolmuyordu. ≤1080 px'te taban zaten 2 sütun, dördü tam oturuyor. */
.x-statsrow--4{grid-template-columns:repeat(4,1fr)}
.x-statsrow__item{display:flex;align-items:center;gap:14px;padding:20px;background:var(--x-surface);
  border:1px solid var(--x-border);border-radius:var(--x-radius)}
.x-statsrow__ico{color:var(--x-primary);flex:none}
.x-statsrow__v{font-family:var(--x-font-display);font-weight:800;font-size:27px;color:var(--x-ink);line-height:1}
.x-statsrow__l{font-size:11px;color:var(--x-muted);margin-top:5px;line-height:1.35}
.x-follow{
  position:relative;overflow:hidden;border-radius:var(--x-radius);color:#fff;
  background:var(--x-grad-cta);padding:22px;display:flex;flex-direction:column;justify-content:center;
}
/* Görsel TAM OPAKLIKTA ve panele TAM OTURUR. Eskiden `opacity:.4` +
   `screen` ile soluyordu; ayrıca panel `cta-band.jpg`ten (1920x360 =
   5.33:1) çok daha "kare" olduğu için `cover` görselin dört yanını
   kırpıyordu (İlker: "alttan üstten kısık yanlardan da kısık").
   `object-fit:cover` + `object-position:top` ile panel her zaman dolar,
   taşma yalnızca alttan olur — buraya hangi görsel konursa konsun. */
.x-follow>*{position:relative;z-index:2}
/* ⚠️ SIRA ÖNEMLİ — yukarıdaki `.x-follow>*` kuralı arka planı da
   `position:relative` yapıyordu. Görsel arka plan olmaktan çıkıp AKIŞA
   giriyor, panelin üstünde bir blok gibi duruyordu; İlker'in gördüğü
   "alttan üstten kısık, yanlardan da kısık" görüntü buydu. Üstelik
   panelin YÜKSEKLİĞİ de görselden geliyordu: daha "kare" bir görsel
   konunca panel 250px'ten 576px'e fırladı ve yanındaki 4 istatistik
   kartını da büyüttü (2026-08-13). İki sınıflı seçici (0,2,0) `>*`
   kuralını sıra bağımsız yener. */
.x-follow .x-follow__bg{position:absolute;inset:0;z-index:0}
.x-follow__bg img{width:100%;height:100%;object-fit:cover;object-position:top}
.x-follow>h3,.x-follow>p{text-shadow:0 2px 14px rgba(7,8,26,.9), 0 1px 4px rgba(7,8,26,.8)}
.x-follow h3{font-family:var(--x-font-display);font-weight:800;font-size:17px;text-transform:uppercase;line-height:1.2}
.x-follow p{font-size:12.5px;color:rgba(255,255,255,.86);margin-top:8px}
.x-follow .x-btn{margin-top:14px;align-self:flex-start}

/* ==========================================================================
   16. CONTACT SAYFASI
   ========================================================================== */
.x-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x-gap)}
.x-contact-grid>.x-panel{padding:24px}

.x-cinfo{display:flex;flex-direction:column}
.x-cinfo__item{display:flex;gap:14px;padding-block:16px}
.x-cinfo__item+.x-cinfo__item{border-top:1px solid var(--x-border)}
.x-cinfo__ico{
  width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:4px;
  background:var(--x-primary-tint);color:var(--x-primary);
}
/* Kurgusal iletişim bilgileri İlker isteğiyle silindi (2026-08-13);
   ikonlar ve ayraç çizgileri duruyor. Panelin YÜKSEKLİĞİ değişmesin diye
   boş satırlar yer tutar: `data-lines` kaç satırlık yer ayrılacağını
   söyler (adres 3, diğerleri 2). Gerçek bilgi girilince yer tutucu
   kendiliğinden devre dışı kalır — dolu elemana kural işlemez. */
.x-cinfo__body{flex:1;min-width:0}
.x-cinfo__t{font-size:12.5px;font-weight:700;color:var(--x-ink);line-height:1.6}
.x-cinfo__t:empty{min-height:1.6em}
.x-cinfo__v{font-size:12.5px;color:var(--x-body);margin-top:5px;line-height:1.6}
.x-cinfo__v:empty{min-height:calc(1.6em * var(--x-cinfo-lines,2))}
.x-cinfo__v[data-lines="3"]{--x-cinfo-lines:3}
.x-cinfo__v a{color:var(--x-primary);font-weight:600}
.x-cinfo__v a:hover{text-decoration:underline}

.x-map{position:relative;margin-block:18px;flex:1;min-height:190px;display:grid;place-items:center}
.x-map svg{width:100%;height:auto;color:#CFCFE4}
.x-map__pin{
  position:absolute;width:13px;height:13px;border-radius:50%;
  background:var(--x-primary);border:2.5px solid #fff;box-shadow:0 0 0 3px rgba(107,76,240,.26);
  transform:translate(-50%,-50%);cursor:pointer;
}
.x-map__pin::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--x-primary);opacity:0;animation:x-ping 2.4s ease-out infinite;
}
@keyframes x-ping{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.1);opacity:0}}
.x-offices{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.x-office{padding:14px 10px;text-align:center;border:1px solid var(--x-border);border-radius:var(--x-radius-sm);transition:all var(--x-t)}
.x-office:hover{border-color:#CFC4F5;background:#FBFAFF;transform:translateY(-3px)}
.x-office__ico{color:var(--x-primary);margin-inline:auto;margin-bottom:9px}
/* Kurgusal ofis adları/kodları silindi; konum ikonu duruyor. Kart
   ÖLÇÜSÜ değişmesin diye üç satır da yerini korur. */
.x-office__r{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--x-ink);line-height:1.5}
.x-office__r:empty{min-height:1.5em}
.x-office__c{font-size:11px;color:var(--x-muted);margin-top:6px;line-height:1.5}
.x-office__c:empty{min-height:1.5em}
.x-office__z{font-size:10.5px;color:var(--x-primary);margin-top:3px;font-weight:600;line-height:1.5}
.x-office__z:empty{min-height:1.5em}

/* Form */
.x-form{display:flex;flex-direction:column;gap:15px;margin-top:20px}
.x-form__row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.x-field label{display:block;font-size:11.5px;font-weight:700;color:var(--x-ink);margin-bottom:7px}
.x-field label .req{color:#D62F4B}
.x-input,.x-textarea,.x-field .x-select{
  width:100%;padding:12px 14px;border:1px solid var(--x-border-strong);
  border-radius:var(--x-radius-xs);background:#FBFBFE;font-size:13.5px;color:var(--x-ink);
  transition:border-color var(--x-t),box-shadow var(--x-t);
}
.x-field .x-select{padding-right:36px}
.x-input::placeholder,.x-textarea::placeholder{color:#9A9AB4}
.x-input:focus,.x-textarea:focus,.x-field .x-select:focus{
  outline:none;border-color:var(--x-primary);box-shadow:0 0 0 3px rgba(107,76,240,.13);background:#fff;
}
.x-input[aria-invalid="true"],.x-textarea[aria-invalid="true"],.x-select[aria-invalid="true"]{border-color:#D62F4B;background:#FFF7F8}
.x-textarea{min-height:112px;resize:vertical}
.x-error{font-size:11.5px;color:#D62F4B;margin-top:6px;display:none}
.x-error[data-show="true"]{display:block}
.x-form__note{font-size:11.5px;color:var(--x-muted);text-align:center}
.x-form__note a{color:var(--x-primary);font-weight:600}
.x-formmsg{padding:13px 16px;border-radius:var(--x-radius-xs);font-size:13px;font-weight:600;display:none}
.x-formmsg[data-show="true"]{display:block}
.x-formmsg--ok{background:#E9F8F0;color:#12724A;border:1px solid #B7E5CD}
.x-formmsg--err{background:#FDECEF;color:#A31832;border:1px solid #F5C2CD}

/* Partner / teknoloji bandı */
.x-partner{background:var(--x-navy);border-radius:var(--x-radius);color:#fff;overflow:hidden}
.x-partner__inner{padding:34px 38px;display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between}
.x-partner__copy{max-width:430px}
.x-partner__t{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.x-partner__d{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:10px;line-height:1.65}
/* Logolar İlker isteğiyle büyütüldü (2026-08-13): 34px ikon + 9.5px yazı
   bandın içinde kaybolmuştu. Referans görseldeki gibi belirgin ve eşit
   aralıklı bir logo şeridi. */
.x-partner__logos{display:flex;align-items:center;gap:clamp(28px,3.4vw,64px);flex-wrap:wrap;justify-content:flex-end}
.x-plogo{display:flex;flex-direction:column;align-items:center;gap:11px;color:#fff;
  transition:opacity var(--x-t),transform var(--x-t)}
.x-plogo:hover{opacity:1;transform:translateY(-2px)}
.x-plogo__n{font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:700}
.x-plogo svg{width:52px;height:52px}

/* Sosyal kartlar */
/* Facebook eklenince öğe sayısı 6'dan 7'ye çıktı. §19'daki sütun sayıları
   (6/3/2/1) 6'nın bölenleriydi; 7 ASAL olduğu için hangi sütun sayısı
   seçilirse seçilsin son satırda boş hücre kalıyor. `.x-eco` (5 öğe, o da
   asal) için kullanılan flex+grow deseninin aynısı: son satırdaki kartlar
   kalan genişliği paylaşır, boşluk kalmaz. §19'daki `.x-socials` kuralları
   ızgara olmadığı için artık etkisiz — orada bırakıldı, `.x-news` ile aynı
   satırı paylaşıyorlar ve onun için hâlâ geçerliler. */
/* TEK SIRA (İlker, 2026-08-13: "referans görseldeki kart görünümünün
   aynısı"). Referansta kartlar tek şeritte, kompakt ve eşit; bizde
   4+3 diye iki satıra kırılıyor ve kartlar 443px'e şişip kabalaşıyordu.
   7 öğe tek satırda `1fr` ile bölününce hem boş hücre kalmaz hem de
   kart genişliği referanstakine iner. Dar ekranda flex+grow'a düşer. */
.x-socials{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
@media (max-width:1240px){
  .x-socials{display:flex;flex-wrap:wrap;gap:var(--x-gap)}
  .x-socials>*{flex:1 1 calc((100% - 3*var(--x-gap))/4);min-width:var(--x-min-social)}
}
.x-social{display:flex;gap:12px;align-items:flex-start;padding:16px 14px}
.x-social__ico{width:38px;height:38px;flex:none;border-radius:4px;display:grid;place-items:center;color:#fff}
/* Parçalar `<span>`, yani satır içi. `display:block` olmadan ad, açıklama
   ve kullanıcı adı yan yana akıp birbirine giriyordu — "DiscordJoin our
   communitydiscord.gg/xareth" (tarayıcıda görüldü, 2026-08-13). Aynı hata
   `.x-method` kartlarında da vardı. */
.x-social__t,.x-social__d,.x-social__h{display:block}
.x-social__t{font-size:12.5px;font-weight:700;color:var(--x-ink)}
.x-social__d{font-size:11px;color:var(--x-muted);margin-top:4px;line-height:1.45}
.x-social__h{font-size:11px;color:var(--x-primary);margin-top:5px;font-weight:600;word-break:break-all}

/* FAQ */
.x-faq{display:flex;flex-direction:column;gap:10px}
.x-faq__item{border:1px solid var(--x-border);border-radius:var(--x-radius-sm);overflow:hidden;background:#FBFBFE;transition:all var(--x-t)}
.x-faq__item[data-open="true"]{background:#F7F5FF;border-color:#CFC4F5}
.x-faq__q{
  width:100%;display:flex;align-items:center;gap:11px;padding:14px 16px;text-align:left;
  font-size:13px;font-weight:600;color:var(--x-ink);
}
.x-faq__q .qico{color:var(--x-primary);flex:none}
.x-faq__q .chev{margin-left:auto;flex:none;color:var(--x-muted);transition:transform var(--x-t)}
.x-faq__item[data-open="true"] .chev{transform:rotate(180deg);color:var(--x-primary)}
.x-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}
.x-faq__item[data-open="true"] .x-faq__a{grid-template-rows:1fr}
.x-faq__a>div{overflow:hidden}
.x-faq__a p{padding:0 16px 16px 43px;font-size:12.5px;color:var(--x-body);line-height:1.7}

/* Galeri */
.x-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--x-gap)}
.x-gallery a{position:relative;border-radius:var(--x-radius-sm);overflow:hidden;aspect-ratio:3/2;display:block;background:var(--x-ink)}
.x-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.x-gallery a:hover img{transform:scale(1.07)}
.x-gallery a::after{
  content:"";position:absolute;inset:0;background:rgba(107,76,240,0);transition:background var(--x-t);
}
.x-gallery a:hover::after{background:rgba(107,76,240,.18)}

/* ==========================================================================
   16b. DETAY SAYFALARI (oyun / haber / yasal)
   ========================================================================== */
.x-crumbs ol{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--x-muted)}
.x-crumbs li+li::before{content:"/";margin-right:8px;opacity:.55}
.x-crumbs a:hover{color:var(--x-primary)}
.x-crumbs [aria-current]{color:var(--x-ink);font-weight:600}

.x-gamehero{position:relative;overflow:hidden;background:#07081A;color:#fff}
.x-gamehero__bg{position:absolute;inset:0}
/* Kırpma YALNIZCA ALTTAN (İlker kuralı). Eskiden varsayılan `center`
   idi ve görselin hem üstü hem altı gidiyordu. Banner görselleri artık
   alanın oranında üretildiği için pratikte kırpma da kalmadı. */
.x-gamehero__bg img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Perde HAFİFLETİLDİ (İlker, 2026-08-13): eskiden solda .96 opaklıkla
   başlıyordu, yani oyun sanatının yarısı fiilen görünmüyordu. Artık
   yalnızca metnin oturduğu sol kenarda ince bir geçiş var; metin
   okunurluğunu asıl gölge sağlıyor (.x-gamehero__inner). */
.x-gamehero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,8,26,.62) 0%,rgba(7,8,26,.28) 34%,rgba(7,8,26,0) 66%);
}
.x-gamehero__inner{text-shadow:0 2px 16px rgba(7,8,26,.92), 0 1px 4px rgba(7,8,26,.8)}
.x-gamehero__inner .x-btn,
.x-gamehero__inner .x-badge,
.x-gamehero__inner .x-tag{text-shadow:none}
.x-gamehero__inner{position:relative;z-index:2;padding-block:clamp(40px,6vw,72px)}
.x-gamehero .x-crumbs ol{color:rgba(255,255,255,.62)}
.x-gamehero .x-crumbs a:hover{color:#B9A6FF}
.x-gamehero .x-crumbs [aria-current]{color:#fff}

/* Oyun detay sayfasının içerik alanı. İlker ölçüsü (2026-08-13):
   1800x800. Eskiden `.x-detail` sınıfı, kaldırılan ayrıntı penceresinin
   kurallarıyla ÇAKIŞIYOR ve tam ekran örtüye dönüşüyordu — İlker'in
   "beyaz sayfa çok büyük, ekrana sığmıyor" dediği şey buydu.
   Yükseklik SINIR'dır, kırpma değil: metin taşarsa panel kendi içinde
   kayar, hiçbir cümle kaybolmaz. */
.x-detail{
  display:grid;grid-template-columns:1.9fr 1fr;gap:var(--x-gap);align-items:start;
  max-width:1800px;margin-inline:auto;
}
.x-detail>.x-panel{max-height:800px;overflow-y:auto}

/* ---------- Haber detay kapağı ----------
   Oyun detayındaki `.x-gamehero` ile aynı dil, farklı ışık: orada gradient
   SOLA ağırlıklı (metin solda, sanat sağda nefes alır); haberde metin
   kapağın ALTINDA durduğu için gradient AŞAĞI ağırlıklı. Kapak metni
   `--x-read` genişliğinde hizalanır, yani başlık ile altındaki gövde
   metni aynı sol kenarı paylaşır. */
/* Kapak alanının ORANI SABİT ve kaynak dosyanın oranıyla aynı
   (`tools/mk_proto_art.py` kapakları 1920x720 üretir). Eskiden yükseklik
   `clamp(340px,42vw,520px)` idi: alan oranı ekran genişliğine göre
   değişiyordu ve 1920x520 (3.69:1) kutuya 2.667:1'lik görsel ortadan
   oturunca ÜSTTEN VE ALTTAN kırpılıyordu (İlker bildirdi, 2026-08-13).
   Oran eşitlenince tarayıcının kırpacak bir şeyi kalmaz; yine de kural
   olarak `object-position:top` — taşma olursa YALNIZCA ALTTAN kesilir. */
.x-newshero{
  position:relative;overflow:hidden;background:#07081A;color:#fff;
  aspect-ratio:var(--x-cover-ratio);display:flex;align-items:flex-end;
}
.x-newshero__bg{position:absolute;inset:0}
.x-newshero__bg img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Perde ÖLÇÜLEREK yeniden ayarlandı (2026-08-13). Eskiden üstte .74
   opaklıkla başlıyordu; kapak 520px'ken metin oraya denk geldiği için
   sorun görünmüyordu. Kapak 714px'e çıkınca perde bütün sanatı
   bastırıyordu — tarayıcıda kapak düpedüz lacivert bir blok gibi
   duruyordu, görsel yüklenmemiş sanılıyordu (deneyle kanıtlandı: perde
   kapatılınca sanat eksiksiz çıktı).
   Artık yalnızca METNİN OTURDUĞU alt şerit karartılıyor; üstte header'ın
   okunması için çok hafif bir kararma var, orta bölge tamamen açık. */
.x-newshero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(7,8,26,.30) 0%,
    rgba(7,8,26,.02) 16%,
    rgba(7,8,26,0)   48%,
    rgba(7,8,26,.52) 76%,
    rgba(7,8,26,.90) 100%);
}
/* Başlık bloğu ORTALI (İlker, 2026-08-13) ve altındaki gövde alanıyla
   aynı genişlikte — ikisi aynı kenarları paylaşır. */
.x-newshero__inner{
  position:relative;z-index:2;width:100%;
  /* Gövde alanıyla AYNI oluk (16px) — başlık bloğu ile metin bloğu
     birebir aynı kenarları paylaşsın. */
  max-width:calc(var(--x-article-w) + 32px);
  padding-inline:16px;
  padding-block:clamp(30px,4.4vw,54px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  /* Perde hafifletilince metin hareketli sanatın üzerine düştü. Blok
     karartma yerine gölge: görsel açık kalır, yazı yine okunur. */
  text-shadow:0 2px 14px rgba(7,8,26,.9), 0 1px 3px rgba(7,8,26,.75);
}
.x-newshero__cat{
  text-shadow:none;background:rgba(7,8,26,.55);border-color:rgba(255,255,255,.34);
}
.x-newshero .x-crumbs ol{justify-content:center}
.x-newshero__meta{justify-content:center}

/* Dar ekranda kapak oranı SABİT kalsın diye metin görselin ÜSTÜNE değil
   ALTINA akar. Oranı korumak için yüksekliği zorlasaydık 390px'lik bir
   telefonda kapak 146px olurdu ve başlık okunmazdı. */

.x-newshero .x-crumbs ol{color:rgba(255,255,255,.66)}
.x-newshero .x-crumbs a:hover{color:#B9A6FF}
.x-newshero .x-crumbs [aria-current]{color:#fff}
.x-newshero__cat{
  display:inline-block;margin-top:18px;padding:5px 13px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  font-family:var(--x-font-body);font-weight:700;font-size:10px;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;
}
.x-newshero__t{
  font-family:var(--x-font-display);font-weight:800;color:#fff;
  margin-top:16px;font-size:clamp(1.7rem,3.5vw,2.7rem);
  line-height:1.08;letter-spacing:-.012em;
}
.x-newshero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:18px;
  font-size:12px;color:rgba(255,255,255,.74);
}
.x-newshero__meta span{display:inline-flex;align-items:center;gap:7px}
.x-newshero__meta svg{opacity:.72;flex:none}

.x-prose{color:var(--x-body);font-size:14.5px;line-height:1.78}
.x-prose>*+*{margin-top:15px}
.x-prose h2{font-family:var(--x-font-serif);font-size:17px;color:var(--x-ink);
  letter-spacing:.03em;margin-top:28px}
.x-prose h3{font-size:15px;font-weight:700;color:var(--x-ink);margin-top:22px}
.x-prose strong{color:var(--x-ink)}
.x-prose a{color:var(--x-primary);font-weight:600;text-decoration:underline}
.x-prose ul{list-style:disc;padding-left:22px}
.x-prose li+li{margin-top:7px}
.x-prose code{background:var(--x-primary-tint);color:var(--x-primary-strong);
  padding:2px 6px;border-radius:3px;font-size:12.5px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- Makale gövdesi ----------
   `.x-prose` kart ve panel içi KISA metin için ayarlı (14.5px). Haber
   gövdesi uzun okuma: punto ve satır aralığı yükselir. Satır uzunluğu
   `.x-container--read` (--x-read) ile sınırlanır.

   SIRA ÖNEMLİ: bu blok temel `.x-prose` kurallarından SONRA gelmeli.
   Önce yazıldığında özgüllük eşit olduğu için temel kural kazanıyor ve
   punto hiç uygulanmıyordu (tarayıcıda 14.5px ölçüldü, 2026-08-13). */
/* Punto ÖLÇÜLEREK seçildi (1920px, Inter, 720px sütun):
       14.5px -> 107 karakter/satır
       17px   ->  91
       20px   ->  75   <- seçilen
   Okunur aralık 60-75; 720px sütunda 20px altına inince satır o aralığın
   üstüne çıkıyor. Sütunu daraltmak yerine punto büyütüldü, çünkü 720px
   İlker'in verdiği ölçü.
   Punto AKIŞKAN: sabit 20px dar ekranda satırı 39 karaktere düşürüyor,
   sabit 17px ise tablet bandında 89 karaktere çıkarıyordu (753px'te
   ölçüldü — sütun 717px'e büyüyor ama punto küçük kalıyor). clamp ile
   punto sütunla birlikte büyür. */
/* Gövde alanı en az `--x-article-h` (470px) yüksekliğinde. SABİT yükseklik
   verilmedi: uzun bir haber taşarsa metin kırpılır ve okunamaz hale gelir.
   `min-height` ile alan her zaman en az istenen ölçüde olur, içerik
   büyürse alan da büyür — hiçbir cümle kaybolmaz. İçerik azsa dikeyde
   ortalanır, böylece 470px'lik alan boş bir şerit gibi durmaz. */
.x-prose--article{
  min-height:var(--x-article-h);
  display:flex;flex-direction:column;justify-content:center;
}
.x-prose--article{font-size:clamp(17px,calc(1.4vw + 8.5px),20px);line-height:1.75}
.x-prose--article>*+*{margin-top:22px}
.x-prose--article h2{font-size:clamp(21px,calc(1.5vw + 9.5px),24px);margin-top:42px}
.x-prose--article h3{font-size:clamp(18px,calc(1vw + 10.5px),20px);margin-top:32px}
.x-prose--article .x-lede{
  font-size:clamp(19px,calc(1.7vw + 8.5px),23px);line-height:1.5;
  color:var(--x-ink);font-weight:500;letter-spacing:-.008em;
}
/* ≥1900px'te temel `.x-prose` 78ch'e sıkışıyor; makale sütunu zaten
   --x-read ile sınırlı olduğu için o sınır burada gereksiz ve satırı
   720px'in altına düşürüyordu. §19'daki kural dosyanın SONUNDA olduğu
   için tek sınıflı bir geçersiz kılma yetmez — iki sınıf (0,2,0). */
.x-prose.x-prose--article{max-width:none}

/* Dar ekranda 20px fazla: sütun 343px'e inince satır ~36 karaktere düşüyor
   (ölçüldü, 390px iPhone genişliği). Punto küçülünce satır tekrar 60-75
   aralığına oturur. */

/* Makalenin bittiğini gösteren ince ayraç + aksiyon şeridi. */
.x-article-foot{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--x-border);
}
.x-article-foot__spacer{flex:1}

.x-specs{margin-top:6px}
.x-spec{display:flex;justify-content:space-between;gap:12px;padding-block:11px;font-size:12.5px}
.x-spec+.x-spec{border-top:1px solid var(--x-border)}
.x-spec__k{color:var(--x-muted)}
.x-spec__v{color:var(--x-ink);font-weight:600;text-align:right}

/* ⚠️ SINIF ÇAKIŞMASI — KÖK NEDEN (2026-08-13)
   `.x-video` iki AYRI bileşen için kullanılıyordu: (a) oyun detay
   sayfasındaki sayfa içi fragman kutusu, (b) tam sahne video oynatıcı.
   Oynatıcının kuralları (`position:fixed; inset:0; display:grid; …`)
   dosyanın SONUNDA ve aynı özgüllükte olduğu için sayfa içi kutuya da
   uyguluyordu: kutu TAM EKRAN bir örtüye dönüşüyordu. İlker'in gördüğü
   "ekrana sığmayan, kapatma tuşu olmayan pop-up" buydu — aslında pop-up
   değil, yanlış giydirilmiş bir sayfa bölümüydü.
   Çözüm: oynatıcı kuralları `[role="dialog"]` ile SINIRLANDI. Yalnızca
   `[role]` yetmedi — sayfa içi kutu da `role="group"` taşıyor (ölçüldü).
   Sayfa içi kutu aşağıdaki kuralları alır.

   Ayrıca kutu 900x506'lık görseli 1809px'e, yani 2 KATINA büyütüyordu.
   Artık normal bir video çerçevesi: en fazla 960px, 16:9, ortalı. */
.x-video{
  /* İlker ölçüsü (2026-08-13): 1800x800. Eskiden kutu 1905x1000 basıyordu. */
  position:relative;margin:24px auto 0;max-width:1800px;aspect-ratio:1800/800;
  border-radius:var(--x-radius);overflow:hidden;background:var(--x-ink);
}
/* Önizleme görseli SOLDURULMUYOR (İlker, 2026-08-13). PLAY tuşunun
   okunurluğunu kendi gölgesi sağlıyor. */
.x-video img{width:100%;height:auto;display:block}
.x-video__play{
  position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;
  display:grid;place-items:center;background:var(--x-grad);color:#fff;
  box-shadow:var(--x-shadow-primary);transition:transform var(--x-t);
}
.x-video__play:hover{transform:scale(1.09)}

.x-notice{
  margin-top:20px;padding:15px 18px;border-radius:var(--x-radius-sm);
  background:#FFF9E8;border:1px solid #F0DFA8;color:#6B5410;
  font-size:12.5px;line-height:1.65;
}
.x-notice strong{color:#4A3A08}
.x-notice code{background:rgba(0,0,0,.06);padding:2px 5px;border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* ==========================================================================
   17. Çerez onayı (KVKK/GDPR)
   ========================================================================== */
.x-cookie{
  position:fixed;z-index:180;
  /* Çentikli/ana-ekran-çubuklu telefonlarda katman çubuğun altında
     kalıyordu; güvenli alan kadar içeri alındı. env() desteklemeyen
     tarayıcıda 0 döner, davranış eskisiyle aynı. */
  left:calc(16px + env(safe-area-inset-left));
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  max-width:520px;background:#fff;border:1px solid var(--x-border-strong);
  border-radius:var(--x-radius);box-shadow:var(--x-shadow-lg);padding:20px;
  transform:translateY(140%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.x-cookie[data-open="true"]{transform:none}
.x-cookie__t{font-size:14px;font-weight:800;color:var(--x-ink);display:flex;align-items:center;gap:9px}
.x-cookie__d{font-size:12.5px;color:var(--x-body);margin-top:10px;line-height:1.65}
.x-cookie__d a{color:var(--x-primary);font-weight:600;text-decoration:underline}
.x-cookie__opts{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.x-cookie__opt{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:var(--x-body)}
.x-cookie__opt input{margin-top:3px;accent-color:var(--x-primary);width:15px;height:15px}
.x-cookie__opt b{color:var(--x-ink);font-size:12.5px}
.x-cookie__opt small{display:block;color:var(--x-muted);font-size:11px;margin-top:2px}
.x-cookie__actions{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.x-cookie__actions .x-btn{flex:1;min-width:120px}

/* ==========================================================================
   18. Yardımcılar / animasyon
   ========================================================================== */
/* GÖRÜNÜME GİRİNCE AÇILMA — İLERİCİ ZENGİNLEŞTİRME (İlker, 2026-08-19).
   ⚠️ GİZLİ BAŞLANGIÇ YALNIZ `html.x-js` ALTINDA GEÇERLİDİR.
   Eskiden kural `.x-reveal{opacity:0}` idi ve sınıfı `.is-in` ile açan
   tek şey `xareth.js`ti: betik çalışmazsa karusel, trio, CTA bandı ve
   haber ızgarası KALICI OLARAK GÖRÜNMEZ kalıyordu (ölçüldü: betik
   engellenince ana sayfada 4 blok hiç boyanmadı). Bu bir animasyon
   tercihi değil, içerik görünürlüğü kusuruydu.
   `x-js` sınıfını `<head>`teki satır içi betik daha ilk boyamadan önce
   takar; betik hiç yoksa sınıf da yoktur ve içerik OLDUĞU GİBİ görünür.
   Ölçü, yerleşim ve W/H değişmez — yalnız `opacity`/`transform`. */
.x-js .x-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.x-js .x-reveal.is-in{opacity:1;transform:none}
.x-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:190;
  background:var(--x-ink);color:#fff;padding:13px 22px;border-radius:var(--x-radius-sm);
  font-size:13px;font-weight:600;box-shadow:var(--x-shadow-lg);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.x-toast[data-open="true"]{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce) {
  .x-store,.x-store:hover,.x-social-row a:hover{transform:none;transition:box-shadow .24s ease}

  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}

  /* ⚠️ SEÇİCİ `.x-js` İLE BAŞLAR — özgüllük eşleşmezse bu kural yenilir.
     Gizli başlangıç artık `.x-js .x-reveal` (0,2,0); burada düz
     `.x-reveal` (0,1,0) yazsaydık hareket azaltma isteyen kullanıcıda
     içerik gizli kalırdı. */
  .x-js .x-reveal{opacity:1;transform:none}
}

/* ==========================================================================
   19. Responsive
   Sütun sayıları eleman sayısının BÖLENLERİNDEN seçilir; böylece hiçbir
   çözünürlükte son satırda boş hücre kalmaz. Doğrulaması tools/gate.py
   içindeki check_grid_fill() ile her derlemede yapılır.
   ========================================================================== */
/* --- Izgara sutun sayilari ---------------------------------------------
   Her satirin TAM dolmasi icin sutun sayilari eleman sayisinin bolenlerinden
   secildi. games=12 -> 6/4/2/1 ; news=6 ve socials=6 -> 6/3/2/1 ;
   methods=4 ve offices=4 -> 4/2 ; gallery=3 -> 3/1.
   eco=5 asal oldugu icin flex+grow kullanir (son satir kendini genisletir).
   Boylece hicbir cozunurlukte yarim/bos hucre kalmaz. ------------------- */
@media (min-width:1800px){
  .x-games{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:1500px){
  .x-news{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:1400px){
  .x-nav__link{padding:8px 10px;font-size:11px}
}
@media (max-width:1200px){
  .x-nav__link{padding:8px 9px;font-size:11px}
  .x-nav__link span{display:none}
  .x-carousel__nav--prev{left:6px}
  .x-carousel__nav--next{right:6px}
}
@media (max-width:1180px){
  .x-trio,.x-contact-grid{grid-template-columns:1fr}
  .x-footer__grid{grid-template-columns:1fr;row-gap:30px}
  .x-footer__links{grid-template-columns:repeat(3,max-content);justify-content:start;column-gap:44px}
}
@media (max-width:1080px){
  .x-games{grid-template-columns:repeat(3,1fr)}
  .x-statsrow{grid-template-columns:repeat(2,1fr)}
  /* Üç ölçüt iki sütuna sığmaz: ikinci satırda tek başına kalan kutucuğun
     yanında delik açılırdı. Tek satır, üç sütun. Kural tabandan SONRA
     gelmeli — özgüllük eşit (0,1,0), sırayı kaynak belirler. */
  .x-statsrow--3{grid-template-columns:repeat(3,1fr)}
  .x-statsrow>.x-follow{grid-column:1/-1}
}

@media (max-width:760px) {
  .x-newshero{aspect-ratio:auto;display:block;background:#07081A;min-height:clamp(300px,52vw,420px)}
  .x-newshero__bg{position:relative;aspect-ratio:var(--x-cover-ratio)}
  .x-newshero__bg::after{display:none}
  .x-newshero__inner{padding-block:22px 26px}

  .x-games{grid-template-columns:repeat(2,1fr)}
  .x-news{grid-template-columns:repeat(2,1fr)}

  .x-gallery{grid-template-columns:1fr}
}
@media (max-width:680px){
  .x-games,.x-news{grid-template-columns:1fr}
  .x-offices{grid-template-columns:repeat(2,1fr)}
  .x-statsrow{grid-template-columns:1fr}
  /* İKİ EŞİT SÜTUN (İlker, 2026-08-14, gerçek iPhone): beş sütun tek tek
     alt alta dizilince altbilgi gereksiz yere uzuyordu (ölçüldü: 390px'te
     ~1500px). `max-content` sütunları içeriğe göre büyütüyor ve dar
     ekranda ızgarayı taşırabiliyordu; `minmax(0,1fr)` eşit böler
     (tekrarlayan hata sınıfı #1). Sınır 680px olarak BIRAKILDI —
     681-1180 arasındaki üç sütunlu tablet düzenine dokunulmadı.
     Ölçüm sonrası: 320px'te sütun 134px, 390px'te 169px, kırpma yok,
     altbilgi 1500 -> 1070px. */
  .x-footer__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}

@media (max-width:992px) {
  /* Dar ekranda şerit zaten akışta; sarmalayıcı da akışta kalır. */
  .x-featured--home .x-thumbnav{position:static;left:auto;right:auto;bottom:auto;margin-top:20px}

  :root{--x-section:56px;--x-gutter:22px}
  .x-nav{
    position:fixed;left:0;right:0;top:64px;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;border-bottom:1px solid var(--x-border);
    padding:10px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow:var(--x-shadow-lg);transform:translateY(-130%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
  }
  .x-nav[data-open="true"]{transform:none}
  .x-nav__link{padding:13px 12px;font-size:12.5px}
  .x-nav__link span{display:inline}
  .x-nav__link[aria-current="page"]::after{display:none}
  .x-burger{display:grid}
  /* `.x-nav` burada `position:fixed` oluyor, yani esnek akıştan çıkıyor ve
     `margin-inline:auto` ile eylem kümesini sağa itmeyi bırakıyor. Küme
     900px'te 296'da kalıyor, sağında 589px boşluk duruyordu (ölçüldü).
     Kümenin kendisi sağa itiliyor. */
  .x-header__actions{margin-inline-start:auto}
  .x-header__actions .x-lang,.x-header__actions .x-btn--ghost{display:none}
  .x-hero__copy{max-width:none}
  .x-hero--home .x-hero__media{left:0;opacity:.34}
  .x-hero--home .x-hero__media::before{background:linear-gradient(180deg,rgba(243,243,250,.7),rgba(243,243,250,.94))}
  .x-featured__desc{max-width:none}
  .x-featured__logo{max-width:none}
  .x-featured__thumbs{position:static;max-width:none;margin-top:20px}
  .x-featured--home .x-featured__inner{padding-bottom:32px;min-height:auto}
  .x-featured--home .x-thumb{flex:none;width:104px;min-width:104px}
  /* Portre gizlenince ONA AYRILAN YER DE geri verilmeli. Yoksa
     `.x-di__grid`in `max-width:calc(100% - 208px)` kuralı yürürlükte
     kalıyor ve ızgara 390px telefonda 104px'e sıkışıyordu — kutular
     119px olduğu için kaba sığmıyor, alt alta diziliyorlardı.
     (İlker bildirdi, 2026-08-14, gerçek iPhone.) */
  .x-di__portrait{display:none}
  .x-di__grid{max-width:none}

  /* ÖNE ÇIKAN PANEL — ÇAKIŞMA BANDI ÖLÇÜLDÜ: 769-992px.
     Sebep: bu bandda `.x-featured__thumbs` akışa dönüyor (`position:static`)
     ama `.x-featured__inner` hâlâ `position:absolute;inset:0` ve panelin
     sabit oranı (2.433) yüksekliği kilitliyor. İçerik o kutudan uzun olunca
     taşıp şeridin üstüne biniyor; ilk karttaki 2px BEYAZ kenarlık da
     İlker'in gerçek iPhone'da gördüğü "yazının etrafındaki beyaz kare".
     Ölçüm: 769->159px · 834->182px · 900->209px · 992->247px çakışma;
     1024px'te çakışma YOK (o yüzden sınır 992).
     Çözüm haber kapağındakiyle aynı desen: dar ekranda oran serbest
     bırakılır, iç katman akışa döner, panel içeriği kadar uzar. Arka plan
     görseli mutlak kalmaya devam eder.
     NOT: bu düzeltme önce 768px'e daraltılmıştı — YANLIŞTI, 769-992
     bandını açıkta bırakıyordu. Ölçüm yakaladı. */
  .x-featured--home{aspect-ratio:auto}
  .x-featured--home .x-featured__inner{position:relative;inset:auto}

  .x-partner__inner{flex-direction:column;align-items:flex-start}
  .x-statsrow .x-follow{grid-column:1/-1}
}
@media (max-width:768px){
  /* --- İlker'in gerçek iPhone testinden gelen iki düzeltme (2026-08-14).
     992px yerine BURAYA kondu: 992px'te iki panel yan yana rahat sığıyor
     (ölçüldü: ~600 + ~315px, kırpma yok), gereksiz yere dizüstünü
     değiştirmeyelim. Sınır 768px. --- */
  /* OYUN DETAY — iki panel telefonda yan yana duruyordu (ölçüldü:
     390px'te 225px + 225px). "Game Details" satırları o dar sütuna
     sığmayıp kırpılıyor, panelin İÇİNDE kaydırma gerekiyordu.
     Alt alta indirilince her panel tam genişlik alır. */
  .x-detail{grid-template-columns:minmax(0,1fr)}
  /* Telefonda panel içi kaydırma istenmez: `max-height` sınırı kalkar,
     metin sayfayla birlikte akar. */
  .x-detail>.x-panel{max-height:none;overflow:visible}
  :root{
    --x-section:44px;--x-gap:14px;--x-gutter:18px;
    --x-min-eco:150px;--x-min-card:220px;--x-min-social:200px;
    --x-min-method:140px;--x-min-office:110px;--x-min-gallery:200px;--x-min-stat:150px;
  }
  #faq-gallery{grid-template-columns:1fr!important}
  .x-cta__inner{padding:24px}
  .x-featured__inner{padding:24px;min-height:auto}
  .x-hero-stats{width:100%}
  .x-hero-stats__item{flex:1 1 40%}
  .x-hero-stats__item+.x-hero-stats__item{border-left:0}
}
@media (max-width:560px) {
  .x-cta__actions{width:100%}
  .x-store{flex:1 1 100%;justify-content:flex-start}

  /* Dar ekranda başlık taşmasın diye logo küçülür; oran yine korunur. */
  .x-logo__img{width:48px;height:48px}
}
@media (max-width:480px){
  :root{
    --x-gutter:16px;
    --x-min-eco:100%;--x-min-card:100%;--x-min-social:100%;
    --x-min-method:100%;--x-min-office:45%;--x-min-gallery:100%;--x-min-stat:100%;
  }
  .x-form__row{grid-template-columns:1fr}
  /* İki sütun KORUNUR (İlker, 2026-08-14): 320px'te bile sütun başına
     ~145px düşüyor, kutu içeriği 113px — sığıyor. Eskiden burada
     `1fr` vardı ve dört kutu gereksiz yere alt alta diziliyordu. */
  .x-di__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Güvenli alan burada da korunmalı; yoksa §21'deki env() ezilir
     (ölçüldü: 390px'te bottom 10px'e düşüyordu). */
  .x-cookie{padding:16px;
    left:calc(10px + env(safe-area-inset-left));
    right:calc(10px + env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));}
}

/* Çok geniş ekranlarda satır uzunluğunu okunur tutmak için gövde metinleri */
@media (min-width:1900px){
  :root{--x-gap:24px;--x-section:88px}
  .x-prose{max-width:78ch}
}

/* Yazdırma */
@media print{
  .x-header,.x-cookie,.x-cta,.x-carousel__nav,.x-toast{display:none!important}
  body{background:#fff}
}

/* ---------- Medya önizleme (lightbox) ---------- */
.x-media-card__open{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
}
.x-media-card__open img{display:block;width:100%;height:100%;object-fit:cover}
.x-lightbox{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:clamp(16px,4vw,56px);background:rgba(7,8,26,.9);
  backdrop-filter:blur(3px);cursor:zoom-out;
}
.x-lightbox[hidden]{display:none}
/* Çerçeve görsele göre büzülür; kapat düğmesi ONA göre konumlanır.
   Ölçü sınırı yüzde yerine görüntü alanı biriminden verildi — yüzde
   verilseydi "çerçeve görsele, görsel çerçeveye" diye döngüye girerdi. */
.x-lightbox__frame{
  position:relative;display:inline-block;line-height:0;
  max-width:100%;max-height:100%;
}
.x-lightbox__img{
  display:block;width:auto;height:auto;
  max-width:calc(100vw - 2 * clamp(16px,4vw,56px));
  max-height:calc(100vh - 2 * clamp(16px,4vw,56px));max-height:calc(100dvh - 2 * clamp(16px,4vw,56px));
  border-radius:var(--x-radius-sm);box-shadow:var(--x-shadow-lg);cursor:default;
}
/* GÖRSELİN sağ üst köşesi (İlker, 2026-08-13). Eskiden örtüye göre
   konumlanıyordu ve ekranın sağ üstünde, görselden kopuk kalıyordu. */
.x-lightbox__close{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  width:40px;height:40px;
  display:grid;place-items:center;border-radius:4px;cursor:pointer;
  background:rgba(7,8,26,.62);border:1px solid rgba(255,255,255,.42);color:#fff;
  transition:background var(--x-t);
}
.x-lightbox__close:hover{background:rgba(7,8,26,.85)}

/* ---------- Öne çıkan panel: ortadaki PLAY tuşu ----------
   ⚠️ Bu blok e162fb8'de KAZAYLA SİLİNDİ: `#x-detail` penceresinin CSS'i
   kaldırılırken hemen arkasındaki bu kurallar da dilime girmişti.
   Sonuç: düğme biçimsiz ve TAM GENİŞLİKTE görünür hale geldi; İlker
   "sol üstteki PLAY ikonu güzel durmuyor" diye bildirdi (2026-08-13).
   Blok geri getirildi.

   Video yoksa tuş HİÇ görünmez — her görselin üstünde sabit bir PLAY
   durmaz. Yalnızca o görsele video bağlıysa çıkar. Şu an hiçbir kartta
   video olmadığı için düğme hiçbir panelde görünmüyor. */
.x-featured__play[data-video=""]{display:none}
.x-featured__play{
  position:absolute;top:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);z-index:4;
  width:clamp(64px,6vw,92px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:rgba(12,24,72,.42);border:2px solid rgba(255,255,255,.72);
  backdrop-filter:blur(2px);cursor:pointer;
  transition:transform var(--x-t),background var(--x-t),box-shadow var(--x-t);
}
.x-featured__play svg{margin-inline-start:4px}   /* üçgen optik olarak ortalanır */
.x-featured__play:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(107,76,240,.82);box-shadow:0 10px 34px rgba(107,76,240,.45);
}
.x-featured__play:active{transform:translate(-50%,-50%) scale(.98)}

/* ==========================================================================
   20. KULLANICI PANELİ (account.html)
   Sol menü + sağ içerik. Altı bölüm; aynı anda tek bölüm görünür.
   Favoriler GERÇEK veriyle çalışır (tarayıcı deposu); sunucu gerektiren
   alanlar dürüstçe pasif ve notlu — sahte "kaydedildi" mesajı YOK.
   ========================================================================== */
.x-acc{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:var(--x-gap);align-items:start}
.x-acc__nav{
  display:flex;flex-direction:column;gap:4px;padding:12px;
  background:#fff;border:1px solid var(--x-border);border-radius:var(--x-radius);
  position:sticky;top:80px;
}
.x-acc__navbtn{
  display:flex;align-items:center;gap:10px;padding:11px 13px;width:100%;
  border-radius:var(--x-radius-sm);cursor:pointer;text-align:start;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--x-body);
  border:1px solid transparent;background:none;transition:all var(--x-t);
}
.x-acc__navbtn svg{flex:none;opacity:.8}

/* ÇIKIŞ — menü kartının İÇİNDE, `Preferences`ın hemen altında
   (İlker, 2026-08-18).

   ⚠️ İLK YAPTIĞIM YANLIŞTI VE ÖLÇÜLDÜ: form `<nav>`ın DIŞINDAYDI.
   `.x-acc` iki sütunlu bir ızgara; dışarıdaki form ÜÇÜNCÜ ızgara ögesi
   olup İÇERİK SÜTUNUNA düştü (x=290..1395 ölçüldü) ve panel yapısını
   bozdu. Üstüne `top:calc(80px + var(--x-acc-nav-h))` yazılmıştı ama
   o değişken HİÇ TANIMLI DEĞİLDİ: 0px'e düşüp menüyle aynı yere
   yapışıyor, kartın üstüne biniyordu.

   Doğrusu: form kartın İÇİNDE, sıradan bir akış ögesi. Kart zaten
   `sticky`; içindeki her şey onunla birlikte hareket eder.

   Sekmeler artık ayrı bir sarmalayıcıda (`.x-acc__tabs`) ve
   `role="tablist"` ORADA. Çıkış bir sekme değil, bir eylem; tablist'in
   içinde olsaydı ekran okuyucu onu "var olmayan bir paneli açan sekme"
   diye duyururdu. */
.x-acc__tabs{display:flex;flex-direction:column;gap:4px}
.x-acc__out{margin:0}

/* Renk PALETTEN gelir: tasarım sisteminde tehlike/kırmızı simgesi YOK
   ve buraya bir kırmızı icat etmek palete renk eklemek olurdu. Düğme
   ikonuyla ve ayırıcı çizgisiyle zaten ayrışıyor. */
.x-acc__navbtn--out{
  color:var(--x-muted);
  margin-top:4px;padding-top:13px;
  border-top:1px solid var(--x-border);border-radius:0 0 var(--x-radius-sm) var(--x-radius-sm);
}
.x-acc__navbtn--out:hover{background:var(--x-primary-tint);color:var(--x-primary-strong)}
.x-acc__navbtn--out:disabled{opacity:.45;cursor:not-allowed}
.x-acc__navbtn--out:disabled:hover{background:none;color:var(--x-muted)}

/* ÇIKIŞ ONAYI — SAYFANIN ORTASINDA açılan pencere (İlker, 2026-08-18).
   *"Butona tıklandığında Yes/No hiçbir yerde yokken birden pop-up panel
   gibi ama kendi ebatlarında sayfa ortasında ortaya çıkacak."*

   İŞARETLEMEDE YOK: pencereyi `xareth.js` tıklama anında üretir ve
   kapanınca siler. Böylece sayfanın varsayılan hâlinde tek bir fazladan
   öge bile durmaz — prototip birebirliği ve kutu ölçüleri korunur.

   ⚠️ SAYFA KAYMAZ: kaplama `position:fixed`, yani akışın dışındadır ve
   altındaki hiçbir kutuyu itmez. Gövde kaydırması KİLİTLENMİYOR —
   kilitlemek kaydırma çubuğunu kaldırır ve sayfa yanlamasına zıplar.
   Ölçüldü: açıkken de kapalıyken de hiçbir öge oynamıyor.

   Kaplama rengi ve bulanıklığı ışık kutusundan (`.x-lightbox`) alındı;
   site içinde iki farklı "pencere dili" olmasın. */
.x-acc__ask{
  position:fixed;inset:0;z-index:320;display:grid;place-items:center;
  padding:clamp(16px,4vw,56px);background:rgba(7,8,26,.9);backdrop-filter:blur(3px);
}
.x-acc__ask[hidden]{display:none}

/* "Kendi ebatlarında": içeriği kadar, dar ekranda kenara yapışmadan. */
.x-acc__ask__panel{
  width:min(360px,100%);padding:26px;text-align:center;
  background:var(--x-surface);border:1px solid var(--x-border);
  border-radius:var(--x-radius);box-shadow:0 24px 60px rgba(7,8,26,.35);
}
.x-acc__ask__t{
  font-family:var(--x-font-display);font-weight:800;font-size:16px;
  color:var(--x-ink);margin:0 0 6px;
}
.x-acc__ask__d{font-size:12.5px;color:var(--x-muted);margin:0 0 18px}
.x-acc__ask__row{display:flex;gap:8px}
.x-acc__ask__row .x-btn{flex:1;justify-content:center}
.x-acc__navbtn:hover{background:var(--x-primary-tint);color:var(--x-primary-strong)}
.x-acc__navbtn[aria-selected="true"]{
  background:var(--x-grad);border-color:transparent;color:#fff;box-shadow:var(--x-shadow-primary);
}
.x-acc__navbtn[aria-selected="true"] svg{opacity:1}

.x-acc__body{min-width:0}
.x-acc__panel{
  background:#fff;border:1px solid var(--x-border);border-radius:var(--x-radius);
  padding:26px;min-height:420px;
}
.x-acc__panel[hidden]{display:none}
.x-acc__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:4px}
.x-acc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.x-acc__toggles{display:flex;flex-direction:column;gap:10px}
.x-acc__toggle{
  display:flex;gap:11px;align-items:flex-start;padding:13px 15px;cursor:pointer;
  border:1px solid var(--x-border);border-radius:var(--x-radius-sm);
}
.x-acc__toggle:hover{border-color:#CFC4F5;background:#FBFAFF}
.x-acc__toggle b{display:block;font-size:12.5px;color:var(--x-ink)}
.x-acc__toggle small{display:block;font-size:11px;color:var(--x-muted);margin-top:3px;line-height:1.5}
.x-acc__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* Sunucu gerektiren alanlar için dürüst uyarı — yer tutucu değil, açıklama. */
.x-acc__note{
  display:flex;gap:8px;align-items:flex-start;margin-top:16px;
  padding:12px 14px;border-radius:var(--x-radius-sm);
  background:var(--x-primary-tint);color:var(--x-primary-strong);
  font-size:11.5px;line-height:1.6;
}
.x-acc__note svg{flex:none;margin-top:2px}
.x-acc__empty{margin-top:16px;font-size:13px;color:var(--x-muted);line-height:1.7}
/* `.x-games{display:grid}` yazar kuralı olduğu için tarayıcının
   `[hidden]{display:none}` kuralını EZER; favori listesi boşken gizlenebilsin
   diye ayrıca yazılıyor. Favori kartları 4 sütun yerine 3 sütunda daha iyi
   duruyor çünkü panel dar. */
.x-acc__panel .x-games{grid-template-columns:repeat(3,minmax(0,1fr))}
.x-acc__panel .x-games[hidden]{display:none}
/* Bu kural (0,2,0) dosyanın sonundaki `.x-games` medya kurallarını (0,1,0)
   ezdiği için dar ekran karşılıkları burada tekrar yazılıyor — yoksa 390px'te
   kartlar 100px'e iniyordu (iframe'de ölçüldü). */
/* 1100px altında yan menü hâlâ 240px yiyor; 3 sütun kartı 190px'e düşürüyordu. */
@media (max-width:1100px){ .x-acc__panel .x-games{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .x-acc__panel .x-games{grid-template-columns:minmax(0,1fr)} }
/* Hesap bağlanana kadar gerçek değeri olmayan sayılar boş gösterilir —
   uydurma rakam basılmaz. */
.x-acc__empty-v{color:var(--x-border-strong)}
/* ---- Hesap sistemi bağlanınca çıkan üç blok (T-17) ----------------------
   Prototipte bu üçü YOKTU çünkü hiçbirinin arkasında sunucu yoktu: oturum
   listesi gerçek oturum belirteçlerini, gizli anahtar gerçek bir TOTP
   kaydını, sosyal düğmeler gerçek bir sağlayıcıyı ister. Üçü de yalnızca
   arkalarındaki veri varken basılır; boşken hiçbiri ekrana gelmez. */
.x-acc__sessions{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.x-acc__sessions li{
  padding:10px 12px;border:1px solid var(--x-border);
  border-radius:var(--x-radius-sm);background:var(--x-surface);
  font-size:12px;color:var(--x-muted);line-height:1.6;
}
.x-acc__secret{margin-top:12px}
.x-acc__secret code{
  display:inline-block;padding:8px 11px;border:1px solid var(--x-border);
  border-radius:var(--x-radius-sm);background:var(--x-bg-alt);
  font-size:12.5px;letter-spacing:.08em;word-break:break-all;
}
.x-acc__social{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.x-acc__social .x-form__note{width:100%;margin:0}

@media (max-width:900px) {
  .x-news.x-news--trio{grid-template-columns:1fr}

  .x-prose--article{line-height:1.72}
  .x-prose--article>*+*{margin-top:18px}
  .x-prose--article h2{margin-top:34px}
  .x-prose--article h3{margin-top:26px}
  /* `min-height` BURADAN ALINDI (2026-08-13, ölçüldü) ve yukarıdaki
     `@media (max-width:760px)` bloğuna taşındı. Sebep: 761-900px bandında
     `aspect-ratio:2.6667` HÂLÂ ETKİN. Zorlanan yükseklik oran üzerinden
     GENİŞLİĞİ çözdürüyordu: 768px'te hero 768 yerine 1065px, 900px'te
     1120px oluyordu; belge yatayda 297px / 220px taşıyordu — altı haber
     detay sayfasının hepsinde. Ölçülen zincir:
       761->1055 · 768->1065 · 800->1109 · 860->1120 · 900->1120
     (h = clamp(300,52vw,420), w = h × 2.6667 — birebir tutuyor.)
     min-height yalnızca aspect-ratio'nun KAPALI olduğu <=760px bloğunda
     anlamlı; orada oranla çakışmaz. Düzeltme sonrası ölçüm:
       761/768/800/860/900px -> taşma 0, oran 2.667 sabit (kırpma yok),
       başlık bloğu 214-231px, kapağın (285-337px) içine sığıyor.
     NOT: `max-width:100%` de taşmayı bitiriyordu ama kapak oranını
     1.92-2.14'e düşürüp sanatı yanlardan ~%28 kırpıyordu; bu blok
     üstündeki yorumda yazılı "oran eşit, kırpacak bir şey kalmaz"
     kuralına aykırı olduğu için seçilmedi. */
  /* Kapak kısalınca metin bloğu görselin PARLAK kısmına biniyor; kırıntı
     yolu (11.5px) okunmaz hale geliyordu. Dar ekranda alt karartma daha
     erken başlar. */
  .x-newshero__bg::after{
    background:linear-gradient(180deg,
      rgba(7,8,26,.62) 0%,
      rgba(7,8,26,.22) 20%,
      rgba(7,8,26,.82) 56%,
      rgba(7,8,26,.97) 100%);
  }

  .x-methods{grid-template-columns:repeat(2,1fr)}

  .x-acc{grid-template-columns:1fr}
  .x-acc__nav{position:static;flex-direction:row;flex-wrap:wrap}
  .x-acc__navbtn{width:auto}
  .x-acc__stats{grid-template-columns:repeat(2,1fr)}
  .x-acc__grid{grid-template-columns:1fr}
}

/* ---------- OYUN ÖNİZLEME PENCERESİ ----------
   İlker ölçüsü (2026-08-13): 1800x800, X ile kapanır.
   Ekrana sığmazsa oran korunarak küçülür — hem genişlik hem YÜKSEKLİK
   sınırlı, böylece küçük ekranda taşmaz.
   `grid-template-columns:minmax(0,1fr)` ŞART: yalnızca `place-items`
   varken iz `auto` kalıp yüzde genişlik içeriğe göre çözülüyordu
   (aynı hata ayrıntı ve video pencerelerinde ölçülmüştü). */
.x-gamebox{
  position:fixed;inset:0;z-index:320;display:grid;
  grid-template-columns:minmax(0,1fr);place-items:center;
  padding:clamp(14px,3vw,44px);background:rgba(7,8,26,.92);backdrop-filter:blur(3px);
}
.x-gamebox[hidden]{display:none}
/* Genişlik YÜKSEKLİĞE de bağlı. `max-height:100%` tek başına yetmiyordu:
   genişlik 1800'de kalıp yükseklik kırpılıyor, oran bozuluyordu
   (ölçüldü: 1800x767 = 2.35, hedef 2.25). Artık pencere ekrana sığmazsa
   ORANI KORUYARAK küçülür. */
.x-gamebox__panel{
  position:relative;
  width:min(1800px, 100%, calc((100vh - 2 * clamp(14px,3vw,44px)) * 2.25));width:min(1800px, 100%, calc((100dvh - 2 * clamp(14px,3vw,44px)) * 2.25));
  aspect-ratio:1800/800;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  background:#fff;border-radius:var(--x-radius);overflow:hidden;
  box-shadow:var(--x-shadow-lg);
}
.x-gamebox__media{position:relative;overflow:hidden;background:#07081A;min-width:0}
/* Görsel alanı doldurur; taşma olursa YALNIZCA ALTTAN kesilir. */
.x-gamebox__img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.x-gamebox__body{
  min-width:0;min-height:0;overflow-y:auto;
  padding:clamp(22px,2.4vw,40px);display:flex;flex-direction:column;
}
.x-gamebox__badge{
  align-self:flex-start;padding:4px 11px;border-radius:999px;
  background:var(--x-primary-tint);color:var(--x-primary-strong);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.x-gamebox__badge:empty{display:none}
.x-gamebox__t{
  font-family:var(--x-font-display);font-weight:800;color:var(--x-ink);
  font-size:clamp(22px,2.2vw,34px);line-height:1.12;margin-top:14px;
}
.x-gamebox__d{color:var(--x-body);font-size:15px;line-height:1.72;margin-top:14px}
.x-gamebox__plats{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;color:var(--x-body)}
.x-gamebox__plats:empty{display:none}
.x-gamebox__actions{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:20px;
}
.x-gamebox__close{
  position:absolute;top:12px;inset-inline-end:12px;z-index:3;
  width:38px;height:38px;padding:0;display:grid;place-items:center;
  border-radius:4px;cursor:pointer;
  background:rgba(7,8,26,.62);border:1px solid rgba(255,255,255,.4);color:#fff;
  transition:background var(--x-t);
}
.x-gamebox__close:hover{background:rgba(7,8,26,.85)}

/* Dar ekranda görsel üstte, bilgi altta. */
@media (max-width:820px){
  .x-gamebox__panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);aspect-ratio:auto;height:min(760px,100%)}
  .x-gamebox__media{aspect-ratio:16/9}
}

/* ---------- Video oynatıcı (tam sahne) ---------- */
/* DİKKAT — sınıf çakışması: `.x-video` hem oyun detay sayfasındaki gömülü
   video kutusu (yukarıda, §16b) hem de bu tam sahne oynatıcı için
   kullanılıyor. Buradaki kurallar sonra geldiği için kazanıyor; yeni
   bildirim eklerken yukarıdakinin sızdırdığı özelliklere dikkat
   (`margin-top`, `overflow`, `border-radius`).

   `grid-template-columns:minmax(0,1fr)` ŞART: yalnızca `place-items:center`
   varken iz `auto` kalıyor ve çerçevenin `width:min(...,100%)` yüzdesi
   içeriğin max-content'ine göre çözülüyor. Ayrıntı penceresinde aynı hata
   ölçülmüştü (390px'te 362 yerine 228px). */
.x-video[role="dialog"]{
  position:fixed;inset:0;z-index:310;display:grid;
  grid-template-columns:minmax(0,1fr);place-items:center;
  padding:clamp(12px,3vw,48px);background:rgba(4,4,14,.94);
  max-width:none;aspect-ratio:auto;
  /* §16b'deki gömülü video kutusundan SIZAN bildirimler. `margin-top:24px`
     `inset:0` ile birlikte örtüyü 24px kısaltıyordu: 911px'lik ekranda
     örtü 887, oynatma alanı da `max-height:100%` yüzünden 800 yerine
     791px ölçüldü. Kapat düğmesi de 24px aşağı kayıyordu. */
  margin:0;border-radius:0;
}
.x-video[role="dialog"][hidden]{display:none}
/* Oynatma alanı 1800x800 (İlker, 2026-08-13). Ekrana sığmazsa oran
   korunarak küçülür — hem genişlik hem YÜKSEKLİK sınırlanıyor, eskiden
   yalnızca genişlik sınırlıydı ve alçak ekranda çerçeve taşıyordu. */
.x-video__frame{
  width:min(1800px,100%);max-height:100%;aspect-ratio:1800/800;background:#000;
  border-radius:var(--x-radius-sm);overflow:hidden;box-shadow:var(--x-shadow-lg);
}
.x-video__frame video,.x-video__frame iframe{width:100%;height:100%;border:0;display:block}
.x-video__empty{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;
  padding:24px;color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.7;
}
/* `z-index` olmadan çerçevenin arkasında kalabiliyordu; ayrıca kontrastı
   düşüktü ve koyu örtü üzerinde görünmüyordu (İlker "kapatma butonu yok"
   dedi, 2026-08-13). Artık dolu zemin + belirgin kenarlık. */
.x-video__close{
  position:absolute;top:18px;inset-inline-end:18px;z-index:3;
  width:42px;height:42px;
  display:grid;place-items:center;border-radius:4px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);color:#fff;
  transition:background var(--x-t);
}
.x-video__close:hover{background:rgba(255,255,255,.24)}

/* ==========================================================================
   21. MOBİL / DOKUNMA SERTLEŞTİRME  (P4 — 2026-08-14)
   --------------------------------------------------------------------------
   Masaüstü tarayıcıda pencereyi daraltmak GERÇEK TELEFON DEĞİLDİR. Bu bölüm,
   iPhone 390x844 ve iPad 834x1112 emülasyonunda ÖLÇÜLEREK bulunan beş
   boşluğu kapatır. Görsel tasarım masaüstünde HİÇ DEĞİŞMEZ: bütün kurallar
   `hover:none` / `pointer:coarse` sorgularının içinde.
   ========================================================================== */

/* --- 1) DOKUNMADA `:hover` TAKILI KALIR -----------------------------------
   iOS Safari ve Android Chrome, dokunulan öğeye `:hover` uygular ve BAŞKA
   BİR YERE dokunulana kadar kaldırmaz. Kalkma/parıltı efektleri bu yüzden
   "ekranda takılı kalmış" gibi görünür. En görünür olanı yeni eklediğimiz
   mor hâle. Aşağıdaki blok yalnızca DOKUNMATİK cihazda bu efektleri kapatır;
   fare olan cihazda hiçbir şey değişmez.
   YENİ BİR HOVER EFEKTİ EKLENİRSE BURAYA DA EKLENMELİ. */
@media (hover:none){
  .x-btn:hover,
  .x-card--hover:hover,
  .x-method:hover,
  .x-thumb:hover,
  .x-tech__item:hover,
  .x-office:hover,
  .x-plogo:hover,
  .x-social-row a:hover,
  .x-store:hover{transform:none}
  .x-btn--primary:hover,
  .x-newsletter button:hover,
  .x-social-row a:hover{box-shadow:none}
  .x-store:hover{
    filter:none;border-color:rgba(15,16,32,.09);
    box-shadow:0 2px 10px rgba(7,8,26,.16);
  }
  .x-store:hover::before{opacity:0}
  .x-media-card:hover img,
  .x-news__card:hover .x-news__img img,
  .x-game:hover .x-game__media img,
  .x-gallery a:hover img{transform:none}
  .x-video__play:hover{transform:none}
  .x-link-arrow:hover svg{transform:none}
  /* `.x-thumb[aria-current="true"]` SEÇİLİ durumdur, hover değil — o kalır. */
  .x-thumb[aria-current="true"]{transform:translateY(-3px)}
}

/* --- 2) DOKUNMA VURGUSU ---------------------------------------------------
   Varsayılan gri kutu yerine markanın moru, düşük opaklıkta. */
a,button,[role="button"],input,select,textarea,label,summary{
  -webkit-tap-highlight-color:rgba(var(--x-primary-rgb),.16);
}

/* --- 3) DOKUNMA HEDEFİ EN AZ 44x44 ----------------------------------------
   Apple 44pt, Android 48dp öneriyor. Ölçülen küçükler: karusel noktaları
   12x7, arama/hamburger 36x36, favori yıldızı 26x26, küçük görsel seçici
   104x43.
   Yöntem: GÖRÜNEN boyut değişmez, `::after` ile GÖRÜNMEZ bir dokunma alanı
   serilir. Böylece masaüstü tasarımı ve ölçülmüş hizalamalar bozulmaz. */

/* ============================================================
   22) KAYDIRMA ÇUBUĞUNU DOKUNMATİKTE GİZLE
   İlker, gerçek iPhone (2026-08-14): küçük kart şeridi kaydırılınca
   şeridin ALTINDA kalıcı bir kaydırma çubuğu beliriyor.
   SEBEP BİZDE: yukarıda `.x-featured__thumbs::-webkit-scrollbar{height:4px}`
   yazılı. iOS Safari'de ::-webkit-scrollbar'a AÇIKÇA boyut verildiğinde
   tarayıcı, kendiliğinden kaybolan (overlay) çubuk yerine yer kaplayan
   KLASİK çubuğu çiziyor. Kural olmasaydı çubuk zaten görünmezdi.
   Şerit KAYDIRILABİLİR KALIR — yalnızca çubuğun ÇİZİMİ kapatılır;
   `overflow-x:auto`, `touch-action:pan-x` ve ok düğmeleri aynen durur.
   Kapsam: yalnızca `pointer:coarse` (dokunmatik). Masaüstünde fare
   kullanıcısı için çubuk bilerek BIRAKILDI — orada tek görsel ipucu odur.
   Bu blok dosyanın SONUNDA: aynı seçici öncelikte olduğundan
   546. satırdaki `height:4px` kuralını ancak sonra gelerek ezebilir. */
@media (pointer:coarse) {
  .x-dots button{position:relative}
  .x-dots button::after{content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .x-fav-sm,.x-fav{position:relative}
  .x-fav-sm::after,.x-fav::after{content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  .x-icon-btn,.x-burger{width:44px;height:44px}
  .x-carousel__nav{width:44px;height:44px}
  .x-thumb{min-height:44px}
  /* Metin bağlantıları 15-19px yüksekliğindeydi; dokunma alanı büyütülür,
     görünen yazı aynı kalır. Yatayda `left:0;right:0` -> yazının kendi
     genişliği; dikeyde 44px. Komşu satır aralıkları 27px+ olduğu için
     44px'lik alanlar üst üste binse de yanlış hedefe basılmaz (ölçüldü). */
  .x-footer__col a,.x-link-arrow,.x-crumbs a,.x-footer__bottom nav a,
  .x-news__t a,.x-game__body a,.x-cookie__d a,.x-form__note a,.x-prose a{
    position:relative;
  }
  .x-footer__col a::after,.x-link-arrow::after,.x-crumbs a::after,
  .x-footer__bottom nav a::after,.x-news__t a::after,.x-game__body a::after,
  .x-cookie__d a::after,.x-form__note a::after,.x-prose a::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;
    transform:translateY(-50%);
    /* `z-index` ŞART — ölçülmüş kusur (2026-08-17, E5 turu).
       44px'lik alan yükseklikte kutunun DIŞINA taşıyor ve DOM'da
       sonra gelen içerik (karuselin ilk görseli) üstünü örtüyordu:
       "View All Media" bağlantısının isabet alanı 44 değil 32 px
       ölçüldü. Katmanı yukarı almak GÖRÜNEN hiçbir pikseli
       değiştirmez — `::after` zaten saydam.
       Bağlantılar kendi aralarındaki sırayı korur (hepsi aynı
       z-index), yani komşu bağlantıdan alan çalınmaz. */
    z-index:1;
  }
  /* Filtre düğmeleri 38px'ti. */
  .x-filter{min-height:44px}
  /* Form denetimleri 38–40px yüksekliğindeydi (ölçüldü 2026-08-14: iletişim
     formunun girdileri 40px, sıralama açılır listesi 40px). Görünen tasarım
     değişmez — yalnızca dokunmatikte asgari yükseklik 44px'e çıkar.
     `.x-textarea` kendi satır sayısıyla zaten daha uzun; min-height onu
     kısaltmaz. */
  .x-input,.x-textarea,.x-select{min-height:44px}
  /* Başlıktaki giriş düğmesi ≤560px'te ikona dönüşüyor ve 36px GENİŞLİĞE
     iniyor (yüksekliği zaten 44). Kareyi fiziksel olarak büyütmek başlığı
     dar ekranda taşırıyor — bu yüzden görünen boyut korunur, dokunma alanı
     görünmez `::after` ile 44×44'e serilir. Yayılma her yana 4px; başlığın
     kap dolgusu ≤430px'te 12px olduğu için dışarı çıkmaz (ölçüldü). */
  .x-header__actions .x-btn{position:relative}
  .x-header__actions .x-btn::after{content:"";position:absolute;
    left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  /* Dünya haritası iğneleri 24x21 — görsel boyut korunur, alan büyür.
     DİKKAT: `.x-map__pin` ZATEN `position:absolute` ile harita üzerine
     koordinatla yerleştiriliyor. Buraya `position:relative` yazmak onları
     akışa geri düşürüyor ve haritayı genişletiyordu — ölçüldü: contact.html
     390px'te +99px, 834px'te +244px taşıyordu. (Tekrarlayan hata sınıfı #3:
     "position:absolute bileşeni başka yere koymak".) Zaten konumlanmış
     olduğu için `::after` doğrudan ona tutunur; ek kural GEREKMEZ. */
  .x-map__pin::after{content:"";position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%)}
  /* Düğmeler 38px yüksekliğindeydi. */
  .x-btn{min-height:44px}
  /* Çerez onay satırları 40px'ti; etiketin tamamı dokunma alanı. */
  .x-cookie__opt{min-height:44px;align-items:center}

  .x-featured__thumbs{scrollbar-width:none}
  .x-featured__thumbs::-webkit-scrollbar{display:none;height:0}
}