/* ==========================================================================
   Backcourt — mobil uygulama katmanı

   Öncelik mobil: bu dosya app.css/screens.css'in üstüne biner ve dar ekranda
   arayüzü web sayfasından yerel uygulamaya çevirir. Bölümler:

     1. Dokunma hijyeni ve platform kancaları
     2. Kabuk — üst çubuk, büyük başlık, yapışkan aksiyon, sekme çubuğu
     3. Tablolar → kart listeleri
     4. Kip pencereleri → alt sayfa
     5. Ekran bazlı düzeltmeler (kulüp, transfer, puan, maç, idman)
     6. Giriş ve kurulum sihirbazı
     7. Yatay yön ve küçük ekran ince ayarları
   ========================================================================== */

/* ==========================================================================
   1. Dokunma hijyeni — her boyutta geçerli
   ========================================================================== */

.is-touch {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Arayüz metni seçilmez; okunacak/kopyalanacak yerler `.selectable` ister. */
.is-touch body {
  -webkit-user-select: none;
  user-select: none;
}

.is-touch input,
.is-touch textarea,
.is-touch [contenteditable],
.is-touch .selectable {
  -webkit-user-select: text;
  user-select: text;
}

/* Dokunma gecikmesini kaldır, sayfa esnemesini kapat. */
.is-touch a,
.is-touch button,
.is-touch [role='button'],
.is-touch label,
.is-touch input,
.is-touch select { touch-action: manipulation; }

.is-touch html,
.is-touch body { overscroll-behavior: none; }

/* iOS 16px altındaki girdilere odaklanınca sayfayı yakınlaştırıyor. */
.is-touch .input,
.is-touch input,
.is-touch select,
.is-touch textarea { font-size: 16px; }

/* Basılı tutma geri bildirimi — `:active` kaydırmada da yanıyor, bu yanmıyor. */
.is-touch .pressed {
  transform: scale(.972);
  filter: brightness(1.08);
  transition: transform 90ms var(--e-out), filter 90ms var(--e-out);
}
.is-touch .btn.pressed { transform: scale(.965); }
.is-touch tr.clickable.pressed { transform: none; background: var(--surface-2); filter: none; }

/* Fare yokken hover durumları yapışıp kalıyor. */
.is-touch *:hover { transition-duration: 0s; }

/* Kaydırılan her kutu momentumla kaysın ve zinciri kırsın. */
.is-touch .main,
.is-touch .modal,
.is-touch .tbl-wrap,
.is-touch .pbp,
.is-touch .wiz-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   Dokunma hedefi tabanı — 44px

   Apple HIG ve Material'in ortak alt sınırı 44px (Material 48dp der, 44 ikisini
   de geçer). Masaüstünde ince duran her denetim parmakla ıskalanıyordu:
   `tests/mobile-audit.mjs` girişten maç ekranına kadar 29-36px arası onlarca
   hedef saydı. Kural işaretçiye bakıyor, ekran genişliğine değil — tablet ve
   dokunmatik dizüstü de parmakla kullanılıyor.

   Görsel yükseklik büyüyor, gizli tıklama alanı değil: görünen kutu ile basılan
   kutu aynı kalsın ki nereye bastığın belli olsun.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 44px; padding: 0 13px; font-size: 12px; }
  .btn.xs { min-height: 44px; padding: 0 12px; }
  .rail-btn { padding: 13px 12px; }

  /* Kendi yüksekliğini yazan yerler tabanın altına düşmesin. */
  .pc-acts .btn,
  .ins-acts .btn,
  .page-head .acts .btn,
  .cta-bar .btn,
  table.stack td[data-act] .btn,
  .wire .wire-read { min-height: 44px; }
  .market-filters .input,
  .rn-row .input { height: 44px; }

  /* Seçim grubu: düğmenin kendisi 44 olmalı, grup dolgusu değil.
     Genişlik de: iki harflik etiketler (TR/EN/DE/ES) 38 piksele düşüyordu
     ve denetim bunu yakaladı — yükseklik tek başına yetmiyor. */
  .seg { padding: 2px; }
  .seg button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Dil seçici hem giriş kapısında hem ayarlarda aynı tabanı alsın. */
  .lang-pick button { min-width: 44px; min-height: 44px; }

  /* Açılır liste oku girdinin sağında; girdi zaten 44+, ok da onu doldursun. */
  .combo-toggle { width: 44px; height: 44px; right: 2px; }
  .combo > .input { padding-right: 50px; }

  /* Renk noktası 30px kalıyor ama basılan kutu 44: saydam kenarlık dokunma
     alanını büyütüyor, arka plan iç kutuya kırpıldığı için daire aynı. */
  .swatch {
    width: 44px;
    height: 44px;
    border: 9px solid transparent;
    background-clip: padding-box;
  }
  /* Seçili halka noktanın hemen dışına: 44'lük kutuda 7px içeriden. */
  .swatch.on { border-color: transparent; outline: 2px solid #fff; outline-offset: -7px; }

  /* Maç sonu koruma düğmesi tek ikon; yüksekliği vardı, genişliği yoktu. */
  .coach-guard, .coach-focus, .coach-lock { width: 44px; }

  /* Onay kutusu 20px kalıyor — dokunulan yer onu saran etiket. */
  input[type='checkbox'],
  input[type='radio'] { width: 20px; height: 20px; }
  label:has(> input[type='checkbox']),
  label:has(> input[type='radio']) { min-height: 44px; }

  /* Alt bilgi bağlantıları: metin boyu aynı, tıklama alanı 44×44. */
  .gate-foot .links button,
  .credit a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Tablo hücresindeki seçiciler (rol, mevki, sıralama). */
  select.mini { min-height: 44px; }
  .input,
  select.input { height: 44px; }

}

/* Android'de köşeler biraz daha yumuşak, iOS'ta daha yuvarlak — sistem hissi. */
.is-ios { --r-app: 14px; }
.is-android { --r-app: 12px; }

/* Yapışkan aksiyon çubuğu yalnızca mobilde var; masaüstünde düğme başlıkta. */
.cta-bar { display: none; }

/* Sürükleme tutamacı da öyle — masaüstünde kip pencere sürüklenmiyor. */
.modal-grab { display: none; }

/* --------------------------------------------------------------------------
   Okunabilirlik tabanı — 10.5px

   Masaüstünde küçük ve harf aralıklı etiketler hoş duruyor ama telefon kolun
   ucunda: 8.5-10px'e inen etiketler (sekme adları, form etiketleri, döşeme
   başlıkları) okunmuyordu. Taban 10.5px; büyük harf + geniş aralıkla bu boyut
   hâlâ ikincil duruyor, ama okunuyor.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .field > label,
  .gate-card .field label { font-size: 11px; }
  .stat-tile .k,
  .stat-card .k { font-size: 10.5px; letter-spacing: .14em; }
  .p-card .big small { font-size: 10.5px; letter-spacing: .1em; }
  thead th { font-size: 10.5px; }
  .coach-p .st { font-size: 10.5px; }
  .tab { font-size: 10.5px; }
}

/* ==========================================================================
   2. Kabuk
   ========================================================================== */

@media (max-width: 720px) {
  :root { --topbar-h: 54px; }

  /* --- üst çubuk: uygulama başlığı gibi, kulüp kimliği önde ------------ */
  .topbar {
    gap: var(--s-3);
    /* Yan güvenli alanı KORU: düz `padding-inline: var(--s-4)` yazmak
       app.css'teki çentik boşluğunu siliyordu ve telefon yatay tutulunca
       kulüp adı çentiğin altında kalıyordu. */
    padding-inline: calc(var(--s-4) + var(--safe-l)) calc(var(--s-4) + var(--safe-r));
  }

  /* Kendi logomuz uygulama ikonunda zaten var; başlıkta yer kaplamasın. */
  .brand { display: none; }

  .tb-club { flex: 1; min-width: 0; gap: 9px; }
  .tb-club .name { font-size: 15.5px; letter-spacing: .02em; }
  .tb-club .crest { width: 28px; height: 28px; }

  /* Dört istatistik sığmıyordu; kasa tek başına yeter, gerisi ekranlarda. */
  .tb-stats { gap: 0; margin-left: auto; flex: none; }
  .tb-stat { display: none; }

  .tb-stat.keep {
    display: block;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--surface-1);
    border: 1px solid var(--hairline);
  }
  .tb-stat.keep b { font-size: 13px; }
  .tb-stat.keep i { display: none; }

  /* --- içerik alanı ---------------------------------------------------- */
  .main {
    padding: var(--s-3) var(--s-4) calc(var(--tabbar-h) + var(--safe-b) + 84px);
    scroll-padding-bottom: 96px;
  }

  /* --- büyük başlık (iOS düzeni) --------------------------------------- */
  .page-head {
    display: block;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--hairline);
  }

  .page-head h2 {
    font-size: 27px;
    line-height: 1.06;
    letter-spacing: .005em;
  }

  .page-head .sub {
    display: block;
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--text-3);
  }

  /* Sezon ilerletme düğmesi başlıktan çıkıp alta yapışıyor (shell taşıyor);
     başlıkta kalan diğer düğmeler başlığın altında bir sıra oluşturuyor. */
  .page-head .acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
  }
  .page-head .acts:empty { display: none; }
  .page-head .acts .btn { flex: 1 1 auto; min-height: 44px; }

  /* --- yapışkan birincil aksiyon ---------------------------------------
     Çubuk sekme çubuğuyla AYNI yüzey: aynı koyuluk, aynı bulanıklık, üstte
     aynı saç teli çizgi. Böylece ikisi tek bir alt bölge gibi okunuyor.

     Önce yumuşak bir karartma geçişi vardı ve kötüydü: kayan içerik o
     bandın içinde eriyip yarı görünür kalıyordu (kartın yazısı düğmenin
     ardından okunuyordu) ve düğmenin amber ışıması bulanık zemine yayılıp
     ekranın altında sarı bir leke bırakıyordu. Kesin bir kenar hem daha
     temiz hem de içeriğin nerede bittiğini söylüyor. */
  .cta-bar {
    display: block;
    position: fixed;
    z-index: 44;
    left: 0;
    right: 0;
    bottom: calc(var(--tabbar-h) + var(--safe-b));
    padding: var(--s-3) var(--s-4);
    padding-left: calc(var(--s-4) + var(--safe-l));
    padding-right: calc(var(--s-4) + var(--safe-r));
    background: rgba(10, 15, 28, .92);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-top: 1px solid var(--hairline);
    pointer-events: none;
  }

  .cta-bar .btn {
    width: 100%;
    min-height: 50px;
    font-size: 14px;
    pointer-events: auto;
    /* Işıma dar tutuluyor: geniş yayılım solundaki bulanık zemine vurup
       leke yapıyordu. Düğmenin altında kalan yer zaten yok. */
    box-shadow: 0 4px 14px -6px rgba(247, 167, 43, .5);
  }

  /* Nabız halkası burada KAPALI. Düğme zaten ekranın en parlak ve tek
     birincil eylemi; halka onu vurgulamıyor, yalnızca çubuğun üstüne
     taşıp amber bir hale bırakıyordu. */
  .cta-bar .btn.pulse::after { content: none; }

  /* --- sekme çubuğu ---------------------------------------------------- */
  .tabbar {
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
  }
  .tab { min-height: 48px; }
  .tab .ico { font-size: 20px; }

  /* Etkin sekmenin üst çizgisi yerine yumuşak bir kabarcık — daha yerel. */
  .tab.on::after {
    top: auto;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 10px var(--amber);
  }
  .tab.on .ico { transform: translateY(-1px) scale(1.08); }

}

/* ==========================================================================
   3. Tablolar → kart listeleri

   Dar ekranda sütunlar taşıyor, sağdaki hücreler kesiliyordu. `table.stack`
   sınıfı taşıyan tablolar mobilde satır başına bir karta dönüşüyor: birincil
   hücre (oyuncu/kulüp adı) üstte, kalan hücreler `data-l` etiketiyle küçük
   rozetler hâlinde altta, varsa düğme sağda.
   ========================================================================== */

@media (max-width: 720px) {
  table.stack { display: block; }
  table.stack thead { display: none; }
  table.stack tbody { display: flex; flex-direction: column; gap: 6px; }

  table.stack tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    padding: 11px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    background: var(--surface-1);
  }

  table.stack tr.mine,
  table.stack tr.is-user { border-color: color-mix(in srgb, var(--amber) 42%, transparent); }

  table.stack td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    text-align: left;
  }


  /* Sıra numarası küçük ve solda kalsın. */
  table.stack td[data-l='#'] { order: -2; font-family: var(--font-mono); color: var(--text-4); min-width: 16px; }
  table.stack td[data-l='#']::before { content: none; }

  /* Mevki/arma rozeti adın hemen solunda. */
  table.stack td[data-pos] { order: -1; flex: none; }
  table.stack td[data-pos]::before { content: none; }

  /* Birincil hücre satırın tamamını alır, geri kalanı alt sıraya iter. */
  table.stack td[data-main] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.stack td[data-l]:not([data-l='#']) {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-mono);
  }

  table.stack td[data-l]:not([data-l='#'])::before {
    content: attr(data-l);
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-4);
  }

  /* İkincil sütunlar karta sığmıyor; detay kartında zaten hepsi var.
     Yukarıdaki [data-l] kuralıyla aynı ağırlıkta ve ondan sonra gelmeli. */
  table.stack td[data-l][data-sm='0'] { display: none; }

  /* Düğme hücresi kendi satırına geçer ama tam genişlik değil — her satırda
     kenardan kenara bir düğme, listeyi düğme duvarına çeviriyordu. */
  table.stack td[data-act] {
    flex: 1 0 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
  }
  table.stack td[data-act]::before { content: none; }
  table.stack td[data-act] .btn { min-width: 120px; min-height: 44px; }

  /* "Detay" gibi düğmeler mobilde gereksiz — satırın kendisi zaten açıyor.
     Yerine listelerdeki tanıdık sağ ok işareti geliyor. */
  table.stack td[data-act='quiet'] { display: none; }

  table.stack tr.clickable { position: relative; padding-right: 28px; }

  table.stack tr.clickable::after {
    content: '';
    position: absolute;
    right: 13px;
    top: 17px;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--text-4);
    border-top: 2px solid var(--text-4);
    transform: rotate(45deg);
  }

  /* --- sıkı varyant ------------------------------------------------------
     Puan durumunda yirmi satır var; her biri iki satıra yayılınca tablo
     okunmuyordu. `tight` satırı tek çizgide tutar, ad esner. */
  table.stack.tight tr { flex-wrap: nowrap; gap: 8px; padding: 9px 10px; }
  table.stack.tight td[data-main] { font-size: 13px; }
  table.stack.tight td[data-l]:not([data-l='#']) { gap: 2px; font-size: 11.5px; }
  table.stack.tight td[data-l]:not([data-l='#'])::before { font-size: 8px; letter-spacing: .08em; }
  table.stack.tight td[data-l='Form']::before { content: none; }
  table.stack.tight tr.clickable { padding-right: 10px; }
  table.stack.tight tr.clickable::after { content: none; }

  /* Playoff kesim çizgisi kart listesinde de dursun. */
  table.stack tr.playoff-cut { border-bottom: 2px dashed color-mix(in srgb, var(--amber) 55%, transparent); }

  /* Kart listesi olunca sarmalayıcının yatay kaydırması ve çerçevesi gereksiz. */
  .tbl-wrap:has(table.stack) {
    overflow: visible;
    max-height: none !important;
    border: 0;
  }

  /* Kart içindeki listeler kenardan kenara aksın. */
  .card.flush .tbl-wrap:has(table.stack) { padding: 0 var(--s-3) var(--s-3); }
}

/* ==========================================================================
   4. Kip pencereleri → alt sayfa
   ========================================================================== */

@media (max-width: 720px) {
  .scrim {
    align-items: flex-end;
    /* Klavye açıkken alt sayfa onun ÜSTÜNE otursun. iOS'ta yerleşim görünümü
       klavye için küçülmediği için sayfa aksi hâlde klavyenin arkasında
       kalıyor — bir telefonda şifre sıfırlama penceresi hiç görünmemişti.
       Klavye kapalıyken `--kb` sıfır, yani hiçbir şey değişmiyor. */
    padding: 0 0 var(--kb);
  }

  /* Alt boşluğu aksiyon altlığı taşıyor — burada sıfır kalmalı, yoksa
     yapışkan altlığın altından içerik sızıyor. */
  .modal,
  .modal.wide {
    width: 100%;
    max-width: none;
    /* Klavye açıkken kalan alan da o kadar azalıyor; yoksa sayfa yukarı
       itilirken tepesi ekranın dışına taşıyor. */
    max-height: calc(92dvh - var(--kb));
    padding: var(--s-4) var(--s-4) 0;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    animation: sheet-up var(--d-slow) var(--e-out);
  }

  /* Düğmesiz pencerelerde alt boşluğu yine de bırak. */
  .modal:not(:has(.acts)) { padding-bottom: calc(var(--s-4) + var(--safe-b)); }

  @keyframes sheet-up { from { transform: translateY(14%); opacity: .6; } }

  /* Sürükleme tutamacı — görünen çubuk ince, dokunma alanı geniş. */
  .modal-grab {
    display: block;
    position: relative;
    width: 72px;
    height: 22px;
    margin: -4px auto var(--s-2);
    touch-action: none;
  }
  .modal-grab::after {
    content: '';
    position: absolute;
    inset: 9px 17px;
    border-radius: 99px;
    background: var(--hairline-strong);
  }

  /* Düğmeler tam genişlik ve altta — başparmakla ulaşılabilir. */
  .modal .acts {
    position: sticky;
    bottom: 0;
    flex-direction: column-reverse;
    gap: var(--s-2);
    margin: var(--s-4) calc(var(--s-4) * -1) 0;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
    background: #101728;
    border-top: 1px solid var(--hairline);
  }

  /* Klavye açıkken ana ekran göstergesi (home indicator) zaten klavyenin
     altında kalıyor; onun için ikinci kez boşluk bırakmak düğmeleri
     gereksizce yukarı itiyor. */
  .kb-open .modal .acts { padding-bottom: var(--s-3); }
  .kb-open .modal:not(:has(.acts)) { padding-bottom: var(--s-4); }

  .modal .acts .btn { width: 100%; min-height: 48px; }

  /* İdman penceresi tam ekran: mini oyunun alana ihtiyacı var. Sahne kalan
     tüm yüksekliği alsın, düğmeler dibe otursun. */
  .scrim.full .modal {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: calc(var(--s-3) + var(--safe-t)) var(--s-4) 0;
    animation: fade-in var(--d-mid) var(--e-out);
  }
  .scrim.full .modal::before { content: none; }
  .scrim.full .modal > h3 { font-size: 19px; }
  .scrim.full .modal > .body { flex: none; font-size: 12.5px; margin-bottom: 10px; }
  .scrim.full .drill-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
  .scrim.full .acts { margin-top: auto; }
}

/* ==========================================================================
   5. Ekran bazlı düzeltmeler
   ========================================================================== */

@media (max-width: 720px) {
  /* --- kulüp: özet kutuları 2×2 ----------------------------------------
     Tek sütunda dört kutu ekranı dolduruyordu; ikili ızgara hem sığıyor
     hem de tek bakışta okunuyor. */
  .grid.g4 { grid-template-columns: 1fr 1fr; gap: var(--s-2); }

  .stat-tile { padding: var(--s-3); }
  .stat-tile .v { font-size: 23px; }
  .stat-tile .d { font-size: 10.5px; line-height: 1.3; }
  .stat-tile .spark { opacity: .1; }

  /* --- sıradaki maç kartı: taşmayı bitir --------------------------------
     Uzun kulüp adları tek satıra sığmayıp kartın dışına taşıyordu. */
  .next-match { grid-template-columns: 1fr auto 1fr; gap: var(--s-2); }
  .next-match .side,
  .next-match .side.a { flex-direction: column; text-align: center; gap: 6px; }
  .next-match .side .txt { width: 100%; }
  .next-match .nm { white-space: normal; font-size: 14px; line-height: 1.15; }
  .next-match .meta { font-size: 10.5px; }
  .next-match .rating { grid-column: 1 / -1; text-align: center; margin-top: var(--s-2); }

  /* --- pozisyon ihtiyaç kılavuzu ---------------------------------------- */
  .need-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }

  /* --- maç ekranı -------------------------------------------------------
     Tek sıraya sıkışan küçük düğmeler taşıyordu. Mobilde kontrol paneli iki
     satır: üstte duraklat + hız, altta ikon/etiket döşemeleri. Mola artık
     koçluk paneline girmeden buradan alınıyor. */
  .match-ctl {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'pause speed' 'acts acts';
    gap: 8px;
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + var(--safe-b));
    overflow: visible;
  }

  .match-ctl .spacer { display: none; }
  .match-ctl > #c-pause { grid-area: pause; min-height: 44px; padding-inline: 14px; }
  /* Hız seçici genişliği eşit paylaşmalı — inline-flex hâlinde sola yığılıyordu. */
  .match-ctl > .seg {
    grid-area: speed;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    min-width: 0;
  }
  .match-ctl > .seg button { padding-inline: 0; font-size: 12.5px; min-height: 44px; }

  .ctl-acts {
    grid-area: acts;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
  }

  /* Döşeme: ikon üstte, etiket altta — yerel uygulama kontrol çubuğu gibi. */
  .ctl-acts .btn {
    flex-direction: column;
    gap: 3px;
    min-height: 56px;
    padding: 6px 2px;
    border-radius: var(--r-app, 13px);
    background: var(--surface-1);
    font-size: 10.5px;
    letter-spacing: .04em;
    line-height: 1;
  }
  .ctl-acts .btn > svg { font-size: 20px; }
  .ctl-acts .btn .lb { display: block; white-space: nowrap; }
  .ctl-acts .btn .lb b { font-size: 10px; color: var(--amber); }
  .ctl-acts .btn:disabled { opacity: .38; }
  .ctl-acts .btn.pressed { transform: scale(.94); }

  /* Saha mümkün olan tüm yeri alsın. */
  .court-wrap { flex: 1; min-height: 0; }
  /* "1Ç 11:11" 40px'e sığmayıp iki satıra kırılıyordu. */
  .pbp { height: 72px; gap: 2px; }
  .pbp .line { align-items: baseline; gap: var(--s-2); }
  .pbp .line .t { width: 58px; font-size: 10.5px; white-space: nowrap; }
  .pbp .line .txt { min-width: 0; }

  /* Skorbord: yükseklik kazanmak için sıkı ama okunur. */
  .board { padding: var(--s-2) var(--s-3); }
  /* Üç haneli skor 2ch'lik kutuya sığmayıp kırpılıyordu (126 → "12" + taşma).
     Kutu üç haneye göre ölçülüyor ve esnek kapta ezilmiyor. */
  .board-score {
    font-size: clamp(28px, 9vw, 42px);
    min-width: 3ch;
    flex: none;
  }

  /* --- kutu skor --------------------------------------------------------
     On bir sütun karta sığmıyor; tablo kalıyor ama oyuncu adı sola
     yapışıyor, sayılar altından kayıyor. */
  .box-wrap { overflow-x: auto; margin-inline: calc(var(--s-1) * -1); }
  .box-tbl { min-width: 600px; }

  .box-tbl th:first-child,
  .box-tbl td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 132px;
    background: #101728;
    box-shadow: 6px 0 10px -8px rgba(0, 0, 0, .9);
  }
  .box-tbl tr.on-court > td:first-child { box-shadow: inset 2px 0 0 var(--mint), 6px 0 10px -8px rgba(0, 0, 0, .9); }

  /* --- koçluk paneli ----------------------------------------------------
     Beş + yedek listesi tek sütunda çok uzuyordu; iki sütun sığıyor. */
  .coach-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .coach-p { min-height: 46px; padding: 6px 8px; gap: 6px; font-size: 12.5px; }
  .coach-p .st { font-size: 10.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .coach-p .fatbar { width: 20px; }
  .coach .eyebrow { margin-top: var(--s-3); }

  /* --- maç sonucu ------------------------------------------------------- */
  .res-team .sc { font-size: 40px; }
  .res-head h3 { font-size: 26px; }

  /* --- idman ------------------------------------------------------------ */
  .drill-stage { aspect-ratio: auto; flex: 1; min-height: 46dvh; }
  .drill-hud { gap: 8px; }
}

/* ==========================================================================
   6. Giriş ve kurulum sihirbazı
   ========================================================================== */

@media (max-width: 900px) {
  /* Giriş formu ilk ekranda görünmeli — tanıtım bölümü kompakt bir başlığa
     iniyor, kaydırmadan giriş yapılabiliyor. */
  .gate { grid-template-rows: auto 1fr; }

  .gate-art {
    min-height: 0;
    padding: calc(var(--safe-t) + var(--s-5)) var(--s-4) var(--s-4);
  }

  .gate-art canvas { opacity: .3; }
  .gate-art h1 { font-size: 26px; }
  .gate-art p { display: none; }
  .gate-art .pills { display: none; }
  .gate-logo { width: min(240px, 66%); margin-bottom: var(--s-3); }

  .gate-form { padding: var(--s-4) var(--s-4) calc(var(--s-6) + var(--safe-b)); align-items: start; }
  .gate-card { gap: var(--s-3); }
  .gate-tabs button { padding: 12px; }
  .gate-card .field label { font-size: 11px; }
  .gate-card .btn.pri { min-height: 50px; }

  /* Sekmeler zaten "Giriş yap / Kayıt ol" diyor; ayrıca başlık gereksiz. */
  .gate-title { display: none; }
}

@media (max-width: 720px) {
  /* Sihirbaz altlığı: özet üstte tek satır, düğmeler altta yan yana. */
  .wiz-foot {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'summary summary' 'back next';
    gap: var(--s-2);
  }
  .wiz-foot .summary { grid-area: summary; font-size: 11.5px; text-align: center; }
  .wiz-foot .spacer { display: none; }
  .wiz-foot > .btn:first-of-type { grid-area: back; }
  .wiz-foot > .btn.pri { grid-area: next; }
  .wiz-foot .btn { min-height: 48px; white-space: nowrap; }

  .wiz-bar { padding-top: calc(var(--safe-t) + var(--s-3)); }

  /* Bütçe kadranı tek sütuna iner. */
  .budget { grid-template-columns: 1fr; }

  /* Yuva kartları tam genişlik. */
  .slots { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. Yatay yön ve küçük ekran
   ========================================================================== */

/* Telefonu yatay tutunca üst çubuk + sekme çubuğu ekranın yarısını yiyordu. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  :root { --topbar-h: 44px; --tabbar-h: 50px; }
  .page-head { margin-bottom: var(--s-3); padding-bottom: var(--s-2); }
  .page-head h2 { font-size: 21px; }
  .page-head .sub { display: none; }
  .tab > span:not(.ico) { display: none; }
  .tab .ico { font-size: 22px; }
  .cta-bar {
    padding: var(--s-2) calc(var(--s-4) + var(--safe-r)) var(--s-2) calc(var(--s-4) + var(--safe-l));
  }
  .cta-bar .btn { min-height: 44px; }
  .pbp { height: 0; padding: 0; border: 0; }
}

@media (max-width: 380px) {
  .main { padding-inline: var(--s-3); }
  .page-head h2 { font-size: 24px; }
  /* Altı sekme 375px'e sığsın diye boyutu değil aralığı kısıyoruz — küçültmek
     etiketi okunmaz yapıyordu, aralık kapanınca hepsi sığıyor. */
  .tab { letter-spacing: 0; }
  table.stack tr { padding: 10px; gap: 6px 9px; }
  table.stack td[data-main] { font-size: 13.5px; }
  .stat-card .v { font-size: 21px; }
}

/* Ana ekrandan açıldığında tarayıcı çubuğu yok — üst boşluk fazla geliyordu. */
.is-standalone .topbar { padding-top: max(var(--safe-t), 8px); }