/* =========================================================
   TELEGOLE — lacivert / mavi yayın teması
   Tüm renkler :root altındaki değişkenlerden gelir.
   ========================================================= */

:root {
    /* zemin */
    --bg:        #040913;
    --navy:      #0a1526;
    --panel:     rgba(12, 23, 41, .82);
    --panel-2:   rgba(19, 33, 56, .9);
    --panel-3:   #16253d;

    --line:      rgba(255, 255, 255, .085);
    --line-2:    rgba(255, 255, 255, .16);

    /* metin */
    --text:      #e9eff8;
    --text-2:    #93a4bd;
    --text-3:    #7a8ea8;   /* 4.30:1 idi; küçük yazı için 4.5 sınırının üstüne çekildi */

    /* vurgu — soğuk mavi (2026-09-17: altından maviye geçildi).
       Panelden seçilen renk theme.php ile bunları ezer. --gold* adları
       eski kuralların değişmeden çalışması için takma ad. */
    --accent:      #4d8ef5;
    --accent-2:    #9dc1f9;             /* açık ton: vurgulu metin, simge */
    --accent-deep: #305898;             /* koyu ton: gradyan dipleri */
    --accent-rgb:  77, 142, 245;        /* rgba(var(--accent-rgb), .3) için */
    --accent-dim:  rgba(77, 142, 245, .16);
    /* Vurgu üstündeki yazının iki ayrı durumu:
         --accent-ink : koyu camsı düğmede (açık yazı)
         --on-accent  : vurgu renginin DOLGU olduğu yerde (koyu yazı).
       Mavi dolgunun üstünde beyaz yazı 3.03:1 kalıyordu. */
    --accent-ink:  #f4f8ff;
    --on-accent:   #06182b;
    --gold:        var(--accent);
    --gold-2:      var(--accent-2);
    --gold-dim:    var(--accent-dim);
    --live:        #e0242e;

    /* birincil düğme: koyu camsı zemin + ince mavi halka + ışıma
       (mobil başlıktaki Telegram düğmesinin dili) */
    --cta-bg:         linear-gradient(180deg, #1a2c4c, #101b33);
    --cta-ring:       rgba(125, 172, 255, .55);
    --cta-glow:       0 0 0 1px rgba(77, 142, 245, .18), 0 6px 22px rgba(46, 110, 220, .32);
    --cta-glow-hover: 0 0 0 1px rgba(125, 172, 255, .45), 0 8px 28px rgba(46, 110, 220, .5);

    /* ölçü */
    --w:         1320px;   /* tüm sayfalarda ortak kap genişliği */
    --gutter:    28px;     /* kenar boşluğu — dar ekranda daralır */
    --r-sm:      6px;
    --r:         10px;
    --r-lg:      14px;
    --gap:       14px;

    --shadow:    0 18px 44px rgba(0, 0, 0, .55);
    --font:      "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   ARKA PLAN — üç katman, her biri panelden ayarlanır:
     .backdrop        : zemin rengi + ışık gradyanları + çapraz örgü (--tex-weave)
     .backdrop::before: film graini            (opacity: --tex-grain)
     .backdrop::after : altıgen file           (opacity: --tex-hex)
   Değişkenler theme.php ile basılır; buradakiler varsayılan.
   ========================================================= */
/* Doku sade: altıgen file ve örgü kapalı, çok hafif grain. */
:root {
    --tex-grain: .03;
    --tex-hex:   0;
    --tex-weave: 0;
}

.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--bg);
    background-image:
        /* çapraz örgü (alfa değişkenle) */
        repeating-linear-gradient(45deg,  rgb(255 255 255 / var(--tex-weave)) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(-45deg, rgb(255 255 255 / calc(var(--tex-weave) * .7)) 0 1px, transparent 1px 5px),
        /* üstten mavi ışıma + ışık huzmeleri + zemin */
        radial-gradient(760px 380px at 50% -8%, rgba(77, 142, 245, .22), transparent 70%),
        radial-gradient(620px 300px at 14% 4%,  rgba(150, 190, 245, .10), transparent 70%),
        radial-gradient(620px 300px at 86% 4%,  rgba(150, 190, 245, .10), transparent 70%),
        radial-gradient(900px 520px at 50% 44%, rgba(28, 62, 112, .38), transparent 72%),
        linear-gradient(180deg, #0b1730 0%, #071021 48%, #040913 100%);
    background-size: auto, auto, cover, cover, cover, cover, cover;
    background-position: center;
    background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.backdrop::before,
.backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* film graini */
.backdrop::before {
    opacity: var(--tex-grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    background-repeat: repeat;
}

/* altıgen file */
.backdrop::after {
    opacity: var(--tex-hex);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cg fill='none' stroke='%23a8c6f0' stroke-width='1'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 64 56 80v32M28 64 0 80v32'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 56px 97px;
    background-repeat: repeat;
}

button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p { margin: 0; }

/* `hidden` özniteliği her zaman gizlesin.
   Tarayıcının kendi `[hidden] { display: none }` kuralı, yazar
   stillerindeki her display bildirimine yeniliyor — bu yüzden
   `display: flex` verilmiş bir bileşeni JS'ten `hidden` yapmak
   işe yaramıyordu. Bileşen bileşen tekrarlamak yerine bir kez burada. */
[hidden] { display: none !important; }

.icon     { width: 22px; height: 22px; flex: none; }
.icon--sm { width: 16px; height: 16px; }

*::-webkit-scrollbar { width: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .30); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .48); }


/* =========================================================
   ÇATI
   ========================================================= */
.page {
    width: min(100% - var(--gutter), var(--w));
    margin: 0 auto;
    padding-bottom: 10px;
    display: flow-root;      /* çocuk margin'i dışarı sızmasın */
}


/* =========================================================
   DUYURU ŞERİDİ
   ========================================================= */
.announce {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 40px;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r) var(--r);
    backdrop-filter: blur(6px);
}

.announce__text {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .2px;
}

.announce__tg {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    transition: color .18s, background .18s;
}
.announce__tg:hover { color: var(--gold-2); background: var(--gold-dim); }


/* =========================================================
   ÜST BAR
   ========================================================= */
.topbar {
    position: relative;          /* mobil açılır panelin dayanağı */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 4px 12px;
}

/* Menü sarmalayıcı: masaüstünde şeffaftır (çocukları doğrudan
   .topbar'ın flex öğesi olur), mobilde açılır panele dönüşür. */
.sitemenu { display: contents; }

/* Hamburger ve hızlı erişim çubuğu yalnız mobilde görünür */
.navrail { display: none; }   /* masaüstünde ana menü zaten görünür */
.mobauth { display: none; }
.mobsol  { display: none; }   /* mobil sol grup: telegram + TG bakiyesi */
.mobtg   { display: none; }   /* mobil logo satırının telegram kısayolu */

.brand { display: block; }

/* Kare de olsa, kırpılmış da olsa taşmaz: kutuya sığar, oranı korur.
   Logo yatay bir yazı markası (yaklaşık 4.6:1); böyle bir logoda asıl
   sınırlayan yükseklik değil max-width olur — ikisi birlikte
   büyütülmezse yükseklik boşa gider, logo yine küçük kalır. */
.brand__img {
    height: 62px;
    width: auto;
    max-width: 340px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55));
}

/* logo dosyası yokken görünen yer tutucu */
.brand__fallback {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.brand__mark {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--accent-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 18px rgba(var(--accent-rgb), .22);
}

.brand__name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-2);
}

.brand__fallback--lg .brand__mark { font-size: 78px; }
.brand__fallback--lg .brand__name { font-size: 20px; letter-spacing: 6px; }

/* menü */
/* Aralık logoyla birlikte ayarlanır: 7 öğede 56px'lik boşluk tek başına
   336px yer kaplıyordu ve etiketlere kalan payda "ANA SAYFA" iki satıra
   düşüyordu. Boşluğu daraltmak, logoyu küçültmekten daha iyi bir takas. */
.mainnav {
    display: flex;
    align-items: flex-start;
    gap: 34px;
}

.navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    white-space: nowrap;   /* geniş ekranda "ÇOKLU EKRAN" tek satırda */
    transition: color .18s, transform .18s;
}

.navitem__icon { width: 26px; height: 26px; }

.navitem:hover { color: var(--gold-2); transform: translateY(-1px); }
.navitem.is-active { color: #fff; }


/* =========================================================
   SPONSOR BANNER
   ========================================================= */
/* Bannerlar alt alta, hepsi aynı anda görünür. Aralık dar tutuluyor:
   görsellerin kendi kenar boşlukları zaten var, buraya geniş boşluk
   koyunca aradaki mesafe iki katına çıkıyor. */
.banners {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Sponsor alanı 1000x100 oranına sabit: yer tutucu ile gerçek görsel
   aynı alanı kaplar, banner yüklenince düzen kaymaz. Alt alta dizilen
   bannerlar için bu ayrıca hepsinin aynı yükseklikte durmasını sağlar. */
.banner {
    display: block;
    aspect-ratio: 1000 / 100;
    overflow: hidden;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
}

/* contain: farklı oranda bir görsel yüklenirse kırpılmaz */
.banner img { width: 100%; height: 100%; object-fit: contain; }

.banner__slot {
    display: grid;
    place-items: center;
    height: 100%;
    background: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .035) 0 12px,
        rgba(255, 255, 255, .06) 12px 24px
    ), var(--panel-2);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-sm);
    color: var(--text-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* =========================================================
   SAHNE: OYNATICI + LİSTE
   ========================================================= */
.stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 404px;   /* geniş kapta oran korunsun */
    align-items: stretch;
    gap: 12px;
    margin-top: 10px;
}


/* ---------- oynatıcı ---------- */
.player__frame {
    position: relative;
    aspect-ratio: 1400 / 945;   /* poster görseliyle birebir */
    overflow: hidden;
    border-radius: var(--r);
    background: #060d1a;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

/* Gömülü oynatıcı açıkken yer tutucu poster, rozet ve oynat düğmesi
   kalkar — oynatıcının kendi posteri ve denetimleri devralır. */
.player__frame.is-embed .player__poster,
.player__frame.is-embed .player__play,
.player__frame.is-embed .tag-live,
.player__frame.is-embed .player__note { display: none !important; }

/* Gömülü oynatıcı — kaynağı seçilince posterin üstünü kaplar. */
.player__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 4;
    background: #000;
}

/* ---------- tam ekran düğmesi ----------
   Yayın açılınca çerçevenin sağ üst köşesinde belirir. Televizyonda
   kumandayla seçilebilsin diye büyük ve yazılı, odak hali belirgin.
   Eski TV tarayıcıları :focus-visible bilmediği için odak :focus ile;
   seçici listesi bilinmeyen sözdizimiyle bütünüyle düşmesin diye
   :fullscreen kuralları ayrı ayrı yazıldı. */
.player__tam {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px 0 12px;
    border-radius: 99px;
    border: 1px solid rgba(125, 172, 255, .45);
    background: rgba(6, 12, 24, .66);
    box-shadow: 0 0 0 1px rgba(77, 142, 245, .12), 0 4px 16px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: .8;
    transition: opacity .25s, background .2s, border-color .2s, color .2s;
}
.player__frame.is-embed .player__tam { display: inline-flex; }
.player__tam .icon { width: 18px; height: 18px; flex: none; }
.player__tam .player__tam-kapa { display: none; }
.player__tam.is-acik .player__tam-ac { display: none; }
.player__tam.is-acik .player__tam-kapa { display: block; }

.player__tam:hover,
.player__tam:focus {
    opacity: 1;
    background: var(--gold);
    border-color: var(--gold-2);
    color: var(--on-accent);
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.player__tam:hover { outline: 0; }
.player__tam:focus:not(:focus-visible) { outline: 0; }

/* Tam ekrandayken maçın üstünde koyu ve sessiz dursun (odakta kalsa bile);
   3 sn hareketsizlikte iyice solar, kumanda tuşu ya da fare geri getirir. */
.player__frame.is-tam .player__tam { background: rgba(6, 12, 24, .55); border-color: rgba(255, 255, 255, .3); color: #fff; }
.player__frame:fullscreen .player__tam { background: rgba(6, 12, 24, .55); border-color: rgba(255, 255, 255, .3); color: #fff; }
.player__frame:-webkit-full-screen .player__tam { background: rgba(6, 12, 24, .55); border-color: rgba(255, 255, 255, .3); color: #fff; }
.player__frame.is-sessiz .player__tam:not(:hover) { opacity: .2; }

/* Sayfa içi tam ekran: tarayıcı tam ekran özelliğine izin vermediğinde
   (kimi TV tarayıcıları) çerçeve görüntü alanının tamamını kaplar. */
.player__frame.is-tam {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
}
html.tam-ekran,
html.tam-ekran body { overflow: hidden; }

.player__frame:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
.player__frame:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }

@media (max-width: 640px) {
    .player__tam { top: 8px; right: 8px; min-height: 36px; padding: 0 11px; }
    .player__tam span { display: none; }
}

.player__poster,
.player__poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* poster görseli yokken görünen yer tutucu */
.poster-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    background:
        radial-gradient(70% 60% at 50% 42%, rgba(38, 74, 128, .5), transparent 70%),
        linear-gradient(180deg, #0c1930 0%, #070f1f 60%, #050a14 100%);
}

.poster-ph__word {
    font-size: clamp(28px, 5.4vw, 56px);
    font-weight: 800;
    letter-spacing: 6px;
    background: linear-gradient(180deg, #f4f8ff, var(--gold) 52%, var(--accent-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.poster-ph__plaque {
    padding: 12px 40px;
    border-radius: 4px;
    background: linear-gradient(180deg, #16294a, #0c1a30);
    border: 2px solid var(--gold);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 0 20px rgba(var(--accent-rgb), .12);
    color: var(--gold-2);
    font-size: clamp(12px, 2vw, 19px);
    font-weight: 700;
    letter-spacing: 3px;
}

.tag-live {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 4px;
    background: var(--live);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 4px 14px rgba(224, 36, 46, .45);
}

.player__note {
    position: absolute;
    top: 14px;
    right: 16px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.player__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(10, 18, 34, .72);
    border: 1.5px solid rgba(125, 172, 255, .6);
    box-shadow: 0 0 0 8px rgba(77, 142, 245, .10), 0 10px 34px rgba(46, 110, 220, .38);
    backdrop-filter: blur(3px);
    color: #fff;
    transition: all .2s;
}
.player__play .icon { width: 42px; height: 42px; margin-left: 5px; }

.player__play:hover {
    background: rgba(var(--accent-rgb), .28);
    border-color: var(--gold-2);
    color: var(--gold-2);
    transform: translate(-50%, -50%) scale(1.06);
}

.player__loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(4, 9, 19, .78);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .6px;
}
.player__loading[hidden] { display: none; }

.spinner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .16);
    border-top-color: var(--gold);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------- sağ liste ---------- */
.side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--r);
    /* Arkadaki dokulu zemin hafifçe geçsin — bulanıklık okunurluğu
       koruyor, panel de sayfadan kopuk bir kutu gibi durmuyor. */
    background: linear-gradient(180deg, rgba(14, 26, 47, .72), rgba(9, 17, 33, .78));
    border: 1px solid var(--line-2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.side__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line);
}

.stab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 4px;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    white-space: nowrap;
    transition: color .18s, background .18s;
}

/* takip sayacı */
.stab__n {
    min-width: 16px;
    padding: 1px 5px;
    border-radius: 99px;
    background: var(--gold-dim);
    color: var(--gold-2);
    font-size: 9.5px;
    line-height: 1.4;
}
.stab:hover { color: var(--text-2); }

.stab__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

/* Seçili sekme dolu blok yerine altın alt çizgiyle işaretlenir. */
.stab.is-active {
    position: relative;
    color: var(--text);
    background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .09));
}
.stab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
}
.stab.is-active .stab__dot {
    background: var(--live);
    opacity: 1;
    box-shadow: 0 0 8px rgba(224, 36, 46, .8);
}

.side__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;      /* kaydırma panellerin kendisinde */
    display: flex;
    flex-direction: column;
}

/* Panel gövdeyi doldurur ve kendi içinde kayar.
   Yükseklik bilinçli olarak yüzdeyle verilmiyor: mobilde .side
   yüksekliğini max-height'tan alıyor, yüzde yükseklik ise kesin
   olmayan bir yüksekliğe karşı auto sayılıyor. Panel 723px'te kalıp
   413px'lik gövde tarafından kırpılıyordu — liste kesiliyor ama hiçbir
   yerde kaydırma oluşmuyordu. Flex büyümesi bu tuzağa düşmez ve
   masaüstündeki mutlak konumlu düzende de aynı sonucu verir. */
.side__panel { flex: 1; min-height: 0; overflow-y: auto; }

.side__panel[hidden] { display: none; }

/* maç satırı */
.event {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    transition: background .16s;
}
.event:last-child { border-bottom: 0; }
.event:hover { background: rgba(255, 255, 255, .05); }

/* Yayını açan bağlantı — yıldız düğmesi bunun dışında kalır ki
   iç içe tıklanabilir öğe olmasın. */
.event__go {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 8px 12px;
    min-width: 0;
}

.event__fav {
    display: grid;
    place-items: center;
    width: 26px;
    height: 100%;
    color: var(--text-3);
    opacity: .45;
    cursor: pointer;
    transition: color .16s, opacity .16s, transform .16s;
}
.event__fav:hover { opacity: 1; color: var(--gold-2); transform: scale(1.12); }
.event__fav.is-on { opacity: 1; color: var(--gold-2); }
.event__fav.is-on .event__star { fill: currentColor; }
.event__star { width: 15px; height: 15px; }

/* maç detay sayfası bağlantısı — yıldızın sağında, aynı sadelikte */
.event__detay {
    display: grid;
    place-items: center;
    width: 26px;
    height: 100%;
    color: var(--text-3);
    opacity: .45;
    transition: color .16s, opacity .16s, transform .16s;
}
.event__detay:hover { opacity: 1; color: var(--gold-2); transform: scale(1.12); }
.event__detay-ic { width: 15px; height: 15px; }

.event:hover { background: rgba(255, 255, 255, .045); }

/* listeden seçilen satır */
.event.is-open,
.channel.is-open {
    background: linear-gradient(90deg, var(--gold-dim), transparent 70%);
    box-shadow: inset 3px 0 0 var(--gold);
}

.event__mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.event__meta {
    color: var(--text-3);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event__meta .sep { opacity: .5; margin: 0 2px; }

.event__teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 3px;
}

.event__team {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* rozetler */
.badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;         /* arma ve baş harf aynı biçimde */
    overflow: hidden;
    background: var(--badge-bg, #1b2b45);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* =========================================================
   TAKIM ARMALARI

   API armalarının tamamı JPG geliyor; zeminleri PowerShell + .NET ile
   saydam PNG'ye çevrilip yerelde saklanıyor (includes/crest.php).
   Bu yüzden burada plaket yok — armalar doğrudan koyu zemine oturuyor.
   ========================================================= */
.badge--img {
    background: none;
    box-shadow: none;
    padding: 2px;
}
.badge--img img { width: 100%; height: 100%; object-fit: contain; }
.badge--flag { background: none; }
.badge svg { width: 100%; height: 100%; display: block; }

/* kanal satırı */
.channel {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    transition: background .16s;
}
.channel:hover { background: rgba(255, 255, 255, .045); }

.channel__mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.channel__name { font-size: 13px; font-weight: 600; }
.channel__note { color: var(--text-3); font-size: 10.5px; font-weight: 600; letter-spacing: .6px; }
.channel__ic   { width: 18px; height: 18px; color: var(--text-3); }

.chip-live {
    padding: 3px 9px;
    border-radius: 4px;
    background: rgba(224, 36, 46, .16);
    border: 1px solid rgba(224, 36, 46, .5);
    color: #ff6b72;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .9px;
}


/* =========================================================
   ALT LOGO
   ========================================================= */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0 6px;
}

.footer__logo { filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .6)); }
.footer__logo img {
    height: 92px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}

.footer__note { color: var(--text-3); font-size: 12px; letter-spacing: .6px; }


/* =========================================================
   DUYARLI
   ========================================================= */
/* Yatay logo + 7 menü öğesi + hesap hapları bu genişliğin altında tek
   satıra sığmıyor (ölçüldü: 1100px'de 128px taşıyor). Etiketlerin iki
   satıra düşmesine izin veriyoruz — menüyü taşırmaktansa iyi. Logo da
   kademeli küçülüyor. */
@media (max-width: 1260px) {
    .navitem  { white-space: normal; }
    .mainnav  { gap: 26px; }
    .brand__img { height: 56px; max-width: 270px; }
}

@media (max-width: 1040px) {
    /* 320px'de takım adlarının yarısı kırpılıyordu; liste biraz genişledi. */
    .stage { grid-template-columns: minmax(0, 1fr) 360px; }
    .mainnav { gap: 14px; }
    .brand__img { height: 44px; max-width: 210px; }
}

@media (max-width: 880px) {
    .stage { grid-template-columns: minmax(0, 1fr); }
    .side { max-height: 460px; }
    .topbar { padding: 14px 2px 18px; }
    .brand__img { height: 48px; max-width: min(240px, 100%); }
    .brand__mark { font-size: 36px; }
    .mainnav { gap: 18px; }
    .footer__logo img { height: 78px; max-width: 240px; }
    .footer { padding-top: 36px; }
}

@media (max-width: 560px) {
    .page { --gutter: 20px; }

    .brand__img { height: 40px; max-width: min(190px, 100%); }
    .banner__slot { letter-spacing: 1px; font-size: 10.5px; }
    .player__play { width: 68px; height: 68px; }
    .player__play .icon { width: 30px; height: 30px; }
    .event__teams { grid-template-columns: 1fr; gap: 1px; }
    .brand__fallback--lg .brand__mark { font-size: 52px; }
}

/* çok dar ekranlar */
@media (max-width: 400px) {
    .topbar { column-gap: 8px; }   /* row-gap 0 kalsın; şeritler bitişik */
    .mobtg span { display: none; } /* dar ekranda yalnız simge */
    .mobauth__tg span { display: none; }
    .mobauth__tg { padding: 0 9px; }
    .mobtg { padding: 0 9px; }
    .brand__name { display: none; }
    .brand__mark { font-size: 24px; }
}

/* =========================================================
   KOMPAKT MASAÜSTÜ DÜZENİ
   Liste, oynatıcı yüksekliğine sabitlenir ve kendi içinde kayar;
   sayfa aşağı uzamaz.
   ========================================================= */
@media (min-width: 881px) {
    /* Sarmalayıcı akışta yer kaplamaz, satır yüksekliğini oynatıcı belirler;
       liste de mutlak konumla o yüksekliği doldurur. */
    .side-col { position: relative; min-height: 0; }
    .side     { position: absolute; inset: 0; }
}

/* Poster görselinde CANLI ve 7/24 zaten basılı — üst üste binmesin. */
.player__frame.has-poster .tag-live,
.player__frame.has-poster .player__note { display: none; }

/* Yayın başlayınca poster kalkar, rozetler geri gelir. */
.player__frame.is-playing .tag-live,
.player__frame.is-playing .player__note { display: block; }

/* =========================================================
   CANLI SOHBET
   ========================================================= */
.side__panel--chat {
    display: none;                 /* aktifken flex olur */
    overflow: hidden;
    flex-direction: column;
}
.side__panel--chat:not([hidden]) { display: flex; }

.chat__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat__hint,
.chat__closed {
    margin: auto;
    text-align: center;
    color: var(--text-3);
    font-size: 12.5px;
}
.chat__closed { display: grid; place-items: center; gap: 10px; padding: 24px; }
.chat__closed .icon { width: 30px; height: 30px; opacity: .5; }

/* mesaj balonu */
.chat__msg {
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    animation: chatIn .18s ease-out;
}
.chat__msg--mine {
    background: var(--gold-dim);
    border-color: rgba(var(--accent-rgb), .32);
}

@keyframes chatIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.chat__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.chat__user { font-size: 11.5px; font-weight: 700; }
.chat__time { color: var(--text-3); font-size: 10px; margin-left: auto; }

.chat__body {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* uyarı satırı (susturma, yavaş mod, hata) */
.chat__note {
    padding: 7px 12px;
    border-top: 1px solid var(--line);
    background: rgba(224, 36, 46, .1);
    color: #ff9095;
    font-size: 11.5px;
    text-align: center;
}
.chat__note[hidden] { display: none; }

/* yazma kutusu */
.chat__form {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .18);
}

.chat__input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.chat__input:focus { outline: none; border-color: var(--gold); }
.chat__input::placeholder { color: var(--text-3); }
.chat__input:disabled { opacity: .5; cursor: not-allowed; }

.chat__send {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    color: var(--on-accent);
    transition: filter .16s;
}
.chat__send:hover { filter: brightness(1.08); }
.chat__send:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; }

/* misafir çağrısı */
.chat__guest {
    padding: 14px 12px;
    border-top: 1px solid var(--line);
    text-align: center;
}
.chat__guest p { color: var(--text-2); font-size: 12.5px; margin-bottom: 10px; }
.chat__guest-btns { display: flex; gap: 8px; }

.chat__btn {
    flex: 1;
    display: grid;
    place-items: center;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 700;
    transition: all .16s;
}
.chat__btn:hover { color: var(--text); border-color: var(--gold); }
.chat__btn--gold {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border-color: transparent;
    color: var(--on-accent);
}
.chat__btn--gold:hover { filter: brightness(1.08); color: var(--accent-ink); }


/* =========================================================
   HEADER — oturum durumu
   ========================================================= */
.account { display: flex; align-items: center; gap: 10px; }

.account__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 99px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s;
}
.account__user:hover { border-color: rgba(var(--accent-rgb), .5); }
.account__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* cüzdan rozeti — markete kısayol */
.account__tg {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 13px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .07));
    border: 1px solid rgba(var(--accent-rgb), .4);
    text-decoration: none;
    transition: border-color .15s, filter .15s;
}
.account__tg:hover { border-color: var(--gold); filter: brightness(1.1); }
.account__tg b { color: var(--gold-2); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.account__tg span { color: var(--gold); font-size: 9.5px; font-weight: 800; letter-spacing: .8px; }

.account__link {
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    transition: all .16s;
}
.account__link:hover { color: var(--text); border-color: var(--gold); }
.account__link--gold {
    background: var(--cta-bg);
    border-color: var(--cta-ring);
    box-shadow: var(--cta-glow);
    color: var(--accent-ink);
}
.account__link--gold:hover { border-color: var(--accent-2); box-shadow: var(--cta-glow-hover); color: #fff; }


/* =========================================================
   GİRİŞ / KAYIT SAYFALARI
   ========================================================= */
.authpage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px 16px;
}

.authpage__brand img { height: 74px; width: auto; max-width: 260px; object-fit: contain; }
.authpage__back { font-size: 12.5px; color: var(--text-3); }
.authpage__back a:hover { color: var(--gold-2); }

.authcard {
    width: min(100%, 400px);
    padding: 28px;
    border-radius: var(--r-lg);
    background: var(--panel);
    border: 1px solid var(--line);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow);
}

.authcard__title { font-size: 20px; text-align: center; }
.authcard__sub {
    margin: 6px 0 22px;
    text-align: center;
    color: var(--text-3);
    font-size: 12.5px;
}

.authform { display: flex; flex-direction: column; gap: 14px; }

.afield { display: flex; flex-direction: column; gap: 6px; }
.afield > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.afield small { color: var(--text-3); font-size: 11px; }

.afield input {
    height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.afield input:focus { outline: none; border-color: var(--gold); }

.btn-auth {
    height: 46px;
    margin-top: 6px;
    border-radius: 8px;
    border: 1px solid var(--cta-ring);
    background: var(--cta-bg);
    box-shadow: var(--cta-glow);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .6px;
    transition: border-color .16s, box-shadow .16s;
}
.btn-auth:hover { border-color: var(--accent-2); box-shadow: var(--cta-glow-hover); }

.authmsg {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    margin-bottom: 16px;
}
.authmsg--err  { background: rgba(224, 36, 46, .13); border: 1px solid rgba(224, 36, 46, .45); color: #ff9095; }
.authmsg--info { background: rgba(120, 170, 255, .1); border: 1px solid rgba(120, 170, 255, .32); color: #a9c8ff; }

.authalt {
    margin-top: 18px;
    text-align: center;
    color: var(--text-3);
    font-size: 12.5px;
}
.authalt a { color: var(--gold); font-weight: 700; }

/* =========================================================
   SOHBET — yanıtlama ve @etiketleme
   ========================================================= */

/* --- mesaj içindeki alıntı --- */
.chat__quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 6px;
    padding: 5px 8px;
    border-left: 2px solid var(--gold);
    border-radius: 4px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: background .15s;
}
.chat__quote:hover { background: rgba(255, 255, 255, .09); }
.chat__quote b { font-size: 10.5px; color: var(--gold-2); }
.chat__quote span {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat__quote--gone {
    border-left-color: var(--text-3);
    color: var(--text-3);
    font-size: 11px;
    font-style: italic;
    cursor: default;
}
.chat__quote--gone:hover { background: rgba(255, 255, 255, .05); }

/* --- yanıtla düğmesi (mesaj üstünde, hover'da belirir) --- */
.chat__reply-btn {
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 4px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    transition: opacity .15s, color .15s, background .15s;
}
.chat__msg:hover .chat__reply-btn { opacity: 1; }
.chat__reply-btn:hover { color: var(--gold-2); background: var(--gold-dim); }
.chat__reply-btn:focus-visible { opacity: 1; outline: 1px solid var(--gold); }

/* --- etiketlenen mesaj --- */
.chat__msg--tagged {
    background: rgba(var(--accent-rgb), .1);
    border-color: rgba(var(--accent-rgb), .38);
    box-shadow: inset 3px 0 0 var(--gold);
}

.chat__msg--flash { animation: chatFlash 1.2s ease; }
@keyframes chatFlash {
    0%, 60% { background: rgba(var(--accent-rgb), .28); }
    100%    { background: rgba(255, 255, 255, .04); }
}

/* --- gövdedeki @etiket --- */
.chat__tag {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--gold-dim);
    color: var(--gold-2);
    font-weight: 700;
}

/* --- yazma alanı sarmalayıcı --- */
.chat__compose { position: relative; }

/* --- yanıt çubuğu --- */
.chat__reply {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-top: 1px solid var(--line);
    background: rgba(var(--accent-rgb), .08);
}
.chat__reply[hidden] { display: none; }

.chat__reply-mark {
    width: 2px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--gold);
    flex: none;
}

.chat__reply-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.chat__reply-text b { font-size: 10.5px; color: var(--gold-2); }
.chat__reply-text span {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat__reply-x {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--text-3);
    font-size: 17px;
    line-height: 1;
    transition: color .15s, background .15s;
}
.chat__reply-x:hover { color: #ff9095; background: rgba(224, 36, 46, .14); }

/* --- @etiket öneri kutusu --- */
.chat__tagbox {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(100% - 2px);
    z-index: 5;
    max-height: 184px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 8px;
    background: var(--panel-3);
    border: 1px solid var(--line-2);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .5);
}
.chat__tagbox[hidden] { display: none; }

.chat__tagitem {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    transition: background .12s, color .12s;
}
.chat__tagitem:hover,
.chat__tagitem.is-on { background: var(--gold-dim); color: var(--gold-2); }

.chat__tagdot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}



/* =========================================================
   TAKİP LİSTESİ + GOL BİLDİRİMİ
   ========================================================= */
.side__link { color: var(--gold-2); text-decoration: underline; }
.side__inlineic { width: 13px; height: 13px; vertical-align: -2px; color: var(--gold-2); }

.wl__row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 9px;
    padding: 8px 6px 8px 12px;
    border-bottom: 1px solid var(--line);
}
.wl__row:hover { background: rgba(255, 255, 255, .045); }

/* sol sütun: saat ya da canlı dakika */
.wl__when {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.wl__when b { color: var(--gold-2); font-size: 12px; }
.wl__when small { font-size: 9px; opacity: .8; white-space: nowrap; }

.wl__row.is-live .wl__when b { color: var(--live); }
.wl__live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wl__live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
    animation: wlPulse 1.6s ease-in-out infinite;
}
@keyframes wlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.wl__mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wl__lig { color: var(--text-3); font-size: 9.5px; font-weight: 600; }

.wl__team {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-2);
}
.wl__team b {
    text-align: right;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.wl__team img { width: 17px; height: 17px; object-fit: contain; }
.wl__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* yeni gol atan taraf kısa süre vurgulanır */
.wl__team.is-hit b { color: var(--gold-2); animation: wlHit 1.6s ease-out 2; }
@keyframes wlHit { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }

.wl__drop {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--text-3);
    opacity: .5;
    cursor: pointer;
    transition: opacity .16s, color .16s;
}
.wl__drop:hover { opacity: 1; color: var(--live); }
.wl__drop svg { width: 13px; height: 13px; }

.wl__perm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    color: var(--text-3);
    font-size: 11px;
    cursor: pointer;
}


/* ---- bildirim balonları ---- */
.toasts {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(340px, calc(100vw - 28px));
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, var(--panel), rgba(8, 14, 12, .96));
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: toastIn .28s cubic-bezier(.2, .8, .3, 1);
}
.toast.is-out { animation: toastOut .24s ease-in forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(6px) scale(.98); } }

.toast--gol { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim), var(--shadow); }
.toast__ic  { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--gold-2); }
.toast--bitti .toast__ic { color: var(--text-3); }

.toast__mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast__t   { color: var(--text); font-size: 12.5px; font-weight: 700; }
.toast__s   { color: var(--text-3); font-size: 11px; }

.toast__x {
    margin-left: auto;
    color: var(--text-3);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    opacity: .6;
}
.toast__x:hover { opacity: 1; }

@media (max-width: 560px) {
    .toasts { left: 14px; right: 14px; bottom: 10px; max-width: none; }
    .stab { font-size: 10px; letter-spacing: .2px; gap: 5px; }
    .stab__dot { width: 6px; height: 6px; }
}


/* =========================================================
   BOŞ DURUM KARTI  (takip listesi, giriş çağrısı)
   ========================================================= */
.side__empty {
    padding: 22px 18px;
    text-align: center;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.6;
}

.bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 30px 22px 26px;
    text-align: center;
}

.bos__ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--gold-dim), transparent 72%);
    border: 1px solid var(--line-2);
    color: var(--gold-2);
}
.bos__ic svg { width: 20px; height: 20px; }

/* yıldız içi dolu — listedeki işaretle aynı dil */
.bos__ic--star svg { fill: currentColor; opacity: .9; }

.bos__t {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
}

.bos__s {
    max-width: 250px;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.65;
}

.bos__inline {
    width: 12px;
    height: 12px;
    vertical-align: -2px;
    color: var(--gold-2);
    fill: currentColor;
}

.bos__cta { display: flex; gap: 8px; margin-top: 3px; }

.btn-mini {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    color: var(--text-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: border-color .15s, color .15s, background .15s;
}
.btn-mini:hover { border-color: var(--text-3); color: var(--text); }

.btn-mini--gold {
    background: var(--cta-bg);
    border-color: var(--cta-ring);
    box-shadow: var(--cta-glow);
    color: var(--accent-ink);
}
.btn-mini--gold:hover { border-color: var(--accent-2); box-shadow: var(--cta-glow-hover); color: #fff; }


/* =========================================================
   SOHBET ODALARI + MAÇ ÖNCESİ ANKET
   ========================================================= */
.rooms {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

.room {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    height: 26px;
    padding: 0 10px;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
    transition: all .15s;
}
.room:hover { color: var(--text-2); border-color: var(--text-3); }

.room.is-on {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold-2);
}

.room__ic { width: 12px; height: 12px; flex: none; }
.room__name { overflow: hidden; text-overflow: ellipsis; }

/* maç odası pili — canlı nokta */
.room__dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 6px rgba(224, 36, 46, .7);
}

.rooms__hint {
    color: var(--text-3);
    font-size: 10px;
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ---- anket ---- */
.poll {
    padding: 10px 12px 11px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), transparent);
}

.poll__q {
    margin-bottom: 8px;
    color: var(--gold-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.poll__opts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

.poll__opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--panel);
    overflow: hidden;
    transition: border-color .15s;
}
.poll__opt:not(:disabled):hover { border-color: var(--gold); }
.poll__opt:disabled { cursor: default; }

/* oy oranı — düğmenin arkasını dolduran çubuk */
.poll__fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .12));
    transition: width .45s cubic-bezier(.2, .8, .3, 1);
}

.poll__label,
.poll__pct { position: relative; z-index: 1; }

.poll__label {
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.poll__pct {
    flex: none;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* kullanıcının kendi oyu */
.poll__opt.is-mine { border-color: var(--gold); }
.poll__opt.is-mine .poll__label,
.poll__opt.is-mine .poll__pct { color: var(--gold-2); }

.poll__foot { margin-top: 7px; color: var(--text-3); font-size: 10px; }


/* =========================================================
   GERİ SAYIM VE HATIRLATICI
   ========================================================= */
.event__cd {
    display: inline-flex;
    align-items: center;
    height: 15px;
    margin-right: 5px;
    padding: 0 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line-2);
    color: var(--text-2);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: 1px;
}

/* son çeyrek saat — altın; başlama anı — kırmızı ve nabız */
.event__cd.is-soon {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold-2);
}
.event__cd.is-now {
    background: rgba(224, 36, 46, .16);
    border-color: var(--live);
    color: #ff9aa1;
    animation: cdPulse 1.5s ease-in-out infinite;
}
@keyframes cdPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* takip listesinde yaklaşan maç */
.wl__row.is-soon .wl__when b { color: var(--gold-2); }
.wl__row.is-soon .wl__when small { color: var(--gold-2); opacity: .9; font-weight: 700; }


/* ---- takip ayarları ---- */
.wl__ayar {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px;
    border-top: 1px solid var(--line);
}

.wl__sat {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-3);
    font-size: 11px;
    cursor: pointer;
}
.wl__sat--kutu { gap: 8px; }

.wl__sec {
    margin-left: auto;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--panel-2);
    color: var(--text-2);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.wl__sec:hover { border-color: var(--text-3); }
.wl__sec:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }


/* =========================================================
   FAVORİ TAKIM
   ========================================================= */
.event.is-fav { box-shadow: inset 3px 0 0 var(--gold); }
.event.is-fav .event__team { color: var(--text); }

.event__fav-mark { display: inline-flex; margin-right: 4px; vertical-align: -2px; }
.event__fav-ic { width: 11px; height: 11px; color: var(--gold-2); fill: currentColor; }

.fav {
    padding: 10px 12px 11px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

.fav__head { display: flex; align-items: center; gap: 10px; }

.fav__t {
    color: var(--gold-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.fav__add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    height: 24px;
    padding: 0 9px;
    border-radius: 99px;
    border: 1px solid var(--line-2);
    color: var(--text-3);
    font-size: 10.5px;
    font-weight: 700;
    transition: color .15s, border-color .15s;
}
.fav__add:hover { color: var(--gold-2); border-color: var(--gold); }
.fav__add-ic { width: 11px; height: 11px; }

.fav__list { display: flex; flex-wrap: wrap; gap: 6px; }
.fav__list:not(:empty) { margin-top: 9px; }

.fav__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 6px 0 7px;
    border-radius: 99px;
    background: var(--gold-dim);
    border: 1px solid var(--gold);
    color: var(--gold-2);
    font-size: 11px;
}
.fav__chip img { width: 16px; height: 16px; object-fit: contain; }
.fav__chip b { font-weight: 700; }

.fav__x {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    color: var(--gold-2);
    font-size: 14px;
    line-height: 1;
    opacity: .6;
}
.fav__x:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

.fav__bos { margin-top: 8px; color: var(--text-3); font-size: 10.5px; line-height: 1.55; }

.fav__ara { margin-top: 9px; }

.fav__inp {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 12px;
}
.fav__inp:focus { outline: none; border-color: var(--gold); }
.fav__inp::placeholder { color: var(--text-3); }

.fav__sonuc { display: flex; flex-direction: column; }
.fav__sonuc:not(:empty) {
    margin-top: 6px;
    max-height: 180px;
    overflow-y: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--panel);
}

.fav__sec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--line);
    color: var(--text-2);
    font-size: 11.5px;
    text-align: left;
}
.fav__sec:last-child { border-bottom: 0; }
.fav__sec:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.fav__sec img { width: 17px; height: 17px; flex: none; object-fit: contain; border-radius: 50%; }
.fav__ph { width: 17px; height: 17px; flex: none; border-radius: 50%; background: var(--panel-3); }
.fav__sec-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fav__yok { padding: 9px; color: var(--text-3); font-size: 11px; text-align: center; }





/* =========================================================
   MOBİL BAŞLIK

   Kutulu ızgara yerine tek satır, yatay kayan hap listesi:
   menü kaç öğe olursa olsun başlık büyümüyor, etiketler tam
   okunuyor ve hiçbir bağlantı erişilemez kalmıyor. Hamburger
   yok; hesap işlemleri logo satırının sağında.
   ========================================================= */
@media (max-width: 900px) {
    /* İlk satır üç kolon: sol Telegram, ortada logo, sağda hesap.
       Kenar kolonlar eşit pay aldığı için logo gerçekten ortalanır;
       içerik sığmazsa kolon büyür, üst üste binme olmaz. */
    .topbar {
        display: grid;
        /* Kenarlar minmax(0,1fr): tüm satıra yayılan rayın iç
           genişliği kolonlara min-content olarak sızıp onları
           şişirmesin (ray zaten kendi içinde kayıyor). */
        /* Orta kolon da daralabilmeli: "auto" iken logo kolonu kendi
           genişliğine zorluyordu ve dar ekranda sağdaki hesap düğmesini
           ekranın dışına itiyordu (360px'de 32px taşma ölçüldü). */
        grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
        padding: 10px 0 4px;
    }

    .mobsol {
        display: flex;
        align-items: center;
        gap: 6px;
        grid-column: 1;
        justify-self: start;
        min-width: 0;
    }

    .mobtg {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: none;
        height: 34px;
        padding: 0 13px 0 11px;
        border-radius: 99px;
        background: var(--cta-bg);
        border: 1px solid var(--cta-ring);
        box-shadow: var(--cta-glow);
        color: var(--accent-2);
        text-decoration: none;
        transition: border-color .15s, color .15s;
    }
    .mobtg:hover { border-color: rgba(var(--accent-rgb), .5); }

    /* Girişliyse solda TG bakiyesi de var: iki hap birlikte logoyu
       ortadan kaydırıyordu. Üye görünümünde Telegram yalnız simge
       kalır, etiket misafirlerde (yer bol olduğunda) görünür. */
    .topbar--uye .mobtg span { display: none; }
    .topbar--uye .mobtg { padding: 0 9px; }
    .mobtg .icon { width: 17px; height: 17px; flex: none; }
    .mobtg span {
        color: #c3d0e4;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .6px;
        white-space: nowrap;
    }

    .brand    { grid-column: 2; min-width: 0; }
    .mobauth  { grid-column: 3; justify-self: end; }
    .navrail  { grid-column: 1 / -1; }

    /* masaüstü menüsü ve hesap bloğu mobilde gizli */
    .sitemenu { display: none; }

    /* ---- duyuru şeridi: ince ve tek satır ----
       Ölçüm: kullanılabilir genişlik = vw - 82px, metnin em oranı
       ≈ 27.15. Azami font = (vw-82)/27.15; aşağıdaki formül bunun
       %96'sı, yani ~%4 emniyet payı bırakıyor. */
    .announce {
        min-height: 32px;
        margin-top: 6px;
        padding: 4px 10px;
        gap: 8px;
    }

    .announce__text {
        font-size: clamp(7.5px, calc(3.536vw - 2.9px), 12px);
        line-height: 1.3;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;   /* panelden çok uzun metin girilirse taşmasın */
    }

    .announce__tg { width: 26px; height: 26px; flex: none; }
    .announce__tg .icon { width: 18px; height: 18px; }


    /* ---- hesap ---- */
    .mobauth {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        min-width: 0;
    }

    .mobauth__me {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        max-width: 42vw;
        height: 34px;
        padding: 0 12px 0 4px;
        border-radius: 99px;
        background: linear-gradient(180deg, #1a2c4c, #101b33);
        border: 1px solid var(--line-2);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        text-decoration: none;
    }
    .mobauth__me b {
        color: var(--text);
        font-size: 12px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobauth__tg {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        flex: none;
        height: 34px;
        padding: 0 11px;
        border-radius: 99px;
        background: linear-gradient(180deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .08));
        border: 1px solid rgba(var(--accent-rgb), .4);
        text-decoration: none;
        align-items: center;
    }
    .mobauth__tg b { color: var(--gold-2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .mobauth__tg span { color: var(--gold); font-size: 8.5px; font-weight: 800; letter-spacing: .6px; }

    .mobauth__av {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        flex: none;
        border-radius: 50%;
        color: #10131c;
        font-size: 10px;
        font-weight: 800;
    }

    .mobauth__ic {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        flex: none;
        border-radius: 50%;
        background: linear-gradient(180deg, #1a2c4c, #101b33);
        border: 1px solid var(--line-2);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        color: #c3d0e4;
        transition: color .15s, border-color .15s;
    }
    .mobauth__ic .icon { width: 16px; height: 16px; }
    .mobauth__ic:hover  { color: var(--gold-2); border-color: var(--gold); }
    .mobauth__ic:active { color: #ff9aa1; border-color: var(--live); }

    .mobauth__btn {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 11px;
        border-radius: 99px;
        background: linear-gradient(180deg, #1a2c4c, #101b33);
        border: 1px solid var(--line-2);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        color: #c3d0e4;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .4px;
        white-space: nowrap;
        transition: border-color .15s, color .15s, filter .15s;
    }
    .mobauth__btn:hover { border-color: var(--gold); color: var(--gold-2); }

    .mobauth__btn--gold {
        background: var(--cta-bg);
        border-color: var(--cta-ring);
        box-shadow: var(--cta-glow);
        color: var(--accent-ink);
    }
    .mobauth__btn--gold:hover { border-color: var(--accent-2); box-shadow: var(--cta-glow-hover); color: #fff; }


    /* ---- gezinme rayı ---- */
    .navrail {
        display: block;
        flex: 1 0 100%;
        min-width: 0;
    }

    .navrail__kaydir {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 14px 2px 0;      /* sondaki hap solmanın altında kalmasın */
        /* sağda hafif solma: listenin devam ettiği belli olsun */
        -webkit-mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0 96%, transparent 100%);
    }
    .navrail__kaydir::-webkit-scrollbar { display: none; }

    .navrail__item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: none;
        height: 36px;
        padding: 0 14px;
        border-radius: 99px;
        /* Dokulu zeminde yarı saydam hap siliniyordu: kart diliyle
           aynı opak lacivert değirmi + belirgin kenar. */
        background: linear-gradient(180deg, #1a2c4c, #101b33);
        border: 1px solid var(--line-2);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
        color: #c3d0e4;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .5px;
        white-space: nowrap;
        transition: background .15s, color .15s, border-color .15s;
    }
    .navrail__item:hover {
        background: linear-gradient(180deg, #22375c, #152440);
        border-color: rgba(var(--accent-rgb), .45);
        color: var(--text);
    }

    .navrail__ic { width: 16px; height: 16px; flex: none; color: var(--gold-2); opacity: .9; }

    /* bulunulan sayfa */
    .navrail__item.is-on {
        background: var(--cta-bg);
        border-color: var(--cta-ring);
        color: #fff;
        box-shadow: var(--cta-glow);
    }
    .navrail__item.is-on .navrail__ic { color: var(--accent-2); opacity: 1; }
}

/* Dar telefonlarda satir uc kolon: sol Telegram, ortada logo, sagda
   hesap haplari. Logo tam ortalansin diye kenar kolonlar esit pay
   aliyor; bu da satirin sag yarisini haplarin belirlemesi demek.
   Olculdu: haplar 132px iken 390px'lik ekranda satir 17px tasiyordu ve
   logoyu 95px'e indirmeden duzelmiyordu (okunmaz kadar kucuk). Haplari
   96px'e daraltinca 170px'lik logo 360px'e kadar tasmadan sigiyor. */
@media (max-width: 440px) {
    .mobauth      { gap: 3px; }
    .mobauth__btn { height: 28px; padding: 0 6px; font-size: 9px; letter-spacing: 0; }
    /* Logoya kalan yer sabit degil: satirin genisliginden iki kenar
       kolonu (2x96px hap) ve bosluklar dusuldugunde kalan kadar. Sabit
       basamaklarla her telefon genisligini tutturmak mumkun degildi
       (375 ve 360px'de birkac piksel tasiyordu); formul hepsini kapsar.
       244px = 2x96 hap + 2x10 gap + 20 kenar + 12 emniyet payi (dar
       masaustu penceresinde dikey kaydirma cubugu 100vw'ye giriyor). */
    .brand__img   {
        width: min(170px, calc(100vw - 244px));
        height: auto;
        max-width: none;
    }
}

@media (max-width: 400px) {
    .navrail__item { height: 34px; padding: 0 12px; font-size: 10.5px; gap: 6px; }
    .navrail__ic   { width: 15px; height: 15px; }
    .mobauth__btn  { height: 28px; padding: 0 6px; font-size: 9px; letter-spacing: 0; }
    .mobauth__me   { max-width: 38vw; }
}


/* =========================================================
   GİRİŞ AÇILIR PENCERESİ
   Panelden yönetilen duyuru görseli. Giriş yaklaşık iki saniyelik
   kademeli bir hareket: önce zemin koyulaşır, sonra kutu yükselip
   yerine oturur, en son üzerinden altın bir parlama geçer. Kapanış
   kısa — bekletmenin anlamı yok.
   ========================================================= */
.pop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 20px;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.pop[hidden] { display: none; }

/* sayfa arkada kaymasın */
html.pop-acik { overflow: hidden; }

/* ---- zemin ---- */
.pop__fon {
    position: absolute;
    inset: 0;
    background: rgba(3, 7, 15, .72);
    backdrop-filter: blur(6px) saturate(.9);
    opacity: 0;
    transition: opacity .45s ease;
}
.pop.is-acik .pop__fon      { opacity: 1; }
.pop.is-kapaniyor .pop__fon { opacity: 0; transition-duration: .3s; }

/* ---- kutu ---- */
.pop__kutu {
    position: relative;
    z-index: 1;
    width: min(560px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(23, 39, 65, .96), rgba(10, 19, 35, .98));
    border: 1px solid rgba(var(--accent-rgb), .34);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 60px rgba(var(--accent-rgb), .1);
    overflow: hidden;

    opacity: 0;
    transform: translateY(38px) scale(.92);
    /* Giriş kutunun kendisinde 0,9 sn sürüyor ve 0,25 sn gecikmeyle
       başlıyor; zemin koyulaşmadan kutu gelmesin. */
    transition: opacity .9s cubic-bezier(.16, .84, .28, 1) .25s,
                transform .9s cubic-bezier(.16, .84, .28, 1) .25s;
}
.pop.is-acik .pop__kutu { opacity: 1; transform: none; }
.pop.is-kapaniyor .pop__kutu {
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .3s ease, transform .3s ease;
}

/* ---- görsel ---- */
.pop__gorsel {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(165deg, #16273f, #0a1424);
}
.pop__gorsel img {
    display: block;
    width: 100%;
    max-height: calc(86vh - 6px);
    object-fit: contain;
}
a.pop__gorsel { cursor: pointer; }

/* üzerinden geçen altın parlama — girişin son evresi */
.pop__parlama {
    position: absolute;
    top: -60%;
    left: -40%;
    width: 36%;
    height: 220%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    transform: rotate(18deg) translateX(-170%);
}
.pop.is-acik .pop__parlama {
    transition: transform 1s cubic-bezier(.3, .6, .3, 1) .9s;
    transform: rotate(18deg) translateX(430%);
}

/* ---- kapat ---- */
.pop__kapat {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(125, 172, 255, .45);
    background: rgba(6, 12, 24, .62);
    box-shadow: 0 0 0 1px rgba(77, 142, 245, .12), 0 4px 16px rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    opacity: 0;
    transition: opacity .4s ease 1.2s, background .18s, border-color .18s, transform .18s;
}
.pop.is-acik .pop__kapat { opacity: 1; }
.pop__kapat:hover {
    background: rgba(var(--accent-rgb), .28);
    border-color: var(--gold);
    transform: scale(1.06);
}
.pop.is-kapaniyor .pop__kapat { transition-delay: 0s; opacity: 0; }

/* ---- kalan süre şeridi ---- */
.pop__sure {
    display: block;
    height: 3px;
    flex: none;
    background: rgba(255, 255, 255, .08);
}
.pop__sure i {
    display: block;
    height: 100%;
    width: var(--kalan, 100%);
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    /* Genişlik 50 ms'de bir yazılıyor; kısa geçiş adımları yumuşatıyor. */
    transition: width .1s linear;
}

/* ---- dar ekran ---- */
@media (max-width: 560px) {
    .pop { padding: 14px; }
    .pop__kutu { width: 94vw; max-height: 84vh; }
    .pop__gorsel img { max-height: calc(84vh - 6px); }
    /* Parmakla vurulacak alan küçük kalmasın. */
    .pop__kapat { width: 44px; height: 44px; top: 8px; right: 8px; font-size: 26px; }
}

/* ---- hareket azaltma ---- */
@media (prefers-reduced-motion: reduce) {
    .pop__fon,
    .pop__kutu,
    .pop__kapat,
    .pop__parlama,
    .pop__sure i { transition: none !important; }
    .pop__kutu { transform: none; }
    .pop__parlama { display: none; }
}


/* =========================================================
   GENEL CİLA — renk paleti değişmez, davranış tekilleşir
   Odak halkası, seçim rengi, form denetimleri, yer tutucu,
   devre dışı görünüm ve hareket azaltma tercihi tek yerde.
   ========================================================= */

/* Metin seçimi: tarayıcı varsayılanı tema dışı kalıyordu. */
::selection {
    background: rgba(var(--accent-rgb), .35);
    color: #fff;
}

/* Odak halkası. Yalnız klavye/kumanda ile gezinirken çıkar
   (:focus-visible), fareyle tıklayanı rahatsız etmez. Televizyonda
   kumandayla gezerken nerede olunduğunu görmenin tek yolu bu. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Form alanlarının çoğu odakta outline'ı kapatıp kenarlığını
   renklendiriyor; oralarda halkayı gölgeyle veriyoruz. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .28);
}

/* Onay kutusu, radyo, kaydırıcı: tarayıcı varsayılan mavisi yerine tema rengi. */
input,
select,
textarea,
progress { accent-color: var(--accent); }

/* Yer tutucu: Firefox varsayılan olarak soluklaştırıyor, tonu sabitle. */
::placeholder {
    color: var(--text-3);
    opacity: 1;
}

/* Devre dışı denetimler her yerde aynı görünsün. */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* Dokunmatikte gri kutu yerine tema vurgusu. */
html {
    -webkit-tap-highlight-color: rgba(var(--accent-rgb), .18);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: rgba(var(--accent-rgb), .35) transparent;
    scrollbar-width: thin;
}

/* Hareket azaltma tercihi: sayfa sayfa değil, genel. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}