/*
 * mobile-app-v297.css — V219 mobil zemininin uygulama katmanı.
 *
 * KAPSAM KURALI (V219 ile aynı)
 *   Buradaki her kural ya bir mobil/dokunmatik sorgu içindedir, ya
 *   `body.wos-mobile` altındadır, ya da yalnız ana ekrandan açılan
 *   uygulamada (`html.wos-standalone`) çalışır. MASAÜSTÜ GÖRÜNÜMÜ BU
 *   DOSYADAN ETKİLENMEZ.
 *
 *   Renk, arka plan, tipografi, marka kimliği BURADA TANIMLANMAZ. Bu dosya
 *   yalnız ölçü, güvenli alan, dokunma hedefi ve kaydırma davranışı işi yapar.
 */

:root {
  /*
   * ALT GÜVENLİ ALAN — TEK KAYNAK.
   *
   * `env(safe-area-inset-bottom)` iPhone'da Home Indicator yüksekliğini
   * verir; Android'de ve masaüstünde 0'dır. Ekranın dibine yapışan oyun
   * düğmeleri 0 geldiğinde de nefes payı istiyor, bu yüzden bir taban
   * konur. Oyun dosyaları kendi `env()` hesabını tekrarlamak yerine bunu
   * okur.
   */
  /*
   * `--wos-safe-*` V219 zemininin tanımladığı adlardır (kendileri `env()`
   * okur). Önce onlar denenir: böylece güvenli alan tek kaynaktan gelir ve
   * testlerde tek yerden taklit edilebilir. Zemin yüklenmemişse doğrudan
   * `env()` yedeği devreye girer, davranış aynı kalır.
   */
  --wos-gutter-bottom: max(var(--wos-safe-bottom, env(safe-area-inset-bottom, 0px)), 10px);
  --wos-gutter-top: max(var(--wos-safe-top, env(safe-area-inset-top, 0px)), 0px);
  --wos-gutter-x: max(
    var(--wos-safe-left, env(safe-area-inset-left, 0px)),
    var(--wos-safe-right, env(safe-area-inset-right, 0px))
  );

  /* Klavye açıkken düğmeleri klavyenin üstünde tutan toplam alt boşluk. */
  --wos-action-bottom: calc(var(--wos-keyboard-offset, 0px) + var(--wos-gutter-bottom));
}

/* Ana ekrandan açılan uygulamada tarayıcı çubuğu yok: üstteki güvenli alan
   gerçekten status bar/Dynamic Island kadar ve içerik oraya girmemeli. */
html.wos-standalone {
  --wos-gutter-top: max(var(--wos-safe-top, env(safe-area-inset-top, 0px)), 8px);
}

/* ========================================================================== */
/*  DOKUNMATİK CİHAZLAR                                                       */
/* ========================================================================== */

@media (max-width: 900px), (pointer: coarse) {

  /* ------------------------- güvenli alan yardımcıları ---------------------- */

  /* V219'daki `.wos-safe-*` yardımcıları duruyor; bunlar taban değerli
     kardeşleri. Ekranın dibindeki aksiyon şeritleri için. */
  .wos-safe-gutter-bottom { padding-bottom: var(--wos-gutter-bottom); }
  .wos-safe-gutter-top { padding-top: var(--wos-gutter-top); }

  /*
   * SABİT ALT ŞERİTLER — ORTAK KORUMA.
   *
   * Aşağıdaki kaplar oyunların KENDİ dosyalarında tanımlı; burada yalnız
   * alt güvenli alanları garanti altına alınıyor. `max()` kullanıldığı için
   * kap zaten yeterli boşluğa sahipse değer değişmez — yani mevcut düzen
   * bozulmaz, sadece Home Indicator'ın altına düşme ihtimali kalkar.
   */
  body.wos-mobile .wos-above-keyboard {
    padding-bottom: 0;
    bottom: var(--wos-action-bottom);
  }

  /* --------------------------- dokunma hedefi tabanı ------------------------ */

  /*
   * Metnin kendisi kadar küçük dokunma alanı bırakmamak için ortak sınıf.
   * Görsel boyut değişmez: yükseklik `min-height` ile büyür, ortalanır.
   */
  .wos-tap-lg,
  [data-wos-tap="lg"] {
    min-height: 48px;
    min-width: 48px;
  }

  /*
   * Dil seçimi, geri okları ve rehber düğmeleri gibi küçük kalmış ortak
   * denetimler. Seçiciler dar tutuldu; oyunların ızgara hücreleri
   * (harf kutuları, klavye tuşları) BİLEREK dışarıda bırakıldı.
   */
  /*
   * ÖZGÜLLÜK SIFIR TUTULUR.
   *
   * `body.wos-mobile .language-option` yazmak bu kuralı oyunun KENDİ
   * `.language-option` kuralının üstüne çıkarıyordu: Futbol Atlası'nda
   * 28 piksellik dil hapı 40 piksele çıkıp üst şeridi aşağı itti — yani
   * ortak katman bir oyunun görünümünü değiştirdi. Seçicinin tamamı
   * `:where()` içine alınarak özgüllük sıfırlanır: oyun kendi ölçüsünü
   * yazıyorsa onunki geçerlidir, yazmıyorsa buradaki taban devreye girer.
   *
   * YÜZEN DENETİMLER BU LİSTEDE YOK.
   *   `.wos-guide-open` ve `.portal-home-button` üst şeridin kenarına
   *   yaslanmış, akış dışı düğmeler. Ölçüldü (Futbolcu Köprüsü, 390x844):
   *   "Rehber" düğmesi taban sürümde şeritten 5 piksel taşıyordu; buraya
   *   40 piksellik taban konunca taşma 17 piksele çıktı — yani ortak
   *   katman görünümü BOZDU. Onlar yükseklikle değil, aşağıdaki görünmez
   *   dokunma halkasıyla büyütülür: görsel ölçü aynı kalır.
   */
  :where(body.wos-mobile) :where(
    .language-option,
    .languageChoice,
    .portal-lang-switch button,
    .back-button
  ) {
    min-height: 40px;
  }

  /*
   * GÖRÜNMEZ DOKUNMA HALKASI.
   *
   * Düğme 30 piksel görünür, 44 piksel basılabilir olur. Yalnız DÜŞEY
   * yönde büyür: bu denetimler yan yana dizildiği için yatay büyüme
   * komşunun dokunuşunu çalardı.
   *
   * `.portal-home-button` Futbolcu Köprüsü'nde kendi `::after` süsünü
   * taşıyor; oraya halka konmaz, o oyun düğmeyi zaten 38–40 piksel
   * yapıyor.
   */
  /*
   * `position: relative` YALNIZ AKIŞTAKİ SÜRÜME VERİLİR.
   *
   * `.wos-guide-open--float` zaten `position: fixed` (game-guide-v296.css).
   * Ona `relative` yazmak düğmeyi sabitlendiği yerden koparıp sayfanın
   * akışına düşürüyordu — ölçüldü: düğme 87. pikselden 931. piksele indi.
   * Sabitlenmiş sürüm kendi konumlandırma bağlamını zaten kurduğu için
   * halka doğrudan çalışır.
   */
  :where(body.wos-mobile) .wos-guide-open:not(.wos-guide-open--float) {
    position: relative;
  }

  :where(body.wos-mobile) .wos-guide-open::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 44px;
    transform: translateY(-50%);
    content: "";
  }

  /* ----------------------------- kaydırma / dokunma ------------------------ */

  /*
   * Oyun ekranı tek ekrana sığıyorsa sayfanın lastik gibi esnemesi oyun
   * hissini bozuyor. Bu sınıf, oyunun KENDİ dosyası tarafından yalnız
   * gerçekten tek ekrana sığan oyun ekranında verilir — genel bir
   * `overflow:hidden` DEĞİLDİR.
   */
  body.wos-mobile.wos-fixed-scene {
    overscroll-behavior: none;
  }

  body.wos-mobile.wos-fixed-scene:not(.wos-keyboard-open) {
    height: var(--wos-app-height);
    overflow: hidden;
  }

  /* Sürüklenerek kullanılan denetimler sayfayı kaydırmasın. */
  :where(body.wos-mobile) :where(
    input[type="range"],
    [data-wos-drag],
    .wos-drag-surface
  ) {
    touch-action: none;
  }

  /* Çift dokunuşla yakınlaştırma oyun düğmelerinde istenmez; sayfanın geri
     kalanında parmakla yakınlaştırma AÇIK kalır (erişilebilirlik). */
  :where(body.wos-mobile) :where(button, [role="button"], .wos-tap, .wos-tap-lg) {
    touch-action: manipulation;
  }

  /*
   * Oyun yüzeylerinde kazara metin seçimi. Metin İÇEREN alanlar (sonuç
   * listeleri, kurallar, sohbet) dışarıda bırakıldı.
   */
  :where(body.wos-mobile) :where(button, [role="button"], .cell, .key, .wos-drag-surface) {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* ------------------------------ mobil klavye ----------------------------- */

  /*
   * iOS Safari, 16 pikselden küçük yazı taşıyan bir metin alanına
   * dokunulduğunda sayfayı KENDİLİĞİNDEN yakınlaştırır ve düzen bozulur.
   * `<select>` bu davranışa girmez (yerel tekerlek açılır), bu yüzden
   * yalnız metin alanları hedeflenir.
   *
   * ÖZGÜLLÜK YİNE SIFIR. Bu bir TABAN, bir dayatma değil: oyun kendi yazı
   * boyunu yazıyorsa onunki geçerli kalır. Altı oyun tarandı; 16 pikselin
   * altında kalan yalnız iki alan çıktı (Penaltı Ligi'nde `#mpName` ve
   * `#mpCode`) ve ikisi kendi dosyasında ADIYLA düzeltildi. Buradaki kural,
   * ileride eklenecek ve kendi boyunu yazmayan alanlar için ağ görevi görür.
   */
  :where(body.wos-mobile) :where(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input:not([type]),
    textarea
  ) {
    font-size: 16px;
  }

  /* Klavye açıkken oyun kartının altında biriken ölü boşluk. */
  body.wos-mobile.wos-keyboard-open {
    /* Kaydırma çıpası kapalı: her tuşta düzen zıplamasın. */
    overflow-anchor: none;
  }
}

/* ========================================================================== */
/*  ANA EKRANDAN AÇILAN UYGULAMA (standalone)                                 */
/* ========================================================================== */

/*
 * BURADA GÖVDEYE GENEL DOLGU VERİLMEZ.
 *
 * `viewport-fit=cover` ile açılan sayfada `env(safe-area-inset-*)` zaten
 * gerçek değeri döndürüyor ve altı oyunun CSS'i bu değeri kendi başlık ve
 * aksiyon şeritlerinde kullanıyor. Gövdeye bir kez daha dolgu eklemek aynı
 * payı İKİ KEZ saydırır ve başlıkların altında ölü boşluk bırakır.
 *
 * Ana ekrandan açılan uygulamanın gerçek farkı, tarayıcı çubuğunun
 * olmamasıdır: sayfa gerçekten ekranın tepesinden başlar. Bu yüzden burada
 * yalnız ölçü değişkenleri ve durum sınıfı yayınlanır; hangi kabın pay
 * alacağına oyunun kendi dosyası karar verir.
 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  :root {
    --wos-gutter-top: max(env(safe-area-inset-top, 0px), 8px);
    /* Tarayıcı çubuğu yokken alt kenar doğrudan Home Indicator'a bakar. */
    --wos-gutter-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }

  /* Ana ekrandan açıldığında dış bağlantı yok; sayfa uygulama gibi
     davransın diye kaydırma zinciri sayfada biter. */
  html { overscroll-behavior-y: none; }
}

/* ========================================================================== */
/*  TABLET — mevcut responsive sistemin ARA ADIMI                             */
/* ========================================================================== */

/*
 * `device-auto-v275.js` tableti 960 pikselin altında mobil görünüme
 * yönlendiriyor. O karar korundu; burada yalnız "büyütülmüş telefon"
 * görüntüsü engelleniyor: içerik okunabilir bir genişlikte ortalanır ve
 * dokunma hedefleri biraz büyür.
 */
@media (min-width: 700px) and (max-width: 1023px) and (pointer: coarse) {
  body.wos-mobile {
    --wos-touch: 48px;
  }

  /* Ortak kap adları. Her oyun kendi kabını zaten bu adlardan biriyle
     kuruyor; olmayan seçici hiçbir şey yapmaz. */
  body.wos-mobile :where(.layout, .app-shell, .game-shell, .wrap, .container, main) {
    margin-inline: auto;
  }
}

/* ========================================================================== */
/*  ALÇAK YATAY EKRAN                                                         */
/* ========================================================================== */

/*
 * Telefon yatay tutulduğunda görünür yükseklik 400 piksele kadar iner.
 * Oyuncu yön değiştirmeye ZORLANMAZ; düşey boşluklar sıkışır, oyun alanı
 * ekranda kalır.
 */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html.wos-landscape-short body.wos-mobile :where(header, .page-header, .hero) {
    position: relative;
  }

  html.wos-landscape-short body.wos-mobile {
    --wos-gutter-bottom: max(env(safe-area-inset-bottom, 0px), 6px);
  }
}

/* ========================================================================== */
/*  DÜŞÜK GÜÇLÜ CİHAZLAR                                                      */
/* ========================================================================== */

/*
 * `android-performance-v269.js` bu sınıfı düşük bellekli/az çekirdekli
 * cihazlarda yazıyor. Oyun animasyonlarına dokunulmaz; yalnız sürekli
 * çalışan dekoratif efektler durur.
 */
html.wos-device-lite-v274 :where(.wos-pulse, .wos-shimmer, .wos-glow) {
  animation: none;
}

html.wos-device-lite-v274 body.wos-mobile :where(.modal-backdrop, .wos-menu-backdrop) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
