/* =============================================================
   ÖzgürTavla — Mobile Polish Layer
   - main.css'ten SONRA yüklenir, mobil için kuralları override eder
   - 992px ve altı için tasarlandı (Bootstrap lg breakpoint)
   ============================================================= */

/* -------------------------------------------------------------
   1. Container & body padding — daha rahat nefes alma
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  body {
    padding-top: var(--nav-h-mobile);
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    --bs-gutter-x: 1rem;
  }

  /* Satırlar da AYNI değeri kullanmalı — yoksa sayfa yana kayar.
     Bootstrap'in sözleşmesi: kapsayıcının yan dolgusu (gutter/2) ile
     satırın negatif kenar boşluğu (gutter/2) birbirini götürür. Ama .row
     kendi --bs-gutter-x'ini YENİDEN TANIMLIYOR, yani kapsayıcıdaki
     değeri miras almıyor. Yalnızca kapsayıcı daraltılınca dolgu 8px,
     satırın negatif boşluğu 12px kalıyordu; her satır iki yandan 4'er px
     dışarı taşıp belgeyi viewport'tan geniş yapıyordu.
     Yalnızca YATAY gutter eziliyor; g-* sınıflarının dikey aralığı
     (--bs-gutter-y) olduğu gibi duruyor. */
  [class*="container"] .row {
    --bs-gutter-x: 1rem;
  }

  /* section heading'ler mobilde daha az boşluk istesin */
  .section-title {
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    font-size: 1.5rem;
  }

  /* hero spacing'i mobilde sıkılaştır */
  .hero-section {
    padding: 56px 0 48px;
    margin-bottom: 28px;
  }

  .hero-title {
    line-height: 1.15;
  }

  .hero-subtitle {
    line-height: 1.5;
  }

  /* hero CTA buton sırasını full-width yap */
  .hero-section .d-flex.flex-wrap.gap-3 .btn {
    flex: 1 1 calc(50% - .375rem);
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .hero-section {
    padding: 44px 0 36px;
  }

  .hero-title {
    font-size: 1.85rem !important;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  /* stat numaraları küçük ekrana sığsın */
  .stat-number {
    font-size: 1.9rem !important;
  }

  .stat-label {
    font-size: .85rem;
  }

  /* container kenar boşluğu — satırlarla birlikte (yukarıdaki nota bakınız) */
  .container,
  .container-sm {
    --bs-gutter-x: .875rem;
  }

  [class*="container"] .row {
    --bs-gutter-x: .875rem;
  }
}

/* -------------------------------------------------------------
   2. Sticky home position — token'a bağla
   ------------------------------------------------------------- */
.home-sticky {
  top: calc(var(--nav-h) + 16px);
}

@media (max-width: 991.98px) {
  .home-sticky {
    position: static !important;
    top: auto;
  }
}

/* -------------------------------------------------------------
   4. Responsive table — yatay scroll + ilk sütun(lar) sticky
   Kullanım:
     <div class="table-responsive">
       <table class="table table-sticky-first">         <- 1 sütun
       <table class="table table-sticky-first-2">       <- 2 sütun (# + isim)
   ------------------------------------------------------------- */

/* tek sütun sticky */
.table-sticky-first th:first-child,
.table-sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  box-shadow: 4px 0 6px -4px rgba(16, 28, 84, .08);
}

.table-sticky-first thead th:first-child {
  z-index: 2;
  background: var(--c-surface-2);
}

/* iki sütun sticky — rank + isim leaderboard'lar için ideal */
.table-sticky-first-2 th:first-child,
.table-sticky-first-2 td:first-child,
.table-sticky-first-2 th:nth-child(2),
.table-sticky-first-2 td:nth-child(2) {
  position: sticky;
  z-index: 1;
  background: var(--c-surface);
}

.table-sticky-first-2 th:first-child,
.table-sticky-first-2 td:first-child {
  left: 0;
}

/* AÇILIM SATIRI YAPIŞKAN DEĞİL.
   Yukarıdaki kurallar td:first-child ve td:nth-child(2)'yi sabitliyor.
   Maç listesi açılım satırı da iki hücreden oluşuyor (biri boş, biri
   liste) ve tam bu seçicilere denk geliyordu; yatay kaydırmada liste
   sola yapışıp kayardı. Masaüstünde tablo sığdığı için görünmüyor,
   mobilde bozardı. */
.table-sticky-first-2 > tbody > tr.player-matches-expand > td,
.table-sticky-first > tbody > tr.player-matches-expand > td{
  position: static;
  background: transparent;
  box-shadow: none;
}

/* 2. sütunun başlangıcı 1. sütunun genişliğine bağlı — width'i CSS var ile ayarlanır */
.table-sticky-first-2 {
  --sticky-col-1-w: 40px;
}

.table-sticky-first-2 th:nth-child(2),
.table-sticky-first-2 td:nth-child(2) {
  left: var(--sticky-col-1-w);
  box-shadow: 4px 0 6px -4px rgba(16, 28, 84, .08);
}

.table-sticky-first-2 thead th:first-child,
.table-sticky-first-2 thead th:nth-child(2) {
  z-index: 2;
  background: var(--c-surface-2);
}

/* dark thead override — lig tablosu için */
.table-sticky-first-2 thead.table-dark th:first-child,
.table-sticky-first-2 thead.table-dark th:nth-child(2),
.table-sticky-first thead.table-dark th:first-child {
  background: var(--bs-table-bg, #212529);
  color: #fff;
}

/* striped tbody rows için arka plan ayarı — stripe ile sticky cell uyum */
.table-sticky-first.table-striped > tbody > tr:nth-of-type(odd) > td:first-child,
.table-sticky-first-2.table-striped > tbody > tr:nth-of-type(odd) > td:first-child,
.table-sticky-first-2.table-striped > tbody > tr:nth-of-type(odd) > td:nth-child(2) {
  background: var(--bs-table-striped-bg, #f9fafb);
}

.table-sticky-first.table-hover > tbody > tr:hover > td:first-child,
.table-sticky-first-2.table-hover > tbody > tr:hover > td:first-child,
.table-sticky-first-2.table-hover > tbody > tr:hover > td:nth-child(2) {
  background: var(--bs-table-hover-bg, var(--c-surface-2));
}

/* yatay scroll ipucu — gradient fade sağda */
@media (max-width: 767.98px) {
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .table-responsive > table {
    margin-bottom: 0;
  }

  /* ----------- Mobile: sticky-first-2 leaderboard ----------- */

  /* SABITLEME KAPALI -- ama yalnizca MOBILDE SIGAN iki tabloda.
     Sabit sutun yalnizca yatay kaydirma varken ise yarar. Lig ve
     turnuva puan tablolarinda kaydirma kalmadi (siralamayi
     belirlemeyen sutunlar ismin altindaki seride tasindi, bkz.
     .tbl-mini-stats); orada sabitleme artik yalnizca yer yiyor —
     ilk iki sutun 146px'i tutuyor, kalan alti sutun 197px'e
     sikisiyordu.

     .players-table ve inc/func.php'deki .ligtablo hala genis; onlarda
     sabitleme KALIYOR, yoksa kaydirirken kimin satirina baktigin
     kaybolur. */
  .lig-standings th:first-child,
  .lig-standings td:first-child,
  .lig-standings th:nth-child(2),
  .lig-standings td:nth-child(2),
  #tab-standings table th:first-child,
  #tab-standings table td:first-child,
  #tab-standings table th:nth-child(2),
  #tab-standings table td:nth-child(2){
    position: static;
    box-shadow: none;
  }

  /* Rank hücresi 36px — pill 28x28'i çevreliyor, gap 6px'e düşer */
  .table-sticky-first-2 th:first-child,
  .table-sticky-first-2 td:first-child {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --sticky-col-1-w'yi !important ile override et — inline style="--sticky-col-1-w:70px"yi yener */
  .table-sticky-first-2 {
    --sticky-col-1-w: 36px !important;
  }

  /* Rank pill mobilde 28px */
  .lig-rank-cell{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  tr[data-rank="1"] .lig-rank-cell::before,
  tr[data-rank="2"] .lig-rank-cell::before,
  tr[data-rank="3"] .lig-rank-cell::before{
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  /* Player kolonu */
  .table-sticky-first-2 th:nth-child(2),
  .table-sticky-first-2 td:nth-child(2) {
    padding-left: 2px !important;
    padding-right: 4px !important;
    max-width: 110px;
    min-width: 88px;
  }

  /* ...ama puan tablolarinda KISITSIZ.
     max-width:110px isimleri kirpiyordu ("Seyfullah Ge..."); o sinir,
     yaninda alti sayi sutunu birden dururken gerekliydi. Sutunlar
     seride tasininca isme yer acildi. */
  .lig-standings th:nth-child(2),
  .lig-standings td:nth-child(2),
  #tab-standings table th:nth-child(2),
  #tab-standings table td:nth-child(2){
    max-width: none;
    min-width: 0;
    width: auto;
  }

  /* Player adı taşırsa kırılsın, 2 satır olabilir */
  .table-sticky-first-2 td:nth-child(2) .lh-sm,
  .table-sticky-first-2 td:nth-child(2) .fw-semibold {
    font-size: .8rem;
    line-height: 1.15;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Avatar mobilde küçült */
  .table-sticky-first-2 td:nth-child(2) img,
  .table-sticky-first-2 td:nth-child(2) .myphoto {
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 11px !important;
  }

  /* Diğer numeric hücreler — sıkı padding + monospace küçük font */
  .table-sticky-first-2 th:nth-child(n+3),
  .table-sticky-first-2 td:nth-child(n+3) {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
    font-size: .82rem;
    min-width: 32px;
  }

  .table-sticky-first-2 .mono,
  .table-sticky-first-2 td.text-center {
    font-variant-numeric: tabular-nums;
  }

  /* Header text mobilde küçük */
  .table-sticky-first-2 thead th {
    font-size: .72rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  /* Maçlar (son) sütundaki buton mobilde küçük */
  .table-sticky-first-2 td:last-child .btn,
  .table-sticky-first-2 .pm-toggle-btn {
    padding: .25rem .4rem;
    font-size: .7rem;
  }
}

/* -------------------------------------------------------------
   5. Tap-target & form ergonomi
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .form-control,
  .form-select,
  .input-group > .form-control,
  .input-group > .form-select {
    min-height: 44px;
    font-size: 16px; /* iOS zoom prevention */
  }

  /* dropdown item'lar parmakla rahat seçilsin */
  .dropdown-menu .dropdown-item {
    padding: .65rem .9rem;
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  /* dropdown-menu mobilde daha geniş ve yumuşak */
  .dropdown-menu {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    border-color: var(--c-border);
    padding: .35rem;
  }

  /* card body padding'leri sıkılaştır */
  .card-body {
    padding: 1rem;
  }
}

/* -------------------------------------------------------------
   6. Hero — mobil branded dokunuş
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .hero-section {
    position: relative;
    overflow: hidden;
  }

  /* mobilde sağ üstte hafif tavla zarı silueti */
  .hero-section::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  .hero-section > .container {
    position: relative;
    z-index: 1;
  }
}

/* -------------------------------------------------------------
   7. Misc — küçük UX iyileştirmeleri
   ------------------------------------------------------------- */

/* Mobil menu kurallari components.css §19'da (.nav-burger /
   .nav-mobil-menu). Buradaki .navbar-collapse ve .navbar-auth-wrap
   duzenlemeleri kaldirildi: ikisi de artik mobilde cizilmiyor. */

/* tablo başlıklarında uzun başlık taşmasın */
@media (max-width: 575.98px) {
  table.table th {
    font-size: .72rem;
    letter-spacing: .02em;
  }

  table.table td {
    font-size: .85rem;
  }
}

/* Turnuva zaman cizelgesi kurallari KALDIRILDI: turnuva listesi artik
   cizelge degil kompakt kart (.tk-row, pages/tournaments.css). Bu
   seciciler sayfada karsiligi olmayan ogeleri hedefliyordu. */

/* -------------------------------------------------------------
   8. Oyuncu paneli hero — "Profilim" / "Ayarlarım" çifti
   ------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* .pd-hero-actions kurallari KALDIRILDI: panel hero'sundaki
   "Profilim" / "Ayarlarim" dugmeleri kaldirildi (ikisi de ust
   menude var), bu seciciler artik karsiligi olmayan bir ogeyi
   hedefliyordu. */