/* =============================================================
   ÖzgürTavla — Component System (sportif yön)
   Token-driven; sayfaya özel değil, çok kullanılan komponentler.
   ============================================================= */

/* =============================================================
   1. Display tipografi yardımcıları
   ============================================================= */

.font-display{
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

.font-numeric{
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.display-1{
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem);
  font-weight: var(--fw-bold);
  /* 1.05 idi; Türkçe İ/Ğ/Ş üst işaretlerini kırpıyordu */
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}

.display-2{
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw + .8rem, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -.015em;
}

.display-3{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + .6rem, 1.875rem);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -.01em;
}

.eyebrow{
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* champion-600 beyaz zeminde 2.48:1 idi; 800 tonu 6.17:1 veriyor */
/* .eyebrow-accent kaldirildi: baslik ustundeki kucuk etiket satirlari
   ("SEZON . CANLI TAKIP" vb.) ekrandan cikarildi; bu sinifi kullanan
   oge kalmadi. Duz .eyebrow duruyor — istatistik kutularinin etiketi. */
.eyebrow-on-dark{ color: var(--c-champion-300); }

/* Score / stat numerals — büyük rakamlar */
.numeric-xl{
  font-family: var(--font-numeric);
  font-size: clamp(2rem, 3vw + .8rem, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.numeric-lg{
  font-family: var(--font-numeric);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   2. Card variants
   ============================================================= */

.card-elevated{
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.card-elevated:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
  border-color: var(--c-border);
}

.card-soft{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.card-accent{
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding-left: calc(var(--sp-4) + 4px);
  overflow: hidden;
}

.card-accent::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--c-primary-600);
}

.card-accent.is-champion::before{ background: var(--g-champion); }
.card-accent.is-success::before{ background: var(--c-success-500); }
.card-accent.is-warning::before{ background: var(--c-warning-500); }
.card-accent.is-danger::before{ background: var(--c-danger-500); }
.card-accent.is-wood::before{ background: var(--c-wood-500); }

.card-glass{
  background: var(--c-hero-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-hero-glass-bd);
  border-radius: var(--r-lg);
  color: var(--c-hero-text);
}

.card-glass .eyebrow{ color: var(--c-hero-muted); }

.card-champion{
  background: linear-gradient(135deg, var(--c-champion-50) 0%, #ffffff 100%);
  border: 1.5px solid var(--c-champion-bd);
  border-radius: var(--r-lg);
  position: relative;
}

.card-champion::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-champion);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
  border-radius: inherit;
}

.card-champion:hover::after{ opacity: .04; }

/* Cover area — turnuva/lig kartları için generic banner */
.card-cover{
  position: relative;
  height: 110px;
  background: var(--c-athletic-900) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='48' viewBox='0 0 24 48'><polygon points='12,0 16,24 8,24' fill='%23ffb020' opacity='.55'/><polygon points='12,48 16,24 8,24' fill='%23f43f5e' opacity='.45'/></svg>");
  background-size: 24px 48px;
  overflow: hidden;
}

.card-cover::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,11,30,.55) 0%, rgba(6,11,30,.85) 100%);
}

.card-cover > *{ position: relative; z-index: 1; }

.card-cover-badge{
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2;
}

.card-cover-status{
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
}

/* =============================================================
   3. Button variants — sportif
   ============================================================= */

/* Tüm sportif buton varyantları <a> olarak kullanılırsa default underline'ı kaldır */
.btn-primary-pro,
.btn-champion,
.btn-ghost-pro,
.btn-ghost-on-dark,
.btn-primary-pro:hover,
.btn-champion:hover,
.btn-ghost-pro:hover,
.btn-ghost-on-dark:hover,
.btn-primary-pro:focus,
.btn-champion:focus,
.btn-ghost-pro:focus,
.btn-ghost-on-dark:focus{
  text-decoration: none;
}

.btn-primary-pro{
  background: var(--g-primary);
  border: 1px solid transparent;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  /* Bekleme hâlinde de renkli gölge — gri gölge butonu soluk gösteriyordu */
  box-shadow: var(--sh-primary), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform var(--t-fast), box-shadow var(--t-base), filter var(--t-base);
}

.btn-primary-pro:hover{
  color: #ffffff;
  filter: brightness(1.05);
  box-shadow: var(--sh-primary-h), inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-primary-pro:active{ transform: translateY(1px); }

.btn-champion{
  background: var(--g-champion);
  border: 1px solid transparent;
  color: var(--c-athletic-900);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  box-shadow: 0 4px 14px rgba(var(--c-champion-rgb),.32), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform var(--t-fast), filter var(--t-base);
}

.btn-champion:hover{
  color: var(--c-athletic-900);
  filter: brightness(1.06);
}

.btn-ghost-pro{
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  transition: background var(--t-base), border-color var(--t-base);
}

.btn-ghost-pro:hover{
  background: var(--c-neutral-100);
  border-color: var(--c-border);
  color: var(--c-text);
}

.btn-ghost-on-dark{
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-pill);
  padding: .55rem 1.25rem;
  transition: background var(--t-base);
}

.btn-ghost-on-dark:hover{
  background: rgba(255,255,255,.08);
  color: #ffffff;
}

/* =============================================================
   4. Badge variants — sportif statü
   ============================================================= */

.badge-pro{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-champion{
  background: var(--g-champion);
  color: var(--c-athletic-900);
  box-shadow: 0 2px 8px rgba(var(--c-champion-rgb),.28);
}

.badge-upcoming{
  background: var(--c-primary-50);
  color: var(--c-primary-700);
  border-color: rgba(var(--c-primary-rgb),.18);
}

.badge-ongoing{
  background: rgba(var(--c-primary-rgb),.08);
  color: var(--c-primary-700);
  border-color: rgba(var(--c-primary-rgb),.22);
}

.badge-finished{
  background: var(--c-success-50);
  color: var(--c-success-700);
  border-color: rgba(var(--c-success-rgb),.2);
}

.badge-archived{
  background: var(--c-neutral-100);
  color: var(--c-neutral-700);
  border-color: var(--c-neutral-200);
}

/* Dark zemine yerleştirilen badge varyantı (cover üstünde) */
.badge-on-dark{
  background: rgba(255,255,255,.92);
  color: var(--c-athletic-900);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.badge-champion.badge-on-dark{
  background: var(--g-champion);
  color: var(--c-athletic-900);
}

/* =============================================================
   Legacy class names — sportif uppercase pill (canonical)
   .tl-status her yerde aynı dil
   ============================================================= */

.tl-status{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: .66rem;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: var(--c-neutral-100);
  color: var(--c-text);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Turnuva statüleri — doygun tint + belirgin kenarlık.
   (-50 zeminler neredeyse beyazdı, rozet okunmuyordu.) */
.tl-status.s0{
  background: rgba(var(--c-champion-rgb),.16);
  border-color: rgba(var(--c-champion-rgb),.45);
  color: var(--c-warning-700);
}
.tl-status.s1{
  background: rgba(var(--c-primary-rgb),.14);
  border-color: rgba(var(--c-primary-rgb),.42);
  color: var(--c-primary-700);
}
.tl-status.s2{
  background: rgba(var(--c-success-rgb),.15);
  border-color: rgba(var(--c-success-rgb),.42);
  color: var(--c-success-700);
}

/* Notr varyant — "Arsiv" gibi bir DURUM YOKLUGU icin. Ligde arsiv,
   s0'in kehribar rengiyle gosterilseydi "bekliyor" gibi okunurdu. */
.tl-status.s-idle{
  background: var(--c-neutral-100);
  border-color: var(--c-border);
  color: var(--c-text-muted);
}

/* Silinmis kayit — yalnizca masteradmin listelerinde gorunur.
   Ayni .tl-status kalibinda kalsin diye burada; Bootstrap rozeti
   kullanmak ayni sutunda iki farkli rozet dili demekti. */
.tl-status.s-del{
  background: var(--c-danger-100, #f8d7da);
  color: var(--c-danger-700, #842029);
  border-color: var(--c-danger-300, #f1aeb5);
}


/* =============================================================
   .tbl-sik — yogun yonetim listeleri
   Master panel tablolarinda satir sayisi cok; 16px govde metni
   satirlari gereksiz yukseltiyor ve tabloyu yatay kaydirmaya
   sokuyordu.
   ============================================================= */
.tbl-sik{
  font-size: .875rem;          /* 14px */
}

/* Bootstrap'te .badge font-size .75EM, yani GORELI. Tablo 14px'e
   inince Oyuncu/Mac rakamlari da 10,5px'e duserdi — o boyut iyiydi.
   rem'e cevrilerek 12px'te sabitleniyor.
   .tl-status zaten rem tabanli (.66rem), buradan etkilenmiyor. */
.tbl-sik .badge{
  font-size: .75rem;           /* 12px — tabloyla birlikte kucumez */
}

/* Baslik satiri govdeyle ayni oranda kalsin. */
.tbl-sik > thead th{
  font-size: .75rem;
  letter-spacing: .02em;
}


/* "Oynanıyor" canlı sinyali */
.tl-status.s1 i{ animation: ot-live-pulse 1.8s ease-in-out infinite; }

@keyframes ot-live-pulse{
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.86); }
}

@media (prefers-reduced-motion: reduce){
  .tl-status.s1 i{ animation: none; }
}

/* =============================================================
   5. Stat tile — sayı + label + opsiyonel mini-bar
   ============================================================= */

.stat-tile{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform var(--t-base), border-color var(--t-base);
}

.stat-tile:hover{
  transform: translateY(-1px);
  border-color: var(--c-border);
}

.stat-tile .stat-label{
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.stat-tile .stat-value{
  font-family: var(--font-numeric);
  font-size: clamp(1.75rem, 2vw + .8rem, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.stat-tile .stat-delta{
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.stat-tile .stat-delta.is-up{ color: var(--c-success-700); }
.stat-tile .stat-delta.is-down{ color: var(--c-danger-700); }

.stat-tile.is-accent{
  background: linear-gradient(135deg, var(--c-primary-50) 0%, var(--c-surface) 70%);
  border-color: rgba(var(--c-primary-rgb),.18);
}

.stat-tile.is-champion{
  background: linear-gradient(135deg, var(--c-champion-50) 0%, var(--c-surface) 70%);
  border-color: var(--c-champion-bd);
}

.stat-tile.is-champion .stat-value{ color: var(--c-champion-800); }
.stat-tile.is-champion .stat-label{ color: var(--c-champion-700); }

/* Mini progress bar (kazanma oranı, doluluk vb.) */
.mini-bar{
  height: 5px;
  background: var(--c-neutral-100);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.mini-bar > span{
  display: block;
  height: 100%;
  background: var(--c-primary-600);
  border-radius: inherit;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}

.mini-bar.is-champion > span{ background: var(--g-champion); }
.mini-bar.is-success > span{ background: var(--c-success-500); }

/* =============================================================
   6a. Initials avatar — .myphoto

   profil_foto() çıktısı "d-inline-flex d-sm-block" verir; Bootstrap'ın
   d-sm-block'ı !important ile display:block yapar ve flex centering
   bozulur → harfler yukarı kayar. Bunu ezmek gerekiyor.

   ANCAK: display:inline-flex !important koşulsuz yazılırsa Bootstrap'ın
   `.d-none`'ını da eziyordu. Sonuç: mobilde fotoğraf gizleniyor ama
   baş harfler görünmeye devam ediyordu. Bu yüzden display override'ı
   yalnızca avatarın görünür OLMASI GEREKEN breakpoint'e kilitli.
   ============================================================= */

.myphoto{
  /* !important YOK — böylece .d-none (mobil) kazanabiliyor */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
}

@media (min-width: 576px){
  /* Bu breakpoint'te d-sm-block devreye girer; onu ezmemiz gerekir. */
  .myphoto{ display: inline-flex !important; }
}

/* =============================================================
   6. Rank badges — sıralama göstergesi
   ============================================================= */

.rank-pill{
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
  font-size: .9rem;
  background: var(--c-neutral-100);
  color: var(--c-text);
  flex: 0 0 auto;
}

.rank-pill.rank-1{
  background: var(--g-champion);
  color: var(--c-athletic-900);
  box-shadow: 0 2px 8px rgba(var(--c-champion-rgb),.32);
}

.rank-pill.rank-2{
  background: linear-gradient(135deg, var(--c-border) 0%, var(--c-text-subtle) 100%);
  color: var(--c-athletic-900);
}

.rank-pill.rank-3{
  background: linear-gradient(135deg, var(--c-champion-300) 0%, var(--c-champion-800) 100%);
  color: #fff;
}

/* =============================================================
   7. Backgammon point pattern utility
   ============================================================= */

.bg-points{
  position: relative;
  background-color: var(--c-athletic-900);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='80' viewBox='0 0 40 80'><polygon points='20,0 28,40 12,40' fill='%23ffb020' opacity='.5'/><polygon points='20,80 28,40 12,40' fill='%23f43f5e' opacity='.4'/></svg>");
  background-size: 40px 80px;
}

.bg-points-soft{
  position: relative;
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='80' viewBox='0 0 40 80'><polygon points='20,0 28,40 12,40' fill='%23060b1e' opacity='.04'/><polygon points='20,80 28,40 12,40' fill='%23060b1e' opacity='.06'/></svg>");
  background-size: 40px 80px;
}

/* Cover image yerine generic banner: cover üstünde vignette */
.cover-vignette{
  position: relative;
}

.cover-vignette::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,11,30,.50) 0%, rgba(6,11,30,.88) 100%);
  pointer-events: none;
}

.cover-vignette > *{ position: relative; z-index: 1; }

/* =============================================================
   8. Section helpers
   ============================================================= */

.section-eyebrow{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.section-eyebrow::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--c-border) 0%, transparent 100%);
}

/* Champion accent line (footer of card etc.) */
.accent-line{
  height: 3px;
  background: var(--g-champion);
  border-radius: var(--r-pill);
  width: 56px;
}

/* =============================================================
   9. Bootstrap container override — display headings token'a bağlı
   ============================================================= */

h1, h2, h3,
.h1, .h2, .h3{
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

h4, h5, h6,
.h4, .h5, .h6{
  font-family: var(--font-ui);
}

/* =============================================================
   10. Hover lift utility
   ============================================================= */

.hover-lift{
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

/* =============================================================
   11. Navbar auth alanı
   (Önceden header.php içinde inline <style> olarak duruyordu ve
   sabit hex renklerle token sistemini by-pass ediyordu.
   Buraya taşındı, tamamı token'a bağlı.)
   ============================================================= */

.navbar-auth-wrap{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.btn-player{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-player:hover{
  background: var(--c-surface-2);
  border-color: var(--c-neutral-300);
  color: var(--c-text);
}

/* .auth-divider kaldirildi: dil secici ile hesap dugmesi arasindaki
   cizgiydi, dil secici alt bilgiye tasindi ve ayirilacak iki sey
   kalmadi. */

/* Mobil blok KALDIRILDI: .navbar-auth-wrap artik yalnizca lg ve
   ustunde cizilyor (header.php'de d-none d-lg-flex), mobilde yerini
   .nav-mobil-menu aldi. */

/* =============================================================
   12. Page hero — turnuva / lig detay sayfası üst bandı
   Önceden rgba(primary,.08) → beyaz solma idi; ekranda hiç
   görünmüyordu. Ana sayfa hero'suyla aynı dile getirildi.
   ============================================================= */

.page-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--g-hero);
  color: #fff;
  border-bottom: 0;
}

.page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 300px at 15% 15%, rgba(var(--c-primary-rgb), .50), transparent 68%),
    radial-gradient(560px 260px at 85% 90%, rgba(var(--c-champion-rgb), .30), transparent 64%);
}

/* Alt kenardaki marka çizgisi */
.page-hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--c-champion-500) 0%,
    var(--c-primary-500) 45%,
    var(--c-hot-500) 100%);
}

/* Alt ve üst boşluk EŞİT.
   Önceden `22px 14px 4px` idi: lig sayfasında hero içeriği alta yapışık
   duruyordu, turnuva sayfasında ise alttaki sekme satırının kendi
   pb-2'siyle toplanınca hizasız görünüyordu. Tek kaynak burası; sayfalar
   alt boşluğu kendileri eklemiyor. */
.page-hero .hero-wrap{ padding: 22px 14px; }

.page-hero h1,
.page-hero .hero-title{
  color: #fff;
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

/* Dikkat: buraya `*` yazılırsa içindeki .tl-status / .chip gibi kendi
   rengi olan rozetleri de ezer. Sadece düz metin taşıyıcıları hedeflenir. */
.page-hero .text-muted,
.page-hero .text-muted > span,
.page-hero .text-muted > span i{
  color: rgba(255, 255, 255, .74) !important;
}

.page-hero a:not(.btn){ color: rgba(255, 255, 255, .9); }
.page-hero a:not(.btn):hover{ color: #fff; }

/* Koyu zeminde chip'ler cam görünümlü */
.page-hero .chip{
  background: var(--c-hero-glass);
  border-color: var(--c-hero-glass-bd);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.page-hero .chip b,
.page-hero .chip .mono{ color: var(--c-champion-300); }

/* -------------------------------------------------------------
   Durum rozetleri — KOYU zemin varyantı
   -------------------------------------------------------------
   Kural: rozetin ANLAMI açık zeminle aynı kalır, yalnızca ton
   koyu zemine göre açılır (700 → 300). Önceden böyle değildi:

     s1 "Oynanıyor"  açıkta mavi   → hero'da YEŞİL görünüyordu
     s2 "Bitti"      açıkta yeşil  → hero'da BEYAZ görünüyordu

   Yani aynı durum sayfadan sayfaya farklı renkteydi. Artık tek
   eşleme var:

     bekliyor → champion (altın)
     oynanıyor → primary (mavi)
     bitti     → success (yeşil)

   Burada bir de .lg-status vardı: lig sayfasının başlık rozeti. O
   rozet kaldırıldı (aynı bilgi Lig Özeti'nde yazıyor), sınıf da site
   genelinde başka hiçbir yerde kullanılmıyordu.
   ------------------------------------------------------------- */
.page-hero .tl-status{
  border-width: 1px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* bekliyor / hazırlanan */
.page-hero .tl-status.s0{
  background: rgba(var(--c-champion-rgb), .22);
  border-color: rgba(var(--c-champion-rgb), .55);
  color: var(--c-champion-300);
}

/* oynanıyor / devam eden */
.page-hero .tl-status.s1{
  background: rgba(var(--c-primary-rgb), .24);
  border-color: rgba(var(--c-primary-rgb), .60);
  color: var(--c-primary-300);
}

/* bitti */
.page-hero .tl-status.s2{
  background: rgba(var(--c-success-rgb), .20);
  border-color: rgba(var(--c-success-rgb), .55);
  color: var(--c-success-300);
}

/* Durum sınıfı henüz basılmamışken (JS yüklenmeden önceki ilk kare)
   rozet okunaksız kalmasın diye nötr bir cam görünüm. */
.page-hero .tl-status{
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .30);
  color: rgba(255, 255, 255, .90);
}

/* Sekme pill'leri koyu zeminde.
   !important şart: main.css'te `.nav-link{ color: ... !important }` var. */
.page-hero .nav-pills .nav-link{
  background: var(--c-hero-glass);
  border: 1px solid var(--c-hero-glass-bd);
  color: rgba(255, 255, 255, .80) !important;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--t-base), color var(--t-base);
}

.page-hero .nav-pills .nav-link:hover{
  background: rgba(255, 255, 255, .16);
  color: #fff !important;
}

.page-hero .nav-pills .nav-link.active{
  background: var(--g-champion);
  border-color: transparent;
  color: var(--c-on-champion) !important;
  box-shadow: var(--sh-champion);
}

/* Koyu zeminde "geri dön" tipi outline butonlar */
.page-hero .btn-outline-secondary{
  --bs-btn-color: rgba(255, 255, 255, .85);
  --bs-btn-border-color: rgba(255, 255, 255, .3);
  --bs-btn-hover-bg: rgba(255, 255, 255, .14);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
}

@media (max-width: 575.98px){
  .page-hero .hero-wrap{ padding: 16px 12px; }
}

/* =============================================================
   13. Footer bağlantıları
   .text-muted (--c-neutral-600) beyaz zeminde 4.40:1 kalıyordu;
   küçük metin için WCAG AA sınırı 4.5:1.
   ============================================================= */

footer .nav-link.text-muted,
footer a.text-muted{
  color: var(--c-neutral-700) !important;
  transition: color var(--t-fast);
}

footer .nav-link.text-muted:hover,
footer a.text-muted:hover{
  color: var(--c-primary-700) !important;
}

/* =============================================================
   14. Boş liste durumu
   Filtre hiç sonuç döndürmediğinde sayfa bomboş kalıyordu.
   ============================================================= */

.list-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
  font-size: .95rem;
  font-weight: var(--fw-medium);
}

.list-empty i{
  font-size: 1.9rem;
  color: var(--c-text-subtle);
}

/* =============================================================
   15. "Daha fazla yükle" butonu — her sayfada aynı
   ============================================================= */

#btnLoadMore,
.loadmore-wrap .btn,
#home-stream .btn.btn-outline-primary{
  border-radius: var(--r-pill);
  padding-inline: 1.4rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
}

/* =============================================================
   14. Maç kartı — SİTE GENELİ standardı
   -------------------------------------------------------------
   Bu bileşen önce yalnızca css/pages/oyuncu_detay.css icindeydi;
   lig sayfası o dosyayı yüklemediği için lig içindeki oyuncu
   maçları kendi (.pm-*) görünümünü kullanıyordu ve site geneliyle
   uyuşmuyordu. Bileşen buraya alındı; oyuncu profili ve lig aynı
   işaretlemeyi ve aynı görünümü paylaşıyor.

   Kullanım:
     .match-list > .match-card
       .mc-player.left  > .mc-link > .mc-avatar + .mc-name
       .mc-score        > .mc-scorebox > .mc-s .mc-dash .mc-s
       .mc-player.right > .mc-link
       .mc-meta         (isteğe bağlı alt satır)
     Kazanan/kaybeden: .match-card üzerinde .is-winner / .is-loser
     DEĞİL, ilgili .mc-player üzerinde kullanılır.
   ============================================================= */

/* ---- Match cards ---- */
.match-list{ display:flex; flex-direction:column; gap: 8px; }

.match-card{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "p1 score p2"
    "meta meta meta";
  align-items:center;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.match-card:hover{
  border-color: var(--c-border);
  box-shadow: var(--sh-xs);
}

.mc-player{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mc-player.left{ grid-area: p1; }
.mc-player.right{
  grid-area: p2;
  justify-content: flex-end;
  text-align: right;
}

.mc-link{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  padding: 2px 0;
}
.mc-link-team{ cursor: default; }

/* İsimler — daha küçük, daha hafif, daha zarif */
.mc-name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: var(--fw-medium);
  letter-spacing: -.005em;
  color: var(--c-text-muted);
  line-height: 1.25;
  transition: color var(--t-fast);
}

.mc-link:hover .mc-name{
  color: var(--c-text);
}

.mc-avatar{
  display: inline-flex;
  flex: 0 0 auto;
}

/* Avatar boyutunu da küçültelim ki ölçek tutarlı olsun */
.mc-avatar .myphoto,
.mc-avatar .playerfoto,
.mc-avatar img,
.team-avatar-icon{
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.team-avatar-icon{
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-neutral-100);
  border: 1px solid var(--c-border-soft);
  color: var(--c-text-muted);
}

/* Score box — daha kompakt */
.mc-score{
  grid-area: score;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.mc-scorebox{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 4px;
  /* ZEMIN YOK.
     Gri zemin + cerceve, kartin icinde ikinci bir kart gibi duruyordu;
     liste alt alta gelince ekran kutuyla doluyordu. Skor zaten rakam ve
     kalin. Kartin gorsel cipasi olarak masa rozeti birakildi. */
  background: transparent;
  border: 0;
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  letter-spacing: -.02em;
}

.mc-dash{ opacity: .35; font-weight: var(--fw-semibold); }
.mc-s{ min-width: 12px; text-align: center; }

.mc-action{
  border: 1px solid var(--c-border-soft);
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: 5px 7px;
  line-height: 1;
  font-size: .85rem;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}

.mc-action:hover{
  background: var(--c-neutral-50);
  border-color: var(--c-border);
  color: var(--c-text);
}

.mc-watch{ border-color: rgba(220,53,69,.25); color: var(--c-danger-700); }
.mc-watch:hover{
  background: rgba(220,53,69,.06);
  color: var(--c-danger-700);
}

/* Alt satir: masa rozeti ve varsa canli yayin baglantisi.
   DIKEY kolon — onceden yatay tek satirdi ve " · " ile ayriliyordu.
   Yayin baglantisi tiklanabilir bir eylem, masa numarasi yalnizca
   etiket; ikisini ayni satirda esit agirlikta dizmek baglantiyi
   goze carpmaz kiliyordu. Tek ogesi olan kullanimlar (Tur N, oyuncu
   profilindeki lig/turnuva baglantisi) bundan etkilenmiyor. */
.mc-meta{
  grid-area: meta;
  margin-top: 6px;
  font-size: .72rem;
  color: var(--c-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
/* .mc-meta-link kaldirildi: tek kullanicisi oyuncu profilindeki
   kartlarda turnuva/lig adini basan baglantiydi. O ad artik grup
   basliginda (.mgroup-title) ve baska hicbir yer bu sinifi
   uretmiyordu. */

/* -------------------------------------------------------------
   Kazanan vurgusu — RENKLE değil, KONTRASTLA
   -------------------------------------------------------------
   Önceki hâli kazananın adına yeşil zemin + yeşil yazı veriyor,
   kaybedeni de opacity ile soluklaştırıyordu. Bir listede yan yana
   gelince ekran yeşil lekelerle doluyor, sonuç bilgisi ise ikinci
   plana düşüyordu.

   Yeni yaklaşım: kazanan KOYU ve kalın, kaybeden soluk. Zemin,
   çerçeve ve renk kullanılmıyor; ayrım yalnızca ağırlık farkından
   geliyor. Skorun kendisi de aynı dili konuşur (aşağıda).
   ------------------------------------------------------------- */
.mc-player.is-winner .mc-name,
.is-winner .mc-name{
  color: var(--c-text);
  font-weight: var(--fw-bold);
}

.mc-player.is-loser .mc-name,
.is-loser .mc-name{
  color: var(--c-text-subtle);
  font-weight: var(--fw-medium);
}

/* Zemin ve solukluk kaldırıldı: satır bütünlüğü korunsun. */
.is-winner .mc-link{
  background: none;
  padding: 2px 0;
}
.is-loser{ opacity: 1; }

/* ---------- MOBIL: DAR EKRANDA DA UC SUTUN ----------
   Onceki iki asamali duzen (768px alti alt alta ortali, 576px alti
   "isim / skor" iki sutun) satiri uc ayri hizaya dagitiyordu: sol isim
   ORTALI, sag isim SAGA yasli, skor sagda. Olculdu (393px): sol ve sag
   isim ayni 209px'lik sutunda, biri ortali biri saga dayali.

   Artik dar ekranda da masaustuyle AYNI okuma duzeni var:
     sol oyuncu SOLA yasli - skor ORTADA - sag oyuncu SAGA yasli
   Isim kirpilmak yerine sariyor. Avatar dusuyor: iki 32px avatar,
   393px'te isimlere kalan yeri neredeyse yariya indiriyordu ve
   satirin okunmasina bir sey katmiyordu. */
@media (max-width: 767.98px){
  .match-card{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "p1 score p2"
      "meta meta meta";
    column-gap: 8px;
    row-gap: 2px;
    padding: 10px;
  }

  .mc-player.left { justify-content: flex-start; text-align: left; }
  .mc-player.right{ justify-content: flex-end;   text-align: right; }

  .mc-player.left  .mc-link{ justify-content: flex-start; }
  .mc-player.right .mc-link{ justify-content: flex-end; }

  .mc-avatar,
  .mc-ava{ display: none; }

  .mc-name{
    font-size: .82rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Skor ortada. Eylem dugmeleri (vs / izle) varsa skorun ALTINA
     sariyor; yan yana dizilince orta sutun genisleyip isimlerin yerini
     yiyordu. */
  .mc-score{
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
    /* Orta sutun `auto` genisliginde: sinir konmazsa skor ve iki dugme
       yan yana dizilip 93px yiyor, isimlere 107px kaliyordu. Sinirla
       dugmeler skorun altina sariyor ve isimler nefes aliyor. */
    max-width: 76px;
  }

  .mc-action{ padding: 3px 6px; font-size: .78rem; }

  .mc-meta{ align-items: center; }
}


/* Skor kutusu durum varyantları — .is-finished / .is-pending işaretini
   sayfa verir; renkler turnuva sayfasındaki skor pilliyle aynıdır. */

/* ---------- Skor kutusu ----------
   Yeşil zemin kaldırıldı. Kutu her durumda nötr; sonucu RENK değil,
   iki rakam arasındaki ağırlık farkı anlatır.

   Hangi tarafın kazandığını sayfa `w1` / `w2` sınıfıyla bildirir;
   böylece skor kutusu tek başına da doğru okunur. */

.mc-scorebox{
  /* Zemin ve cerceve YOK — yukaridaki §14 kuralinin devami.
     Burasi eskiden zemini geri veriyordu; iki kural birbirini eziyordu. */
  background: transparent;
  border: 0;
  color: var(--c-text);
  font-family: var(--font-numeric);
}

/* Kazanan yesil, kaybeden pembe — puan tablosundaki G ve M
   sutunlariyla AYNI tonlar (--c-success-700 / --c-hot-600, bkz.
   pages/turnuva.css #tab-standings). Boylece tablodan acilan liste
   ile tablonun kendisi ayni dili konusuyor.

   Agirlik farki da duruyor: renk korlugunde de kazanan okunabilsin. */
/* HUKMEN: skor girilmedigi icin kutuda rakam degil durum yaziyor.
   Onceden "0 - 0" gorunuyordu ve kazananin adi yesilken skorun
   berabere durmasi celiskiliydi. */
.mc-scorebox.mc-hukmen{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--c-warning-700, #b96c00);
  background: var(--c-warning-50, #fff8e8);
  border-color: var(--c-warning-100, #ffefc7);
}
.mc-scorebox.mc-hukmen .mc-s{ font-size: inherit; font-weight: inherit; }

.mc-scorebox.w1 .mc-s:first-of-type,
.mc-scorebox.w2 .mc-s:last-of-type{
  color: var(--c-success-700);
  font-weight: 800;
}

.mc-scorebox.w1 .mc-s:last-of-type,
.mc-scorebox.w2 .mc-s:first-of-type{
  color: var(--c-hot-600);
  font-weight: var(--fw-semibold);
}

/* Oynanmamış / berabere: tamamen nötr, rakamlar eşit ağırlıkta. */
.mc-scorebox.is-pending{
  /* Oynanmamis mac: zemin yerine yalnizca soluk renk. */
  background: transparent;
  border: 0;
  color: var(--c-text-muted);
  font-weight: var(--fw-semibold);
}


@media (max-width: 576px){
  .mc-scorebox{
    padding: 4px 9px;
    font-size: .92rem;
  }
}

/* =============================================================
   15. Danışman çiftler — takım satırı gösterimi
   -------------------------------------------------------------
   Turnuva puan tablosu ve lig puan tablosu aynı bileşeni kullanır;
   önce yalnızca css/pages/turnuva.css icindeydi ve lig kendi
   (üst üste binen iki avatar) gösterimini yapıyordu.

   İki oyunculu takımda TEK bir "çift" ikonu (.team-avatar-duo),
   tek oyuncuda oyuncunun avatarı gösterilir. İsimler alt alta ve
   aynı hizada durur — girinti yoktur.
   ============================================================= */
/* =========================
   Doubles (danışman çiftler) - yeni görünüm
   ========================= */

.team-doubles{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* Takım avatar alanı — TEK görsel.
   Önceden iki avatar üst üste bindiriliyordu (mutlak konum + 12px
   kaydırma); ikisi de yarım görünüyor, isimlerle çakışıyordu. Artık
   iki oyunculu takımda tek bir "çift" ikonu, tek oyuncuda ise
   oyuncunun avatarı basılıyor. */
.team-avatars{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-avatar-duo{
  /* Boyutu kapsayıcı belirler; sabit px yazılırsa dar ekran kuralı
     (.team-avatars 34px) daireyi ovalleştiriyor. */
  width:100%;
  height:100%;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(var(--c-primary-rgb), .10);
  border: 1px solid rgba(var(--c-primary-rgb), .22);
  color: var(--c-primary-700);
  font-size: 1rem;
}

.team-avatars img,
.team-avatars .myphoto,
.team-avatars .playerfoto,
.team-avatars .avatar-initial{
  width:36px !important;
  height:36px !important;
  border-radius:50%;
  display:block;
}

/* İsimler: alt alta, eşit */
.team-names2{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.12;
  gap:2px;
}

.team-names2 .p{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height: 1.3;
}

/* Girinti YOK: iki isim aynı hizada, alt alta.
   Önce ikinci isim 12px içeriden başlıyordu; takım bir çift gibi değil
   iç içe bir liste gibi görünüyordu. */
.team-names2 .p2{
  padding-left:0;
}

/* Foto gizleme modu */
body.hide-photos .team-avatars{ display:none !important; }
body.hide-photos .team-doubles{ gap:0; }
/* .p2 girintisi zaten yok; foto gizleme modunda ek kural gerekmiyor. */


/* =============================================================
   16. Satır içi maç listesi — puan tablosu satırından açılır
   -------------------------------------------------------------
   Lig ve turnuva puan tablolarında her satırdaki düğme, o
   oyuncunun/takımın maçlarını satırın altında açar. Maçlar §14
   maç kartı bileşeniyle çizilir.
   ============================================================= */

.player-matches-expand > td{
  background:var(--c-surface-2);
  border-top:none !important;
  padding:0 !important;
}

.pm-toggle-btn{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.22rem .5rem;
  font-size:.75rem;
  color:var(--c-text-muted);
  border:1px solid var(--c-border);
  border-radius:6px;
  background:var(--c-surface-2);
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
  cursor:pointer;
  line-height:1.4;
}

.pm-toggle-btn:hover{
  background:#eff6ff;
  border-color:#93c5fd;
  color:var(--c-primary-700);
}

.pm-toggle-btn.is-open{
  background:#eff6ff;
  border-color:var(--c-primary-500);
  color:var(--c-primary-700);
}

.pm-toggle-btn i{ font-size:.8rem; }

/* -------------------------------------------------------------
   §14.1  Mac karti — avatar, masa rozeti, mobil yerlesim
   -------------------------------------------------------------
   .mc-ava, .mc-avatar'dan AYRI bir sinif. .mc-avatar mevcut bir
   SARMALAYICI: icine profil_foto() ciktisi konuyor (oyuncu profili,
   lig) ve "img { width:32px !important }" kurali var. Turnuva karti
   ise avatari kendi ciziyor; ayni sinifi paylassalar o !important
   mutlak konumlu resmi bozardi.

   Bas harfler ALTTA (span'in kendi zemini), fotograf USTTE mutlak
   konumlu. Fotograf yuklenemezse resim cizilmez, bas harf gorunur
   kalir — JS'te onerror'a gerek yok.
   ------------------------------------------------------------- */
.mc-ava{
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  user-select: none;
}
.mc-ava > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Sagdaki oyuncuda avatar DIS tarafta: isim ortaya, avatar kenara.
   DOM sirasi iki tarafta da "avatar + isim" oldugu icin yon burada
   cevriliyor; ikinci bir isaretleme uretmemek icin. */
.mc-player.right .mc-link{ flex-direction: row-reverse; }

/* Masa rozeti — skorun zemini kalkinca kartin tek gorsel cipasi. */
.mc-masa{
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-neutral-50);
  border: 1px solid var(--c-border-soft);
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* Canli yayin baglantisi — masa rozetiyle AYNI kalip, kirmizi tonda.
   Ayni geometri (pill, ayni dolgu ve punto) iki ogeyi alt alta
   hizali tutuyor; ayrimi renk yapiyor. */
/* -------------------------------------------------------------
   .player-matches-inner — acilim satirinin ic kabi
   -------------------------------------------------------------
   Liste GENIS EKRANDA oyuncu adinin basladigi yerden basliyor: sol
   dolgu, tablonun ilk sutununun (#) genisligi kadar. O genislik zaten
   tabloda --sticky-col-1-w olarak tanimli (turnuva.php'de 70px), yani
   ikinci bir yere sabit sayi yazmiyoruz; sutun genisligi degisirse
   hiza kendiliginden takip ediyor.

   MOBILDE tam genislik: dar ekranda 70px'lik bos sol serit, listeyi
   okunmayacak kadar daraltirdi.
   ------------------------------------------------------------- */
.player-matches-inner{
  padding-left: var(--sticky-col-1-w, 70px);
}

@media (max-width: 767.98px){
  .player-matches-inner{ padding-left: 0; }
}

/* -------------------------------------------------------------
   .match-list-mini — puan tablosu satirinin altinda acilan liste
   -------------------------------------------------------------
   Bu liste zaten bir baglamin icinde: hangi oyuncuya ait oldugu bir
   ust satirda yaziyor. Avatarlar ve tam punto isimler orada bilgi
   eklemiyor, yalnizca yer kapliyor ve tabloyu dagitiyordu.

   Varyant yalnizca gorunumu kisiyor; kart yapisi ve baglantilar ayni
   kaliyor (isimler hala tiklanabilir).
   ------------------------------------------------------------- */
.match-list-mini .mc-ava{ display: none; }

.match-list-mini .match-card{
  padding: .45rem .7rem;
  border-radius: 10px;
}

.match-list-mini .mc-name{
  font-size: .8rem;
  font-weight: var(--fw-semibold);
}

.match-list-mini .mc-scorebox{
  padding: .1rem .5rem;
}

.match-list-mini .mc-s{ font-size: .9rem; }
.match-list-mini .mc-dash{ font-size: .8rem; }

.match-list-mini .mc-meta{
  margin-top: 3px;
  font-size: .66rem;
}

/* Satirlar birbirine yakin dursun; liste bir tablo satirinin devami. */
.match-list-mini .match-card + .match-card{ margin-top: .35rem; }

.mc-live{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-danger-50);
  border: 1px solid var(--c-danger-300);
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: var(--fw-semibold);
  color: var(--c-danger-700);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.mc-live:hover,
.mc-live:focus-visible{
  background: var(--c-danger-100);
  border-color: var(--c-danger-500);
  color: var(--c-danger-700);
  text-decoration: none;
}

/* Yayin "canli" oldugu icin ikon nabiz gibi atiyor; hareketi
   kapatanlar icin sabit kaliyor. */
.mc-live i{ font-size: .8rem; line-height: 1; }

@media (prefers-reduced-motion: no-preference){
  .mc-live i{ animation: mc-live-pulse 1.8s ease-in-out infinite; }
}

@keyframes mc-live-pulse{
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* -------------------------------------------------------------
   .match-list-mini — dar ekran
   -------------------------------------------------------------
   Uc sutunlu duzen ve isim sarmasi artik BAZ bilesende (yukaridaki
   767.98px blogu); mini varyantin ayrica tanimlamasina gerek yok.
   Burada yalnizca minide farkli olan sey kaliyor: punto biraz daha
   kucuk, cunku bu liste bir tablo satirinin ALTINDA aciliyor ve
   ustundeki satirdan daha hafif okunmali.
   ------------------------------------------------------------- */
@media (max-width: 575.98px){
  .match-list-mini .mc-name{ font-size: .78rem; }
}

/* ============================================================ §16
   Sıralanabilir tablo başlıkları

   dernekadmin/turnuvalar.php kullanıyor; lig listesi de aynı sınıfları
   alabilir. Sıralama SUNUCUDA yapılır — liste sayfalandığı için
   istemcide sıralamak yalnızca görünen sayfayı dizer.

   İkon her zaman yer kaplar (nötr hâlde soluk çift ok): yalnızca aktif
   sütunda göstermek, sıralama değiştikçe başlık genişliklerini
   oynatırdı.
   ============================================================ */
th.th-sort{
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.th-sort:hover .th-sort-label{ text-decoration: underline; }

th.th-sort .th-sort-ico{
  margin-inline-start: .35rem;
  font-size: .75em;
  opacity: .35;
  vertical-align: baseline;
}
th.th-sort-active .th-sort-ico{ opacity: 1; }
th.th-sort-active .th-sort-label{ font-weight: 600; }

/* Klavye ile gezerken odak görünür kalsın. */
th.th-sort:focus-visible{
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: -2px;
}

/* ============================================================ §17
   min-width yardimcisi

   .min-w-0 kodun 22 yerinde kullaniliyordu ama HICBIR YERDE
   TANIMLI DEGILDI: Bootstrap 5.3.3 boyle bir yardimci sinif
   getirmiyor (min-w-* utility'leri yok) ve projede de yazilmamis.
   Yani her kullanim sessizce hicbir sey yapmiyordu.

   Sonucu su: flex ogesinin varsayilan min-width degeri `auto`dur ve
   oge, icerigi kadar buyur. text-truncate calismaz, satir kutunun
   disina tasar. Oyuncu sayfasi > Turnuvalar sekmesinde olculdu:
   393px genisligindeki ekranda satir 449px'e cikiyor, durum rozeti
   ve ok isareti ekran disinda kaliyordu.
   ============================================================ */
.min-w-0{ min-width: 0; }

/* ============================================================ §18
   .tbl-mini-stats — puan tablosunun MOBIL istatistik seridi

   Dar ekranda 8 sutunluk bir puan tablosu sigmiyor: ya yatay kaydirma
   cikiyor ya da isim sutunu 110px'e dusup isimleri kirpiyor. Cozum,
   siralamayi BELIRLEYEN sayilari sutun olarak birakip geri kalanini
   ismin altina, tek satirlik bir serit halinde almak.

   Basliklar (O/G/M/A) seritte de duruyor, yani bilgi kaybi yok.
   Renkler tablodaki sutun renkleriyle ayni: G yesil, M pembe.
   ============================================================ */
.tbl-mini-stats{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  margin-top: 2px;
  font-family: var(--font-numeric);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  color: var(--c-text-muted);
}

.tbl-mini-stats > span{ white-space: nowrap; }

.tbl-mini-stats .k{
  font-family: var(--font-ui);
  font-size: .62rem;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin-right: .22rem;
}

.tbl-mini-stats .v{ font-weight: var(--fw-bold); color: var(--c-text); }
.tbl-mini-stats .v-win { color: var(--c-success-700); }
.tbl-mini-stats .v-loss{ color: var(--c-hot-600); }

/* ============================================================ §19
   Mobil menu — collapse yerine dropdown

   Bootstrap collapse acilirken ogenin YUKSEKLIGINI animasyonluyordu.
   Menu fixed-top navbar'in icinde oldugu icin navbar da her karede
   buyuyor; logo yerinden oynuyor, sayfa zipliyor ve 350ms boyunca
   layout yeniden hesaplaniyordu. Dropdown mutlak konumlu: sayfa akisi
   hic degismiyor. Kullanici adi menusu zaten boyle calisiyordu.
   ============================================================ */
.nav-burger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 1.35rem;
  line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.nav-burger:hover{
  background: var(--c-surface-2);
  border-color: var(--c-neutral-300);
  color: var(--c-text);
}

/* Menu acikken dugme de acik gorunsun. */
.nav-burger[aria-expanded="true"]{
  background: var(--c-primary-50);
  border-color: var(--c-primary-200);
  color: var(--c-primary-700);
}

.nav-mobil-menu{
  min-width: 244px;
  padding: .4rem;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  /* Uzun menu ekrani asmasin: dropdown kendiliginden kaydirmaz. */
  max-height: calc(100dvh - var(--nav-h) - 1.5rem);
  overflow-y: auto;
}

.nav-mobil-menu .dropdown-item{
  border-radius: var(--r-md);
  padding: .62rem .75rem;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
}

.nav-mobil-menu .dropdown-item i{ opacity: .7; }

.nav-mobil-menu .dropdown-item.active{
  background: var(--c-primary-50);
  color: var(--c-primary-700);
  font-weight: var(--fw-semibold);
}

.nav-mobil-menu .dropdown-item.active i{ opacity: 1; }

/* Kimin girisi acik — mobil seritte ad gorunmuyor, menude yaziyor. */
.nav-mobil-kisi{
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .75rem .3rem;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: .92rem;
  color: var(--c-text);
}

.nav-mobil-kisi i{
  font-size: 1.1rem;
  color: var(--c-text-muted);
}

/* ============================================================ §20
   Alt bilgi

   Onceki hali iki sutunlu bir .row idi ve icinde marka satiri, slogan,
   "Baglantilar" basligi, baglar, telif ve e-posta dugmesi vardi. Isaret-
   leme de bozuktu: telif blogu bir sutunun degil dogrudan .row'un
   cocuguydu, sonda da fazladan bir </div> duruyordu.

   Yeni hali tek satir: solda yasal baglar, sagda dil secici ve telif.
   Dar ekranda alt alta ve ortali.
   ============================================================ */
.footer-alt{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
}

.footer-baglar{
  flex-wrap: wrap;
  margin: 0;
  font-size: .85rem;
}

.footer-alt-sag{
  display: flex;
  align-items: center;
  gap: .75rem;
}

.footer-telif{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px){
  .footer-alt{
    flex-direction: column;
    gap: .85rem;
  }

  .footer-baglar{ justify-content: center; }

  /* Dil secici ile telif alt alta: yan yana dururken telif satiri
     sikisip iki satira boluniyordu. */
  .footer-alt-sag{
    flex-direction: column;
    gap: .6rem;
  }
}

/* Mobil menude "Kayıt ol" — listedeki diger satirlardan ayrilsin.
   Masaustunde dolu bir dugme; burada satir kalibini bozmadan yalnizca
   marka rengiyle isaretleniyor. */
.nav-mobil-menu .nav-mobil-kayit{
  color: var(--c-primary-700);
  font-weight: var(--fw-semibold);
}

.nav-mobil-menu .nav-mobil-kayit i{ opacity: 1; }

/* =============================================================
   §21  LISTE SATIRI (.tk-row) — turnuva ve lig listeleri
   -------------------------------------------------------------
   Turnuva ve lig listeleri AYNI satiri kullaniyor: ayni geometri, ayni
   meta seridi, ayni durum rozeti. Ikisi ayni seyi listeliyor.

   Onceki hali bir ZAMAN CIZELGESIYDI: solda tarih sutunu, ortada
   renkli nokta ve dikey cizgi, sagda kart. Kart da kendi icinde uc
   banda bolunuyordu (baslik / cipler / sampiyon).

   Olculdu (393px, 14 turnuva): satir 136-198px, liste 1848px. Yani
   ekrana ancak 3-4 turnuva siginiyordu ve yerin buyuk kismini tarih
   sutunu ile ayirici cizgiler yiyordu.

   Yeni hali TEK KART, IKI SATIR:
     [logo] baslik                          [durum]
     [logo] tarih . oyuncu . yer . format . sampiyon
   Logo iki satiri birden kapliyor. Nokta ve dikey cizgi kalkti;
   durum rengi sol kenardaki 3px seride tasindi.

   Tarih meta seridinin ILK ogesi ve vurgulu: eski tasarimin tek iyi
   fikri tarihin taranabilir olmasiydi, o korunuyor.
   ============================================================= */

.tk-liste{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.tk-row{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo title  status"
    "logo meta   meta";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  /* solda 3px'lik durum seridi icin fazladan dolgu */
  padding: 10px 14px 10px 17px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

/* Durum seridi — eski renkli noktanin yerine.
   Nokta bir cizelge ogesiydi ve yaninda dikey cizgi istiyordu; serit
   ayni bilgiyi kartin kendi kenarinda veriyor. */
.tk-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-neutral-300);
}

.tk-row.tk-bekliyor::before { background: var(--c-warning-500); }
.tk-row.tk-oynaniyor::before{ background: var(--c-primary-600); }
.tk-row.tk-bitti::before    { background: var(--c-success-500); }
.tk-row.tk-arsiv::before    { background: var(--c-neutral-300); }

.tk-row[data-href]{ cursor: pointer; }

.tk-row[data-href]:hover{
  border-color: var(--c-border);
  box-shadow: var(--sh-sm);
}

.tk-logo{
  grid-area: logo;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-neutral-100);
  flex: 0 0 auto;
}

.tk-logo-bos{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
}

.tk-title{
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--c-text);
  overflow-wrap: anywhere;
  transition: color var(--t-fast);
}

.tk-row[data-href]:hover .tk-title,
.tk-row[data-href]:hover .tk-title a{ color: var(--c-primary-700); }

/* Baslik bir baglanti da olabilir (ana sayfa): satirin tamami zaten
   tiklanabilir ama baslik gercek bir <a> olunca klavyeyle gezilebiliyor
   ve arama motoru baglantiyi goruyor. */
.tk-title a{
  color: inherit;
  text-decoration: none;
}

.tk-title a:hover{ text-decoration: underline; }

/* Durum rozeti site geneli bilesen (.tl-status s0|s1|s2); burada
   yalnizca yerlestiriliyor. */
.tk-row > .tl-status{
  grid-area: status;
  justify-self: end;
}

.tk-meta{
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.tk-bit{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.tk-bit i{ font-size: .85em; opacity: .7; }

/* Sampiyon: meta seridindeki tek vurgulu deger. Lig bittiginde
   listede ilk aranan sey bu; digerleriyle ayni tonda birakmak
   onu tarih ve grup sayisinin arasinda kaybediyordu. */
.tk-sampiyon{
  font-weight: 600;
  color: var(--c-warning-700, #a16207);
}
.tk-sampiyon i{ opacity: 1; }

/* Tarih meta seridinde vurgulu: listede en cok taranan bilgi bu. */
.tk-date{
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.tk-champ{
  font-weight: var(--fw-semibold);
  color: var(--c-champion-800);
}

.tk-champ i{ color: var(--c-champion-600); opacity: 1; }

.tk-format{ color: var(--c-primary-700); }

/* ---- Iskelet (ilk yukleme) ---- */
.tk-skeleton .tk-row{ pointer-events: none; }
.tk-skeleton .tk-row::before{ background: var(--c-neutral-200); }

/* ---- Dar ekran ---- */
@media (max-width: 575.98px){
  .tk-row{
    column-gap: 10px;
    padding: 9px 11px 9px 14px;
    border-radius: var(--r-md);
  }

  .tk-logo{ width: 34px; height: 34px; border-radius: 6px; }
  .tk-title{ font-size: .9rem; }
  .tk-meta{ font-size: .72rem; gap: 1px 8px; }
}

/* ---- Genis ekran ---- */
@media (min-width: 1200px){
  .tk-row{ padding: 12px 16px 12px 19px; }
  .tk-logo{ width: 46px; height: 46px; }
  .tk-title{ font-size: 1.04rem; }
  .tk-meta{ font-size: .8rem; }
}

/* =============================================================
   §21b  TURNUVA DURUM PANELI (.tl-panel)

   Ayni panel iki yerde duruyor:
     - turnuva listesi kartinin sag tarafi (tournaments.php)
     - turnuva sayfasinin kenar sutunu (turnuva.php)
   Cizimi de tek yerden geliyor (inc/turnuva_durum.php); stil burada
   dursun ki iki sayfa zamanla ayrismasin.

   Grup rengi --tl-renk uzerinden: paneli saran .tl-kart verebilir,
   panel kendi gN sinifiyla da tasiyabilir (tek basina durdugunda).
   ============================================================= */

.tl-panel.g0{ --tl-renk: var(--c-primary-600); --tl-renk-yumusak: var(--c-primary-50); }
.tl-panel.g1{ --tl-renk: var(--c-warning-600); --tl-renk-yumusak: var(--c-warning-50); }
.tl-panel.g2{ --tl-renk: var(--c-success-600); --tl-renk-yumusak: var(--c-success-50); }

.tl-panel{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
}

.tl-panel-ic{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

.tl-panel-eylem{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* ---- Durum rozeti ---- */
.tl-rozet{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--tl-renk-yumusak, var(--c-surface-2));
  color: var(--tl-renk, var(--c-text-muted));
}

.tl-rozet i{ font-size: .72rem; }

/* ---- Oynanıyor ---- */
.tl-tur{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: var(--fw-black);
  letter-spacing: .1em;
  color: var(--c-primary-700);
  white-space: nowrap;
}

.tl-ilerleme{
  width: 180px;
  max-width: 100%;
}

.tl-ilerleme-ust{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
}

.tl-yuzde{
  font-family: var(--font-numeric);
  font-weight: var(--fw-bold);
  color: var(--c-primary-700);
}

.tl-bar{
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  overflow: hidden;
}

.tl-bar > span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--g-primary);
  transition: width var(--t-slow);
}

.tl-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--g-primary);
  color: var(--c-on-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-primary);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.tl-btn:hover{
  color: var(--c-on-primary);
  transform: translateY(-1px);
  box-shadow: var(--sh-primary-h);
}

.tl-btn i{ font-size: .8rem; }

.tl-ikon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-warning-700);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.tl-ikon-btn:hover{
  background: var(--c-warning-50);
  border-color: var(--c-warning-300);
  color: var(--c-warning-700);
}

/* ---- Bekliyor: geri sayım ---- */
.tl-geri{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.tl-geri-baslik{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.tl-geri-sayac{
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.tl-geri-blok{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
}

.tl-geri-blok b{
  font-family: var(--font-numeric);
  font-size: 1.12rem;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-warning-700);

  /* Rakamlar her saniye değişiyor; eşit genişlik olmazsa blok
     titriyor. */
  font-variant-numeric: tabular-nums;
}

.tl-geri-blok i{
  font-style: normal;
  font-size: .56rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  color: var(--c-text-subtle);
  margin-top: 3px;
}

/* Gün bloğu bir günden az kalınca gizleniyor (JavaScript hidden
   koyuyor). .tl-geri-blok display:flex olduğu için [hidden]'in
   kendi display:none'ı ezilirdi; kural burada. */
.tl-geri-blok[hidden]{ display: none; }

/* Gün ile saatin arasında iki nokta yok (3 gün 4 saat, "3:04" değil);
   bitişik durunca tek bir sayı gibi okunuyordu. */
.tl-geri-gun{ margin-right: 6px; }

.tl-geri-ayrac{
  font-family: var(--font-numeric);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-neutral-300);
}

/* Başlangıç anı geçmiş ama turnuva hâlâ "bekliyor"da kalmışsa
   sayaç yerine kısa bir not: eksi bir süre saymak anlamsız. */
.tl-geri.tl-gecti .tl-geri-sayac{ display: none; }

.tl-geri-not{
  display: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-warning-700);
}

.tl-geri.tl-gecti .tl-geri-not{ display: block; }

/* ---- Hazırlanan lig: kadro sayısı ----

   Turnuvada bu köşede geri sayım duruyor. Ligin başlama tarihi yok
   (time_create ligin OLUŞTURULMA anı), o yüzden sayaç yerine kadronun
   ne kadar dolduğu yazıyor: hazırlanan bir ligde kullanıcının merak
   ettiği tek şey bu. Yerleşim geri sayımla aynı — iki liste yan yana
   açıldığında panel köşesi kaymasın. */
.tl-hazir{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.tl-hazir-baslik{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.tl-hazir-sayi{
  font-family: var(--font-numeric);
  font-size: 1.35rem;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-warning-700);
}

.tl-panel-dikey .tl-hazir{ align-items: flex-start; }

/* ---- Bitti: şampiyon ---- */
.tl-champ{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Çiftler turnuvasında oyuncu avatarı yerine tek, anonim çift ikonu
   basılıyor (components.css §14.1). Boyutunu oradaki kural veriyor;
   burada yalnızca satırda ezilmemesi sağlanıyor. */
.tl-champ .team-avatar-icon{ flex: 0 0 auto; }

.tl-avatar{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-2);
}

/* Bas harf avatarinin ZEMIN RENGI sunucudan geliyor (inline style):
   profil_foto() ile ayni avatar_color_from_text() tohumu. Renk burada
   sabitlenirse ayni oyuncu sayfadan sayfaya renk degistirirdi. */
.tl-avatar-bh{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: var(--fw-bold);
  color: #fff;
}

.tl-champ-yazi{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tl-champ-lbl{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .64rem;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-champion-700);
}

.tl-champ-ad{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ---- DIKEY YERLESIM (kenar sutunu) ----
   Dar bir sutunda yan yana duran iki blok hem sikisiyor hem ilerleme
   cubugunu 100px'e dusuruyordu; burada her sey alt alta ve tam
   genislikte. */
.tl-panel-dikey{
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.tl-panel-dikey .tl-panel-ic,
.tl-panel-dikey .tl-geri,
.tl-panel-dikey .tl-champ{
  align-items: flex-start;
}

/* Icerigi olmayan kutu (macsiz tur) satir araligi kadar yer
   kapliyordu. */
.tl-panel-dikey .tl-panel-ic:empty{ display: none; }

.tl-panel-dikey .tl-ilerleme{ width: 100%; }

.tl-panel-dikey .tl-panel-eylem{
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.tl-panel-dikey .tl-tur{ font-size: .8rem; }

.tl-panel-dikey .tl-geri-blok{ min-width: 38px; }
.tl-panel-dikey .tl-geri-blok b{ font-size: 1.25rem; }

.tl-panel-dikey .tl-champ-ad{ max-width: 100%; white-space: normal; }

/* =============================================================
   §21c  TURNUVA ZAMAN CIZELGESI (.tl-liste / .tl-grup / .tl-kart)

   Sol kenarda dikey bir ray, her kartin hizasinda renkli bir nokta,
   kartin icinde solda kimlik (logo + baslik + meta) sagda durum
   paneli (§21b).

   Iki yerde kullaniliyor: /tournaments listesi ve ana sayfadaki son
   turnuvalar seridi. Ayni turnuvanin iki sayfada farkli gorunmemesi
   icin stil de cizim de (inc/turnuva_durum.php) tek yerde.

   Grup rengi TEK yerden: .tl-grup.gN / .tl-kart.gN uzerindeki
   --tl-renk. Nokta, serit ve panel bunu okuyor.
   ============================================================= */

.tl-liste{
  position: relative;
  padding-left: 34px;
}

/* Dikey ray. Listenin tepesinde ve dibinde boşlukta asılı kalan
   çizgi ucu görüntüyü bitmemiş gösteriyordu; ilk noktanın hizasında
   başlayıp son noktanın hizasında bitiyor. */
.tl-liste::before{
  content: "";
  position: absolute;
  left: 11px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-neutral-300);
}

/* ---- Bölüm başlığı ---- */
.tl-grup{
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--sp-6) 0 var(--sp-3);
}

.tl-liste > .tl-grup:first-child{
  margin-top: 0;
}

.tl-grup-ad{
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: var(--fw-black);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tl-renk, var(--c-text-muted));
}

.tl-grup-adet{
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text-subtle);
}

/* Başlığın rayla kesiştiği yerdeki işaret kartların noktalarıyla
   karışmasın diye içi boş. */
.tl-grup::before{
  content: "";
  position: absolute;
  left: -29px;
  top: .35em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--tl-renk, var(--c-border));
}

/* ---- Grup renkleri (tek kaynak) ---- */
.tl-grup.g0, .tl-kart.g0{ --tl-renk: var(--c-primary-600); --tl-renk-yumusak: var(--c-primary-50); }
.tl-grup.g1, .tl-kart.g1{ --tl-renk: var(--c-warning-600); --tl-renk-yumusak: var(--c-warning-50); }
.tl-grup.g2, .tl-kart.g2{ --tl-renk: var(--c-success-600); --tl-renk-yumusak: var(--c-success-50); }

/* =============================================================
   KART
   ============================================================= */
.tl-kart{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

/* Sol kenardaki ince renk şeridi: uzun listede bölüm başlığı
   ekrandan çıkınca kartın hangi bölüme ait olduğu yine belli. */
.tl-kart::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tl-renk, var(--c-border));
}

.tl-kart[data-href]{ cursor: pointer; }

.tl-kart[data-href]:hover{
  transform: translateY(-1px);
  border-color: var(--c-border-soft);
  box-shadow: var(--sh-md);
}

.tl-kart[data-href]:hover .tl-baslik{ color: var(--c-primary-700); }

/* ---- Ray noktası ---- */
.tl-nokta{
  position: absolute;
  left: -29px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tl-renk, var(--c-neutral-300));
  box-shadow: 0 0 0 3px var(--c-bg);
}

/* Devam eden turnuvanın noktası nefes alıyor: listede gözün ilk
   gideceği yer burası olsun. */
.tl-kart.g0 .tl-nokta::after{
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--c-primary-600);
  animation: tl-nabiz 2.2s ease-out infinite;
}

@keyframes tl-nabiz{
  0%   { transform: scale(.6); opacity: .55; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .tl-kart.g0 .tl-nokta::after{ animation: none; opacity: .35; }
  .tl-kart{ transition: none; }
}

/* ---- Sol: kimlik ---- */
.tl-sol{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tl-logo{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
}

.tl-logo-bos{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
  font-size: 1.1rem;
}

.tl-bilgi{ min-width: 0; }

.tl-baslik{
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
  transition: color var(--t-fast);

  /* İki satırda kesiliyor: tek satıra sıkıştırınca uzun turnuva
     adlarının yarısı kayboluyordu. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tl-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.tl-bit{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.tl-bit i{
  font-size: .82rem;
  color: var(--c-text-subtle);
}

.tl-bit-yer{
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- MOBIL ----
   Panel kartin altina iniyor: yan yana kalsaydi ilerleme cubugu ve
   geri sayim 360px'te basligin ustune biniyordu. */
@media (max-width: 767.98px){
  .tl-liste{ padding-left: 22px; }
  .tl-liste::before{ left: 5px; }

  /* Kart artık iki satırlı; noktayı dikey ortalamak onu panelin
     hizasına düşürüyordu. Üst satıra, logonun hizasına sabit. */
  .tl-nokta{
    left: -22px;
    top: 26px;
    transform: none;
    width: 10px;
    height: 10px;
  }

  .tl-grup::before{ left: -22px; width: 8px; height: 8px; }

  .tl-kart{
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .tl-logo{ width: 38px; height: 38px; }

  .tl-baslik{ font-size: .95rem; }

  .tl-bit-yer{ max-width: 150px; }

  /* Panel iki satıra ayrılıyor:
       üst  -> duruma özel içerik (tur/ilerleme, geri sayım, şampiyon)
       alt  -> rozet solda, eylem sağda

     Tek satırda tutulunca 375px'te ilerleme çubuğu ile düğme aynı
     yere sıkışıyor; rozeti düğmenin altına yığmak ise sağ kenarda
     dengesiz bir kule bırakıyordu. */
  .tl-kart .tl-panel{
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--c-border-soft);
  }

  .tl-kart .tl-panel > .tl-panel-ic,
  .tl-kart .tl-panel > .tl-geri,
  .tl-kart .tl-panel > .tl-champ{
    flex: 1 0 100%;
    align-items: flex-start;
  }

  /* Maçı olmayan turnuvada bu kutu boş geliyor; boşken bile satır
     aralığı kadar yer kaplıyordu. */
  .tl-kart .tl-panel-ic:empty{ display: none; }

  .tl-kart .tl-panel-eylem{
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Biten turnuvada tek satır yetiyor: şampiyon solda, rozet sağda.
     Rozeti alt satıra atmak sırf onun için bir satır daha açıyordu. */
  .tl-kart .tl-panel-bitti > .tl-champ{ flex: 1 1 auto; }
  .tl-kart .tl-panel-bitti > .tl-panel-eylem{ flex: 0 0 auto; }

  .tl-kart .tl-ilerleme{ width: 100%; }

  .tl-geri-blok{ min-width: 30px; }
  .tl-geri-blok b{ font-size: 1rem; }

  .tl-champ-ad{ max-width: 46vw; }
}

/* Çok dar ekran (≤380px) */
@media (max-width: 380px){
  .tl-btn{ padding: 6px 12px; font-size: var(--fs-xs); }
  .tl-geri-blok{ min-width: 26px; }
  .tl-geri-blok b{ font-size: .92rem; }
  .tl-geri-blok i{ font-size: .5rem; }
}