/* Lokaltenis PublicWeb — UI/UX v1.2 yeşil-beyaz premium sportif dilin web uyarlaması.
   Aynı token'lar: primary #18A558, koyu #0E3B2E, zemin #F7F9F8, kart 16px, kontrol 12px,
   altın YALNIZCA kupa/rozet, lime YALNIZCA pozitif değişim/grafik vurgusu.
   Mobil öncelikli; açık tema. */

:root {
    --lt-primary: #18A558;
    --lt-primary-dark: #0E3B2E;
    --lt-hero-1: #14523E;
    --lt-bg: #F7F9F8;
    --lt-surface: #FFFFFF;
    --lt-text: #101828;
    --lt-text-2: #475467;
    --lt-border: #E4E7EC;
    --lt-lime: #B6F542;
    --lt-gold: #F5B642;
    --lt-gold-bg: #FDF6E7;
    --lt-success-bg: #E1F5EE;
    --lt-warning: #F79009;
    --lt-danger: #D92D20;
    --lt-r-card: 16px;
    --lt-r-control: 12px;
    --lt-shadow: 0 2px 8px rgba(16, 24, 40, .06);
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--lt-bg);
    color: var(--lt-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--lt-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* =============================================================================
   TEK KAPSAYICI — TÜM SAYFALAR AYNI GENİŞLİK
   =============================================================================
   Eskiden iki genişlik vardı: .page 720px, .page--wide 1120px. Ana sayfa geniş,
   iç sayfalar dardı; bir bağlantıya tıklayınca içerik ZIPLIYORDU — üst bar ve
   alt bilgi bile hizasını değiştiriyordu.

   Artık tek ölçü var ve HER sayfa onu kullanır — uzun metin sayfaları dahil.
   Kartlar da kapsayıcıyı doldurur, yani kenarlar sayfalar arasında hizada
   durur ve bir bağlantıya tıklayınca içerik zıplamaz.
   ========================================================================== */
.page { max-width: 1120px; margin: 0 auto; padding: 0 16px 48px; }

/* .lt-prose KALDIRILDI — kendi yorumunun tersini yapıyordu.
   "Kapsayıcıyı daraltmadan" diye yazılmıştı ama sınıf KARTIN kendisine
   uygulanıyordu: 1120 px kapsayıcıda kart ~700 px'e düşüyor, sağında geniş bir
   boşluk kalıyordu. Hakkımızda sayfasının tamamı ve İletişim'deki "Kim
   işletiyor" bloğu bu yüzden kısa duruyordu.

   Üstelik tutarsızdı: Gizlilik sayfası bu sınıfı hiç kullanmıyor ve tam
   genişlikte; Koşullar kullanıyordu ve dardı. İki kardeş yasal sayfa iki farklı
   genişlikte çıkıyordu — düzeltilmek istenen sorunun ta kendisi.

   Kart artık kapsayıcıyı doldurur. Satır uzunluğu okunabilirlik için
   sınırlanacaksa bu, kartın DEĞİL metnin üzerinden yapılmalı. */

/* --- Üst bar --- */
.lt-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0; margin-bottom: 8px;
}
.lt-header a { display: flex; align-items: center; gap: 10px; color: var(--lt-primary-dark); }
.lt-header a:hover { text-decoration: none; }
.lt-logo {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #1FB865, #128A49);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px;
}
.lt-header .name { font-weight: 700; font-size: 18px; }

/* --- Kart --- */
.lt-card {
    background: var(--lt-surface);
    border-radius: var(--lt-r-card);
    box-shadow: var(--lt-shadow);
    padding: 16px;
    margin-bottom: 14px;
}

.lt-card h1, .lt-card h2 { margin: 0 0 6px; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 17px; font-weight: 600; }
.muted { color: var(--lt-text-2); font-size: 13px; }

/* --- Koyu yeşil hero (LRS/premium bağlam) --- */
.lt-hero {
    background: linear-gradient(135deg, var(--lt-hero-1), var(--lt-primary-dark));
    color: #fff;
    border-radius: var(--lt-r-card);
    box-shadow: var(--lt-shadow);
    padding: 20px;
    margin-bottom: 14px;
}
.lt-hero .muted { color: rgba(255, 255, 255, .75); }
.lt-hero h1 { color: #fff; }

/* --- Çipler --- */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 999px; padding: 3px 12px;
    font-size: 12.5px; font-weight: 600;
}
.chip.success { background: var(--lt-success-bg); color: #0B6B44; }
.chip.warning { background: #FEF0E1; color: #B54708; }
.chip.neutral { background: #F2F4F7; color: var(--lt-text-2); }
.chip.gold    { background: var(--lt-gold-bg); color: #B07A16; } /* yalnız kupa/başarı */
.chip.lime    { background: var(--lt-lime); color: var(--lt-primary-dark); } /* yalnız pozitif değişim */

/* --- Skor bloğu (maç kartı) --- */
.score-line {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; text-align: center; margin: 10px 0 4px;
}
.score-line .side { flex: 1 1 0; min-width: 0; }
.score-line .avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--lt-success-bg); color: var(--lt-primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px;
}
.score-line .pname { font-weight: 600; font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; }
.score-line .plrs { color: var(--lt-primary); font-weight: 600; font-size: 12.5px; }
.score-line .score {
    color: var(--lt-primary); font-weight: 700; font-size: 26px;
    font-variant-numeric: tabular-nums; padding-top: 12px; white-space: nowrap;
}
.score-line .vs { color: var(--lt-text-2); font-size: 12px; }

/* --- Tablolar (puan durumu / sıralama) --- */
.lt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lt-table th {
    text-align: left; color: var(--lt-text-2); font-weight: 500; font-size: 12px;
    border-bottom: 1px solid var(--lt-border); padding: 6px 8px;
}
.lt-table td { padding: 8px; border-bottom: 1px solid var(--lt-border); }
.lt-table tr:last-child td { border-bottom: 0; }
.lt-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* --- Listeler --- */
.lt-list { list-style: none; margin: 0; padding: 0; }
.lt-list li { padding: 10px 0; border-bottom: 1px solid var(--lt-border); }
.lt-list li:last-child { border-bottom: 0; }

/* --- Kayıt köprüsü (bağlama duyarlı, agresif değil) --- */
.lt-cta {
    background: var(--lt-success-bg);
    border-radius: var(--lt-r-card);
    padding: 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    justify-content: space-between;
    margin: 18px 0;
}
.lt-cta .txt { flex: 1 1 220px; }
.lt-cta .txt strong { display: block; margin-bottom: 2px; }
.btn {
    display: inline-block; border-radius: var(--lt-r-control);
    padding: 11px 18px; font-weight: 600; font-size: 14.5px;
    min-height: 44px; line-height: 22px;
}
.btn.primary { background: linear-gradient(135deg, #1FB865, #128A49); color: #fff; }
.btn.primary:hover { text-decoration: none; filter: brightness(1.05); }
.btn.outline { border: 1.4px solid var(--lt-primary); color: var(--lt-primary); }
.btn.outline:hover { text-decoration: none; background: var(--lt-success-bg); }

/* --- Rozet/duyuru --- */
.gold-banner {
    background: var(--lt-gold-bg);
    border-radius: var(--lt-r-card);
    padding: 12px 16px;
}

/* --- Alt bilgi --- */
.lt-footer {
    margin-top: 28px; padding-top: 16px;
    border-top: 1px solid var(--lt-border);
    color: var(--lt-text-2); font-size: 12.5px;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}

@media (min-width: 640px) {
    h1 { font-size: 28px; }
    .score-line .score { font-size: 32px; }
}

/* --- Eleme ağacı (bracket) ---------------------------------------------
   NEDEN YATAY KAYDIRMA: bracket doğası gereği geniştir; 390 px'e sığdırmaya
   çalışmak yazıyı okunamaz yapardı. Kaydırma KABI bu bölümdür — sayfanın
   gövdesi yatay kaymaz (mobilde gövdenin kayması tüm sayfayı bozar).

   Turlar sabit genişlikte kolonlardır ve kartlar kolon içinde EŞİT ARALIKLA
   dağılır: tur ilerledikçe kart sayısı yarıya indiği için aralık kendiliğinden
   ikiye katlanır ve bir maç, kendisini besleyen iki maçın ortasına gelir. */
.lt-bracket {
    /* Dirsek çizgileri bu boşluğun ortasında birleşir; iki yarısını
       hücrelerin ::before / ::after'ı çiziyor. */
    --lt-bracket-gap: 24px;

    display: flex;
    gap: var(--lt-bracket-gap);
    align-items: flex-start;
    overflow-x: auto;
    padding: 10px 2px 4px;
    -webkit-overflow-scrolling: touch;
}

.lt-bracket__round {
    display: flex;
    flex-direction: column;
    flex: 0 0 210px;
    min-width: 210px;
}

.lt-bracket__cells {
    display: flex;
    flex-direction: column;
}

/* HÜKMEDEN ÖLÇÜ: hücre yüksekliği tur başına ikiye katlanır (--lt-cell,
   sunucuda hesaplanıp satır içi verilir) ve kutu ortada durur. Bir maç böylece
   kendisini besleyen iki maçın tam ortasına gelir — eski "space-around"
   yaklaşıklığının yerine gerçek hizalama. */
.lt-bracket__cell {
    position: relative;
    height: var(--lt-cell);
    display: flex;
    align-items: center;
}

/* Sağa çıkan yatay çizgi + çiftleri birleştiren dikey çizgi.
   Son turdan (final) sonra gidilecek yer yoktur. */
.lt-bracket__round:not(:last-child) .lt-bracket__cell::after {
    content: "";
    position: absolute;
    left: 100%;
    width: calc(var(--lt-bracket-gap) / 2);
    height: 50%;
    border-right: 1px solid var(--lt-border);
}

.lt-bracket__round:not(:last-child) .lt-bracket__cell:nth-child(odd)::after {
    top: 50%;
    border-top: 1px solid var(--lt-border);
}

.lt-bracket__round:not(:last-child) .lt-bracket__cell:nth-child(even)::after {
    bottom: 50%;
    border-bottom: 1px solid var(--lt-border);
}

/* İlk tur dışındaki her kutuya soldan giren yatay çizgi. */
.lt-bracket__round + .lt-bracket__round .lt-bracket__cell::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(var(--lt-bracket-gap) / 2);
    border-top: 1px solid var(--lt-border);
}

.lt-bracket__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--lt-text-2);
    text-align: center;
    padding-bottom: 2px;
}

.lt-bracket__slot {
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-r-control, 12px);
    background: var(--lt-surface);
    padding: 8px 10px;
}

/* Sonuçlanmış eşleşme çerçevesiyle belli olur: hangi maçların bittiği
   kartlar okunmadan görülebilmeli. */
.lt-bracket__slot.is-settled { border-color: var(--lt-primary); }

.lt-bracket__side {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--lt-text);
    padding: 3px 0;
}

.lt-bracket__side + .lt-bracket__side { border-top: 1px solid var(--lt-border); }

.lt-bracket__side.is-winner { font-weight: 700; color: var(--lt-primary); }

/* Ad taşarsa kısalır; seri başı ve skor kısalmaz (ikisi de kısa ve okunmalı). */
.lt-bracket__name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}

a.lt-bracket__name:hover { text-decoration: underline; }

/* SERİ BAŞI: sıralamayı söyler ama adın önüne geçmez — bu yüzden küçük,
   ikincil renkte ve sabit genişlikte. */
.lt-bracket__seed {
    flex: 0 0 auto;
    min-width: 14px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--lt-text-2);
}

.lt-bracket__score {
    margin-top: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--lt-text-2);
}

/* Hükmen/bırakıldı skorun yanında küçük bir not olarak durur. */
.lt-bracket__note {
    margin-left: 6px;
    font-size: 11px;
    color: var(--lt-warning, var(--lt-text-2));
}

.lt-bracket__link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--lt-text-2);
    text-decoration: none;
}

/* --- Uzun metin sayfaları (gizlilik politikası, koşullar) -----------------
   Yasal metin okunabilir olmalı: satır yüksekliği artırılır, tablolar dar
   ekranda yatay kayar (gövde kaymaz) ve alt başlıklar hiyerarşi kurar. */
.lt-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 18px 0 6px;
    color: var(--lt-text);
}

.lt-card h3:first-of-type { margin-top: 8px; }

.lt-card p { line-height: 1.6; margin: 0 0 10px; }

.lt-card p:last-child { margin-bottom: 0; }

/* Yasal metinde tablo dar ekranda taşabilir; kaydırma KABI tablo olur. */
.lt-card .lt-table { display: block; overflow-x: auto; white-space: normal; }
.lt-card .lt-table th { white-space: nowrap; }

/* ============ GENİŞ EKRANDA GERÇEK TABLO ============
   ÖLÇÜLEN KUSUR: kapsayıcı 720 px'ten 1120 px'e çıkınca puan durumu tablosu
   kartın içinde 470 px'te kalıp sağ yarısını boş bıraktı. Nedeni `display:block`:
   tablo blok kutusu içinde içeriğine göre daralıyor, `width:100%` işlemiyor.

   Kaydırma yalnızca DAR ekranda gerekli. 760 px üstünde tablo tabloya döner ve
   kartı doldurur; altında kaydırma kabı davranışı aynen kalır. */
@media (min-width: 760px) {
    .lt-card .lt-table { display: table; overflow-x: visible; }

    /* Fazlalık genişlik AD sütununa gitsin: sayı sütunları içeriği kadar
       kalır, yoksa sıra rozeti ile oyuncu adı arasında koca boşluk oluşur. */
    .lt-card .lt-table .num,
    .lt-card .lt-table th:first-child,
    .lt-card .lt-table td:first-child { width: 1%; white-space: nowrap; }
}

/* Yazdırma: ekranda görünmeyen kağıt satırı; düğme çubuğu (bkz. print.css). */
.lt-print-only { display: none; }
.lt-print-bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 12px 0; }

/* Canlı güncelleme bağlı: sayfa kendiliğinden yenileniyor (js/live.js). */
.lt-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--lt-primary);
}
.lt-live-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; animation: lt-live-pulse 2s ease-in-out infinite;
}
.lt-live-badge[hidden] { display: none; }
@keyframes lt-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lt-live-badge::before { animation: none; } }