/*
 * kariyer-koprusu/mobile-v297.css — Futbolcu Köprüsü mobil tamamlayıcı katman.
 *
 * BU DOSYA MEVCUT MOBİL KATMANLARIN YERİNE GEÇMEZ.
 *   Oyunun zaten olgun bir mobil düzeni var: `mobile-v219.css` klavye
 *   ölçüsünü kullanıyor, `mobile-app-v282.css` maç sırasında cevap alanını
 *   klavyenin üstüne sabitliyor ve güvenli alanı hesaba katıyor. Hiçbiri
 *   değiştirilmedi.
 *
 *   Burada yalnız ÖLÇÜLEREK bulunan üç açık kapatılır.
 */

/* ========================================================================== */
/*  1. KURULUM EKRANINDA TAKIM ARAMA LİSTESİ                                  */
/* ========================================================================== */

/*
 * ÖLÇÜLEN (390x844, iPhone, kurulum ekranı, "gala" yazıldı)
 *     yazı alanı   532 → 572
 *     .search-menu 587 → 795   (max-height 262px)
 *
 * Klavye açıldığında görünür alan 508 piksele iniyor. Maç BAŞLADIKTAN sonra
 * cevap alanı klavyenin üstüne sabitleniyor (mobile-app-v282.css) ve sorun
 * yok — ama KURULUM ekranında o kural çalışmıyor (`kk-match-active` yok).
 * Orada liste olduğu gibi klavyenin arkasında kalıyordu.
 *
 * `46vh` gibi görüntü alanına oranlı bir tavan bunu çözmez: listenin nerede
 * BAŞLADIĞINI bilmez. Gerçek boşluğu ortak katman ölçer ve
 * `--wos-dropdown-max` olarak yazar (assets/shared/mobile-app-v297.js).
 * Değişken yoksa mevcut davranış aynen sürer.
 */
@media (max-width: 900px), (pointer: coarse) {
  /*
   * LİSTENİN TEPESİ YAZI ALANINA ÇIPALANIR.
   *
   * `kariyer-koprusu-v22-20260715.css` listeyi
   * `position:fixed; top:118px` ile konumluyor. 118 sabit bir sayı: yazı
   * alanı ondan aşağıdaysa liste alanın ÜSTÜNE biner ve oyuncu ne
   * yazdığını göremez. Ölçüldü (390x844, klavye açık): alan 441..487,
   * liste onu örtüyordu; 360x640 ve 820x1180'de de aynı.
   *
   * Konumlandırma türü DEĞİŞMEZ (sabit kalır; kırpan bir ata yüzünden
   * seçilmiş olabilir), yalnız tepe değeri ölçülen alana bağlanır.
   * Değişkeni ortak katman yazar; yoksa 118 piksellik eski davranış sürer.
   */
  html body #root .club-search .search-menu {
    top: var(--wos-dropdown-top, 118px) !important;
  }

  html body.wos-keyboard-open #root .club-search .search-menu {
    max-height: var(
      --wos-dropdown-max,
      min(46vh, calc(var(--wos-visible-height, 100dvh) * 0.46))
    ) !important;
  }

  html body.wos-keyboard-open #root .player-suggestions {
    max-height: var(
      --wos-dropdown-max,
      min(46vh, calc(var(--wos-visible-height, 100dvh) * 0.46))
    ) !important;
  }
}

/* ========================================================================== */
/*  2. GÜVENLİ ALAN — SAYFANIN ALTI VE ÜSTÜ                                   */
/* ========================================================================== */

@media (max-width: 900px), (pointer: coarse) {
  /*
   * Sayfanın en altındaki içerik Home Indicator'ın altında kalıyordu.
   * Maç sırasındaki cevap şeridi kendi payını zaten alıyor; buradaki pay
   * AKIŞTAKİ son öğe için. `max()` kullanıldığı için mevcut boşluk yeterli
   * olduğunda değer değişmez.
   */
  #root .app-shell {
    padding-bottom: max(max(var(--wos-safe-bottom, 0px), 0px), 0px);
  }

  /* Yatay kenarlar: `viewport-fit=cover` ile ekranın köşelerine kadar
     uzanan sayfada yan güvenli alan yalnız yatay tutuşta sıfırdan farklı. */
  #root .app-shell {
    padding-left: max(var(--wos-safe-left, 0px), 0px);
    padding-right: max(var(--wos-safe-right, 0px), 0px);
  }
}

/*
 * Ana ekrandan açıldığında tarayıcı çubuğu yok: üst çubuk gerçekten
 * durum çubuğunun altından başlamalı.
 */
html.wos-standalone #root .topnav,
html.wos-standalone #root .app-shell > header {
  padding-top: max(max(var(--wos-safe-top, 0px), 0px), 4px);
}

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

/*
 * Telefon yatay tutulduğunda görünür yükseklik 400 pikselin altına iner.
 * Oyuncu yön değiştirmeye zorlanmaz; yalnız kurulum ekranının düşey
 * boşlukları sıkışır, "Oyunu başlat" ekranda kalır.
 */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #root .mode-switch { gap: 6px; }
  #root .kk-mode-bar-v219 { padding-block: 6px; }
  #root .player-card { padding-block: 8px; }
  #root .versus { margin-block: 4px; }
}

/* ========================================================================== */
/*  4. TABLET                                                                 */
/* ========================================================================== */

/*
 * `device-auto-v275.js` tableti 960 pikselin altında mobil görünüme
 * yönlendiriyor; o karar korundu. Burada yalnız içerik okunabilir bir
 * genişlikte ortalanır — telefonun düzeni gereksiz büyütülmez.
 */
@media (min-width: 700px) and (max-width: 959px) and (pointer: coarse) {
  #root .app-shell { margin-inline: auto; max-width: 760px; }
  #root .players-grid { gap: 14px; }
}
