/* ==========================================================================
   DEDESPORTS — Tasarım demosu
   Marka renkleri dedebetetkinlik.com'dan alınmıştır (lacivert + Olimpos altını).
   ========================================================================== */

:root {
    /* Zemin */
    --bg-0: #060920;
    --bg-1: #0a0f2e;
    --bg-2: #0e1438;
    --surface: #111a44;
    --panel: linear-gradient(180deg, rgba(22, 31, 76, 0.78), rgba(12, 17, 48, 0.82));
    --line: rgba(140, 160, 220, 0.14);
    --line-2: rgba(140, 160, 220, 0.24);

    /* Metin */
    --text-1: #f1f4fb;
    --text-2: #bcc4dc;
    --text-3: #8f99b8;

    /* Marka */
    --gold: #f6d56d;
    --gold-soft: #d9b958;
    --gold-deep: #b8932f;
    --on-gold: #1a1100;
    --electric: #8ab1ff;
    --electric-deep: #4c6fd8;

    /* Durum */
    --live: #ef4444;
    --live-strong: #dc2626;
    --win: #5cd4a7;
    --warn: #fbbf24;
    --loss: #f08a8a;

    /* Tipografi */
    --font-display: "Cinzel", Georgia, serif;
    --font-body: "Host Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    /* Ölçüler */
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.38);
    --glow-gold: 0 0 0 1px rgba(246, 213, 109, 0.35), 0 10px 30px rgba(246, 213, 109, 0.12);

    --container: 1320px;
    --gutter: 16px;
    --header-h: 68px;

    /* Hareket */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 600ms;

    /* Katmanlar */
    --z-sticky: 40;
    --z-drawer: 100;
    --z-toast: 1000;
}

@media (min-width: 768px) {
    :root { --gutter: 24px; }
}

/* --------------------------------------------------------------------------
   Temel
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-1);
    background-color: var(--bg-0);
    background-image:
        radial-gradient(1200px 600px at 50% -200px, rgba(76, 111, 216, 0.28), transparent 70%),
        radial-gradient(700px 500px at 100% 20%, rgba(246, 213, 109, 0.06), transparent 70%),
        radial-gradient(800px 600px at 0% 60%, rgba(76, 111, 216, 0.10), transparent 70%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 72px; /* mobil alt menü payı */
}

@media (min-width: 1024px) {
    body { padding-bottom: 0; }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 6px;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: 16px; top: -60px;
    z-index: var(--z-toast);
    padding: 10px 16px;
    background: var(--gold);
    color: var(--on-gold);
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: top var(--dur-fast);
}
.skip-link:focus { top: 12px; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

/* --------------------------------------------------------------------------
   Butonlar & rozetler
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    touch-action: manipulation;
    transition: background-color var(--dur-base), color var(--dur-base),
        border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast);
}
.btn:active { transform: scale(0.97); }

.btn-gold {
    background: linear-gradient(180deg, #fbe28c, var(--gold) 45%, var(--gold-soft));
    color: var(--on-gold);
    box-shadow: 0 6px 20px rgba(246, 213, 109, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-gold:hover { box-shadow: 0 8px 28px rgba(246, 213, 109, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); }

.btn-ghost {
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-1);
}
.btn-ghost:hover { border-color: rgba(246, 213, 109, 0.5); color: var(--gold); }

.btn-telegram {
    background: #229ed9;
    color: #fff;
}
.btn-telegram:hover { background: #1b8cc2; }

.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.btn-block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    color: var(--text-2);
    transition: background-color var(--dur-base), color var(--dur-base);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-1); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-live { background: var(--live-strong); color: #fff; }
.badge-gold { background: rgba(246, 213, 109, 0.14); color: var(--gold); border: 1px solid rgba(246, 213, 109, 0.3); }
.badge-blue { background: rgba(138, 177, 255, 0.14); color: var(--electric); border: 1px solid rgba(138, 177, 255, 0.28); }
.badge-green { background: rgba(92, 212, 167, 0.14); color: var(--win); border: 1px solid rgba(92, 212, 167, 0.3); }
.badge-amber { background: rgba(251, 191, 36, 0.14); color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.3); }
.badge-red { background: rgba(240, 138, 138, 0.14); color: var(--loss); border: 1px solid rgba(240, 138, 138, 0.3); }
.badge-muted { background: rgba(255, 255, 255, 0.06); color: var(--text-2); }

.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse 1.6s ease-out infinite;
    flex: none;
}
.badge-live .live-dot { color: #fff; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

/* --------------------------------------------------------------------------
   Canlı skor şeridi
   -------------------------------------------------------------------------- */
.scorebar {
    background: rgba(4, 6, 22, 0.9);
    border-bottom: 1px solid var(--line);
}
.scorebar-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.scorebar-label {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 0;
    margin-right: 4px;
    border-right: 1px solid var(--line);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-3);
    white-space: nowrap;
}
@media (min-width: 768px) { .scorebar-label { display: flex; } }

.scorebar-track {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.scorebar-list {
    display: flex;
    gap: 4px;
    width: max-content;
    padding: 6px 4px 6px 0;
}
.scorebar-track::-webkit-scrollbar { display: none; }

.score-chip {
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 10px;
    min-width: 150px;
    font-size: 13px;
    transition: background-color var(--dur-base);
}
.score-chip:hover { background: rgba(255, 255, 255, 0.05); }
.score-chip .sc-meta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-3);
    text-transform: uppercase;
}
.score-chip .sc-meta .is-live { color: #ff6b6b; }
.score-chip .sc-team { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.score-chip .sc-score { font-family: var(--font-mono); font-weight: 700; text-align: right; color: var(--text-1); }
.score-chip .is-lead { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Üst menü
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(6, 9, 32, 0.86);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
.brand .brand-logo {
    height: 44px;
    width: auto;
    /* Maskotun lacivert konturu koyu zeminde kayboluyor; ince açık renk hale ile ayrışıyor */
    filter: drop-shadow(0 0 1px rgba(170, 190, 255, 0.75));
    transition: transform var(--dur-base) var(--ease-out);
}
.brand:hover .brand-logo { transform: scale(1.03); }
@media (max-width: 480px) {
    .brand .brand-logo { height: 36px; }
}

.main-nav { display: none; margin-left: 12px; }
.main-nav ul { display: flex; gap: 2px; }
.main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-2);
    transition: color var(--dur-base), background-color var(--dur-base);
}
.main-nav a:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.04); }
.main-nav a[aria-current="page"] { color: var(--gold); }
.main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: -12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--gold);
}
.main-nav .nav-live { color: var(--text-1); }
.main-nav .nav-live .live-dot { color: var(--live); animation-name: pulse-red; }
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.header-actions .btn-telegram .label-long { display: none; }
.menu-toggle { display: inline-grid; }

@media (min-width: 640px) {
    .header-actions .btn-telegram .label-long { display: inline; }
}
@media (min-width: 1180px) {
    .main-nav { display: block; }
    .menu-toggle { display: none; }
}

/* Mobil çekmece */
.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    visibility: hidden;
}
.drawer.is-open { visibility: visible; }
.drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(2, 3, 12, 0.7);
    opacity: 0;
    transition: opacity var(--dur-base);
}
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    padding: 16px;
    background: var(--bg-1);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 280ms var(--ease-out);
    overflow-y: auto;
}
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--text-2);
}
.drawer nav a:hover, .drawer nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.05); color: var(--gold); }
.drawer nav i { width: 20px; text-align: center; color: var(--text-3); }

/* Branş şeridi */
.sportbar {
    border-bottom: 1px solid var(--line);
    background: rgba(8, 12, 36, 0.6);
}
.sportbar ul {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px 0;
}
.sportbar ul::-webkit-scrollbar { display: none; }
.sport-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    white-space: nowrap;
    transition: border-color var(--dur-base), color var(--dur-base), background-color var(--dur-base);
}
.sport-chip i { color: var(--text-3); transition: color var(--dur-base); }
.sport-chip:hover { border-color: var(--line-2); color: var(--text-1); }
.sport-chip.is-active,
.sport-chip[aria-pressed="true"],
.sport-chip[aria-selected="true"] {
    background: rgba(246, 213, 109, 0.12);
    border-color: rgba(246, 213, 109, 0.45);
    color: var(--gold);
}
.sport-chip.is-active i,
.sport-chip[aria-pressed="true"] i,
.sport-chip[aria-selected="true"] i { color: var(--gold); }

/* --------------------------------------------------------------------------
   Bölüm başlıkları
   -------------------------------------------------------------------------- */
.section { padding-block: 28px; }
@media (min-width: 768px) { .section { padding-block: 40px; } }

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.sec-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sec-icon {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(246, 213, 109, 0.22), rgba(246, 213, 109, 0.06));
    border: 1px solid rgba(246, 213, 109, 0.3);
    color: var(--gold);
    font-size: 17px;
}
.sec-title h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 26px);
    letter-spacing: 0.02em;
    line-height: 1.15;
}
.sec-title p { margin-top: 2px; font-size: 14px; color: var(--text-3); }
.sec-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    color: var(--electric);
}
.sec-link:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Panel / kart
   -------------------------------------------------------------------------- */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.panel-pad { padding: 18px; }
@media (min-width: 768px) { .panel-pad { padding: 22px; } }

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}
.panel-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.panel-head h3 i { color: var(--gold); }

/* Görsel yer tutucular (fotoğraf yerine marka dokusu) */
.art {
    position: relative;
    overflow: hidden;
    background-color: #111a44;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(246, 213, 109, 0.22), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(76, 111, 216, 0.55), transparent 55%),
        linear-gradient(135deg, #1a2566, #0a0f2e);
    isolation: isolate;
}
.art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 22px);
    z-index: -1;
}
.art > .art-icon {
    position: absolute;
    right: -4%;
    bottom: -10%;
    font-size: clamp(120px, 16vw, 220px);
    color: rgba(255, 255, 255, 0.07);
    transform: rotate(-12deg);
    z-index: -1;
    pointer-events: none;
}
.art--red { background-image: radial-gradient(circle at 80% 20%, rgba(246, 213, 109, 0.25), transparent 45%), radial-gradient(circle at 10% 90%, rgba(220, 38, 38, 0.5), transparent 55%), linear-gradient(135deg, #3a1030, #0a0f2e); }
.art--orange { background-image: radial-gradient(circle at 80% 20%, rgba(246, 213, 109, 0.2), transparent 45%), radial-gradient(circle at 10% 90%, rgba(234, 120, 40, 0.5), transparent 55%), linear-gradient(135deg, #3a2412, #0a0f2e); }
.art--green { background-image: radial-gradient(circle at 80% 20%, rgba(246, 213, 109, 0.18), transparent 45%), radial-gradient(circle at 10% 90%, rgba(40, 170, 110, 0.45), transparent 55%), linear-gradient(135deg, #0c2d2a, #0a0f2e); }
.art--violet { background-image: radial-gradient(circle at 80% 20%, rgba(138, 177, 255, 0.28), transparent 45%), radial-gradient(circle at 10% 90%, rgba(130, 80, 230, 0.5), transparent 55%), linear-gradient(135deg, #22164d, #0a0f2e); }
.art--gold { background-image: radial-gradient(circle at 80% 20%, rgba(255, 240, 179, 0.35), transparent 45%), radial-gradient(circle at 10% 90%, rgba(184, 147, 47, 0.5), transparent 55%), linear-gradient(135deg, #3a2e10, #0a0f2e); }

/* --------------------------------------------------------------------------
   Takım armaları (logo yerine monogram)
   -------------------------------------------------------------------------- */
.crest {
    --c1: #334; --c2: #556; --ct: #fff;
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
    color: var(--ct);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.crest-lg { width: 64px; height: 64px; font-size: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14), var(--shadow-md); }
.crest-md { width: 40px; height: 40px; font-size: 12px; }

.t-gs  { --c1: #a90432; --c2: #fdb912; }
.t-fb  { --c1: #0b1f5c; --c2: #f5d100; }
.t-bjk { --c1: #111111; --c2: #f5f5f5; --ct: #fff; }
.t-ts  { --c1: #7a1034; --c2: #4aa8d8; }
.t-rm  { --c1: #ffffff; --c2: #febe10; --ct: #1b2a5a; }
.t-fcb { --c1: #a50044; --c2: #004d98; }
.t-mci { --c1: #6cabdd; --c2: #1c2c5b; }
.t-ars { --c1: #ef0107; --c2: #ffffff; }
.t-liv { --c1: #c8102e; --c2: #8a0a1f; }
.t-che { --c1: #034694; --c2: #0a2a66; }
.t-bay { --c1: #dc052d; --c2: #0066b2; }
.t-bvb { --c1: #fde100; --c2: #111111; }
.t-int { --c1: #010e80; --c2: #111111; }
.t-mil { --c1: #fb090b; --c2: #111111; }
.t-psg { --c1: #004170; --c2: #da291c; }
.t-efs { --c1: #003a70; --c2: #e30613; }
.t-okc { --c1: #007ac1; --c2: #ef3b24; }
.t-den { --c1: #0e2240; --c2: #fec524; }
.t-oly { --c1: #e2231a; --c2: #ffffff; }
.t-pao { --c1: #007841; --c2: #ffffff; }
.t-vb  { --c1: #fdd000; --c2: #111111; }
.t-ecz { --c1: #e30613; --c2: #ffffff; }
.t-ita { --c1: #009246; --c2: #ce2b37; }
.t-esp { --c1: #aa151b; --c2: #f1bf00; }
.t-srb { --c1: #c6363c; --c2: #0c4076; }
.t-ger { --c1: #111111; --c2: #dd0000; }
.t-f1  { --c1: #e10600; --c2: #15151e; }

/* --------------------------------------------------------------------------
   Manşet + Canlı TV
   -------------------------------------------------------------------------- */
.hero { padding-top: 20px; }
@media (min-width: 768px) { .hero { padding-top: 28px; } }

.hero-grid {
    display: grid;
    gap: 20px;
}
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
}

.lead-story {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 380px;
    padding: 22px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
@media (min-width: 768px) { .lead-story { min-height: 460px; padding: 32px; } }
.lead-story::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 20%, rgba(6, 9, 32, 0.55) 55%, rgba(6, 9, 32, 0.95));
    z-index: -1;
}
.lead-story .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lead-story h1 {
    font-size: clamp(26px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 22ch;
    text-wrap: balance;
}
.lead-story h1 a:hover { color: var(--gold); }
.lead-story p.excerpt {
    margin-top: 12px;
    max-width: 60ch;
    font-size: 16px;
    color: var(--text-2);
}
.story-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-3);
}
.story-meta span { display: inline-flex; align-items: center; gap: 6px; }

.lead-scoreline {
    position: absolute;
    top: 22px; right: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: rgba(6, 9, 32, 0.72);
    border: 1px solid var(--line-2);
    backdrop-filter: blur(8px);
}
.lead-scoreline .ls-score { font-family: var(--font-mono); font-weight: 700; font-size: 22px; }
.lead-scoreline small { display: block; font-size: 11px; color: var(--text-3); text-align: center; letter-spacing: 0.08em; }
@media (max-width: 559px) { .lead-scoreline { display: none; } }

.sub-stories {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}
@media (min-width: 640px) { .sub-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mini-story {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color var(--dur-base), background-color var(--dur-base);
}
.mini-story:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.04); }
.mini-story .art { width: 84px; flex: none; aspect-ratio: 1; border-radius: 10px; }
.mini-story .art .art-icon { font-size: 70px; right: -8px; bottom: -10px; }
.mini-story h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.mini-story .tag { font-size: 11px; display: block; margin-bottom: 4px; }
@media (min-width: 640px) {
    .mini-story { flex-direction: column; }
    .mini-story .art { width: 100%; aspect-ratio: 16 / 9; }
}

/* Canlı TV widget */
.live-widget { display: flex; flex-direction: column; overflow: hidden; }
.player {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(40, 170, 110, 0.55), transparent 60%),
        repeating-linear-gradient(90deg, #0f5c3c 0 40px, #11683f 40px 80px);
    overflow: hidden;
    isolation: isolate;
}
.player::before {
    /* saha çizgileri */
    content: "";
    position: absolute;
    inset: 12% 6%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.35) calc(50% - 1px), rgba(255, 255, 255, 0.35) calc(50% + 1px), transparent calc(50% + 1px));
    z-index: -1;
}
.player::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 9, 32, 0.55), transparent 35%, transparent 60%, rgba(6, 9, 32, 0.9));
    z-index: -1;
}
.player-top {
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.player-bug {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(6, 9, 32, 0.8);
    font-size: 13px;
    font-weight: 700;
}
.player-bug .mono { font-size: 14px; }
.player-bug .min { color: var(--gold); }
.player-play {
    position: absolute;
    left: 50%; top: 50%;
    width: 68px; height: 68px;
    margin: -34px 0 0 -34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(246, 213, 109, 0.95);
    color: var(--on-gold);
    font-size: 24px;
    box-shadow: 0 0 0 10px rgba(246, 213, 109, 0.18), var(--shadow-md);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
}
.player-play i { margin-left: 4px; }
.player-play:hover { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(246, 213, 109, 0.2), var(--shadow-md); }
.player-bottom {
    position: absolute;
    left: 12px; right: 12px; bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    font-size: 13px;
}
.player-bottom strong { display: block; font-size: 15px; }
.player-bottom span { color: var(--text-2); }
.viewers { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; white-space: nowrap; }

.stream-list { padding: 6px; }
.stream-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color var(--dur-base);
}
.stream-item:hover { background: rgba(255, 255, 255, 0.04); }
.stream-item[aria-current="true"] { background: rgba(246, 213, 109, 0.08); }
.stream-time { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text-2); }
.stream-time.is-live { color: #ff6b6b; }
.stream-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.stream-title small { display: block; font-weight: 500; font-size: 12px; color: var(--text-3); }
.stream-ch { font-size: 12px; font-weight: 700; color: var(--text-3); }
.live-widget .widget-foot { padding: 12px 18px 18px; margin-top: auto; }

/* --------------------------------------------------------------------------
   Günün maçları
   -------------------------------------------------------------------------- */
.fixtures-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.chip-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
}
.chip-row::-webkit-scrollbar { display: none; }

.segmented {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
}
.segmented button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    transition: background-color var(--dur-base), color var(--dur-base);
}
.segmented button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); }

.fixtures-grid {
    display: grid;
    gap: 16px;
}
@media (min-width: 900px) { .fixtures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.league { overflow: hidden; }
.league[hidden] { display: none; }
.league-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
}
.league-head i { color: var(--text-3); width: 18px; text-align: center; }
.league-head strong { font-size: 14px; font-weight: 800; }
.league-head > span:not(.badge) { font-size: 12px; color: var(--text-3); font-weight: 600; }
.league-head .sec-link { margin-left: auto; min-height: auto; font-size: 13px; }

.match-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    transition: background-color var(--dur-base);
}
.match-row:last-child { border-bottom: 0; }
.match-row:hover { background: rgba(255, 255, 255, 0.03); }
.mr-status {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
    line-height: 1.2;
}
.mr-status.is-live { color: #ff6b6b; }
.mr-status.is-live::after {
    content: "CANLI";
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
}
.mr-teams { display: grid; gap: 6px; min-width: 0; }
.mr-team {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-2);
}
.mr-team .crest { width: 22px; height: 22px; font-size: 7px; }
.mr-team .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-team .sc { font-family: var(--font-mono); font-weight: 700; color: var(--text-1); min-width: 2ch; text-align: right; }
.mr-team.is-winner { color: var(--text-1); }
.mr-team.is-winner .sc { color: var(--gold); }
.mr-team .red-card {
    display: inline-block;
    width: 9px; height: 12px;
    margin-left: 6px;
    background: var(--live);
    border-radius: 2px;
    vertical-align: -1px;
}
.mr-actions { display: flex; gap: 4px; }
.mr-actions a {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--text-3);
    font-size: 14px;
    transition: color var(--dur-base), border-color var(--dur-base), background-color var(--dur-base);
}
.mr-actions a:hover { color: var(--gold); border-color: rgba(246, 213, 109, 0.4); background: rgba(246, 213, 109, 0.06); }
.mr-actions a.is-tv { color: #ff6b6b; border-color: rgba(239, 68, 68, 0.35); }
@media (max-width: 479px) {
    .mr-actions a:not(.is-primary) { display: none; }
}

/* --------------------------------------------------------------------------
   İki sütunlu yerleşim (içerik + yan panel)
   -------------------------------------------------------------------------- */
.layout {
    display: grid;
    gap: 28px;
}
@media (min-width: 1100px) {
    .layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .aside-sticky { position: sticky; top: calc(var(--header-h) + 16px); }
}
.stack { display: grid; gap: 20px; }
.stack-lg { display: grid; gap: 40px; }

/* Haber kartları */
.news-grid {
    display: grid;
    gap: 18px;
}
@media (min-width: 600px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--panel);
    transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.news-card:hover { border-color: rgba(246, 213, 109, 0.35); transform: translateY(-2px); }
.news-card .art { aspect-ratio: 16 / 9; }
.news-card .art .art-icon { font-size: 150px; }
.news-card .art .badge { position: absolute; left: 12px; top: 12px; }
.news-card .body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.news-card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.news-card p { font-size: 14px; color: var(--text-2); }
.news-card .story-meta { margin-top: auto; padding-top: 6px; }

/* Analiz kartı */
.analysis {
    display: grid;
    gap: 0;
    overflow: hidden;
}
@media (min-width: 800px) { .analysis { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.analysis-main { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.analysis-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.analysis-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; flex: 1; }
.analysis-team small { font-weight: 600; color: var(--text-3); font-size: 12px; }
.form-row { display: flex; gap: 4px; }
.form-row b {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
}
.form-row .w { background: rgba(92, 212, 167, 0.18); color: var(--win); }
.form-row .d { background: rgba(255, 255, 255, 0.08); color: var(--text-2); }
.form-row .l { background: rgba(240, 138, 138, 0.18); color: var(--loss); }
.analysis-vs { text-align: center; }
.analysis-vs .kick { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--gold); }
.analysis-vs small { display: block; font-size: 12px; color: var(--text-3); }

.prob-bar {
    display: flex;
    height: 38px;
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
}
.prob-bar > span { display: grid; place-items: center; min-width: 44px; }
.prob-bar .p1 { background: linear-gradient(90deg, #cfd9ff, #9fb7ff); color: #0a0f2e; }
.prob-bar .px { background: rgba(255, 255, 255, 0.12); color: var(--text-1); }
.prob-bar .p2 { background: linear-gradient(90deg, #b8325a, #8e1d45); color: #fff; }
.prob-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 6px; }

.analysis-side {
    padding: 22px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (min-width: 800px) { .analysis-side { border-top: 0; border-left: 1px solid var(--line); } }
.kv-list { display: grid; gap: 10px; }
.kv {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
.kv .v { font-family: var(--font-mono); font-weight: 700; text-align: center; }
.kv .k { text-align: center; color: var(--text-2); font-size: 13px; }
.kv .v.hi { color: var(--gold); }
.dede-note {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(246, 213, 109, 0.07);
    border: 1px solid rgba(246, 213, 109, 0.25);
    font-size: 14px;
    color: var(--text-2);
}
.dede-note img { width: 36px; height: auto; flex: none; align-self: flex-start; }
.dede-note strong { display: block; color: var(--gold); font-size: 13px; letter-spacing: 0.04em; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   Sekmeler
   -------------------------------------------------------------------------- */
.tabs [role="tablist"] {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs [role="tab"] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    white-space: nowrap;
    transition: background-color var(--dur-base), color var(--dur-base);
}
.tabs [role="tab"]:hover { color: var(--text-1); }
.tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(246, 213, 109, 0.3); }
.tabs [role="tabpanel"] { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Muhtemel 11 — saha
   -------------------------------------------------------------------------- */
.lineups-grid {
    display: grid;
    gap: 20px;
}
@media (min-width: 900px) { .lineups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pitch {
    position: relative;
    aspect-ratio: 68 / 62;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        repeating-linear-gradient(180deg, #0f5c3c 0 10%, #126843 10% 20%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
}
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.player-dot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 96px;
    text-align: center;
}
.player-dot .shirt {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--kit, #fff);
    color: var(--kit-text, #0a0f2e);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.player-dot .pname {
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(6, 9, 32, 0.78);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-dot.is-doubt .shirt { box-shadow: 0 0 0 2px var(--warn), 0 4px 10px rgba(0, 0, 0, 0.35); }
.player-dot.is-doubt .pname::after { content: " ?"; color: var(--warn); }
@media (max-width: 420px) {
    .player-dot { width: 76px; }
    .player-dot .shirt { width: 28px; height: 28px; font-size: 12px; }
}

.lineup-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.lineup-meta .team { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.lineup-meta .formation { font-family: var(--font-mono); font-weight: 700; color: var(--gold); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--text-3); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i.sw { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* Basketbol sahası */
.court {
    position: relative;
    aspect-ratio: 50 / 42;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg, #b9793f 0 7%, #c2834a 7% 14%);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.court .pitch-lines { opacity: 0.9; }
.court .player-dot .shirt { --kit: #0a0f2e; --kit-text: var(--gold); }

.bench-list { display: grid; gap: 8px; margin-top: 14px; }
.bench-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-2); }
.bench-list .mono { color: var(--text-1); font-weight: 700; }

/* --------------------------------------------------------------------------
   Yan panel bileşenleri
   -------------------------------------------------------------------------- */
.event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(246, 213, 109, 0.35);
    box-shadow: var(--glow-gold);
    min-height: 240px;
    justify-content: flex-end;
}
.event-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 10%, rgba(6, 9, 32, 0.9));
    z-index: -1;
}
.event-card h3 { font-size: 20px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.event-card p { font-size: 14px; color: var(--text-2); }
.event-card .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--gold);
}

/* Anket */
.poll { padding: 18px; }
.poll-q { font-size: 17px; font-weight: 800; line-height: 1.3; margin-bottom: 4px; }
.poll-sub { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.poll-options { display: grid; gap: 8px; }
.poll-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
    font-weight: 600;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--dur-base), background-color var(--dur-base);
}
.poll-option:hover:not([disabled]) { border-color: rgba(246, 213, 109, 0.5); background: rgba(246, 213, 109, 0.05); }
.poll-option .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.poll-option .pct { font-family: var(--font-mono); font-weight: 700; opacity: 0; transition: opacity var(--dur-base); }
.poll-option .fill {
    position: absolute;
    inset: 0;
    width: var(--p, 0%);
    background: rgba(138, 177, 255, 0.14);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: -1;
}
.poll.is-voted .poll-option { cursor: default; }
.poll.is-voted .poll-option .pct { opacity: 1; }
.poll.is-voted .poll-option .fill { transform: scaleX(1); }
.poll.is-voted .poll-option.is-choice { border-color: rgba(246, 213, 109, 0.6); }
.poll.is-voted .poll-option.is-choice .fill { background: rgba(246, 213, 109, 0.2); }
.poll.is-voted .poll-option.is-choice .who::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--gold);
}
.poll-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* Skoru Bil */
.predict {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 6px 0 14px;
}
.predict-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 14px; font-weight: 700; }
.stepper {
    display: flex;
    align-items: center;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.stepper button {
    width: 36px; height: 44px;
    color: var(--text-2);
    font-size: 13px;
    transition: background-color var(--dur-fast), color var(--dur-fast);
}
.stepper button:hover { background: rgba(255, 255, 255, 0.06); color: var(--gold); }
.stepper output {
    min-width: 32px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
}
.predict-dash { font-family: var(--font-mono); font-size: 22px; color: var(--text-3); }
.hot-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hot-picks span {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 12px;
    color: var(--text-2);
}
.hot-picks b { font-family: var(--font-mono); color: var(--text-1); }

/* Sakat & cezalı */
.absent-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
}
.absent-list li:last-child { border-bottom: 0; }
.absent-list .who strong { display: block; font-size: 14px; font-weight: 700; }
.absent-list .who small { font-size: 12px; color: var(--text-3); }
.status-ico {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    font-size: 13px;
}
.status-ico.inj { background: rgba(239, 68, 68, 0.14); color: #ff7b7b; }
.status-ico.susp-red { background: rgba(239, 68, 68, 0.14); }
.status-ico.susp-red::before { content: ""; width: 10px; height: 14px; border-radius: 2px; background: var(--live); }
.status-ico.susp-yel { background: rgba(251, 191, 36, 0.14); }
.status-ico.susp-yel::before { content: ""; width: 10px; height: 14px; border-radius: 2px; background: var(--warn); }
.status-ico.doubt { background: rgba(251, 191, 36, 0.14); color: var(--warn); }

/* Mini puan durumu */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-3);
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.table th:nth-child(2) { text-align: left; }
.table td {
    padding: 9px 8px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.table tr:last-child td { border-bottom: 0; }
.table td.team { text-align: left; }
.table td.team div { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.table td.team .crest { width: 20px; height: 20px; font-size: 6px; }
.table td.pos { font-family: var(--font-mono); color: var(--text-3); width: 34px; }
.table td.pts { font-family: var(--font-mono); font-weight: 700; color: var(--text-1); }
.table tr.zone-cl td.pos { box-shadow: inset 3px 0 0 var(--electric); color: var(--electric); }
.table tr.zone-el td.pos { box-shadow: inset 3px 0 0 var(--warn); color: var(--warn); }
.table tr.zone-ecl td.pos { box-shadow: inset 3px 0 0 var(--win); color: var(--win); }
.table tr.zone-playoff td.pos, .table tr.zone-promo td.pos { box-shadow: inset 3px 0 0 var(--gold); color: var(--gold); }
.table tr.zone-rel td.pos { box-shadow: inset 3px 0 0 var(--loss); color: var(--loss); }

/* --------------------------------------------------------------------------
   Dede Düellosu
   -------------------------------------------------------------------------- */
.duel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(246, 213, 109, 0.3);
    background:
        radial-gradient(600px 300px at 50% 0%, rgba(246, 213, 109, 0.14), transparent 70%),
        linear-gradient(90deg, rgba(138, 177, 255, 0.10), transparent 35%, transparent 65%, rgba(220, 38, 80, 0.12)),
        linear-gradient(180deg, #121b4a, #0a0f2e);
    box-shadow: var(--shadow-md);
}
.duel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 24px 18px 18px;
}
@media (min-width: 768px) { .duel-head { padding: 34px 40px 24px; gap: 24px; } }
.duelist { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.duel-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--c1), var(--c2));
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 0 0 5px var(--ring, var(--line-2)), var(--shadow-md);
}
@media (min-width: 768px) { .duel-avatar { width: 116px; height: 116px; font-size: 38px; } }
.duel-avatar .crest { position: absolute; right: -2px; bottom: -2px; }
.duelist h3 { font-size: clamp(17px, 2.2vw, 24px); font-weight: 800; line-height: 1.15; }
.duelist small { font-size: 13px; color: var(--text-3); }
.duel-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.duel-vs b {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 56px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 18px rgba(246, 213, 109, 0.35));
}
.duel-vs i { color: var(--gold); font-size: 18px; }
.duel-vs small { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; }

.duel-stats { padding: 0 18px 8px; display: grid; gap: 4px; }
@media (min-width: 768px) { .duel-stats { padding: 0 40px 10px; } }
.duel-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(90px, 150px) minmax(0, 1fr) 56px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
}
.duel-row:last-child { border-bottom: 0; }
.duel-row .val { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--text-2); }
.duel-row .val.l { text-align: left; }
.duel-row .val.r { text-align: right; }
.duel-row .val.best { color: var(--gold); }
.duel-row .lbl { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-2); }
.duel-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); overflow: hidden; display: flex; }
.duel-bar.l { justify-content: flex-end; }
.duel-bar span {
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 8px;
    transform: scaleX(0);
    transition: transform 900ms var(--ease-out);
}
.duel-bar.l span { background: linear-gradient(90deg, rgba(138, 177, 255, 0.4), var(--electric)); transform-origin: right; }
.duel-bar.r span { background: linear-gradient(90deg, #e2557a, rgba(226, 85, 122, 0.4)); transform-origin: left; }
.duel.is-in .duel-bar span { transform: scaleX(1); }
@media (max-width: 599px) {
    .duel-row { grid-template-columns: 48px minmax(0, 1fr) 48px; row-gap: 6px; }
    .duel-row .lbl { grid-column: 2; grid-row: 1; }
    .duel-row .val.l { grid-column: 1; grid-row: 1; }
    .duel-row .val.r { grid-column: 3; grid-row: 1; }
    .duel-bar.l { grid-column: 1 / 2; display: none; }
    .duel-bar { display: none; }
}
.duel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.18);
}
@media (min-width: 768px) { .duel-foot { padding: 18px 40px; } }
.duel-foot .q { font-weight: 700; }
.duel-vote { display: flex; gap: 8px; flex-wrap: wrap; }
.duel-vote .btn .pct { font-family: var(--font-mono); display: none; }
.duel.is-voted .duel-vote .btn .pct { display: inline; }
.duel-score {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gold);
}

/* --------------------------------------------------------------------------
   Eğlence Arenası
   -------------------------------------------------------------------------- */
.fun-grid {
    display: grid;
    gap: 18px;
}
@media (min-width: 700px) { .fun-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fun-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.game-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}
.game-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-card header h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.game-card header h3 i { color: var(--gold); }
.game-card .hint { font-size: 14px; color: var(--text-2); }

.icon-clue {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed var(--line-2);
    perspective: 600px;
}
.icon-clue > span {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(246, 213, 109, 0.18), rgba(246, 213, 109, 0.04));
    border: 1px solid rgba(246, 213, 109, 0.3);
    color: var(--gold);
    font-size: 20px;
}
.icon-clue .num { font-family: var(--font-mono); font-weight: 700; font-size: 19px; }
.icon-clue .flag-ar {
    position: relative;
    background: linear-gradient(180deg, #74acdf 33.3%, #fff 33.3% 66.6%, #74acdf 66.6%);
    border-color: rgba(255, 255, 255, 0.4);
}
.icon-clue .flag-ar::after {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #f6b40e;
    box-shadow: 0 0 0 2px rgba(246, 180, 14, 0.35);
}
@media (max-width: 380px) { .icon-clue > span { width: 42px; height: 42px; font-size: 17px; } }

.guess-form { display: flex; gap: 8px; }
.input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: rgba(0, 0, 0, 0.25);
    font-size: 16px;
    color: var(--text-1);
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246, 213, 109, 0.2); }
.field-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.feedback { min-height: 22px; font-size: 14px; font-weight: 600; }
.feedback.ok { color: var(--win); }
.feedback.no { color: var(--loss); }

.career {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.career li { display: inline-flex; align-items: center; gap: 6px; }
.career li + li::before { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--text-3); }
.career span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 700;
}
.career small { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--text-3); }

.goal-clip {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.goal-clip .player-play { position: static; margin: 0; width: 56px; height: 56px; font-size: 20px; }
.goal-clip .clip-meta {
    position: absolute;
    left: 10px; bottom: 10px; right: 10px;
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 700;
}
.goal-clip .clip-meta span { padding: 3px 8px; border-radius: 6px; background: rgba(6, 9, 32, 0.8); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.02);
    font-size: 14px;
    font-weight: 700;
    transition: border-color var(--dur-base), background-color var(--dur-base), color var(--dur-base);
}
.choice:hover:not([disabled]) { border-color: rgba(246, 213, 109, 0.5); }
.choice.is-right { border-color: var(--win); background: rgba(92, 212, 167, 0.14); color: var(--win); }
.choice.is-wrong { border-color: var(--loss); background: rgba(240, 138, 138, 0.12); color: var(--loss); }
.choice[disabled] { cursor: default; }

.leader-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-3); padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }
.avatars { display: flex; }
.avatars span {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid var(--bg-1);
    font-size: 10px; font-weight: 800;
    color: var(--on-gold);
}
.avatars span:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   VAR Masası
   -------------------------------------------------------------------------- */
.var-grid { display: grid; gap: 18px; }
@media (min-width: 800px) { .var-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.var-card { display: flex; flex-direction: column; overflow: hidden; }
.var-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: flex-end;
    padding: 12px;
}
.var-screen .var-logo {
    position: absolute;
    top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #0a0f2e;
    border: 1px solid rgba(138, 177, 255, 0.4);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--electric);
}
.var-screen .minute {
    position: absolute; top: 12px; right: 12px;
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
    padding: 4px 8px; border-radius: 6px; background: rgba(6, 9, 32, 0.8);
}
.var-screen .crosshair {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, transparent calc(62% - 1px), rgba(138, 177, 255, 0.55) calc(62% - 1px), rgba(138, 177, 255, 0.55) calc(62% + 1px), transparent calc(62% + 1px)),
        linear-gradient(90deg, transparent calc(58% - 1px), rgba(239, 68, 68, 0.6) calc(58% - 1px), rgba(239, 68, 68, 0.6) calc(58% + 1px), transparent calc(58% + 1px));
    z-index: -1;
}
.var-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.var-body h3 { font-size: 16px; font-weight: 800; line-height: 1.3; }
.var-body p { font-size: 14px; color: var(--text-2); }
.verdict {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}
.verdict small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.8; }
.verdict.ok { background: rgba(92, 212, 167, 0.1); color: var(--win); border: 1px solid rgba(92, 212, 167, 0.28); }
.verdict.mid { background: rgba(251, 191, 36, 0.1); color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.28); }
.verdict.bad { background: rgba(240, 138, 138, 0.1); color: var(--loss); border: 1px solid rgba(240, 138, 138, 0.28); }
.verdict i { font-size: 18px; }
.split-vote { margin-top: auto; }
.split-vote .bar { display: flex; height: 8px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.split-vote .bar .y { background: var(--win); }
.split-vote .bar .n { background: var(--loss); }
.split-vote .labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.split-vote .labels b { font-family: var(--font-mono); color: var(--text-2); }

/* --------------------------------------------------------------------------
   Haftanın olayı + özet
   -------------------------------------------------------------------------- */
.weekly-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .weekly-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.week-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
    min-height: 340px;
    padding: 26px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
}
.week-feature::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, transparent 15%, rgba(6, 9, 32, 0.92));
    z-index: -1;
}
.week-feature h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.week-feature p { color: var(--text-2); max-width: 56ch; }
.recap { padding: 22px; }
.recap-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
@media (min-width: 560px) { .recap-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.recap-stat {
    padding: 14px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    text-align: center;
}
.recap-stat b { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.recap-stat span { font-size: 12px; color: var(--text-3); font-weight: 600; }
.recap-list li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.recap-list i {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(138, 177, 255, 0.1);
    color: var(--electric);
}
.recap-list strong { display: block; font-size: 14px; }
.recap-list span { font-size: 14px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Forum & etkinlik
   -------------------------------------------------------------------------- */
.community-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .community-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.events-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.etk-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--panel);
    transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.etk-card:hover { border-color: rgba(246, 213, 109, 0.4); transform: translateY(-2px); }
.etk-card.is-featured { border-color: rgba(246, 213, 109, 0.45); box-shadow: var(--glow-gold); }
.etk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.etk-ico {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(246, 213, 109, 0.25), rgba(246, 213, 109, 0.05));
    border: 1px solid rgba(246, 213, 109, 0.3);
    color: var(--gold);
    font-size: 19px;
}
.etk-card h3 { font-size: 17px; font-weight: 800; line-height: 1.25; }
.etk-card p { font-size: 14px; color: var(--text-2); }
.etk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--text-3); }
.etk-meta span { display: inline-flex; align-items: center; gap: 6px; }
.etk-meta .mono { color: var(--text-1); font-weight: 700; }
.progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.progress span { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 6px; }
.etk-card .btn { margin-top: auto; }

.thread-list li { border-bottom: 1px solid var(--line); }
.thread-list li:last-child { border-bottom: 0; }
.thread {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    transition: background-color var(--dur-base);
}
.thread:hover { background: rgba(255, 255, 255, 0.03); }
.user-av {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    color: var(--on-gold);
    background: var(--av, var(--gold));
}
.thread h4 { font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thread small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.thread .count { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--text-3); }
.thread .count b { font-family: var(--font-mono); font-size: 15px; color: var(--text-1); }

/* --------------------------------------------------------------------------
   Telegram bandı
   -------------------------------------------------------------------------- */
.tg-band {
    position: relative;
    display: grid;
    gap: 24px;
    align-items: center;
    padding: 28px 22px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(34, 158, 217, 0.4);
    background:
        radial-gradient(500px 260px at 90% 10%, rgba(34, 158, 217, 0.35), transparent 70%),
        radial-gradient(400px 260px at 0% 100%, rgba(246, 213, 109, 0.12), transparent 70%),
        linear-gradient(135deg, #0f2150, #0a0f2e);
}
@media (min-width: 900px) { .tg-band { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 40px 48px; } }
.tg-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.15; }
.tg-band h2 span { color: var(--gold); }
.tg-band p { margin-top: 10px; color: var(--text-2); max-width: 52ch; }
.tg-feats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 22px; font-size: 14px; color: var(--text-2); }
.tg-feats span { display: inline-flex; align-items: center; gap: 8px; }
.tg-feats i { color: #5bc2f0; }
.tg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tg-count { font-size: 14px; color: var(--text-3); }
.tg-count b { font-family: var(--font-mono); color: var(--text-1); }

.tg-phone {
    justify-self: center;
    width: min(340px, 100%);
    padding: 14px;
    border-radius: 26px;
    background: #0b1330;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}
.tg-chan { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tg-chan img { width: 36px; height: 36px; object-fit: contain; border-radius: 50%; background: var(--bg-1); padding: 3px; }
.tg-chan strong { font-size: 14px; display: block; }
.tg-chan small { font-size: 12px; color: var(--text-3); }
.tg-msg {
    padding: 10px 12px;
    border-radius: 14px 14px 14px 4px;
    background: #17224f;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 8px;
}
.tg-msg b { color: var(--gold); }
.tg-msg time { display: block; text-align: right; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.tg-poll-mini { display: grid; gap: 6px; margin-top: 8px; }
.tg-poll-mini div { position: relative; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); font-size: 13px; display: flex; justify-content: space-between; overflow: hidden; isolation: isolate; }
.tg-poll-mini div::before { content: ""; position: absolute; inset: 0; width: var(--w); background: rgba(34, 158, 217, 0.3); z-index: -1; }

/* --------------------------------------------------------------------------
   Alt bilgi
   -------------------------------------------------------------------------- */
.site-footer {
    margin-top: 40px;
    border-top: 1px solid var(--line);
    background: rgba(4, 6, 22, 0.7);
}
.footer-grid {
    display: grid;
    gap: 28px;
    padding-block: 40px 28px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.footer-grid p { margin-top: 12px; font-size: 14px; color: var(--text-3); max-width: 38ch; }
.footer-grid h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 12px; }
.footer-grid ul { display: grid; gap: 4px; }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--text-3); }
.footer-grid li a:hover { color: var(--gold); }
.socials { display: flex; gap: 8px; margin-top: 16px; }
.socials a {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    color: var(--text-2);
    transition: color var(--dur-base), border-color var(--dur-base);
}
.socials a:hover { color: var(--gold); border-color: rgba(246, 213, 109, 0.4); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding-block: 18px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Mobil alt menü
   -------------------------------------------------------------------------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(6, 9, 32, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
}
.bottom-nav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
}
.bottom-nav a i { font-size: 18px; }
.bottom-nav a[aria-current="page"] { color: var(--gold); }
.bottom-nav .live-pip {
    position: absolute;
    top: 8px; left: calc(50% + 8px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 0 2px var(--bg-0);
}
@media (min-width: 1024px) { .bottom-nav { display: none; } }

/* Bildirim */
.toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: 12px;
    background: #16205a;
    border: 1px solid rgba(246, 213, 109, 0.4);
    box-shadow: var(--shadow-md);
    font-weight: 600;
    font-size: 15px;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.toast i { color: var(--gold); }
.toast.is-show { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 1024px) { .toast { bottom: 28px; } }

/* --------------------------------------------------------------------------
   Sayfa başlığı (alt sayfalar)
   -------------------------------------------------------------------------- */
.page-hero { padding-block: 28px 8px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.1; }
.page-hero p { margin-top: 8px; color: var(--text-2); max-width: 64ch; }

/* Maç merkezi skorbord */
.scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    border-radius: var(--radius-xl);
}
@media (min-width: 768px) { .scoreboard { padding: 34px 40px; gap: 28px; } }
.sb-team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.sb-team h2 { font-size: clamp(16px, 2.4vw, 24px); font-weight: 800; line-height: 1.15; }
.sb-team .form-row { justify-content: center; }
.sb-center { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sb-score { font-family: var(--font-mono); font-size: clamp(36px, 6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.sb-score span { color: var(--text-3); margin: 0 6px; }
.sb-center small { font-size: 13px; color: var(--text-3); }
.sb-events { display: flex; justify-content: center; gap: 24px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.sb-events li { display: flex; align-items: center; gap: 6px; }
.sb-events i { color: var(--text-3); font-size: 12px; }

.subnav {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    margin-top: 16px;
    background: rgba(6, 9, 32, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    font-size: 14px; font-weight: 700;
    color: var(--text-2);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--text-1); }
.subnav a.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.h2h-list li {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.h2h-list li:last-child { border-bottom: 0; }
.h2h-list .d { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.h2h-list .h { text-align: right; font-weight: 600; }
.h2h-list .s { font-family: var(--font-mono); font-weight: 700; padding: 2px 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 479px) { .h2h-list li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .h2h-list .d { display: none; } }

.prose { color: var(--text-2); font-size: 16px; line-height: 1.7; max-width: 70ch; }
.prose p + p { margin-top: 14px; }
.prose strong { color: var(--text-1); }

.absent-cols { display: grid; gap: 20px; }
@media (min-width: 800px) { .absent-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Canlı TV sayfası */
.tv-layout { display: grid; gap: 20px; }
@media (min-width: 1100px) { .tv-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.tv-player { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.tv-player .player { aspect-ratio: 16 / 9; }
.tv-player .player-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; font-size: 30px; }
.tv-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #070b24;
    border-top: 1px solid var(--line);
}
.tv-controls .progress { flex: 1; height: 5px; }
.tv-controls .progress span { background: var(--live); }
.tv-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; }
.tv-info h1 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; line-height: 1.2; }
.tv-info p { font-size: 14px; color: var(--text-3); margin-top: 4px; }
.channel-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.channel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--panel);
    text-align: left;
    transition: border-color var(--dur-base);
}
.channel:hover { border-color: var(--line-2); }
.channel[aria-pressed="true"] { border-color: rgba(246, 213, 109, 0.55); box-shadow: var(--glow-gold); }
.channel .art { aspect-ratio: 16 / 9; border-radius: 8px; }
.channel .art .art-icon { font-size: 90px; }
.channel .art .badge { position: absolute; top: 8px; left: 8px; }
.channel strong { font-size: 14px; line-height: 1.3; }
.channel small { font-size: 12px; color: var(--text-3); }

.chat { display: flex; flex-direction: column; height: 560px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
.chat-msg { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.chat-msg b { color: var(--c, var(--electric)); margin-right: 6px; }
.chat-msg .mod { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: var(--gold); color: var(--on-gold); font-weight: 800; margin-right: 4px; vertical-align: 1px; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }

.schedule-day { margin-bottom: 8px; }
.schedule-day h3 { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 14px 18px 6px; }

/* Forum sayfası */
.forum-layout { display: grid; gap: 24px; }
@media (min-width: 1100px) { .forum-layout { grid-template-columns: 260px minmax(0, 1fr) 320px; align-items: start; } }
.cat-list a {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 15px; font-weight: 600;
    color: var(--text-2);
    transition: background-color var(--dur-base), color var(--dur-base);
}
.cat-list a:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-1); }
.cat-list a[aria-current="true"] { background: rgba(246, 213, 109, 0.1); color: var(--gold); }
.cat-list i { width: 20px; text-align: center; color: var(--text-3); }
.cat-list a[aria-current="true"] i { color: var(--gold); }
.cat-list .n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
@media (max-width: 1099px) {
    .forum-cats { order: -1; }
    .cat-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
    .cat-list a { white-space: nowrap; border: 1px solid var(--line); }
}

.composer { display: flex; gap: 12px; align-items: center; padding: 14px 18px; }
.composer .input { cursor: text; }

.leaderboard li {
    display: grid;
    grid-template-columns: 28px 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard .rank { font-family: var(--font-mono); font-weight: 700; color: var(--text-3); text-align: center; }
.leaderboard li:nth-child(1) .rank { color: var(--gold); }
.leaderboard li:nth-child(2) .rank { color: #d7dcea; }
.leaderboard li:nth-child(3) .rank { color: #d99a5b; }
.leaderboard .user-av { width: 36px; height: 36px; font-size: 12px; border-radius: 10px; }
.leaderboard .pts { font-family: var(--font-mono); font-weight: 700; }
.leaderboard .name small { display: block; font-size: 12px; color: var(--text-3); }

.countdown { display: flex; gap: 6px; }
.countdown div {
    min-width: 50px;
    padding: 8px 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--line);
    text-align: center;
}
.countdown b { display: block; font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--gold); line-height: 1.1; }
.countdown small { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); }

/* Yardımcılar */
.mt-8 { margin-top: 8px; }
.tg-msg i { color: var(--gold); margin-right: 4px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.muted { color: var(--text-3); }
.gold { color: var(--gold); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: initial; } }

/* Scroll ile beliren öğeler */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Mobil düzeltmeler: grid kolonları içerikten geniş olamaz
   -------------------------------------------------------------------------- */
:where(.hero-grid, .layout, .stack, .stack-lg, .fixtures-grid, .news-grid, .lineups-grid,
       .fun-grid, .var-grid, .weekly-grid, .community-grid, .events-grid, .tv-layout,
       .forum-layout, .absent-cols, .analysis) {
    grid-template-columns: minmax(0, 1fr);
}

/* Mobilde haber kartı yatay liste */
@media (max-width: 599px) {
    .news-card { flex-direction: row; }
    .news-card .art { width: 112px; flex: none; aspect-ratio: auto; min-height: 112px; }
    .news-card .art .art-icon { font-size: 90px; }
    .news-card .art .badge { display: none; }
    .news-card .body { padding: 12px 14px; gap: 6px; }
    .news-card h3 { font-size: 15px; }
    .news-card p { display: none; }
    .news-card .story-meta { margin-top: 2px; padding-top: 0; }
}

/* ==========================================================================
   ANİMASYONLAR
   ========================================================================== */

/* Skor şeridi: kayan bant (durdurulabilir) */
.scorebar-pause {
    flex: none;
    width: 36px; height: 36px;
    align-self: center;
    margin-left: 4px;
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
}
.scorebar-track.is-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.scorebar-track.is-marquee .scorebar-list { animation: marquee var(--marquee-dur, 55s) linear infinite; }
.scorebar-track.is-marquee:hover .scorebar-list,
.scorebar-track.is-marquee:focus-within .scorebar-list,
.scorebar.is-paused .scorebar-list { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Üst menü: kaydırınca koyulaşır */
.site-header { transition: background-color var(--dur-base), box-shadow var(--dur-base); }
.site-header.is-scrolled {
    background: rgba(5, 7, 26, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Sayfa açılışında giriş */
.enter { animation: rise 700ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* Manşette ışık süzmesi (Olimpos parıltısı) */
.glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.glare::before {
    content: "";
    position: absolute;
    top: -20%; bottom: -20%;
    left: -40%;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 240, 179, 0.10), transparent);
    transform: translateX(0) skewX(-18deg);
    animation: glare 7s ease-in-out 1.2s infinite;
}
@keyframes glare {
    0% { transform: translateX(0) skewX(-18deg); }
    35%, 100% { transform: translateX(560%) skewX(-18deg); }
}
.lead-story > :not(.glare):not(.art-icon):not(.lead-scoreline) { position: relative; z-index: 1; }
.lead-story > .lead-scoreline { z-index: 1; }

/* Manşet arka plan ikonu yavaşça süzülür */
.lead-story .art-icon { animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift {
    from { transform: rotate(-12deg) translateY(0); }
    to { transform: rotate(-4deg) translateY(-14px); }
}

/* Canlı TV: oynat butonu dalgası */
.player-play::before,
.player-play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(246, 213, 109, 0.6);
    animation: ring 2.4s var(--ease-out) infinite;
    pointer-events: none;
}
.player-play::after { animation-delay: 1.2s; }
@keyframes ring {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.9); opacity: 0; }
}
.goal-clip .player-play { position: relative; }

/* Canlı TV: sahada top takibi */
.ball-track {
    position: absolute;
    inset: 12% 6%;
    pointer-events: none;
}
.ball {
    position: absolute;
    width: 10px; height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 14px rgba(255, 255, 255, 0.7);
    animation: ball 9s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes ball {
    0%   { left: 50%; top: 50%; }
    14%  { left: 36%; top: 30%; }
    28%  { left: 58%; top: 22%; }
    42%  { left: 72%; top: 62%; }
    56%  { left: 86%; top: 46%; }
    64%  { left: 97%; top: 50%; }
    78%  { left: 70%; top: 78%; }
    90%  { left: 44%; top: 66%; }
    100% { left: 50%; top: 50%; }
}
.player > .player-top, .player > .player-bottom, .player > .player-play { z-index: 1; }

/* Scroll ile beliren öğelerde sıralı gecikme */
.reveal { transition-delay: var(--d, 0ms); }

/* Kart hover: arka plan ikonu hareketi */
.art .art-icon { transition: transform 600ms var(--ease-out), color 600ms; }
.news-card:hover .art-icon,
.mini-story:hover .art-icon,
.var-card:hover .art-icon { transform: rotate(-4deg) scale(1.1); color: rgba(255, 255, 255, 0.12); }

/* Altın buton parıltısı */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: transform 650ms var(--ease-out);
    z-index: -1;
}
.btn-gold:hover::after { transform: translateX(420%) skewX(-20deg); }

/* Düello: VS şimşeği + oyuncuların karşı karşıya gelişi */
.duel-vs i { animation: bolt 3.2s steps(1, end) infinite; }
@keyframes bolt {
    0%, 86%, 100% { opacity: 1; text-shadow: 0 0 12px rgba(246, 213, 109, 0.6); }
    88% { opacity: 0.2; }
    90% { opacity: 1; text-shadow: 0 0 24px rgba(255, 240, 179, 1); }
    92% { opacity: 0.3; }
}
.duel-avatar { transition: transform 700ms var(--ease-out); }
.duel:not(.is-in) .duelist:first-child .duel-avatar { transform: translateX(-24px); }
.duel:not(.is-in) .duelist:last-child .duel-avatar { transform: translateX(24px); }
.duel-vs b { transition: transform 700ms var(--ease-out) 150ms, opacity 700ms 150ms; }
.duel:not(.is-in) .duel-vs b { transform: scale(0.6); opacity: 0; }

/* İkon bulmacası: kutular sırayla döner */
.icon-clue > span { transition: transform 600ms var(--ease-out), opacity 400ms; transition-delay: calc(var(--i, 0) * 110ms); }
html:not(.no-js) .reveal:not(.is-in) .icon-clue > span { transform: rotateY(90deg); opacity: 0; }
.icon-clue > span:hover { transform: translateY(-3px); transition-delay: 0ms; }

/* Telegram önizleme: mesajlar sırayla düşer */
.tg-phone .tg-msg { transition: transform 500ms var(--ease-out), opacity 500ms; transition-delay: calc(var(--i, 0) * 700ms + 200ms); }
.tg-phone:not(.is-in) .tg-msg { opacity: 0; transform: translateY(12px) scale(0.98); }
.tg-typing {
    display: inline-flex;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px 14px 14px 4px;
    background: #17224f;
}
.tg-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-3);
    animation: typing 1.2s ease-in-out infinite;
}
.tg-typing span:nth-child(2) { animation-delay: 0.15s; }
.tg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Bölüm ikonu: görünür olunca ışıltı */
.sec-icon { position: relative; overflow: hidden; }
.sec-icon::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 240, 179, 0.45) 50%, transparent 60%);
    transform: translateX(-60%);
    pointer-events: none;
}
.sec-head.is-in .sec-icon::after { animation: shine 1.1s var(--ease-out) 0.2s; }
@keyframes shine { to { transform: translateX(60%); } }

/* Canlı dakika değişimi */
.tick { display: inline-block; animation: tick 500ms var(--ease-out); }
@keyframes tick { from { transform: translateY(-6px); opacity: 0; } }

/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .scorebar-track.is-marquee .scorebar-list { animation: none; }
    .ball-track, .glare, .scorebar-pause { display: none; }
    .reveal:not(.is-in) .icon-clue > span,
    .tg-phone:not(.is-in) .tg-msg { opacity: 1; transform: none; }
    .duel:not(.is-in) .duel-avatar,
    .duel:not(.is-in) .duel-vs b { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Ek bileşenler (alt sayfalar)
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .analysis-teams { gap: 6px; }
    .analysis-team { font-size: 14px; }
    .analysis-team .crest-lg { width: 52px; height: 52px; font-size: 15px; }
    .analysis-team .form-row { gap: 3px; }
    .analysis-team .form-row b { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
    .analysis-vs .kick { font-size: 22px; }
}

.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-stat {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px; color: var(--text-3);
}
.hero-stat b { font-family: var(--font-mono); font-size: 18px; color: var(--text-1); }
.hero-stat i { color: var(--gold); }

.sb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.sb-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--text-3); margin-top: 6px; }
.sb-meta span { display: inline-flex; align-items: center; gap: 6px; }
.scoreboard-wrap { position: relative; border-radius: var(--radius-xl); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.scoreboard-wrap::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(180deg, rgba(6, 9, 32, 0.2), rgba(6, 9, 32, 0.75));
    z-index: -1;
}
.scoreboard-foot { padding: 0 16px 22px; }

.key-facts { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 640px) { .key-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.key-fact {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    font-size: 14px; color: var(--text-2);
}
.key-fact i { color: var(--gold); margin-top: 3px; }
.key-fact strong { display: block; color: var(--text-1); font-size: 14px; }

.keys-list { display: grid; gap: 12px; counter-reset: k; }
.keys-list li {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;
    font-size: 15px; color: var(--text-2);
}
.keys-list li::before {
    counter-increment: k; content: counter(k);
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(246, 213, 109, 0.12); border: 1px solid rgba(246, 213, 109, 0.3);
    color: var(--gold); font-family: var(--font-display); font-weight: 800;
}
.keys-list strong { color: var(--text-1); }

.ref-card { display: flex; align-items: center; gap: 14px; padding: 18px; }
.ref-card .user-av { width: 52px; height: 52px; font-size: 16px; border-radius: 14px; }
.ref-card strong { display: block; font-size: 16px; }
.ref-card small { font-size: 13px; color: var(--text-3); }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.mini-stats div { padding: 12px 8px; text-align: center; border-right: 1px solid var(--line); }
.mini-stats div:last-child { border-right: 0; }
.mini-stats b { display: block; font-family: var(--font-mono); font-size: 18px; color: var(--text-1); }
.mini-stats span { font-size: 12px; color: var(--text-3); }

.related li a {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center;
    padding: 12px 18px; border-bottom: 1px solid var(--line);
    font-size: 14px; font-weight: 700; line-height: 1.35;
    transition: background-color var(--dur-base);
}
.related li:last-child a { border-bottom: 0; }
.related li a:hover { background: rgba(255, 255, 255, 0.03); }
.related .art { aspect-ratio: 1; border-radius: 10px; }
.related .art .art-icon { font-size: 54px; right: -6px; bottom: -8px; }

/* Canlı TV */
.tv-player .player-bug { font-size: 14px; }
.tv-player .ctrl { width: 40px; height: 40px; border-radius: 10px; }
.tv-player .ctrl:hover { background: rgba(255, 255, 255, 0.08); }
.live-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #ff6b6b; letter-spacing: 0.08em; }
.live-label .live-dot { color: var(--live); animation-name: pulse-red; }
.tv-info-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chat-head-meta { font-size: 12px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.chat-msg { animation: rise 400ms var(--ease-out) both; }

/* Forum */
.featured-event {
    position: relative;
    display: grid;
    gap: 20px;
    align-items: center;
    padding: 24px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(246, 213, 109, 0.4);
    box-shadow: var(--glow-gold);
}
@media (min-width: 900px) { .featured-event { grid-template-columns: minmax(0, 1.4fr) auto; padding: 32px 36px; } }
.featured-event::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, rgba(6, 9, 32, 0.9), rgba(6, 9, 32, 0.35));
    z-index: -1;
}
.featured-event h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.15; margin-top: 12px; }
.featured-event p { color: var(--text-2); margin-top: 8px; max-width: 56ch; }
.featured-side { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 900px) { .featured-side { justify-items: end; } }
.featured-side small { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-3); }

.thread-tags { display: inline-flex; gap: 6px; margin-right: 6px; vertical-align: 2px; }
.thread .badge { font-size: 10px; padding: 1px 7px; }
.forum-tabs { padding: 10px 14px 0; }
.forum-tabs [role="tablist"] { border: 0; background: transparent; padding: 0; }
.forum-tabs [role="tab"] { flex: 0 0 auto; }

.badge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-3); }
.badge-item span {
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(246, 213, 109, 0.25), rgba(246, 213, 109, 0.05));
    border: 1px solid rgba(246, 213, 109, 0.35);
    color: var(--gold);
    font-size: 19px;
    transition: transform var(--dur-base) var(--ease-out);
}
.badge-item:hover span { transform: translateY(-3px) rotate(-4deg); }
.badge-item.is-locked span { filter: grayscale(1); opacity: 0.4; }

@media (max-width: 479px) {
    .scoreboard { gap: 8px; padding: 20px 12px 16px; }
    .sb-team .crest-lg { width: 48px; height: 48px; font-size: 14px; }
    .sb-team h2 { font-size: 15px; }
    .sb-team .form-row { gap: 2px; }
    .sb-team .form-row b { width: 14px; height: 14px; font-size: 8px; border-radius: 4px; }
    .sb-center .countdown { gap: 4px; }
    .sb-center .countdown div { min-width: 38px; padding: 6px 4px; }
    .sb-center .countdown b { font-size: 16px; }
    .sb-center small { max-width: 14ch; }
}
.channel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 768px) { .channel-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* Skor şeridi etiketi: canlı göstergesi */
.scorebar-label { color: #ff6b6b; }
.scorebar-label .live-dot { color: var(--live); animation-name: pulse-red; }
.scorebar-label .mono { color: var(--text-1); }

/* --------------------------------------------------------------------------
   Hata sayfası
   -------------------------------------------------------------------------- */
.error-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-block: 48px;
    text-align: center;
}
.error-page .brand { margin-bottom: 18px; }
.error-mark { width: 72px; height: auto; filter: drop-shadow(0 0 1px rgba(170, 190, 255, 0.75)); }
.error-code {
    font-size: clamp(64px, 14vw, 120px);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.error-page h1 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; }
.error-text { color: var(--text-2); max-width: 46ch; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.scorebar-label.is-idle { color: var(--text-3); }

/* --------------------------------------------------------------------------
   Haber sayfaları
   -------------------------------------------------------------------------- */
.art > .art-cover,
.art > img.art-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.news-card .art .art-cover + .badge { z-index: 1; }
.lead-story > .art-cover { border-radius: inherit; }
.mb-16 { margin-bottom: 16px; }

@media (min-width: 1200px) { .news-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.empty-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 20px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--text-3);
}
.empty-block > i { font-size: 34px; color: var(--line-2); }
.empty-block h2 { font-size: 19px; color: var(--text-1); }

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.pager a, .pager span {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 44px; height: 44px; padding: 0 12px;
    border-radius: 12px;
    font-family: var(--font-mono); font-weight: 700; font-size: 14px;
    color: var(--text-2);
}
.pager a { border: 1px solid var(--line); transition: border-color var(--dur-base), color var(--dur-base); }
.pager a:hover { border-color: rgba(246, 213, 109, 0.5); color: var(--gold); }
.pager a[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.pager .pager-step { font-family: var(--font-body); }
@media (max-width: 479px) { .pager .pager-step span { display: none; } }

.search-form { display: flex; gap: 8px; max-width: 620px; }

.article { padding-block: 24px 8px; }
.article-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 1100px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
    .article-layout > aside { position: sticky; top: calc(var(--header-h) + 16px); }
}
.article-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 820px; }
.article-head h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.article-summary { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--text-2); max-width: 64ch; }
.article-cover { margin: 22px 0 0; max-width: 820px; }
.article-cover img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.article-cover figcaption { margin-top: 8px; font-size: 13px; color: var(--text-3); }
.article-body { margin-top: 24px; font-size: 18px; line-height: 1.75; max-width: 72ch; }
.article-body h2, .article-body h3, .article-body h4 { color: var(--text-1); font-weight: 800; line-height: 1.25; margin: 1.8em 0 0.6em; }
.article-body h2 { font-size: 26px; }
.article-body h3 { font-size: 21px; }
.article-body h4 { font-size: 18px; }
.article-body p { margin: 0 0 1.1em; }
.article-body a { color: var(--electric); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-body a:hover { color: var(--gold); }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.4em; }
.article-body li::marker { color: var(--gold); }
.article-body blockquote {
    margin: 1.6em 0;
    padding: 16px 20px;
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(246, 213, 109, 0.06);
    color: var(--text-1);
    font-size: 19px;
}
.article-body blockquote p { margin: 0; }
.article-body blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--text-3); }
.article-body hr { border: 0; height: 1px; margin: 2em 0; background: var(--line-2); }
.article-body figure { margin: 1.6em 0; }
.article-body figure img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--line); }
.article-body figcaption { margin-top: 8px; font-size: 14px; color: var(--text-3); }
.article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: 820px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.share { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--text-3); }
.share span { margin-right: 6px; }
.share .icon-btn { border: 1px solid var(--line); }
.share .icon-btn:hover { color: var(--gold); border-color: rgba(246, 213, 109, 0.4); }

/* ============ Etkinlikler: katılım formu, durum kutusu, pano ============ */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.entry-box { display: grid; gap: 14px; }
.entry-form { display: grid; gap: 14px; }
.entry-form[hidden], .entry-status[hidden] { display: none; }
.entry-field { min-width: 0; border: 0; padding: 0; margin: 0; }
.entry-field .input { width: 100%; }
.entry-field .predict { margin: 0; }
.entry-note { font-size: 12px; line-height: 1.5; color: var(--text-3); }
.entry-note a { color: var(--electric); text-decoration: underline; text-underline-offset: 2px; }
.field-error, .form-error { font-size: 13px; color: var(--loss); margin-top: 6px; }
.form-error { margin-top: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(240, 138, 138, 0.08); border: 1px solid rgba(240, 138, 138, 0.3); }
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.stepper input {
    width: 46px; height: 44px;
    border: 0; background: transparent; color: var(--text-1);
    text-align: center; font-family: var(--font-mono); font-size: 22px; font-weight: 700;
    -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(246, 213, 109, 0.5); border-radius: 8px; }
.choice-list { display: grid; gap: 8px; }
.choice-list .choice {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 8px 12px;
    border-radius: var(--radius-sm); border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.02); cursor: pointer; font-size: 15px;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.choice-list .choice:hover { border-color: rgba(246, 213, 109, 0.5); }
.choice-list .choice:has(input:checked) { border-color: rgba(246, 213, 109, 0.6); background: rgba(246, 213, 109, 0.08); }
.choice-list input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.entry-closed { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.entry-closed i { color: var(--text-3); margin-top: 3px; }
.entry-status { padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); display: grid; gap: 10px; }
.entry-status.is-pending { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.07); }
.entry-status.is-approved { border-color: rgba(92, 212, 167, 0.45); background: rgba(92, 212, 167, 0.08); }
.entry-status.is-rejected { border-color: rgba(240, 138, 138, 0.4); background: rgba(240, 138, 138, 0.07); }
.entry-status-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.is-pending .entry-status-title i { color: var(--warn); }
.is-approved .entry-status-title i { color: var(--win); }
.is-rejected .entry-status-title i { color: var(--loss); }
.entry-status-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 14px; }
.entry-status-list dt { color: var(--text-3); }
.entry-status-list dd { font-weight: 700; overflow-wrap: anywhere; }
.poll-q a:hover, .etk-card h3 a:hover, .featured-event h2 a:hover { color: var(--gold); }
.section-flush-bottom { padding-bottom: 0; }
.events-grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sec-link-plain { min-height: 0; }
.panel-head-note { font-size: 13px; }
.board-tabs [role="tablist"] { margin: 12px 14px 0; }
.board-tabs [role="tabpanel"] { margin-top: 6px; }
.ann-list li { padding: 12px 18px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.ann-list li:last-child { border-bottom: 0; }
.ann-list strong { font-size: 15px; line-height: 1.35; }
.ann-list a:hover strong { color: var(--gold); }
.ann-list p { font-size: 14px; color: var(--text-2); }
.ann-list small { font-size: 12px; color: var(--text-3); }
.ann-list .badge { justify-self: start; }
.winner-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.winner-list li:last-child { border-bottom: 0; }
.winner-list .rank { font-family: var(--font-mono); font-weight: 700; color: var(--gold); }
.winner-list .name { font-weight: 700; overflow-wrap: anywhere; }
.winner-list small { display: block; font-size: 12px; font-weight: 400; color: var(--text-3); }
.winner-list small a:hover { color: var(--gold); }
.how-list { counter-reset: how; display: grid; gap: 10px; padding: 16px 18px; font-size: 14px; color: var(--text-2); }
.how-list li { counter-increment: how; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.how-list li::before { content: counter(how); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(246, 213, 109, 0.14); color: var(--gold); font-weight: 800; font-size: 13px; }
.request-form { display: grid; gap: 14px; }
.request-form .btn { justify-self: start; }
.request-row { display: grid; gap: 14px; }
@media (min-width: 700px) { .request-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.event-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.event-cover img { width: 100%; height: auto; border-radius: var(--radius-lg, 18px); border: 1px solid var(--line); }
.event-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.article-body-flush { margin-top: 0; }
.name-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.name-cloud li { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.key-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 16px 18px; font-size: 15px; }
.key-list dt { color: var(--text-2); }
.key-list dd { font-family: var(--font-mono); font-weight: 700; color: var(--gold); text-align: right; }
.countdown-inline { margin-bottom: 16px; }
.hero-stat span { color: var(--text-2); }
.leaderboard .name { min-width: 0; overflow-wrap: anywhere; }
.tg-band-solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hero-grid.hero-grid-solo { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Sağlayıcıdan gelen görseller: takım logosu ve oyuncu fotoğrafı
   -------------------------------------------------------------------------- */
.crest.crest-logo {
    background: none;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}
.crest-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.face {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 15%;
    background: var(--bg-1);
    box-shadow: 0 0 0 1px var(--line-2);
}
.face-md { width: 36px; height: 36px; }
.face-wrap { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.face-wrap .face { box-shadow: 0 0 0 2px currentColor; }
.player-dot .shirt { position: relative; }
.player-dot .shirt.has-face {
    width: 40px; height: 40px;
    background: var(--bg-1);
    box-shadow: 0 0 0 2px var(--kit, #fff), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.player-dot .shirt.has-face .face { width: 100%; height: 100%; box-shadow: none; }
.player-dot .shirt.has-face .no {
    position: absolute;
    right: -6px; bottom: -4px;
    min-width: 18px;
    padding: 0 3px;
    border-radius: 9px;
    background: var(--kit, #fff);
    color: var(--kit-text, #0a0f2e);
    font-size: 10px;
    line-height: 16px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.player-dot .shirt.has-face .no:empty { display: none; }
@media (max-width: 640px) {
    .player-dot .shirt.has-face { width: 32px; height: 32px; }
    .player-dot .shirt.has-face .no { min-width: 15px; font-size: 9px; line-height: 14px; right: -5px; bottom: -3px; }
}
.duel-avatar .duel-face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }