/* =====================================================================
   TURNUVA — TASARIM SİSTEMİ v2
   Premium Football Broadcast × Modern Tournament Product × Editorial Sports

   REFERANS: UEFA ve FIFA dijital ürünlerinin BİLGİ MİMARİSİ, fikstür
   kompozisyonu, yayın grafiği hissi ve aşama anlatımı örnek alınmıştır.
   Resmi logolar, amblemler, Starball benzeri ayırt edici grafikler ve
   korunan marka varlıkları KULLANILMAZ (MASTER CONTEXT · R-07).

   Tüm görsel kararlar token'lardan gelir; bileşen içine sabit renk yazılmaz.
   ===================================================================== */

/* -------------------------------------------------- 0. TİPOGRAFİ (MONTSERRAT)

   Fontlar PAKETE GÖMÜLÜDÜR (assets/fonts/*.woff2, alt küme: Latin + Türkçe).
   Google Fonts'a veya herhangi bir CDN'e istek atılmaz: paylaşımlı hostingde
   dış bağımlılık olmaz, sayfa çevrimdışı da aynı görünür. Toplam ~130 KB.
   `font-display: swap` ile metin ilk boyamada görünür, font sonra yerleşir. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400;
    font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500;
    font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600;
    font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700;
    font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800;
    font-display: swap; src: url("fonts/montserrat-800.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900;
    font-display: swap; src: url("fonts/montserrat-900.woff2") format("woff2"); }

/* ---------------------------------------------------------- 1. TOKENS */

:root {
    --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Skor ve takım adları da Montserrat — tek aile, ağırlıkla ayrışır. */
    --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Ölçek SIKILAŞTIRILDI: yayın grafiğinde bilgi yoğunluğu yüksektir,
       başlıklar ekranı kaplamaz. Üst basamaklar belirgin şekilde küçüldü. */
    --step--2: .6875rem;
    --step--1: .75rem;
    --step-0:  .8125rem;
    --step-1:  .9375rem;
    --step-2:  clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    --step-3:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
    --step-4:  clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
    --step-5:  clamp(2.25rem, 1.8rem + 2.4vw, 3.25rem);

    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem; --sp-6: 1.75rem; --sp-7: 2.25rem; --sp-8: 3rem;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --tap: 44px;
    --shell-max: 1200px;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* ---- ELITE · Şampiyonlar Ligi (varsayılan) ------------------------
       AÇIK TEMA: kağıt beyazı yüzey, gece mavisi metin, elektrik mavisi
       vurgu, şampiyonluk anında altın. Yarışmanın rengi zeminde değil
       VURGUDA yaşar — böylece metin her zaman koyu ve okunur kalır. */
    --bg: #F2F4FA;
    --bg-deep: #E4E8F4;
    --surface: #FFFFFF;
    --surface-2: #F4F6FC;
    --surface-3: #E8ECF8;
    --border: #DDE2F0;
    --border-strong: #BFC8E4;
    --text: #0B1233;
    --text-muted: #59628A;
    --text-faint: #596287;

    --accent: #1B47D8;
    --accent-2: #6A3FE0;
    --accent-soft: #E7ECFF;
    --accent-contrast: #FFFFFF;

    --champion: #856410;
    --positive: #0F6E4B;
    --negative: #C42741;
    --score: #0B1233;
    --stage: #2B49A8;

    --grad-accent: linear-gradient(135deg, #1B47D8 0%, #6A3FE0 100%);
    --grad-band: linear-gradient(90deg, #1B47D8 0%, #6A3FE0 55%, #E0A62A 100%);
    --grad-hero:
        radial-gradient(120% 140% at 8% -20%, #DCE4FF 0%, transparent 58%),
        radial-gradient(90% 120% at 100% 0%, #E7DFFF 0%, transparent 52%);
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));

    --elev-1: 0 1px 2px rgba(16, 24, 64, .07);
    --elev-2: 0 10px 26px -14px rgba(16, 24, 64, .28);
    --elev-3: 0 22px 50px -22px rgba(16, 24, 64, .35);
    --ring: 0 0 0 1px rgba(16, 24, 64, .03) inset;

    --geometry: .5;
}

/* ---- WORLD · FIFA Dünya Kupası --------------------------------------
   Buz mavisi kağıt, lacivert metin, turkuaz vurgu; yeşil-altın-kırmızı
   yalnızca yarışma bandında görünür. */
[data-identity="WORLD"] {
    --bg: #EFF5FB;
    --bg-deep: #DFE9F5;
    --surface: #FFFFFF;
    --surface-2: #F1F7FC;
    --surface-3: #E3EEF8;
    --border: #D6E3F0;
    --border-strong: #B4C9DF;
    --text: #041638;
    --text-muted: #4E6484;
    --text-faint: #566880;

    --accent: #0A6EA8;
    --accent-2: #C10024;
    --accent-soft: #E2F1FA;
    --accent-contrast: #FFFFFF;

    --champion: #7E5E0E;
    --positive: #0A6B2E;
    --negative: #C10024;
    --score: #041638;
    --stage: #0A6EA8;

    --grad-accent: linear-gradient(135deg, #0A6EA8 0%, #0F72A6 100%);
    --grad-band: linear-gradient(90deg, #00A3E0 0%, #00B140 38%, #FFC72C 68%, #E4002B 100%);
    --grad-hero:
        radial-gradient(120% 140% at 85% -20%, #D5E9F8 0%, transparent 58%),
        radial-gradient(100% 120% at 0% 10%, #E2F0E6 0%, transparent 55%);
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));

    --elev-1: 0 1px 2px rgba(4, 22, 56, .07);
    --elev-2: 0 10px 26px -14px rgba(4, 22, 56, .26);
    --elev-3: 0 22px 50px -22px rgba(4, 22, 56, .33);
    --ring: 0 0 0 1px rgba(4, 22, 56, .03) inset;
    --geometry: .45;
}

/* ---- EUROPA · Avrupa Ligi -------------------------------------------
   Sıcak kırık beyaz, neredeyse siyah metin, turuncu vurgu. */
[data-identity="EUROPA"] {
    --bg: #F6F3EF;
    --bg-deep: #EBE5DC;
    --surface: #FFFFFF;
    --surface-2: #F7F4F0;
    --surface-3: #EFEAE3;
    --border: #E4DED5;
    --border-strong: #C9C0B3;
    --text: #14110E;
    --text-muted: #6B6259;
    --text-faint: #6D645B;

    --accent: #C24A00;
    --accent-2: #A66A00;
    --accent-soft: #FCEEE2;
    --accent-contrast: #FFFFFF;

    --champion: #7E5E0E;
    --positive: #146645;
    --negative: #C32B3A;
    --score: #14110E;
    --stage: #C24A00;

    --grad-accent: linear-gradient(135deg, #C24A00 0%, #9C6200 100%);
    --grad-band: linear-gradient(90deg, #FF6900 0%, #FFB000 60%, #FFE6B0 100%);
    --grad-hero:
        radial-gradient(110% 140% at 5% -15%, #FBE7D5 0%, transparent 55%),
        radial-gradient(90% 110% at 100% 10%, #F5EBDA 0%, transparent 50%);
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));

    --elev-1: 0 1px 2px rgba(30, 22, 14, .07);
    --elev-2: 0 10px 26px -14px rgba(30, 22, 14, .24);
    --elev-3: 0 22px 50px -22px rgba(30, 22, 14, .3);
    --ring: 0 0 0 1px rgba(30, 22, 14, .03) inset;
    --geometry: .5;
}

/* ---- CONFERENCE · Konferans Ligi -------------------------------------
   Nane kağıt, koyu orman yeşili metin, doygun yeşil vurgu. */
[data-identity="CONFERENCE"] {
    --bg: #EFF7F2;
    --bg-deep: #DFEDE5;
    --surface: #FFFFFF;
    --surface-2: #F1F8F4;
    --surface-3: #E2F0E8;
    --border: #D5E7DD;
    --border-strong: #B0CFC0;
    --text: #06231A;
    --text-muted: #4A6A5C;
    --text-faint: #526E5F;

    --accent: #067A4C;
    --accent-2: #0E9E63;
    --accent-soft: #E0F5EA;
    --accent-contrast: #FFFFFF;

    --champion: #5F6A08;
    --positive: #056741;
    --negative: #C42741;
    --score: #06231A;
    --stage: #067A4C;

    --grad-accent: linear-gradient(135deg, #067A4C 0%, #0B8250 100%);
    --grad-band: linear-gradient(90deg, #00C97B 0%, #57E39B 55%, #CFEE6A 100%);
    --grad-hero:
        radial-gradient(115% 140% at 12% -18%, #D8F0E3 0%, transparent 56%),
        radial-gradient(90% 110% at 100% 5%, #E6F4E0 0%, transparent 50%);
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));

    --elev-1: 0 1px 2px rgba(6, 35, 26, .07);
    --elev-2: 0 10px 26px -14px rgba(6, 35, 26, .24);
    --elev-3: 0 22px 50px -22px rgba(6, 35, 26, .3);
    --ring: 0 0 0 1px rgba(6, 35, 26, .03) inset;
    --geometry: .45;
}

/* ---- CUSTOM · nötr ---------------------------------------------------- */
[data-identity="CUSTOM"] {
    --bg: #F4F5F7;
    --bg-deep: #E7E9ED;
    --surface: #FFFFFF;
    --surface-2: #F5F6F9;
    --surface-3: #EAECF1;
    --border: #E1E3E9;
    --border-strong: #C4C8D2;
    --text: #14171F;
    --text-muted: #5C6373;
    --text-faint: #606776;

    --accent: #2F4BC4;
    --accent-2: #5C7CFA;
    --accent-soft: #E8ECFC;
    --accent-contrast: #FFFFFF;

    --champion: #7E5E0E;
    --positive: #0F6E4B;
    --negative: #C42741;
    --score: #14171F;
    --stage: #2F4BC4;

    --grad-accent: linear-gradient(135deg, #2F4BC4 0%, #5C7CFA 100%);
    --grad-band: linear-gradient(90deg, #2F4BC4 0%, #5C7CFA 100%);
    --grad-hero: radial-gradient(120% 140% at 50% -20%, #E4E8FA 0%, transparent 60%);
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));

    --elev-1: 0 1px 2px rgba(20, 23, 31, .07);
    --elev-2: 0 10px 26px -14px rgba(20, 23, 31, .24);
    --elev-3: 0 22px 50px -22px rgba(20, 23, 31, .3);
    --ring: 0 0 0 1px rgba(20, 23, 31, .03) inset;
    --geometry: .4;
}

/* ------------------------------------------------------- 2. TEMEL */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    background-image: var(--grad-hero);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--step-0);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis-weight: none;
    overflow-x: hidden;
}

/* Montserrat geometrik bir ailedir: büyük boyutta harf aralığı sıkıştırılmazsa
   dağınık görünür, küçük boyutta açılmazsa okunmaz. Ölçeğe göre ayarlanır. */
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p  { margin: 0 0 var(--sp-3); }
a  { color: inherit; }

.muted { color: var(--text-muted); font-size: var(--step--1); }
.faint { color: var(--text-faint); }
.center { text-align: center; }

/* Yayın grafiği dili: büyük harf, geniş harf aralığı, ağır kesit. */
.eyebrow, .stage-badge, .brand, .team-name, .goal, .suggest strong,
.stat dd, .champion-name, .t-hero h1, .bracket-column h3, .team-group-head {
    font-family: var(--font-display);
}
/* Skor ve sıra numaraları tabular: rakamlar sütun sütun hizalanır. */
.goal, .stat dd, .pos-badge, .standings td, .agg, .match-no {
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em; background: var(--surface-2);
    padding: .12em .4em; border-radius: 5px;
}

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--accent-contrast); }

/* ------------------------------------------------------- 3. KABUK */

.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--sp-4) var(--sp-8); }

.appbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--border);
}
/* Yarışma bandı — sayfanın en üstünde ince gradyan şerit */
.appbar::before {
    content: ""; display: block; height: 3px; background: var(--grad-band);
}
.appbar-inner {
    max-width: var(--shell-max); margin: 0 auto;
    padding: var(--sp-3) var(--sp-4);
    display: flex; align-items: center; gap: var(--sp-4);
}
.brand {
    flex: 0 0 auto;
    font-size: var(--step-1); letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; display: flex; align-items: center; gap: var(--sp-2);
}
.brand::before {
    content: ""; width: 6px; height: 24px; border-radius: 3px;
    background: var(--grad-accent); box-shadow: 0 0 14px -2px var(--accent);
}
.appnav {
    margin-left: auto; min-width: 0;
    display: flex; align-items: center; gap: var(--sp-1);
    overflow-x: auto; scrollbar-width: none;
}
.appnav::-webkit-scrollbar { display: none; }
.appnav > * { flex: 0 0 auto; }
.appnav a, .appnav button {
    min-height: 40px; display: inline-flex; align-items: center;
    padding: 0 var(--sp-3); border-radius: 999px;
    color: var(--text-muted); text-decoration: none;
    font-size: var(--step--1); font-weight: 650; letter-spacing: .02em;
    background: none; border: 0; cursor: pointer; font-family: inherit;
    transition: color .15s var(--ease), background .15s var(--ease);
}
.appnav a:hover, .appnav button:hover { color: var(--text); background: var(--surface-2); }
.appnav a[aria-current="page"] { color: var(--text); background: var(--surface-3); }

@media (max-width: 520px) {
    .appbar-inner { gap: var(--sp-2); padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .brand { font-size: var(--step-0); }
    .appnav a, .appnav button { padding: 0 var(--sp-2); }
}

/* ------------------------------------------------------- 4. YÜZEYLER */

.card {
    position: relative;
    background: var(--surface);
    background-image: var(--grad-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    box-shadow: var(--elev-1), var(--ring);
}
.card + .card { margin-top: var(--sp-4); }
/* Tablo taşıyan kartlar dar ekranda YATAY KAYAR. Sütun gizlemek tek başına
   yetmiyor: uzun bir e-posta hücreyi genişletip sayfayı taşırıyordu. */
.card-flush { padding: 0; overflow-x: auto; overflow-y: hidden; }

.section-head {
    display: flex; align-items: baseline; gap: var(--sp-3);
    margin: var(--sp-5) 0 var(--sp-3);
}
.section-head h2, .section-head h1 { font-size: var(--step-2); }
.section-head h3 { font-size: var(--step-1); }
.section-head .muted { margin-left: auto; }

/* Başlık + sayaç aynı satırda, aralarında ince ayraç — yayın grafiği künyesi */
.section-head-inline { align-items: center; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.section-head-inline h2 { text-transform: uppercase; letter-spacing: .04em; font-size: var(--step-1); }
.section-meta {
    margin-left: auto; font-size: var(--step--2); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}

.eyebrow {
    display: block; font-size: var(--step--1); letter-spacing: .24em;
    text-transform: uppercase; color: var(--stage); margin-bottom: var(--sp-2);
}

.stage-badge {
    display: inline-flex; align-items: center;
    font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
    color: var(--stage); padding: .35em .8em; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--stage) 34%, transparent);
    background: color-mix(in srgb, var(--stage) 8%, transparent);
}

.pill {
    display: inline-flex; align-items: center; gap: .4em;
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: .32em .7em; border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted);
    border: 1px solid var(--border); white-space: nowrap;
}
.pill-live {
    color: var(--accent-contrast); border-color: transparent;
    background: var(--grad-accent);
}
.pill-live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; animation: pulse 1.8s ease-in-out infinite;
}
.pill-champ { color: var(--champion); border-color: color-mix(in srgb, var(--champion) 42%, transparent); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ------------------------------------------------------- 5. BUTONLAR */

.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: var(--tap); padding: 0 var(--sp-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    background-image: var(--grad-surface);
    color: var(--text);
    font: inherit; font-weight: 700; letter-spacing: .01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: var(--elev-1);
    transition: transform .12s var(--ease), box-shadow .18s var(--ease),
                background-color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { background-color: var(--surface-3); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--elev-2); }
.btn:active { transform: translateY(0); box-shadow: var(--elev-1); }
.btn[disabled], .btn.is-disabled { opacity: .42; pointer-events: none; }

.btn-primary {
    border-color: transparent; color: var(--accent-contrast);
    background: var(--grad-accent);
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn-primary:hover {
    filter: brightness(1.07);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-ghost { background: transparent; background-image: none; border-color: var(--border); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: transparent; background-image: none; border-color: color-mix(in srgb, var(--negative) 52%, transparent); color: var(--negative); }
.btn-danger:hover { background: color-mix(in srgb, var(--negative) 12%, transparent); }
.btn-lg { min-height: 54px; padding: 0 var(--sp-6); font-size: var(--step-1); }
.btn-xs { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--step--1); border-radius: 8px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ------------------------------------------------------- 6. UYARILAR */

.alert {
    position: relative;
    border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-4); font-size: var(--step-0);
    border: 1px solid var(--border); background: var(--surface);
    box-shadow: var(--elev-1);
}
.alert::before {
    content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--text-muted);
}
.alert-error   { color: var(--negative); }
.alert-error::before { background: var(--negative); }
.alert-success { color: var(--positive); }
.alert-success::before { background: var(--positive); }
.alert-info::before { background: var(--accent); }

/* ------------------------------------------------------- 7. FORMLAR */

.form label { display: block; margin-bottom: var(--sp-3); font-size: var(--step--1); color: var(--text-muted); font-weight: 650; }
.form input:not([type="checkbox"]):not([type="radio"]),
.form select, .form textarea {
    display: block; width: 100%; margin-top: var(--sp-1);
    min-height: var(--tap); padding: 0 var(--sp-3);
    background: var(--bg-deep); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form textarea { padding: var(--sp-3); min-height: 90px; }
.form input:not([type="checkbox"]):not([type="radio"]):focus, .form select:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form input[type="checkbox"], .form input[type="radio"] {
    flex: 0 0 auto; min-height: 0; margin: 0; accent-color: var(--accent);
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-4); }
.span-2 { grid-column: 1 / -1; }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.check, .form label.check {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--tap); cursor: pointer; margin-bottom: 0;
    color: var(--text); font-weight: 650; font-size: var(--step-0);
}
.check input { width: 22px; height: 22px; }

/* ------------------------------------------- 8. MAÇ KARTI (broadcast)

   KOMPAKT KUTU. Fikstür artık hafta hafta uzayan bir liste değil, tek bir
   ızgaradır: masaüstünde 4, tablette 2, telefonda 1 sütun. Hafta bilgisi
   ayrı başlık yerine kartın kendi künyesinde küçük bir rozettir; böylece
   ekranda aynı anda çok daha fazla maç görünür. */

.match-card {
    display: flex; flex-direction: column; text-decoration: none; position: relative;
    background: var(--surface); background-image: var(--grad-surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--elev-1), var(--ring);
    transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .18s var(--ease);
}
.match-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--elev-2); }
.match-card.is-next { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent), var(--elev-2); }
.match-card.is-next::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad-accent);
}

.match-meta {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 7px var(--sp-3) 7px var(--sp-4);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 10px; color: var(--text-faint);
    letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.match-meta .no { color: var(--text-muted); font-weight: 800; }
.match-meta .round { color: var(--text-faint); }
.match-meta .round::before { content: "·"; margin: 0 .5em 0 .1em; color: var(--border-strong); }
.match-meta .right { margin-left: auto; text-transform: none; letter-spacing: 0; }

.match-body { padding: var(--sp-2) var(--sp-4) var(--sp-3); }

.side {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
.side + .side { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.side.is-winner .team-name { color: var(--text); }
.side.is-loser .team-name, .side.is-loser .goal { color: var(--text-muted); }
/* Kazananı sadece renkle değil, ince bir işaretle de belli et (renk körlüğü). */
.side { position: relative; }
.side.is-winner::after {
    content: ""; position: absolute; left: calc(var(--sp-4) * -1); top: 50%;
    width: 3px; height: 20px; transform: translateY(-50%);
    background: var(--accent); border-radius: 0 3px 3px 0;
}

.crest {
    width: 28px; height: 28px; border-radius: 8px;
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 8.5px; font-weight: 800; letter-spacing: .02em;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
    overflow: hidden; flex: 0 0 auto;
}

.side-names { min-width: 0; }
.team-name {
    font-size: var(--step-1); font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15;
}
/* Player ile football team GÖRSEL OLARAK AYRIŞIR:
   takım büyük harf + ağır kesit, oyuncu normal kesit + soluk renk. */
.player-name {
    font-size: var(--step--1); color: var(--text-muted); font-weight: 500;
    display: block; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-no { color: var(--text-faint); font-weight: 700; letter-spacing: .04em; }
.crest-empty { background: var(--surface-3); color: var(--text-faint); text-shadow: none; }
/* Açık renkli kulüp zemininde beyaz yazı okunmaz — koyuya geçilir. */
.crest-light { color: #14161C; text-shadow: 0 1px 1px rgba(255,255,255,.5); }

/* GERÇEK AMBLEM üretilen armanın ÜSTÜNE biner. Görsel yüklenemezse
   (yanlış URL, CDN engeli) `onerror` ile silinir ve alttaki kod+renk
   arması ortaya çıkar — hiçbir yerde boş kutu kalmaz. */
.crest { position: relative; }
.crest-code { display: block; line-height: 1; }
.crest-has-image { box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.crest-image {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 1px; border-radius: inherit;
    background: #fff;
}

.goal {
    font-size: var(--step-2); font-weight: 800; color: var(--score); line-height: 1;
    min-width: 1.1em; text-align: right;
}
.goal.is-loser { color: var(--text-muted); font-weight: 700; }
.match-state { font-size: var(--step--2); color: var(--text-faint); font-weight: 600; }

.match-note {
    margin-top: auto;
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    font-size: var(--step--2); color: var(--text-muted);
}

/* ------------------------------ 8b. KART İÇİ SKOR GİRİŞİ

   Skor artık ayrı bir ekranda değil, maç kartının içinde giriliyor. Kart
   üç durumda: BEKLİYOR (hiçbir şey), OYNANABİLİR ("Maçı Oynat"), OYNANDI
   ("Düzenle" → onay → form). `<details>` kullanıldığı için JavaScript
   olmadan da açılıp kapanır. */

.match-action {
    border-top: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-2);
    margin-top: auto;
}
.match-action > summary { list-style: none; cursor: pointer; }
.match-action > summary::-webkit-details-marker { display: none; }
.match-action[open] > summary { margin-bottom: var(--sp-3); }

.lock-note {
    display: block; font-size: var(--step--2); font-weight: 600;
    color: var(--text-faint); text-align: center;
}

.confirm-note {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--champion) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--champion) 40%, transparent);
    font-size: var(--step--2); color: var(--text); line-height: 1.45;
}

.quick-score { display: grid; gap: var(--sp-2); }
.quick-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.quick-team {
    font-family: var(--font-display); font-weight: 800; font-size: var(--step-0);
    text-transform: uppercase; letter-spacing: .02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Özgüllük `.stepper` ile eşit olmalı: temel kural bu dosyada DAHA SONRA
   tanımlı, tek sınıfla yazılırsa 68px'lik sütunlar geri geliyor ve
   adımlayıcı kartı taşırıyor. */
.stepper.stepper-sm {
    margin-top: 0; flex: 0 0 auto;
    grid-template-columns: 36px 52px 36px; gap: var(--sp-1);
}
.stepper.stepper-sm button { height: 36px; width: 36px; font-size: 19px; border-radius: var(--radius-sm); }
.stepper.stepper-sm input { height: 36px; width: 52px; font-size: var(--step-1); border-radius: var(--radius-sm); padding: 0; }

.quick-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2); margin-top: var(--sp-2);
}
.quick-actions .btn { flex: 0 1 auto; }

/* Tur süzgeci: tek satır, yatay kaydırmalı, hafta başlıklarının yerini alır */
.round-filter {
    display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
    margin: 0 0 var(--sp-3); padding-bottom: 2px;
}
.round-filter::-webkit-scrollbar { display: none; }
.round-chip {
    flex: 0 0 auto; min-height: 30px; padding: 0 var(--sp-3);
    border-radius: 999px; cursor: pointer; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
    font: inherit; font-size: var(--step--2); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.round-chip:hover { color: var(--text); border-color: var(--border-strong); }
.round-chip.is-active {
    color: var(--accent-contrast); border-color: transparent;
    background: var(--grad-accent); box-shadow: var(--elev-1);
}

/* IZGARA: telefon 1 · tablet 2 · masaüstü 4 sütun */
/* `align-items: start`: kartlar satırdaki en uzun karta göre gerilmez.
   Skor formu açıldığında komşu kartların ortası boş kalıyordu. */
.match-list { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 620px)  { .match-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .match-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Bracket sütunlarındaki liste her zaman tek sütundur. */
.bracket-column .match-list { grid-template-columns: 1fr !important; }

/* ------------------------------------------- 9. SKOR GİRİŞİ (mobil) */

.score-entry { display: grid; gap: var(--sp-3); }

.score-side {
    background: var(--surface); background-image: var(--grad-surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-5) var(--sp-4); text-align: center;
    box-shadow: var(--elev-1), var(--ring);
}
.score-side .crest { margin: 0 auto var(--sp-3); width: 48px; height: 48px; font-size: 13px; border-radius: 12px; }
.score-side .team-name { font-size: var(--step-3); white-space: normal; letter-spacing: .04em; }
.score-side .team-full {
    font-size: var(--step--1); color: var(--text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em; margin-top: 2px;
}
.score-side .player-name { text-align: center; margin-top: var(--sp-2); font-size: var(--step-0); }

.stepper {
    margin-top: var(--sp-4);
    display: grid; grid-template-columns: 68px 1fr 68px;
    align-items: center; gap: var(--sp-3);
}
.stepper button {
    height: 68px; width: 68px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2); background-image: var(--grad-surface);
    color: var(--text); font-size: 30px; line-height: 1; cursor: pointer;
    display: grid; place-items: center; box-shadow: var(--elev-1);
    transition: transform .1s var(--ease), background .15s var(--ease);
}
.stepper button:hover { background-color: var(--surface-3); }
.stepper button:active { transform: scale(.94); }
.stepper input {
    height: 68px; width: 100%;
    background: var(--bg-deep); color: var(--score);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-display); font-size: var(--step-4);
    text-align: center; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.vs-divider {
    text-align: center; font-family: var(--font-display); font-weight: 800;
    letter-spacing: .4em; color: var(--text-faint); font-size: var(--step--1);
    position: relative;
}
.vs-divider::before, .vs-divider::after {
    content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: var(--border);
}
.vs-divider::before { left: 4%; } .vs-divider::after { right: 4%; }

/* Masaüstünde iki taraf YAN YANA, ortada VS — yayın grafiğinin kendisi.
   Telefonda alt alta kalır; skor girişi mobil-öncelikli tasarlanmıştır. */
@media (min-width: 900px) {
    .score-entry {
        grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
        align-items: start; gap: var(--sp-4);
        max-width: 940px; margin-inline: auto;
    }
    .score-entry > .extra-block,
    .score-entry > .muted,
    .score-entry > button { grid-column: 1 / -1; }
    .vs-divider { align-self: center; padding-top: var(--sp-8); }
    .vs-divider::before, .vs-divider::after { content: none; }
}

.extra-block summary {
    cursor: pointer; min-height: var(--tap); display: flex; align-items: center;
    color: var(--text-muted); font-weight: 650; font-size: var(--step--1);
}

/* ------------------------------------------------- 10. PUAN DURUMU */

.standings { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.standings th, .standings td { padding: var(--sp-3) var(--sp-2); text-align: right; }
.standings th {
    font-size: var(--step--2); color: var(--text-faint); font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.standings td { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.standings tbody tr { transition: background .15s var(--ease); }
.standings tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

.standings .col-pos { width: 44px; text-align: center; color: var(--text-muted); }
.standings .col-team { text-align: left; }
.standings .col-p { font-weight: 800; color: var(--text); font-size: var(--step-1); }

/* Sıra rozeti + eleme bölgesi şeridi (UEFA tarzı bilgi mimarisi) */
.pos-badge {
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; border-radius: 8px;
    font-family: var(--font-display); font-size: var(--step--1);
    background: var(--surface-2); color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--border);
}
.standings tr.zone-qualify .pos-badge {
    background: var(--grad-accent); color: var(--accent-contrast); box-shadow: none;
}
.standings tr.zone-qualify td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.standings tr.zone-leader .pos-badge { background: var(--champion); color: #FFFFFF; }
.standings tr.zone-leader td:first-child { box-shadow: inset 3px 0 0 var(--champion); }

.standings-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.standings-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.form-trail { display: inline-flex; gap: 3px; margin-left: auto; }
.form-trail span {
    width: 17px; height: 17px; border-radius: 5px;
    font-size: 10px; font-weight: 800; display: grid; place-items: center;
    background: var(--surface-2); color: var(--text-muted);
}
.form-trail .w { background: color-mix(in srgb, var(--positive) 26%, transparent); color: var(--positive); }
.form-trail .l { background: color-mix(in srgb, var(--negative) 20%, transparent); color: var(--negative); }

.zone-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.zone-legend span { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step--1); color: var(--text-muted); }
.zone-legend i { width: 12px; height: 3px; border-radius: 2px; }

@media (max-width: 680px) { .standings .col-optional { display: none; } }

/* ------------------------------------------------- 11. BRACKET */

.bracket-tabs {
    display: flex; gap: var(--sp-2); overflow-x: auto;
    padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); scrollbar-width: none;
}
.bracket-tabs::-webkit-scrollbar { display: none; }
.bracket-tabs a {
    flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
    padding: 0 var(--sp-4); border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    text-decoration: none; font-weight: 700; font-size: var(--step--1); color: var(--text-muted);
}
.bracket-tabs a.is-active { background: var(--grad-accent); border-color: transparent; color: var(--accent-contrast); }

.bracket-columns { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
    .bracket-columns { grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); align-items: center; overflow-x: auto; padding-bottom: var(--sp-3); }
}
.bracket-column h3 {
    text-transform: uppercase; letter-spacing: .16em;
    font-size: var(--step--1); color: var(--stage); margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.bracket-column .match-list { gap: var(--sp-4); }

/* ------------------------------------------------- 12. TURNUVA HERO */

/* Yatay künye şeridi: başlık solda, durum bilgileri sağda aynı hizada.
   Eskiden dikey ve çok yüksekti; ekranın üçte birini yiyordu. */
.t-hero {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface); padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-4); box-shadow: var(--elev-1), var(--ring);
}
.t-hero::before {
    content: ""; position: absolute; inset: 0;
    background: var(--grad-hero); pointer-events: none;
}
/* Saha geometrisi: orta yuvarlak soyutlaması. Top ikonu KULLANILMAZ. */
.t-hero::after {
    content: ""; position: absolute; right: -70px; top: 50%;
    width: 190px; height: 190px; transform: translateY(-50%);
    border: 1.5px solid var(--border-strong); border-radius: 50%;
    opacity: var(--geometry); pointer-events: none;
}
.t-hero > * { position: relative; }
.t-hero-id { min-width: 0; }
.t-hero h1 {
    text-transform: uppercase; font-size: var(--step-3);
    letter-spacing: -.01em; margin: 4px 0 0;
}
.t-hero .stage-badge {
    border: 0; background: none; padding: 0;
    font-size: 10px; letter-spacing: .22em;
}
.t-hero-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* Sayfa üstü yarışma şeridi */
.t-hero .band {
    position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-band);
}

/* ------------------------------------------------- 13. TURNUVA KARTI */

/* KARTIN TAMAMI bağlantıdır: içeride ayrıca dev bir "Devam Et" butonu yoktu,
   olmamalı da — buton kartla aynı hedefe gidiyordu ve yeri boşa harcıyordu. */
.t-card {
    display: flex; flex-direction: column; gap: var(--sp-2);
    text-decoration: none; position: relative; overflow: hidden;
    background: var(--surface); background-image: var(--grad-surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-4);
    box-shadow: var(--elev-1), var(--ring);
    transition: transform .16s var(--ease), box-shadow .18s var(--ease), border-color .16s var(--ease);
}
.t-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-band); }
.t-card:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: var(--border-strong); }
.t-card-ident {
    font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--stage);
}
.t-card h3 {
    text-transform: uppercase; letter-spacing: -.01em; font-size: var(--step-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t-card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.t-card-foot {
    display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
    font-size: var(--step--2); color: var(--text-muted); font-weight: 600;
}
.t-card-leader { margin-left: auto; color: var(--text-faint); }
.t-card-leader strong { color: var(--text); }
.t-card-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .t-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .t-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.progress { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 2px 0; }
.progress-bar { height: 100%; background: var(--grad-accent); border-radius: 999px; transition: width .4s var(--ease); }

/* ------------------------------------------------- 14. İSTATİSTİK */

/* İki sütunlu sayfa: ana blok geniş, yan blok dar. Mobilde alt alta. */
.split { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-5); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-5); } }
.split-main, .split-side { min-width: 0; }
.section-action { margin-left: auto; }

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 620px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row-2 { grid-template-columns: repeat(2, 1fr) !important; }
.stat {
    background: var(--surface); background-image: var(--grad-surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4); box-shadow: var(--elev-1), var(--ring);
}
.stat dt { font-size: 10px; color: var(--text-faint); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.stat dd { margin: 2px 0 0; font-size: var(--step-3); font-weight: 800; line-height: 1.05; }

/* ------------------------------------------------- 15. ADALET KARNESİ */

/* Metrikler tam genişlik satır değil, KÜÇÜK KUTU IZGARASI: aynı bilgi
   üçte bir yerde durur, karne tek bakışta okunur. */
.fairness { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .fairness { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fairness { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fairness-row {
    display: grid; grid-template-columns: 1fr auto;
    align-content: start; gap: 2px var(--sp-2);
    padding: var(--sp-3); border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
}
.fairness-row > span:first-child {
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-faint); grid-column: 1 / -1;
}
.fairness-row .value {
    font-family: var(--font-display); font-size: var(--step-1); font-weight: 800;
    align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fairness-row .status { align-self: center; justify-self: end; }
.fairness-note { grid-column: 1 / -1; font-size: var(--step--2); color: var(--text-muted); }
.status {
    font-size: 10px; font-weight: 800; letter-spacing: .12em;
    padding: .4em .7em; border-radius: 999px; text-transform: uppercase;
    border: 1px solid var(--border);
}
.status-perfect     { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 45%, transparent); background: color-mix(in srgb, var(--positive) 10%, transparent); }
.status-optimal     { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.status-ok          { color: var(--text-muted); }
.status-warning     { color: var(--champion); border-color: color-mix(in srgb, var(--champion) 45%, transparent); }
.status-unavoidable { color: var(--text-muted); border-style: dashed; }

/* ------------------------------------------------- 16. SEKMELER */

.tabs {
    display: flex; gap: 2px; overflow-x: auto;
    border-bottom: 1px solid var(--border);
    margin: var(--sp-4) 0 0; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center;
    padding: 0 var(--sp-3); text-decoration: none;
    color: var(--text-muted); font-weight: 700; font-size: var(--step--1);
    letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s var(--ease);
}
.tabs a:hover { color: var(--text); }
.tabs a.is-active { color: var(--text); border-bottom-color: var(--accent); }

/* ------------------------------------------------- 17. ŞAMPİYON */

.champion-hero {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--champion) 30%, var(--border));
    background: var(--surface); padding: var(--sp-8) var(--sp-5) var(--sp-7);
    text-align: center; box-shadow: var(--elev-3), var(--ring);
}
.champion-hero::before { content: ""; position: absolute; inset: 0; background: var(--grad-hero); }
.champion-hero::after {
    content: ""; position: absolute; left: 50%; top: -22%;
    width: 380px; height: 380px; transform: translateX(-50%);
    border: 1px solid var(--champion); border-radius: 50%;
    box-shadow: 0 0 0 40px color-mix(in srgb, var(--champion) 8%, transparent);
    opacity: var(--geometry); pointer-events: none;
}
.champion-hero > * { position: relative; }
.champion-label {
    font-family: var(--font-display); letter-spacing: .42em;
    text-transform: uppercase; color: var(--champion); font-size: var(--step-0);
}
.champion-name {
    font-size: var(--step-5); line-height: .92; text-transform: uppercase;
    margin: var(--sp-3) 0 var(--sp-2);
    background: linear-gradient(180deg, var(--text) 40%, color-mix(in srgb, var(--champion) 70%, var(--text)) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.champion-team { font-size: var(--step-1); color: var(--text-muted); }

.trophy-mark {
    width: 84px; height: 84px; margin: 0 auto var(--sp-4);
    border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--champion); color: var(--champion);
    font-family: var(--font-display); font-size: 34px;
    box-shadow: 0 0 40px -8px var(--champion), inset 0 0 24px -12px var(--champion);
}

.final-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.final-score .goal { font-size: var(--step-4); text-align: center; }
.final-score .fs-mid { font-family: var(--font-display); color: var(--text-faint); letter-spacing: .2em; }

.road { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
.road-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border);
}
.road-item .goal { font-size: var(--step-1); margin-left: auto; }

/* ------------------------------------------------- 18. SİHİRBAZ */

.wizard-steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); padding: 0; }
.wizard-steps li {
    flex: 1; list-style: none; padding: var(--sp-3) 0 0;
    border-top: 3px solid var(--border);
    font-size: var(--step--1); color: var(--text-faint); font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}
.wizard-steps li.current { border-top-color: var(--accent); color: var(--text); }
.wizard-steps li.done { border-top-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text-muted); }

.identity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 760px) { .identity-grid { grid-template-columns: repeat(4, 1fr); } }
.identity-card {
    position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--border); cursor: pointer; display: block;
    padding: var(--sp-4); min-height: 116px;
    background: var(--surface); background-image: var(--grad-surface);
    box-shadow: var(--elev-1);
    transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .18s var(--ease);
}
.identity-card:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.identity-card input { position: absolute; opacity: 0; pointer-events: none; }
.identity-card .swatch { display: flex; gap: 5px; margin-bottom: var(--sp-3); }
.identity-card .swatch i { width: 26px; height: 6px; border-radius: 999px; }
.identity-card strong { font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; display: block; }
.identity-card small { display: block; color: var(--text-muted); font-size: var(--step--1); margin-top: 2px; }
.identity-card:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 1.5px var(--accent), var(--elev-2);
}
.identity-card:has(input:checked)::after {
    content: "✓"; position: absolute; top: var(--sp-3); right: var(--sp-3);
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 800;
    background: var(--grad-accent); color: var(--accent-contrast);
}

/* Takım seçici */
.team-picker {
    max-height: 400px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: var(--sp-2); background: var(--bg-deep);
}
.team-search {
    width: 100%; min-height: var(--tap); margin-bottom: var(--sp-2);
    padding: 0 var(--sp-3); background: var(--bg-deep); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
}
.team-group + .team-group { margin-top: var(--sp-3); }
.team-group-head {
    position: sticky; top: calc(var(--sp-2) * -1); z-index: 1;
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-2); border-radius: var(--radius-sm);
    letter-spacing: .12em; text-transform: uppercase;
    font-size: var(--step--2); color: var(--stage);
}
.team-group-head .muted { margin-left: auto; }

.team-option, .form label.team-option {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: var(--tap); padding: 0 var(--sp-2); cursor: pointer;
    border-radius: var(--radius-sm); margin-bottom: 0;
    font-weight: 650; font-size: var(--step-0); color: var(--text);
    transition: background .12s var(--ease);
}
.team-option:hover { background: var(--surface-2); }
.team-option .crest { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.team-option > span:not(.crest):not(.pill) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-option input[type="checkbox"] { width: 20px; height: 20px; }
.team-option.is-new { background: var(--accent-soft); }
.team-option.just-picked { box-shadow: 0 0 0 2px var(--accent) inset; }

.player-row { display: flex; align-items: center; gap: var(--sp-2); }
.player-row input[type="text"] {
    flex: 1; min-width: 0; min-height: var(--tap); padding: 0 var(--sp-3);
    background: var(--bg-deep); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
}
.player-row input[type="text"]:focus { border-color: var(--accent); outline: none; }
.player-row .btn { flex: 0 0 auto; }
.row-remove {
    flex: 0 0 auto; width: 32px; height: 32px; margin-left: var(--sp-2);
    border-radius: 8px; border: 1px solid var(--border);
    background: transparent; color: var(--text-muted);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.row-remove:hover { color: var(--negative); border-color: var(--negative); }

/* Seçili takım çipleri */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.chip {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: .32em .5em .32em .8em; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: var(--step--1); font-weight: 650;
}
.chip button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.chip button:hover { color: var(--negative); }
.chip-empty { color: var(--text-faint); font-size: var(--step--1); }

/* Kaynak seçimi */
.scope-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.seg, .form label.seg {
    display: inline-flex; align-items: center; margin: 0;
    min-height: 38px; padding: 0 var(--sp-4); cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted);
    font-size: var(--step--1); font-weight: 700;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg:has(input:checked) { background: var(--grad-accent); border-color: transparent; color: var(--accent-contrast); }

/* Havuz büyüklüğü önerileri */
.suggest-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
@media (min-width: 760px) { .suggest-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) { .suggest-row { grid-template-columns: repeat(7, 1fr); } }
.suggest {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    padding: var(--sp-3); cursor: pointer; text-align: left;
    background: var(--surface); background-image: var(--grad-surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font: inherit; box-shadow: var(--elev-1);
    transition: transform .14s var(--ease), border-color .14s var(--ease);
}
.suggest:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.suggest.is-active { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.suggest strong { font-size: var(--step-2); line-height: 1; }
.suggest span { font-size: var(--step--2); color: var(--text-muted); font-weight: 700; }
.suggest em { font-style: normal; font-size: 10px; letter-spacing: .04em; color: var(--text-faint); }
.suggest.no-repeat em { color: var(--positive); }
/* Elle giriş "son seçenek": tüm satırı kaplar, önerilerle karışmaz. */
.suggest-manual {
    cursor: default; gap: var(--sp-2); grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; text-align: left;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    border-style: dashed;
}
.suggest-manual:hover { transform: none; border-color: var(--border); }
.suggest-manual .manual-label { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.suggest-manual .manual-label strong { font-size: var(--step-0); letter-spacing: .02em; }
.suggest-manual em { text-align: left; font-size: var(--step--2); }
.manual-row { display: flex; gap: var(--sp-1); width: auto; flex: 0 0 auto; }
.manual-row input {
    width: 84px; min-width: 0; min-height: 40px; padding: 0 var(--sp-2);
    background: var(--bg-deep); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; font: inherit;
    font-family: var(--font-display); font-size: var(--step-1); text-align: center;
    -moz-appearance: textfield;
}
.manual-row input::-webkit-outer-spin-button,
.manual-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------- 19. BOŞ DURUM */

.empty {
    text-align: center; padding: var(--sp-8) var(--sp-4);
    border: 1px dashed var(--border); border-radius: var(--radius);
    color: var(--text-muted); background: color-mix(in srgb, var(--surface) 45%, transparent);
}
.empty h3 { color: var(--text); margin-bottom: var(--sp-2); }

/* ------------------------------------------------- 20. KURULUM */

body.install { background: var(--bg-deep); background-image: var(--grad-hero); }
.install-shell { max-width: 760px; margin: 0 auto; padding: var(--sp-7) var(--sp-4) var(--sp-8); }
.install-head { text-align: center; margin-bottom: var(--sp-5); }
.install-head h1 { font-family: var(--font-display); text-transform: uppercase; margin-top: var(--sp-3); font-size: var(--step-4); }
.install-steps { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-5) 0 0; }
.install-steps li {
    flex: 1; font-size: var(--step--1); color: var(--text-faint);
    border-top: 3px solid var(--border); padding-top: var(--sp-2); font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
}
.install-steps li span { display: block; font-family: var(--font-display); font-size: var(--step-1); }
.install-steps li.current { border-top-color: var(--accent); color: var(--text); }
.install-steps li.done { border-top-color: var(--positive); color: var(--text-muted); }
.install-foot { text-align: center; margin-top: var(--sp-5); }

.req-table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); }
.req-table td { padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--border); }
.req-table tr.ok td:first-child { color: var(--positive); font-weight: 800; width: 28px; }
.req-table tr.fail td:first-child { color: var(--negative); font-weight: 800; width: 28px; }
.checklist { padding-left: 1.2em; color: var(--text-muted); }
.checklist li { margin-bottom: var(--sp-2); }
.celebrate { text-align: center; }

/* ------------------------------------------------- 21. HAREKET */

@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: reveal .38s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ------------------------------------------------- 22. YAZDIRMA */


/* ================================================== 21. KİMLİK EKRANLARI

   Kayıt ve giriş TEK EKRANDIR ve JavaScript'siz çalışır. Hatalar tek bir
   uyarı kutusunda değil, ilgili alanın ALTINDA gösterilir. */

.auth-form { max-width: 420px; margin: 0 auto; }
.auth-form .btn { margin-top: var(--sp-2); }
.auth-alt { margin: var(--sp-4) 0 0; }

.field { display: block; margin-bottom: var(--sp-4); }
.field-label {
    display: block; margin-bottom: var(--sp-2);
    font-size: var(--step--1); font-weight: 700; color: var(--text-muted);
    letter-spacing: .02em;
}
.field-hint { font-weight: 500; color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.field input, .field select {
    width: 100%; min-height: var(--tap); padding: 0 var(--sp-3);
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; font-size: var(--step-0);
}
.field input:focus { border-color: var(--accent); background: var(--surface); }
.field-error {
    display: block; margin-top: var(--sp-2);
    font-size: var(--step--1); font-weight: 600; color: var(--negative);
}
.field.has-error input { border-color: var(--negative); background: color-mix(in srgb, var(--negative) 6%, var(--surface)); }
.field-row { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* ================================================== 22. YÖNETİM PANELİ */

.admin-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4);
}
.admin-head h1 { font-size: var(--step-3); text-transform: uppercase; }
.admin-counters .stat { display: flex; flex-direction: column; }
.stat-note { font-size: 10px; font-weight: 700; color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.admin-tabs { margin-top: var(--sp-4); }
.nav-admin { color: var(--accent) !important; font-weight: 800; }

/* Yatay çubuk listesi — dağılımları grafik kütüphanesi olmadan gösterir */
.bar-list { display: grid; gap: var(--sp-2); }
.bar-row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: var(--sp-3); }
.bar-label { font-size: var(--step--1); font-weight: 700; color: var(--text-muted); }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--grad-accent); }
.bar-value { font-size: var(--step-0); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Kayıt eğrisi — 30 sütunluk minik sütun grafiği */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.spark-bar {
    flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
    background: var(--grad-accent); min-height: 2px;
}
/* Kayıt olmayan günler soluk bir taban çizgisi olarak durur */
.spark-bar.is-zero { background: var(--surface-3); }

.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-3); margin: 0; }
.kv dt { font-size: var(--step--1); color: var(--text-muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.filter-bar input, .filter-bar select {
    min-height: 34px; padding: 0 var(--sp-3); flex: 0 1 240px; min-width: 0;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: var(--step--1);
}

/* Veri tablosu — puan durumu tablosuyla aynı dil, daha yoğun */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--sp-3); text-align: left; vertical-align: middle; }
.data-table th {
    font-size: var(--step--2); color: var(--text-faint); font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: var(--step--1); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .nowrap { white-space: nowrap; }
.data-table tr.is-suspended td { opacity: .62; }
.user-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 34ch; }
.user-cell strong, .user-cell .muted {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.user-cell strong { font-size: var(--step-0); }
.user-cell .muted { font-size: var(--step--2); }
.row-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.progress-inline { display: inline-block; width: 74px; vertical-align: middle; margin-right: var(--sp-2); }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.inline-edit { display: flex; gap: var(--sp-2); margin: 0; }
.inline-edit input {
    flex: 1 1 190px; min-width: 0; min-height: 32px; padding: 0 var(--sp-2);
    font: inherit; font-size: var(--step--2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.log-action { font-weight: 700; }
.log-action.is-admin { color: var(--accent); }

.pill-danger { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 45%, transparent);
    background: color-mix(in srgb, var(--negative) 8%, transparent); }
.btn-danger {
    background: var(--surface); color: var(--negative);
    border-color: color-mix(in srgb, var(--negative) 45%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--negative) 10%, var(--surface)); }

/* Silme onayı: tek tıkla silinmesin diye açılır kutu içinde */
.danger-drop { position: relative; }
.danger-drop > summary { list-style: none; cursor: pointer; }
.danger-drop > summary::-webkit-details-marker { display: none; }
.danger-form {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px;
    display: grid; gap: var(--sp-2); text-align: left;
    padding: var(--sp-3); border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--elev-3);
}
.danger-form p { margin: 0; font-size: var(--step--2); }
.danger-form input {
    min-height: 34px; padding: 0 var(--sp-2); font: inherit; font-size: var(--step--1);
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}

/* Dar ekranda ikincil sütunlar gizlenir — tablo yatay kaydırmaya zorlamaz */
@media (max-width: 720px) {
    .data-table .col-optional { display: none; }
    .data-table th, .data-table td { padding: var(--sp-2); }
    .danger-form { position: fixed; left: var(--sp-4); right: var(--sp-4); top: auto; bottom: var(--sp-4); width: auto; }
}

@media print {
    .appbar, .tabs, .btn, .btn-row { display: none !important; }
    body { background: #fff; color: #000; }
}