/* =============================================================
   tournaments.php — sayfaya ÖZEL stiller

   Zaman çizelgesinin kendisi (.tl-liste, .tl-grup, .tl-kart ve durum
   paneli) burada DEĞİL: aynı kart ana sayfada da, panel turnuva
   sayfasında da kullanılıyor, o yüzden ortak bileşen dosyasında
   (components.css §21b ve §21c).

   Burada yalnızca bu sayfaya ait olanlar kaldı: başlık/süzgeç şeridi
   ve ilk yükleme iskeleti.
   ============================================================= */

/* ---- Header + Filters ---- */
.tournaments-header{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.tournaments-header-title{
  min-width: 0;
}

.tournaments-header-filters{
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.tournaments-filter-field{
  min-width: 230px;
}

.tournaments-filter-field.tournaments-filter-status{
  min-width: 160px;
}

.tournaments-filter-field .form-label{
  font-size: .7rem;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 6px;
}

.tournaments-filter-field .form-select{
  border-radius: var(--r-md);
  border-color: var(--c-border);
  font-weight: var(--fw-medium);
}

.tournaments-reset{
  height: 42px;
  width: 42px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================
   İSKELET — gerçek kartla AYNI izgarayı kullanıyor ki içerik
   gelince liste zıplamasın.
   ============================================================= */
.tl-skeleton .tl-kart{ pointer-events: none; }

.tl-skeleton .tl-kart::before,
.tl-skeleton .tl-nokta{ background: var(--c-neutral-200); }

.tl-skeleton .tl-nokta::after{ display: none; }

/* =============================================================
   MOBİL
   Panel kartın altına iniyor: yan yana kalsaydı ilerleme çubuğu
   ve geri sayım 360px'te başlığın üstüne biniyordu.
   ============================================================= */
@media (max-width: 767.98px){
  .tournaments-header{
    align-items: stretch;
  }

  /* IKI SECICI YAN YANA.
     Flex'te ilk alanin icerik tabani (230px min-width) satiri
     dolduruyor ve ikinci secici ile sifirlama dugmesi alt satirlara
     kayiyordu: filtre bloguu 156px, ilk turnuva satiri 341px asagida
     basliyordu. Izgarada sutunlar esit ve tek satir. */
  .tournaments-header-filters{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }

  .tournaments-filter-field,
  .tournaments-filter-field.tournaments-filter-status{
    min-width: 0;
  }

  .tournaments-filter-field .form-label{
    font-size: .64rem;
    letter-spacing: .08em;
  }

}