/* PAF.GG - style.css
   Tasarım dili: mertdncl (monokrom glassmorphism, Plus Jakarta Sans, yalnızca koyu tema, ortam arka planı,
   yumuşak hareket). Başvuru: /Users/mert/Desktop/web/mertdncl/DESIGN.md
   Font <link> ile includes/partials/header.php içinde yüklenir (@import değil: sayfayı daha az bloklar). */

/* ---------- TEMA DEĞİŞKENLERİ ----------
   Site yalnızca koyu temadır (açık tema seçeneği kaldırıldı).
   Eski isimler (--gold, --gold-light ...) geriye dönük uyum için korunur; artık monokrom vurguyu temsil ederler.
   Renk tek yerde kalır: gradyan ikon çipleri (--chip-*). */
:root {
    --pg-brand: #810020;               /* marka bordosu (ikonun arka planı) */
    --pg-brand-rgb: 129 0 32;
    --pg-brand-bright: #c8102e;        /* koyu zeminde okunan, parlamayan kırmızı ton */
    color-scheme: dark;

    --ink-rgb: 255 255 255;        /* kontrast rengi: koyuda beyaz, açıkta siyah */
    --accent-rgb: 255 255 255;     /* vurgu (monokrom) */
    --bg-rgb: 0 0 0;               /* sayfa zemini; görsel/banner geçişleri buna karışır */
    --solid-rgb: 12 12 14;         /* açılır menü / modal yüzeyi */
    --shadow-rgb: 0 0 0;
    --overlay-rgb: 0 0 0;

    --black: #000;
    --white: #fff;                 /* başlık ve ana metin */
    --gray: #9ca3af;               /* ikincil / yardımcı metin */
    --gold: #fff;                  /* eski ad: vurgu */
    --gold-light: #d1d5db;         /* eski ad: yumuşak vurgu */
    --on-accent: #000;             /* vurgu zemini üstündeki yazı */

    --border: rgb(255 255 255 / .10);
    --border-strong: rgb(255 255 255 / .20);
    --panel: rgb(24 26 32 / .55);                 /* cam yüzey (kartlar) */
    --panel-solid: rgb(12 12 14 / .94);           /* açılır menüler, modallar */
    --field-bg: rgb(255 255 255 / .04);
    --option-bg: #111113;
    --hover-bg: rgb(255 255 255 / .10);
    --input-border: rgb(75 85 99 / .6);
    --header-glass: rgb(20 22 30 / .34);   /* header + sol çubuk: siyaha dönmeyen, arkasını gösteren cam */
    --shadow: rgb(0 0 0 / .50);
    --glass-blur: blur(24px);

    --card-surface: linear-gradient(135deg, rgb(31 41 55 / .30), rgb(17 24 39 / .20));

    /* ikon çipleri (koyuda 500 tonları) */
    --chip-blue: linear-gradient(135deg, #3b82f6, #06b6d4);
    --chip-purple: linear-gradient(135deg, #a855f7, #ec4899);
    --chip-yellow: linear-gradient(135deg, #eab308, #f97316);
    --chip-green: linear-gradient(135deg, #22c55e, #10b981);
    --chip-indigo: linear-gradient(135deg, #6366f1, #3b82f6);
    --chip-red: linear-gradient(135deg, #ef4444, #ec4899);

    /* takım sayfalarında kullanılan takma adlar — tek noktadan mevcut palete bağlanır */
    --black-soft: var(--panel);
    --bg-dark: var(--field-bg);
    --bg-dark-secondary: var(--panel);
    --text: var(--white);
    --blue: #3b82f6;
}


* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- TEMEL: FONT, ANA BOYUT, TÜRKÇE BOŞLUK ---------- */
html {
    /* telefonda 14px, tablette 15px, masaüstünde 16px (rem kullanan her şey birlikte ölçeklenir) */
    font-size: 14px;
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* header yüksekliği */
    font-family: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
        'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--black);
    /* Kaydırma çubuğu (yolu) HER ZAMAN gösterilir: kaydırma gerektiren ve gerektirmeyen sayfalar arasında geçerken header ve içerik
       yatayda oynamaz. (scrollbar-gutter özel ::-webkit-scrollbar ile Chrome'da işlemediği için overflow-y: scroll kullanılır;
       modal açıkken sayfa kaydırma kilidi js/core/modal.js'te.) */
    overflow-y: scroll;
}
/* Sayfa kaydırma kilidi js/core/modal.js'tedir; modal kodlarının body'ye yazdığı overflow:hidden, body'yi kaydırma kabına çevirip
   sticky header'ı kaydırılmış sayfada kaybettirmesin diye etkisiz kılınır. */
body[style*="overflow: hidden"] { overflow: visible !important; }
@media (min-width: 641px) { html { font-size: 15px; } }
@media (min-width: 1024px) { html { font-size: 16px; } }

/* Türkçe aynı ayarlarla daha sıkışık görünür (dar harfler ı i l r, noktalı/noktasız çiftler);
   bu yüzden harf ve kelime arasına biraz hava verilir. h1 muaftır. (em: her öğe kendi boyutuna göre ölçeklenir) */
html[lang='tr'] :where(*) {
    letter-spacing: .02em;
    word-spacing: .09em;
}
html[lang='tr'] :where(h1, h1 *) {
    letter-spacing: 0;
    word-spacing: 0;
}

/* Form elemanları tarayıcıda body'den font miras almaz; bu satır olmadan sistem fontuyla render olurlar. */
input, textarea, select, button {
    font-family: inherit;
}

button, a, input, textarea {
    transition: all .2s ease;
}

/* Açık/koyu geçişinde her öğe yumuşakça yön değiştirir; sınıf sadece geçiş sırasında <html> üzerindedir. */

/* Klavye odağı görünür kalır, fare odağı temiz görünür */
button:focus, a:focus { outline: none; }
button:focus-visible, a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: .5rem;
}
input:focus, textarea:focus, select:focus { outline: none; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

body {
    background: var(--black);
    color: var(--white);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
::selection { background: #fff; color: #000; }

/* ---------- KAYDIRMA ÇUBUĞU ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #fff; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
/* Sayfa en üstteyken sayfanın kaydırma çubuğu görünmez (yeri ayrılı kalır, içerik yatayda kaymaz); biraz kaydırınca belirir (js/core/theme.js .is-scrolled) */
html:not(.is-scrolled)::-webkit-scrollbar-track, html:not(.is-scrolled)::-webkit-scrollbar-thumb,
body:not(.is-scrolled)::-webkit-scrollbar-track, body:not(.is-scrolled)::-webkit-scrollbar-thumb { background: transparent; }   /* Chrome sayfa çubuğunun stilini body'den alır (sınıf da body'de değişmeli), Safari html'den */

/* ---------- SAYFA GEÇİŞ ANİMASYONU ---------- */
html.page-transition-ready body { opacity: 0; }
html.page-transition-ready.page-loaded body {
    opacity: 1;
    transition: opacity .28s ease;
}
html.page-transition-ready.page-leaving body {
    opacity: 0;
    transition: opacity .2s ease;
}

/* ---------- YÜKLEME EKRANI (oturumdaki ilk açılışta, en az 450 ms) ---------- */
.loader-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    transition: opacity .5s ease, visibility .5s;
}
.loader-screen { animation: esLoaderOut .5s ease 3s forwards; }
@keyframes esLoaderOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.loader-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
html.no-loader .loader-screen { display: none; }
.loader-rings { position: relative; width: 64px; height: 64px; }
.loader-rings span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--pg-brand-bright);
    animation: esSpin 1.1s linear infinite;
}
.loader-rings span:nth-child(2) { inset: 9px; border-top-color: rgb(255 255 255 / .55); animation-duration: 1.6s; animation-direction: reverse; }
.loader-rings span:nth-child(3) { inset: -6px; border-top-color: rgb(255 255 255 / .35); filter: blur(3px); animation-duration: 2.2s; }
@keyframes esSpin { to { transform: rotate(360deg); } }

/* ---------- ORTAM ARKA PLANI (gradyan, altıgen ızgara, parlayan küreler, parçacıklar) ---------- */
.ambient-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.ambient-base {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, #111827, #000, #111827);
}
.ambient-hex {
    position: absolute;
    inset: 0;
    opacity: .05;
    color: var(--white);
    background-image:
        linear-gradient(30deg, currentColor 12%, transparent 12.5%, transparent 87%, currentColor 87.5%, currentColor),
        linear-gradient(150deg, currentColor 12%, transparent 12.5%, transparent 87%, currentColor 87.5%, currentColor),
        linear-gradient(30deg, currentColor 12%, transparent 12.5%, transparent 87%, currentColor 87.5%, currentColor),
        linear-gradient(150deg, currentColor 12%, transparent 12.5%, transparent 87%, currentColor 87.5%, currentColor),
        linear-gradient(60deg, transparent 25%, currentColor 25.5%, currentColor 75%, transparent 75%, transparent),
        linear-gradient(60deg, transparent 25%, currentColor 25.5%, currentColor 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    background-position: 0 0, 0 0, 20px 20px, 20px 20px, 0 0, 20px 20px;
}
.ambient-orb {
    position: absolute;
    border-radius: 50%;
    animation: esPulse 8s cubic-bezier(.4, 0, .6, 1) infinite;
}
.orb-1 { top: 8rem; left: 8rem; width: 10rem; height: 10rem; filter: blur(40px); background: linear-gradient(135deg, rgb(6 182 212 / .30), rgb(37 99 235 / .30)); animation-duration: 8s; }
.orb-2 { top: 12rem; right: 10rem; width: 8rem; height: 8rem; filter: blur(24px); background: linear-gradient(135deg, rgb(168 85 247 / .30), rgb(219 39 119 / .30)); animation-duration: 6s; animation-delay: 2s; }
.orb-3 { bottom: 10rem; left: 33%; width: 12rem; height: 12rem; filter: blur(40px); background: linear-gradient(135deg, rgb(99 102 241 / .30), rgb(147 51 234 / .30)); animation-duration: 10s; animation-delay: 4s; }
.orb-4 { bottom: 8rem; right: 8rem; width: 9rem; height: 9rem; filter: blur(24px); background: linear-gradient(135deg, rgb(236 72 153 / .30), rgb(220 38 38 / .30)); animation-duration: 7s; animation-delay: 1s; }
.ambient-center { position: absolute; top: 50%; left: 50%; width: 24rem; height: 24rem; transform: translate(-50%, -50%); opacity: .05; }
.ambient-center span { position: absolute; inset: 0; border-radius: 50%; filter: blur(64px); animation: esPulse 15s cubic-bezier(.4, 0, .6, 1) infinite; }
.ambient-center span:nth-child(1) { background: linear-gradient(135deg, rgb(6 182 212 / .10), rgb(147 51 234 / .10)); }
.ambient-center span:nth-child(2) { background: linear-gradient(135deg, rgb(168 85 247 / .10), rgb(219 39 119 / .10)); animation-duration: 13s; animation-delay: 3s; }
.ambient-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(34 211 238 / .30);
    animation: esPulse 8s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes esPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (max-width: 768px) {
    .ambient-orb { opacity: .8; }
    .orb-1 { left: -2rem; } .orb-2 { right: -2rem; } .orb-3 { left: 10%; } .orb-4 { right: -1rem; }
}

/* İçerik ortam arka planının üstünde durur */
/* main/footer'a z-index VERİLMEZ: verilirse kendi yığın bağlamı oluşur ve içindeki modallar footer'ın altında kalırdı */
.page-main, footer { position: relative; }
.page-main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

/* ---------- TEMA DÜĞMESİ (sol altta sabit; güneş/ay dönerek çapraz solar) ---------- */

/* ---------- ANİMASYON KÜTÜPHANESİ ---------- */
@keyframes esFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes esFadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes esFadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes esFadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes esFadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes esScaleIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes esHeartbeat { 0%, 28%, 100% { transform: scale(1); } 14%, 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
@keyframes esBounce { 0%, 20%, 53%, 80%, 100% { transform: translateY(0); } 40%, 43% { transform: translateY(-10px); } 70% { transform: translateY(-5px); } 90% { transform: translateY(-2px); } }
.animate-fade-in { animation: esFadeIn .6s ease-out both; }
.animate-fade-in-up { animation: esFadeInUp .6s ease-out both; }
.animate-fade-in-down { animation: esFadeInDown .6s ease-out both; }
.animate-fade-in-left { animation: esFadeInLeft .6s ease-out both; }
.animate-fade-in-right { animation: esFadeInRight .6s ease-out both; }
.animate-scale-in { animation: esScaleIn .6s ease-out both; }
.animate-heartbeat { animation: esHeartbeat 1.5s ease-in-out infinite; }
.animate-bounce { animation: esBounce 1s infinite; }
.animation-delay-100 { animation-delay: .1s; } .animation-delay-200 { animation-delay: .2s; }
.animation-delay-300 { animation-delay: .3s; } .animation-delay-500 { animation-delay: .5s; }
.animation-delay-700 { animation-delay: .7s; } .animation-delay-1000 { animation-delay: 1s; }
.stagger-children > * { animation: esFadeInUp .6s ease-out both; }
.stagger-children > *:nth-child(1) { animation-delay: .1s; } .stagger-children > *:nth-child(2) { animation-delay: .2s; }
.stagger-children > *:nth-child(3) { animation-delay: .3s; } .stagger-children > *:nth-child(4) { animation-delay: .4s; }
.stagger-children > *:nth-child(5) { animation-delay: .5s; } .stagger-children > *:nth-child(6) { animation-delay: .6s; }
.stagger-children > *:nth-child(7) { animation-delay: .7s; } .stagger-children > *:nth-child(8) { animation-delay: .8s; }

/* ---------- KAYDIRMADA BELİRME (js/core/reveal.js; tek paylaşımlı IntersectionObserver) ---------- */
.reveal {
    opacity: 0;
    transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
.reveal-up { transform: translate3d(0, 2.5rem, 0); }
.reveal-left { transform: translate3d(-2.5rem, 0, 0); }
.reveal-right { transform: translate3d(2.5rem, 0, 0); }
.reveal-scale { transform: scale(.94); }
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }
/* sekme/panel yeniden gösterilince panelin kendisi de yumuşakça belirir (js/core/reveal.js) */
.es-enter { animation: esFadeInUp .55s cubic-bezier(.22, 1, .36, 1) both; }

/* Bölüm başlığı çubukları, blokları görünür olunca ortadan büyür */
.title-bar-grow { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .35s; }
.is-visible .title-bar-grow, .title-bar-grow.is-visible { transform: scaleX(1); }

/* ---------- İÇ TASARIM DİYALOĞU (tarayıcının alert/confirm/prompt penceresi yerine; js/core/dialog.js) ---------- */
.dlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgb(0 0 0 / .70);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .25s ease;
}
.dlg-overlay.show { opacity: 1; }
.dlg-panel {
    width: 100%;
    max-width: 28rem;
    padding: 1.75rem;
    border-radius: 1.5rem;
    border: 1px solid rgb(255 255 255 / .15);
    background: linear-gradient(135deg, #111827, #030712, #000);
    color: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .6);
    transform: translateY(18px) scale(.96);
    opacity: 0;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.dlg-overlay.show .dlg-panel { transform: none; opacity: 1; }
.dlg-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    margin-bottom: 1rem;
    color: #fff;
    background: var(--chip-blue);
}
.dlg-chip.danger { background: var(--chip-red); }
.dlg-chip-mark { display: block; width: 54%; height: auto; }
.dlg-chip:not(.danger):not(:has(.dlg-chip-img)) { background: linear-gradient(135deg, var(--pg-brand), var(--pg-brand-bright)); box-shadow: 0 12px 28px -8px rgb(var(--pg-brand-rgb) / .9); }
.dlg-title { font-size: 1.125rem; font-weight: 600; margin-bottom: .5rem; }
.dlg-text { font-size: .9rem; opacity: .75; line-height: 1.6; margin-bottom: 1.25rem; white-space: pre-line; }
.dlg-input {
    width: 100%;
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 2px solid rgb(156 163 175 / .5);
    border-radius: 1rem;
    background: transparent;
    color: inherit;
    font-size: .95rem;
}
.dlg-input:focus { border-color: rgb(255 255 255 / .5); }
.dlg-textarea { min-height: 6.5rem; max-height: 60vh; resize: vertical; font-family: inherit; line-height: 1.5; }
.dlg-actions { display: flex; gap: .75rem; justify-content: flex-end; }
.dlg-btn {
    padding: .65rem 1.4rem;
    border-radius: .75rem;
    border: 2px solid rgb(255 255 255 / .25);
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}
.dlg-btn:hover { transform: scale(1.05); background: rgb(255 255 255 / .10); }
.dlg-btn.primary { background: rgb(255 255 255 / .92); color: #000; border-color: rgb(255 255 255 / .2); }
.dlg-btn.primary:hover { background: #fff; }
.dlg-btn.danger { background: rgb(239 68 68 / .9); color: #fff; border-color: rgb(239 68 68 / .3); }
.dlg-btn.danger:hover { background: #ef4444; }

/* Hareketi azaltmak isteyenler tek seferlik belirmeleri korur, sonsuz döngüleri kaybeder */
@media (prefers-reduced-motion: reduce) {
    .ambient-orb, .ambient-center span, .ambient-particle, .animate-heartbeat, .animate-bounce { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- ESKİ AMBIENT GLOW (artık kullanılmıyor; eski kalıntılar gizli) ---------- */
.ambient-glow { display: none; }

/* Kapalı <select> kutusu koyu/açık temayı alsa da açılan native liste tarayıcı varsayılanıyla (genelde beyaz)
   render olur; color-scheme (tema değişkeniyle) ve option zemini bunu düzeltir. */
select option {
    background: var(--option-bg);
    color: var(--white);
}

a { text-decoration: none; color: inherit; }


/* ---------- HEADER ---------- */
header {
    /* Üstte saydam, kaydırınca cam (bkz. js/core/theme.js: 50px sonra .scrolled) */
    background: transparent;
    border-bottom: 1px solid var(--border-strong); /* alt çizgi HER ZAMAN görünür (soldaki çubuğun çizgisiyle bütünlük) */
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
    padding: 11px 5%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}
header.scrolled {
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    backdrop-filter: blur(28px) saturate(1.5);
    border-bottom-color: var(--border-strong);
    box-shadow: 0 14px 36px -18px var(--shadow);
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--white);
    transition: color .2s;
}
.logo:hover { transform: none; }   /* logoda büyüme animasyonu yok */
.logo span { color: var(--gold); }

nav ul {
    display: flex;
    gap: 6px;
    list-style: none;
}

nav ul li a {
    display: inline-block;
    font-size: .95rem;
    font-weight: 500;
    color: var(--white);
    padding: .5rem 1rem;
    border-radius: .5rem;
}

nav ul li a:hover {
    color: var(--gray);
    background: var(--hover-bg);
}
nav ul li a.active {
    background: var(--hover-bg);
}

.nav-buttons { display: flex; gap: 10px; align-items: center; position: relative; justify-self: end; }

.header-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 2px;
}

.icon-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gray);
    cursor: pointer;
    transition: color .2s, background .2s, transform .2s;
    position: relative;
}
.icon-btn:hover { color: var(--white); background: var(--hover-bg); transform: scale(1.1); }

/* ---------- BUTTONS ---------- */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: .75rem 1.6rem;
    border-radius: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    text-align: center;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    transition: all .3s ease;
}
/* hover'da soldan sağa geçen ışık dalgası */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgb(var(--ink-rgb) / .16) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}
.btn:hover { transform: scale(1.05); box-shadow: 0 25px 50px -12px var(--shadow); }
.btn:hover::after { transform: translateX(120%); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; font-weight: 600; border-radius: .75rem; }

/* Ana düğme: koyuda beyaz, açıkta koyu gri */
.btn-gold {
    background: rgb(var(--accent-rgb) / .9);
    color: var(--on-accent);
    border-color: rgb(var(--accent-rgb) / .2);
}
.btn-gold:hover { background: rgb(var(--accent-rgb)); }

.btn-outline {
    background: transparent;
    border: 2px solid rgb(var(--ink-rgb) / .4);
    color: var(--white);
}
.btn-sm.btn-outline { border-width: 1.5px; }
.btn-outline:hover { background: var(--hover-bg); border-color: rgb(var(--ink-rgb) / .7); color: var(--white); }

.btn-outline-danger {
    background: transparent;
    border: 2px solid #dc3545;
    color: #ff8a93;
}
.btn-sm.btn-outline-danger { border-width: 1.5px; }

/* ---------- HEADER DROPDOWN PANELS (Arama / Bildirim) ---------- */
.search-panel, .notif-panel {
    position: absolute;
    top: 56px;
    right: 5%;
    width: 460px;
    max-height: 75vh;
    overflow-y: auto;
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .5);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 150;
}
.search-panel.show, .notif-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.search-panel-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--gray);
}
.search-panel-input input {
    background: none;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 14px;
    width: 100%;
}
.search-empty { color: var(--gray); font-size: 13px; padding: 10px 2px; text-align: center; }

.notif-empty { color: var(--gray); font-size: 14px; text-align: center; padding: 10px 4px; }

/* ---------- SPOTLIGHT ARAMA ---------- */
.spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgb(var(--overlay-rgb) / .65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    z-index: 3000;
    opacity: 0;
    transition: opacity .2s ease;
}
.spotlight-overlay.open { display: flex; }
.spotlight-overlay.show { opacity: 1; }

.spotlight-box {
    width: 100%;
    max-width: 720px;
    margin: 0 20px;
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgb(var(--shadow-rgb) / .6);
    overflow: hidden;
    transform: translateY(-16px) scale(.97);
    opacity: 0;
    transition: transform .25s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
}
.spotlight-overlay.show .spotlight-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.spotlight-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--gray);
}
.spotlight-input-wrap input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 17px;
}
.spotlight-esc {
    font-size: 11px;
    color: var(--gray);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
}
.spotlight-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
}
.spotlight-section { margin-bottom: 6px; }
.spotlight-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--gold);
    padding: 8px 10px 4px;
}
.spotlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 9px;
    color: var(--white);
    font-size: 14px;
    transition: background .15s;
}
.spotlight-item:hover { background: rgb(var(--accent-rgb) / .08); }
.spotlight-item small { display: block; color: var(--gray); font-size: 12px; margin-top: 1px; }
.spotlight-item-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.spotlight-item-icon { font-size: 16px; flex-shrink: 0; }
.spotlight-loading, .spotlight-empty {
    color: var(--gray);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* ---------- HUB SAYFASI LAYOUT ---------- */
.hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;   /* sağ panel (üyeler/kadro) geniş: eskiden 280px'ti */
    gap: 30px;
    align-items: start;
}
@media (max-width: 900px) {
    .hub-layout { grid-template-columns: 1fr; }
}

.hub-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.hub-settings-link {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 3;
    font-size: 12px;
    color: var(--gray);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 10px;
    transition: color .2s, border-color .2s;
}
.hub-settings-link:hover { color: var(--gold); border-color: var(--gold); }

.hub-members-panel {
    background: none;
    border: none;
    padding: 0;
}
.hub-members-panel h4 {
    font-size: 13px;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

/* ---------- MESAJLAR (DM) ---------- */
.messages-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    height: 65vh;
    min-height: 420px;
}
.messages-friend-list {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-y: auto;
    padding: 8px;
}
.messages-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
    transition: background .15s;
}
.messages-friend-item:hover { background: rgb(var(--accent-rgb) / .06); }
.messages-friend-item.active { background: rgb(var(--accent-rgb) / .12); color: var(--gold); }
.messages-friend-item img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.messages-thread {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.messages-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.messages-thread-head img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.messages-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.msg-bubble {
    align-self: flex-start;
    max-width: 70%;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 16px 16px 16px 4px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--white);
    position: relative;
}
.msg-bubble.mine {
    align-self: flex-end;
    background: rgb(var(--accent-rgb) / .14);
    border-color: rgb(var(--accent-rgb) / .3);
    border-radius: 16px 16px 4px 16px;
}
.msg-time {
    display: block;
    font-size: 10px;
    color: var(--gray);
    margin-top: 4px;
    text-align: right;
}
.messages-input-row {
    display: flex;
    gap: 10px;
    padding: 14px;
    border-top: 1px solid var(--border);
}
.messages-input-row input {
    flex: 1;
    padding: 10px 14px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 20px;
    color: var(--white);
    font-size: 14px;
    outline: none;
}
.messages-input-row input:focus { border-color: var(--gold); }

@media (max-width: 700px) {
    .messages-layout { grid-template-columns: 1fr; height: auto; }
    .messages-friend-list { max-height: 160px; }
    .messages-thread { height: 60vh; }
}

.icon-btn-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 15px; height: 15px;
    border-radius: 50%;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    box-shadow: 0 0 0 2px rgb(var(--solid-rgb) / .85);
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.notif-item-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb) / .1);
    border: 1px solid var(--border);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notif-item-text { font-size: 13px; color: var(--white); line-height: 1.5; }
.notif-item-text strong { color: var(--gold-light); }
.notif-item-actions { display: flex; gap: 8px; margin-top: 8px; }
.notif-item-actions .btn-sm { padding: 5px 12px; font-size: 12px; }

/* ---------- KULLANICI MENÜSÜ (dropdown) ---------- */
.user-menu { position: relative; }
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: 20px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
}
.user-menu-trigger:hover { border-color: var(--gold); background: rgb(var(--accent-rgb) / .06); }
.user-menu-trigger svg { color: var(--gray); transition: transform .2s; }
.user-menu.open .user-menu-trigger svg { transform: rotate(180deg); }
.user-menu-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.user-menu-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    min-width: 200px;
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .5);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 150;
}
.user-menu.open .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.user-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    transition: background .15s, color .15s;
}
.user-menu-dropdown a svg { flex-shrink: 0; color: var(--gray); transition: color .15s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.user-menu-dropdown a:hover { background: rgb(var(--accent-rgb) / .08); color: var(--gold); }
.user-menu-dropdown a:hover svg { color: currentColor; transform: scale(1.12); }
.user-menu-admin svg, .user-menu-logout:hover svg { color: currentColor !important; }
.user-menu-divider { height: 1px; background: var(--border); margin: 4px 3px; }
.user-menu-logout:hover { color: #ff8a93 !important; background: rgba(229,72,77,.08) !important; }
.user-menu-admin { color: #ff5c5c !important; font-weight: 600; }
.user-menu-admin:hover { background: rgba(255,92,92,.1) !important; }

/* ---------- PROFİL SAYFASI ---------- */
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.profile-avatar {
    width: 110px; height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
}
.profile-social-row {
    display: flex;
    gap: 8px;
}
.profile-social-icon {
    width: 30px; height: 30px;
    border-radius: 12px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--white);
    transition: border-color .2s, transform .2s;
}
.profile-social-icon:hover { border-color: var(--gold); transform: translateY(-2px); }

/* ---------- BOŞ DURUM KUTUSU (minimalist, ortalanmış metin) ---------- */
.empty-state-box {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    color: var(--gray);
    font-size: 13px;
}
.empty-state-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: rgb(var(--ink-rgb) / .08); color: var(--gray); }

/* ---------- HAREKET GÜNLÜĞÜ (takım/profil "Hareketler" sekmesi) ---------- */
.activity-log { display: flex; flex-direction: column; }
.activity-log-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
}
.activity-log-item:last-child { border-bottom: none; }
.activity-log-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    font-size: 11px;
    flex-shrink: 0;
}
.activity-log-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.activity-log-body p { margin: 0; font-size: 13px; color: var(--white); }
.activity-log-date { font-size: 11px; color: var(--gray); white-space: nowrap; flex-shrink: 0; }

@media (max-width: 768px) {
    nav ul { display: none; }
    .search-panel, .notif-panel { right: 4%; width: 88vw; }
}

/* ---------- HERO SLIDER ---------- */
.hero-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: max(1600px, 83.4vw);   /* tarayıcıyı uzaklaştırınca (ör. %80) görünüm alanı büyür; üst sınır da onunla büyür, slider ufalmaz */
    margin: 0 auto;
    /* Kenarlık ve köşe yuvarlaması YOK: görsel kenarlarda çizgiyle değil, yumuşak ve bulanık bir geçişle sayfa zeminine karışır
       (bkz. .slides-track maskesi ve kenar bulanıklığı). */
    background: transparent;
}
/* 1600x800 (2:1): admin panelinde yüklenen görsel bu oranda kırpıldığı için kutuya tam oturur, basık görünmez */
.slides-track {
    position: relative;
    aspect-ratio: 2 / 1;
    /* dört kenarda da görsel kademeli olarak şeffaflaşır; hiçbir kenarda keskin çizgi kalmaz */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 7%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
/* kenarlara doğru artan bulanıklık: keskin bir kesik yerine görselin kendisi eriyip odaktan çıkar.
   PERFORMANS: eskiden .slides-track::before/::after üzerinde backdrop-filter vardı; arkasındaki hareketli slayt + arka plan ışıkları her karede
   yeniden bulanıklaştırıldığı için ana sayfa kayarken kasıyordu. Şimdi her slaytın kendi bulanık kopyası (.slide::before) kenar maskesiyle
   eklenir: görünüm aynı, ama bulanık kopya bir kez çizilip bellekte tutulur (filter içeriği değişmedikçe yeniden hesaplanmaz). */
.slide::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(18px);
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 15%, transparent 85%, #000 100%), linear-gradient(to bottom, transparent 66%, #000 100%);
    mask-image: linear-gradient(to right, #000 0%, transparent 15%, transparent 85%, #000 100%), linear-gradient(to bottom, transparent 66%, #000 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
    pointer-events: none;
}
.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity .7s ease, transform .9s ease;
    pointer-events: none;
    background-size: cover;
    background-position: center;
}
.slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.slide::after {
    content: '';
    position: absolute;
    inset: 0;
    /* karartma temadan bağımsız SİYAH kalır: açık modda slider'ın çevresi beyazlaşmaz */
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .4));
}
.slide-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 0 24px;
}
.slide.has-image .slide-content h1, .slide.has-image .slide-content h1 span { color: #fff; }
.slide.has-image .slide-content p { color: #e5e7eb; }
.slide.has-image .slide-tag { color: #d1d5db; }
.slide-tag {
    display: inline-block;
    color: var(--gold);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.slide-content h1 {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 16px;
}
.slide-content h1 span { color: var(--gold); }
.slide-content p {
    color: var(--gray);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto;
}

.slider-nav {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 18px;
    z-index: 5;
}

.slider-arrow svg, .carousel-arrow svg { width: 18px; height: 18px; display: block; }
.slider-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgb(var(--solid-rgb) / .6);
    border: 1px solid var(--border);
    color: var(--white);
    font-size: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
    flex-shrink: 0;
}
.slider-arrow:hover { border-color: var(--gold); background: rgb(var(--accent-rgb) / .15); transform: scale(1.06); }
.slider-arrow:active { transform: scale(.94); }

.slider-dots {
    display: flex;
    gap: 10px;
}
.dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgb(var(--ink-rgb) / .3);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.dot.active { background: var(--gold); transform: scale(1.3); }

@media (max-width: 768px) {
    .slides-track { aspect-ratio: auto; height: 560px; }
    .slide-content h1 { font-size: 32px; }
    .slider-arrow { width: 36px; height: 36px; font-size: 19px; }
}

/* ---------- OYUNLAR CAROUSEL (anasayfa, slider'ın altında ayrı bölüm) ---------- */
.games-section {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding-bottom: 50px;
}
.games-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 5%;
}
.games-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 6px 2px 16px;
    scrollbar-width: none;
}
.games-track::-webkit-scrollbar { display: none; }

.game-card {
    flex: 0 0 200px;
    height: 300px;
    border-radius: 24px;
    position: relative;
    display: block;
    /* Kenarlık ve zemin rengi YOK: kapak görseli kutunun tam kenarına kadar uzanır (1px kenarlık halkasında oyunun zemin rengi görünüyordu).
       İnce çizgi, görselin üstündeki ::after katmanında çizilir; zemin gradyanı yalnızca görsel yüklenemezse (.no-art) kullanılır. */
    border: 0;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    cursor: pointer;
}
.game-card.no-art { background: var(--tile-bg); }
.game-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgb(var(--ink-rgb) / .08) 0%, rgba(0,0,0,.22) 100%);
    box-shadow: inset 0 0 0 1px var(--border);
    z-index: 1;
    pointer-events: none;
}
.game-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 36px rgb(var(--shadow-rgb) / .5);
}
.game-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
    transform: scale(1.05); /* SVG kapaklarındaki saydam kenar payı kutu renginin görünmesine yol açıyordu */
    transition: transform .3s ease, filter .3s ease;
    filter: brightness(1.08) saturate(1.08);
}
.game-card:hover .game-card-image {
    transform: scale(1.1);
    filter: brightness(1.14) saturate(1.12);
}
.game-card-name {
    position: relative;
    z-index: 2;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    letter-spacing: .3px;
}

.carousel-arrow {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    color: var(--white);
    font-size: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .15s;
}
.carousel-arrow:hover { border-color: var(--gold); background: rgb(var(--accent-rgb) / .12); transform: scale(1.06); }
.carousel-arrow:active { transform: scale(.94); }

@media (max-width: 768px) {
    .game-card { flex-basis: 150px; height: 230px; }
    .game-card-name { font-size: 15px; }
    .carousel-arrow { width: 34px; height: 34px; font-size: 19px; }
}

/* ---------- CONTAINER / GRID ---------- */
.container { max-width: none; margin: 0 auto; padding: 60px 5%; }   /* sabit px üst sınır yok: yakınlaştırma/uzaklaştırmada sayfa genişliğe uyar */
.container-wide { max-width: none; }
/* metin ağırlıklı sayfalar (gizlilik, sözleşme, SSS, iletişim) okunabilirlik için dar kalır */
.container-narrow { max-width: 820px; }

.section-title {
    position: relative;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 30px;
    padding-bottom: 1rem;
}

.section-title::after, .section-header h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 5rem;
    height: .25rem;
    border-radius: 9999px;
    background: rgb(var(--accent-rgb) / .6);
    transform-origin: left;
    animation: esBarGrow 1.1s cubic-bezier(.22, 1, .36, 1) .35s both;
}
@keyframes esBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* ---------- TOURNAMENT CARD ---------- */
.card {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--border-strong);
    box-shadow: 0 25px 50px -12px var(--shadow);
}

.card-banner {
    height: 150px;
    background:
        radial-gradient(circle at 30% 30%, rgb(var(--accent-rgb) / .18), transparent 60%),
        linear-gradient(135deg, rgb(var(--ink-rgb) / .10), rgb(var(--ink-rgb) / .03));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.card-body { padding: 18px; }
.card-body h3 { font-size: 18px; margin-bottom: 8px; }
.card-body p { color: var(--gray); font-size: 14px; margin-bottom: 14px; }

.badge {
    display: inline-block;
    background: var(--hover-bg);
    color: var(--white);
    border: 1px solid var(--border-strong);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.prize { color: var(--gold-light); font-weight: 700; }
.badge-manager { background: rgb(var(--accent-rgb) / .18); border-color: rgb(var(--accent-rgb) / .5); color: var(--gold-light); font-weight: 700; }

/* ---------- ONAY ROZETİ (popüler hub / onaylı takım) ---------- */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);   /* onay rozeti: mor zemin */
    box-shadow: 0 0 8px rgb(124 58 237 / .55);
    flex-shrink: 0;
    vertical-align: middle;
}
.verified-badge { color: #fff; }
.verified-badge svg { width: 60%; height: 60%; display: block; }
.verified-badge-lg { width: 24px; height: 24px; }
/* popüler hub simgesi: sitede TEK simge — altın yıldız (sol menü, hub listeleri, hub sayfası, profil, ana sayfa) */
.verified-badge-star { background: linear-gradient(135deg, #ffe08a, #f5c542 55%, #d99a10); color: #2a1d00; box-shadow: 0 0 9px rgb(245 197 66 / .5); }
.verified-badge-star svg { width: 64%; height: 64%; }

/* ---------- MİNİ TURNUVA KARTLARI (anasayfa) ---------- */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.mini-card {
    display: block;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}
.mini-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.mini-card-thumb {
    aspect-ratio: 784 / 441;   /* kart görseli 784x441 (16:9): kutu görsele göre boyutlanır, kırpılmaz */
    position: relative;
    background:
        radial-gradient(circle at 30% 30%, rgb(var(--accent-rgb) / .18), transparent 60%),
        linear-gradient(135deg, rgb(var(--ink-rgb) / .10), rgb(var(--ink-rgb) / .03));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
}
.mini-card-body { padding: 11px 13px 13px; }
.mini-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.mini-card-meta-row .mini-card-game { margin-bottom: 0; }
.mini-card-game {
    display: block;
    font-size: 11px;
    color: var(--gray);
    margin-bottom: 8px;
}
.mini-card-team-size {
    font-size: 11px;
    color: var(--gray);
    font-weight: 600;
    flex-shrink: 0;
}
.mini-card-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 8px;
}
.mini-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.mini-card-date { font-size: 11px; color: var(--gray); }
.mini-card-prize { font-size: 11px; color: var(--gold-light); font-weight: 600; }

.mini-card-slots {
    height: 4px;
    background: rgb(var(--ink-rgb) / .06);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}
.mini-card-slots-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 4px;
}

.status-dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 10px; height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgb(var(--shadow-rgb) / .4);
}
.status-dot.status-green { background: #2ecc71; animation: dotPulse 1.4s ease-in-out infinite; }
.status-dot.status-red { background: #e5484d; animation: dotPulse 1.4s ease-in-out infinite; }
.status-dot.status-gray { background: #777; }
@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}
.mini-card-body h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.mini-card-title-inner {
    display: inline-block;
    white-space: nowrap;
}
.mini-card:hover .mini-card-title-inner.overflowing {
    animation: marqueeScroll 5s linear infinite;
}
@keyframes marqueeScroll {
    0%, 15% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
}

.hub-icon-badge {
    position: absolute;
    top: 8px; left: 8px;
    width: 24px; height: 24px;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid rgb(var(--ink-rgb) / .25);
    box-shadow: 0 2px 8px rgb(var(--shadow-rgb) / .5);
}
.hub-icon-badge-fallback, .game-icon-badge-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--bg-rgb) / .75);
    color: var(--gold-light);
    backdrop-filter: blur(2px);
}
.game-icon-badge {
    position: absolute;
    bottom: 8px; left: 8px;
    width: 24px; height: 24px;
    border-radius: 7px;
    object-fit: cover;
    border: 1px solid rgb(var(--ink-rgb) / .25);
    box-shadow: 0 2px 8px rgb(var(--shadow-rgb) / .5);
}

.mini-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .mini-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mini-grid-4 { grid-template-columns: 1fr; } }

.mini-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .mini-grid-6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .mini-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .mini-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mini-card-name-row { display: flex; align-items: center; gap: 6px; }
.mini-card-name-row h4 { flex: 1; min-width: 0; }

/* ---------- BÖLÜM BAŞLIĞI (section-header) ---------- */
.section-header { margin-bottom: 26px; display: flex; align-items: baseline; gap: 10px; }
.section-eyebrow {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray);
    letter-spacing: .08em;
}
.section-eyebrow::after { content: '/'; margin-left: 8px; color: var(--border-strong); }
.section-header h2 {
    position: relative;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding-bottom: .9rem;
    color: var(--white);
}

/* ---------- FORMS (login / register) ---------- */
.auth-wrapper {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-box {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-strong);
    border-radius: 1.5rem;
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px var(--shadow);
}

.auth-box h2 {
    text-align: center;
    margin-bottom: 6px;
    font-size: 24px;
}
.auth-box .sub {
    text-align: center;
    color: var(--gray);
    margin-bottom: 26px;
    font-size: 14px;
}

.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--gold-light);
    font-weight: 600;
}
.form-group input {
    width: 100%;
    padding: .85rem 1.1rem;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 1rem;
    color: var(--white);
    font-size: .95rem;
    transition: all .5s ease;
}
.form-group input:hover { border-color: var(--border-strong); }
.form-group input:focus {
    outline: none;
    border-color: var(--gold);
}

.auth-box .btn { width: 100%; margin-top: 8px; }
.modal-box .btn { width: 100%; margin-top: 8px; }

.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: var(--gray);
}
.auth-footer a { color: var(--gold); font-weight: 600; }

.alert {
    padding: 12px 16px;
    border-radius: 1rem;
    margin-bottom: 18px;
    font-size: .9rem;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}
.alert-error { background: rgb(239 68 68 / .20); border: 1px solid rgb(239 68 68 / .30); color: #fecaca; }
.alert-success { background: rgb(34 197 94 / .20); border: 1px solid rgb(34 197 94 / .30); color: #bbf7d0; }

/* ---------- DASHBOARD ---------- */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 30px;
}
.dash-profile {
    display: flex;
    align-items: center;
    gap: 14px;
}
.dash-profile img {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    object-fit: cover;
}
.stat-box {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 18px 22px;
    text-align: center;
    min-width: 140px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.stat-box:hover { transform: scale(1.02); box-shadow: 0 25px 50px -12px var(--shadow); }
.stat-box .num { font-size: 26px; font-weight: 700; color: var(--gold); }
.stat-box .label { font-size: 13px; color: var(--gray); }

table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
}
th { color: var(--gray); font-weight: 600; }

/* ---------- FOOTER ---------- */
footer {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--border);
    padding: 36px 24px 26px;
    text-align: center;
}
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}
.footer-links a {
    color: var(--gray);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}
.footer-links a:hover { color: var(--gold); }
.footer-dot { color: var(--border-strong); font-size: 12px; }
.footer-divider {
    max-width: 700px;
    margin: 0 auto 20px;
    height: 1px;
    background: var(--border);
}
.footer-copy {
    color: var(--gray);
    font-size: 13px;
}

/* ---------- TOAST (sağ üst bildirim) ---------- */
#toast-container {
    position: fixed;
    top: calc(var(--header-vis, var(--header-h, 64px)) + 14px);
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(460px, calc(100vw - 40px));   /* geniş: uzun mesajlar da rahat sığsın (dar toast istenmiyor) */
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--panel-solid);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    padding: 14px 16px;
    box-shadow: 0 25px 50px -12px var(--shadow);
    opacity: 0;
    transform: translateY(-16px) scale(.97);
    transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-error { background: rgb(239 68 68 / .20); border-color: rgb(239 68 68 / .30); }
.toast-success { background: rgb(34 197 94 / .20); border-color: rgb(34 197 94 / .30); }
.toast-info { background: var(--panel-solid); }
.toast-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--hover-bg);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.toast-error .toast-icon { background: rgb(239 68 68 / .25); color: #fecaca; }
.toast-success .toast-icon { background: rgb(34 197 94 / .25); color: #bbf7d0; }
.toast-text { font-size: .9rem; color: var(--white); flex: 1; padding-top: 2px; }
.toast-error .toast-text { color: #fecaca; }
.toast-success .toast-text { color: #bbf7d0; }
.toast-close { cursor: pointer; color: var(--gray); font-size: 18px; line-height: 1; }
.toast-close:hover { color: var(--white); }

.input-error { border-color: #dc3545 !important; box-shadow: 0 0 0 1px rgba(220,53,69,.3); }

/* ---------- PROGRESS STEPS (turnuva detay) ---------- */
.progress-steps {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 30px;
    padding-bottom: 6px;
}
.step {
    flex: 1;
    min-width: 210px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color .3s, background .3s;
}
.step.active {
    border-color: var(--gold);
    background: rgb(var(--accent-rgb) / .06);
    box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / .15);
}
.step-dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 2px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-accent);
    transition: background .3s, border-color .3s;
}
.step.done .step-dot { background: var(--gold); border-color: var(--gold); }
.step.active .step-dot {
    border-color: var(--gold);
    animation: step-pulse 1.8s ease-in-out infinite;
}
@keyframes step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .45); }
    50% { box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0); }
}
.step-body { min-width: 0; }
.step-title { font-weight: 700; font-size: 13.5px; }
.step-date { font-size: 11.5px; color: var(--gray); margin-top: 2px; }
.step-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray);
    white-space: nowrap;
    flex-shrink: 0;
}
.step.active .step-timer { color: var(--gold-light); }
.step.done .step-timer { opacity: .5; }

/* ---------- TURNUVA DETAY: GENEL BAKIŞ ---------- */
.overview-layout { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; justify-content: end; }
.overview-side { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.overview-stat-boxes { display: flex; flex-direction: column; gap: 10px; width: 360px; flex-shrink: 0; }
.overview-info-box {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 8px;
    display: flex;
}
.overview-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 0 8px;
}
.overview-stat:not(:last-child) { border-right: 1px solid var(--border); }
.overview-stat-label { font-size: 10.5px; color: var(--gray); text-transform: uppercase; letter-spacing: .3px; }
.overview-stat-value { font-size: 12.5px; font-weight: 600; color: var(--white); line-height: 1.25; word-break: break-word; }
a.overview-stat-link { text-decoration: none; }
a.overview-stat-link:hover { color: var(--gold-light); text-decoration: underline; }

.prize-pool-box {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    min-width: 170px;
    flex-shrink: 0;
}
.prize-pool-box h5 { margin: 0 0 10px; font-size: 10.5px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .3px; }
.prize-pool-list { display: flex; flex-direction: column; gap: 7px; }
.prize-pool-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 12.5px; }
.prize-pool-rank { color: var(--gray); font-weight: 600; }
.prize-pool-value { color: var(--gold-light); font-weight: 600; text-align: right; }

@media (max-width: 700px) {
    .overview-layout { grid-template-columns: 1fr; }
    .overview-side { flex-direction: column; }
    .overview-stat-boxes { width: 100%; }
}

/* ---------- TABS ---------- */
.tabs {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 26px;
}
.tab {
    padding: 10px 2px 14px;
    font-weight: 600;
    color: var(--gray);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Daha minimalist/kompakt sekme görünümü (profil sayfası gibi dar alanlarda) */
.tabs-minimal { gap: 20px; margin-bottom: 20px; }
.tabs-minimal .tab { padding: 6px 2px 10px; font-size: 13px; font-weight: 600; border-bottom-width: 2px; }
/* dar ekranda yatay sekmeler sayfayı taşırmaz: kendi içinde kayar (çubuk gizli) */
@media (max-width: 720px) {
    .tabs:not(.tabs-vertical) { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .tabs:not(.tabs-vertical)::-webkit-scrollbar { display: none; }
    .tabs:not(.tabs-vertical) .tab { white-space: nowrap; flex-shrink: 0; }
}

/* ---------- DETAIL LAYOUT ---------- */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}
/* Genel Bakış hariç diğer sekmeler (Fikstür/Takımlar/Kurallar), geniş container-wide alanda
   boş boşluk bırakmasın diye minimalist bir genişlikle sınırlanır. Genel Bakış'taki sağ kutu ise
   tam sağ kenara (üstteki adım şeması/sekmelerle aynı hizaya) yaslanabilsin diye tam genişlik kullanır. */
.tab-content-narrow { max-width: 880px; }
.admin-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-name { font-size: 13px; font-weight: 600; }
.admin-role { font-size: 11px; color: var(--gray); }

/* ---------- LOGIN MODAL ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(var(--overlay-rgb) / .70);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    opacity: 0;
    transition: opacity .25s ease;
}
.modal-overlay.open { display: flex; }
.modal-overlay.open.show { opacity: 1; }

.modal-box {
    position: relative;
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-strong);
    border-radius: 1.5rem;
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 25px 50px -12px var(--shadow);
    transform: translateY(18px) scale(.96);
    opacity: 0;
    transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.modal-overlay.show .modal-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.modal-close {
    position: absolute;
    top: 14px; right: 18px;
    font-size: 24px;
    color: var(--gray);
    cursor: pointer;
    line-height: 1;
}
.modal-close:hover { color: var(--gold); }
.modal-box h2 { text-align: center; margin-bottom: 6px; font-size: 24px; }
.modal-box .sub { text-align: center; color: var(--gray); margin-bottom: 26px; font-size: 14px; }

/* ---------- PAGE HERO (Turnuvalar, vb. iç sayfa başlıkları) ---------- */
.page-hero {
    position: relative;
    text-align: center;
    padding: 64px 5% 52px;
}
.page-hero-content { position: relative; z-index: 2; }
/* başlığın altındaki çubuk (hero çubuğu: w-24 h-1, 300 ms gecikmeyle belirir) */
.page-hero h1::after {
    content: '';
    display: block;
    width: 6rem;
    height: .25rem;
    margin: 1rem auto 0;
    border-radius: 9999px;
    background: rgb(var(--accent-rgb) / .6);
    animation: esFadeIn .6s ease-out .3s both;
}
.page-hero .search-bar, .page-hero .status-filter-row { animation: esFadeInUp .6s ease-out .5s both; }
.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    margin-bottom: 1rem;
    animation: esFadeInUp .6s ease-out both;
}
.page-hero p {
    color: var(--gray);
    font-size: 1.05rem;
    margin-bottom: 26px;
    animation: esFadeInUp .6s ease-out .3s both;
}
.page-hero-wave {
    display: none;
}

.search-bar {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}
.search-bar input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 12px 16px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
}
.search-bar input[type="text"]:focus { outline: none; border-color: var(--gold); }
.search-bar select {
    padding: 12px 14px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
    min-width: 160px;
}

/* ---------- CUSTOM SELECT (native <select> yerine, Mac/Windows menüsü göstermez) ---------- */
.custom-select {
    position: relative;
    min-width: 200px;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .2s;
    user-select: none;
}
.custom-select-trigger svg { color: var(--gray); transition: transform .2s; flex-shrink: 0; }
.custom-select:hover .custom-select-trigger { border-color: var(--gold); }
.custom-select.open .custom-select-trigger { border-color: var(--gold); }
.custom-select.open .custom-select-trigger svg { transform: rotate(180deg); }

.custom-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--option-bg); /* tamamen opak: arkadaki metin/hap/kart görünmez */
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgb(var(--shadow-rgb) / .5);
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 100;
}
.custom-select.open { z-index: 100; }
/* açık dropdown'ı taşıyan üst öğeler, sonraki kardeşlerin (dönüştürülmüş/animasyonlu kartlar, hapler) üstüne çıkar */
.select-raise { z-index: 90; }
.select-raise-rel { position: relative; }
.custom-select.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.custom-select-option {
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--white);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.custom-select-option:hover { background: rgb(var(--accent-rgb) / .08); color: var(--gold-light); }
.custom-select-option.is-disabled { display: none; }
.custom-select-option.selected { background: rgb(var(--accent-rgb) / .14); color: var(--gold); font-weight: 600; }

/* ---------- BRACKET ---------- */
.bracket-wrap {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    padding-bottom: 14px;
}
.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 24px;
    min-width: 200px;
}
.bracket-round h5 {
    font-size: 13px;
    color: var(--gold-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.bracket-match {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.bracket-slot {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.bracket-slot:last-child { border-bottom: none; }
.bracket-slot.empty { color: var(--gray); font-weight: 400; font-style: italic; }

/* ---------- FİKSTÜR: bağlantı çizgili bracket ağacı (turnuva ayarları önizlemesiyle aynı mantık) ---------- */
/* Grid item'ların varsayılan min-width:auto'su, içindeki büyük sabit genişlikli bracket'ın
   (yüksek slot sayısında) tüm sayfayı yatayda genişletmesine yol açar; min-width:0 bunu keser,
   böylece taşma yalnızca aşağıdaki kutu içinde kaydırma olarak kalır. */
.detail-layout > div { min-width: 0; }
.fx-bracket-scroll {
    overflow-x: auto;
    max-width: 100%;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 16px 16px;
}
.fx-bracket { position: relative; }
.fx-round-label {
    position: absolute;
    top: 0;
    text-align: center;
    padding: 0 4px;
}
.fx-round-label strong { display: block; font-size: 12.5px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .4px; }
.fx-round-label span { display: block; font-size: 11px; color: var(--gray); margin-top: 2px; }
.fx-header-divider {
    position: absolute;
    left: 0;
    height: 1px;
    background: rgb(var(--ink-rgb) / .16);
}
.fx-match {
    position: absolute;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.fx-slot {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    height: 50%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fx-slot:last-child { border-bottom: none; }
.fx-slot.empty { color: var(--gray); font-weight: 400; font-style: italic; }
.fx-lines {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}
.fx-lines path {
    fill: none;
    stroke: rgb(var(--accent-rgb) / .45);
    stroke-width: 1.5;
}

/* ---------- TURNUVA BANNER (detay sayfası üstü) ---------- */
.tournament-banner {
    height: 260px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / .22), transparent 55%),
        linear-gradient(135deg, rgb(var(--ink-rgb) / .10), rgb(var(--ink-rgb) / .03));
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: 6px;
}
.tournament-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background:
        radial-gradient(ellipse at center, transparent 38%, rgb(0 0 0 / .38) 78%, rgb(0 0 0 / .7) 100%),
        linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .82) 100%);
}
.tournament-banner-content {
    position: relative;
    z-index: 2;
    margin-top: -86px;
    padding: 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
.tournament-banner-cta { flex-shrink: 0; padding-bottom: 4px; }
.tournament-meta-line {
    color: var(--gray);
    font-size: 13px;
    margin: 0;
}

@media (max-width: 700px) {
    .tournament-banner { height: 200px; }
    .tournament-banner-content { margin-top: -64px; padding: 0 16px; }
}

.game-page-banner { height: max(460px, 24vw); }
.game-page-banner-content { margin-top: -220px; }
@media (max-width: 700px) {
    .game-page-banner { height: 380px; }
    .game-page-banner-content { margin-top: -190px; }
}

/* Hub ve turnuva sayfası banner'ı AYNI boyut ve biçimdedir: 1376x480 oranında (yüklenen görsel kırpılmadan oturur), kenarları NET çizgili yuvarlatılmış köşeli
   (bulanıklaşıp erime kaldırıldı). Başlık/bilgiler bannerın üstündedir; karartma temadan bağımsız siyahtır. */
.hub-page-banner {
    width: 100%;                    /* açık genişlik: max-height, en-boy oranı üzerinden genişliği daraltamaz (uzaklaştırınca banner eksik görünüyordu) */
    height: auto;
    aspect-ratio: 1376 / 480;
    min-height: 280px;
    max-width: 1720px;   /* yüksekliği sınırlamak yerine geniş ekranda genişlik sınırlanır: görsel üst/alttan kırpılmaz */
    margin-inline: auto;
    border-radius: 22px;            /* kenarlar net çizgili: maske/bulanıklık yok (eskiden kenarlara doğru bulanıklaşıp eriyordu) */
    border: 1px solid var(--border-strong);
    overflow: hidden;
    box-shadow: 0 30px 60px -40px rgb(0 0 0 / .85);
}
.hub-page-banner::after { border-radius: inherit; }
.hub-page-banner::before { content: none; }
/* banner üstündeki yazılar (butonlar hariç) temadan bağımsız beyaz: banner her iki temada da koyu kalır */
.hub-banner-wrap .hub-page-banner-content h1,
.hub-banner-wrap .hub-page-banner-content h1 span { color: #fff; }
.hub-banner-wrap .hub-page-banner-content p,
.hub-banner-wrap .hub-page-banner-content .tournament-meta-line,
.hub-banner-wrap .hub-page-banner-content > div:first-child span:not(.badge):not(.verified-badge) { color: #d1d5db; }
.hub-banner-wrap .hub-page-banner-content .badge { color: #f3f4f6; background: rgb(0 0 0 / .38); border-color: rgb(255 255 255 / .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hub-banner-wrap .hub-settings-link { color: #e5e7eb; border-color: rgb(255 255 255 / .28); background: rgb(0 0 0 / .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hub-banner-wrap .hub-settings-link:hover { color: #fff; border-color: rgb(255 255 255 / .6); }
/* açık modda kenarlara doğru erirken zemine değil SİYAHA erir: siyahlık her iki temada sabit kalır,
   siyahın kendisi de dış kenarda yumuşakça sayfa zeminine karışır (çizgi oluşmaz) */
.hub-banner-wrap .hub-page-banner-content { padding-bottom: 48px; }
.hub-banner-wrap .hub-settings-link { z-index: 3; }
/* Hub açıklaması/sosyal ikon sayısı hub'a göre değiştiğinden, içerik yüksekliğine bakılmaksızın
   banner'ın altına sabitlenir (negatif margin yerine mutlak konumlandırma) — böylece kısa içerikli
   hublarda alttaki bölüm banner'ın üstüne binmiyor, uzun içerikli hublarda da taşma olmuyor. */
.hub-banner-wrap { position: relative; }
.hub-banner-wrap .hub-page-banner-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding: 0 28px 26px;
}
@media (max-width: 700px) {
    .hub-page-banner { aspect-ratio: auto; height: 380px; max-height: none; }
    .hub-banner-wrap .hub-page-banner-content { padding: 0 16px 34px; }
}

/* ---------- TAKIM SİSTEMİ ---------- */
.my-team-members { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.my-team-member {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--white);
    padding: 4px 6px;
    border-radius: 6px;
    transition: background .15s;
}
a.my-team-member:hover { background: rgb(var(--accent-rgb) / .06); }
.my-team-member img {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.team-list-card {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    transition: border-color .2s;
}
a.team-list-card:hover { border-color: var(--gold); }
.team-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

/* ---------- KADRO SLOTLARI (turnuva sayfası Hazır/Hazır Değil kartları) ---------- */
.roster-card { width: 100%; }
.roster-slots { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.roster-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgb(var(--ink-rgb) / .02);
    border: 1px solid var(--border);
    font-size: 12.5px;
}
.roster-slot img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.roster-slot-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; }
.roster-slot-link:hover .roster-slot-name { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.team-identity { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--white); }
.team-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
a.team-identity:hover strong { color: var(--gold); }
.team-identity-logo { width: 32px; height: 32px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.team-identity-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: rgb(var(--accent-rgb) / .16); color: var(--white); }
.roster-slot-name { flex: 1; min-width: 0; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-slot-empty { border-style: dashed; opacity: .8; }
.roster-slot-label { color: var(--gray); font-size: 12px; flex: 1; }
.roster-slot-remove {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--gray);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .2s, color .2s;
}
.roster-slot-remove:hover { border-color: #dc3545; color: #ff8a93; }
.roster-add-form { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.roster-add-form select {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 6px;
    color: var(--white);
    font-size: 12px;
}
.roster-add-form .btn { flex-shrink: 0; }

.team-card-game-icon {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    flex-shrink: 0;
    overflow: hidden;
}
.team-card-game-icon img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

/* ---------- Minimalist yatay kart (profil turnuvalar sekmesi) ---------- */
.mini-card-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
    text-decoration: none;
    transition: border-color .2s;
}
.mini-card-compact:hover { border-color: var(--gold); }
.mini-card-compact-thumb {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--field-bg);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray);
    flex-shrink: 0;
    overflow: hidden;
}
.mini-card-compact-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.mini-card-compact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-card-compact-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-card-compact-meta { font-size: 12px; color: var(--gray); }

/* ---------- Arkadaş kutusu (profil arkadaşlar sekmesi) ---------- */
.friend-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 14px;
}
.friend-row-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--white);
    min-width: 0;
}
.friend-row-link img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.friend-row-link strong { display: block; font-size: 14px; }
.friend-row-link span { font-size: 11px; color: var(--gray); }

/* ---------- REKLAM KUTUSU (ad-banner) ---------- */
.ad-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 140px;
    display: flex;
    align-items: center;
    padding: 28px 32px;
    background:
        linear-gradient(120deg, rgb(var(--bg-rgb) / .55), rgb(var(--bg-rgb) / .85)),
        url('https://images.unsplash.com/photo-1542751371-adc38448a05e?w=1400&q=70') center/cover;
    border: 1px solid var(--border);
}
.ad-banner-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgb(var(--accent-rgb) / .15), transparent 60%);
}
.ad-banner-content { position: relative; z-index: 2; max-width: 600px; }
.ad-banner-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

/* ---------- DURUM FİLTRESİ ---------- */
.status-filter-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}
.status-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--field-bg);
    color: var(--gray);
    font-size: 13px;
    font-weight: 500;
    transition: border-color .2s, color .2s, background .2s;
}
.status-filter-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.status-filter-btn.active {
    border-color: var(--gold);
    background: rgb(var(--accent-rgb) / .1);
    color: var(--gold);
    font-weight: 700;
}
.status-filter-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-filter-dot.status-green { background: #2ecc71; }
.status-filter-dot.status-red { background: #e5484d; }
.status-filter-dot.status-gray { background: #777; }

/* ---------- SAYFALAMA (pagination) ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
}
.pagination-arrow {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    color: var(--white);
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background .2s;
}
.pagination-arrow:hover { border-color: var(--gold); background: rgb(var(--accent-rgb) / .08); }
.pagination-arrow.disabled {
    opacity: .35;
    pointer-events: none;
}
.pagination-info { color: var(--gray); font-size: 14px; min-width: 90px; text-align: center; }

/* ---------- HUB KARTI ---------- */
.hub-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .hub-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-card-grid { grid-template-columns: 1fr; } }

.hub-card {
    display: flex;
    gap: 14px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px;
    transition: border-color .2s, transform .2s;
}
.hub-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 25px 50px -12px var(--shadow);
}
.hub-card-icon {
    width: 52px; height: 52px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.hub-card-body { flex: 1; min-width: 0; }
.hub-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.hub-card-name {
    font-size: 15px;
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hub-card-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgb(var(--accent-rgb) / .1);
    border: 1px solid rgb(var(--accent-rgb) / .25);
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
}
.hub-card-popular-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,196,0,.14);
    border: 1px solid rgba(255,196,0,.28);
    color: #ffdf70;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}
.hub-card-arrow {
    margin-left: auto;
    color: var(--gray);
    font-size: 18px;
    flex-shrink: 0;
}
.hub-card-desc {
    font-size: 12px;
    color: var(--gray);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- MİNİ KART (ikon + isim, 6x2 grid — popüler hub / onaylı takım vb.) ---------- */
.mini-tile-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
@media (max-width: 1000px) { .mini-tile-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .mini-tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .mini-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-tile-grid > .mini-tile, .mini-grid-6 > * { min-width: 0; }

.mini-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px 12px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mini-tile:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 25px 50px -12px var(--shadow);
}
.mini-tile-icon-wrap {
    position: relative;
    width: 68px;
    height: 68px;
}
.mini-tile-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, rgb(var(--ink-rgb) / .10), rgb(var(--ink-rgb) / .03));
    transition: border-color .2s ease;
}
.mini-tile:hover .mini-tile-icon { border-color: var(--gold); }
.mini-tile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
}
.mini-tile-meta {
    font-size: 11px;
    color: var(--gray);
}
.mini-tile-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}
.mini-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- DÜZ METİN FONTU (label, alt başlık, tablo başlığı) ---------- */
h4, .form-group label, th, .settings-preview-label {
    font-weight: 600;
    letter-spacing: .15px;
}

/* ---------- AYARLAR SAYFASI ---------- */
.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
    align-items: start;
}
/* Grid item'ların varsayılan min-width:auto'su, Kurallar editörüne uzun/boşluksuz metin
   yapıştırıldığında tüm ayarlar sayfasını yatayda genişletebilir (bracket kutusunda düzeltilen
   sorunla aynı kök neden); min-width:0 bunu keser. */
.settings-layout > div { min-width: 0; }
.settings-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.settings-preview-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--gray);
    margin-bottom: 10px;
}
.tabs-vertical {
    display: flex;
    flex-direction: column;
    border-bottom: none;
    gap: 4px;
}
.tabs-vertical .tab {
    padding: 11px 14px;
    border-bottom: none;
    border-left: 2px solid transparent;
    border-radius: 12px;
    color: var(--gray);
}
.tabs-vertical .tab.active {
    background: rgb(var(--accent-rgb) / .08);
    border-left-color: var(--gold);
    color: var(--gold);
}
.tabs-vertical .tab:hover { color: var(--gold-light); }
.tabs-vertical.tabs-minimal { gap: 2px; }
.tabs-vertical.tabs-minimal .tab { padding: 8px 12px; font-size: 13px; }

/* ---------- DM GİZLİLİK SEÇENEKLERİ ---------- */
.dm-privacy-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.dm-privacy-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(135deg, rgb(var(--ink-rgb) / .03), rgb(var(--accent-rgb) / .04));
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
    min-height: 112px;
}
.dm-privacy-option:hover {
    border-color: rgb(var(--accent-rgb) / .35);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgb(var(--shadow-rgb) / .18);
}
.dm-privacy-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dm-privacy-option:has(input:checked) {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / .06));
    box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .16);
}
.dm-privacy-icon {
    font-size: 20px;
    line-height: 1;
    margin-top: 2px;
}
.dm-privacy-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dm-privacy-text strong {
    font-size: 14px;
    color: var(--white);
}
.dm-privacy-text small {
    font-size: 12px;
    color: var(--gray);
    line-height: 1.4;
}
@media (max-width: 768px) {
    .dm-privacy-options { grid-template-columns: 1fr; }
}

/* ---------- ÖZEL GÖRSEL SEÇİCİ ---------- */
.image-picker {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 120px; /* oran verilmiş kutularda js/core/image-picker.js aspect-ratio ile değiştirir */
    border: 2px dashed var(--input-border);
    border-radius: 1rem;
    background-color: var(--field-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    color: var(--gray);
    transition: border-color .3s ease, color .3s ease, transform .3s ease;
}
.image-picker:hover { border-color: var(--border-strong); transform: scale(1.01); }

/* Görsel seçildiyse: kutu tam önizlemedir; üstünde "Görsel Yükle" hafif bir filigran olarak kalır, üzerine gelince belirginleşir */
.image-picker.has-image { border-style: solid; color: #fff; }
.image-picker.has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0);
    transition: background .3s ease;
    pointer-events: none;
}
.image-picker.has-image:hover::after { background: rgb(0 0 0 / .45); }
.image-picker.has-image > *:not(.image-picker-clear) {
    position: relative;
    z-index: 2;
    color: #fff;
    opacity: .4;
    text-shadow: 0 1px 8px rgb(0 0 0 / .7);
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / .6));
    transition: opacity .3s ease;
}
.image-picker.has-image:hover > *:not(.image-picker-clear) { opacity: 1; }
/* görsel yüklüyken de boyut ipucu filigranda görünür: görseli kaldırmadan istenen boyut bilinir */
.image-picker.has-image .image-picker-hint { display: block; }
/* Görsel kaldırma (×) düğmesi: görsel olduğu sürece her zaman sağ üstte durur; çizgiler CSS ile tam ortalanır */
.image-picker-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .35);
    border-radius: 50%;
    background: rgb(0 0 0 / .55);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgb(0 0 0 / .6);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .2s ease, border-color .2s ease;
}
.image-picker.has-image .image-picker-clear { display: block; animation: esChipIn .45s cubic-bezier(.22, 1, .36, 1) backwards; }
.image-picker-clear::before, .image-picker-clear::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: currentColor;
}
.image-picker-clear::before { transform: rotate(45deg); }
.image-picker-clear::after { transform: rotate(-45deg); }
.image-picker-clear:hover { transform: rotate(90deg) scale(1.1); background: rgb(200 30 45 / .9); border-color: rgb(255 255 255 / .6); }
.image-picker-clear:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.image-picker-label { font-size: .9rem; font-weight: 600; }
.image-picker-hint {
    font-size: 11px;
    color: var(--gray);
    text-align: center;
    line-height: 1.3;
    max-width: 90%;
}

/* ---------- KIRPMA POPUP ---------- */
.crop-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgb(var(--overlay-rgb) / .75);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    opacity: 0;
    transition: opacity .2s ease;
}
.crop-modal-overlay.open { display: flex; }
.crop-modal-overlay.show { opacity: 1; }
.crop-modal-box {
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 24px;
    max-width: 540px;
    width: 92%;
}
.crop-modal-box h3 { font-size: 17px; margin-bottom: 4px; }
.crop-modal-hint { color: var(--gray); font-size: 13px; margin-bottom: 16px; }
.crop-stage {
    position: relative;
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 14px;
    user-select: none;
}
.crop-stage img { max-width: 100%; max-height: 60vh; display: block; user-select: none; -webkit-user-drag: none; }
.crop-box {
    position: absolute;
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 2000px rgb(var(--shadow-rgb) / .55);
    cursor: move;
}
.crop-handle {
    position: absolute;
    width: 14px; height: 14px;
    background: var(--gold);
    border-radius: 50%;
    border: 2px solid var(--black);
}
.crop-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.crop-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.crop-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.crop-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.crop-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* ---------- DM CHAT WIDGET ---------- */
.dm-widget {
    position: fixed;
    bottom: 0;
    right: 24px;
    width: 440px;
    height: 560px;
    max-height: 85vh;
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(calc(100% - 0px));
    transition: transform .25s ease;
    z-index: 1800;
}
.dm-widget.open { transform: translateY(0); box-shadow: 0 -10px 40px rgb(var(--shadow-rgb) / .5); }
.dm-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--hover-bg);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.dm-widget-header span { flex: 1; }
.dm-widget-header button {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 18px;
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 50%;
    transition: color .2s, background .2s;
}
.dm-widget-header button:hover { color: var(--gold); background: rgb(var(--accent-rgb) / .08); }
.dm-widget-header .dm-sound-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0; }
.dm-widget-header .dm-sound-btn .dm-sound-slash { opacity: 0; transition: opacity .2s; }
.dm-widget-header .dm-sound-btn.is-off { color: var(--gray); opacity: .7; }
.dm-widget-header .dm-sound-btn.is-off .dm-sound-slash { opacity: 1; }
.dm-widget-header .dm-sound-btn:not(.is-off) { color: var(--gold); }

.dm-widget-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.dm-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--white);
    transition: background .15s;
}
.dm-conv-item:hover { background: rgb(var(--accent-rgb) / .06); }
.dm-conv-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dm-conv-name { font-size: 13px; color: var(--white); }
.dm-conv-preview {
    font-size: 11px;
    color: var(--gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-conv-item img {
    width: 30px; height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.dm-empty { color: var(--gray); font-size: 13px; text-align: center; padding: 20px 10px; }

.dm-widget-newchat { padding: 14px; }
.dm-newchat-row { display: flex; gap: 8px; margin-bottom: 12px; }
.dm-newchat-row input {
    flex: 1;
    padding: 9px 12px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 13px;
    outline: none;
}
.dm-newchat-row input:focus { border-color: var(--gold); }
.dm-friends-search {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    max-height: 240px;
    overflow-y: auto;
}
.dm-friend-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgb(var(--ink-rgb) / .03);
    border: 1px solid rgb(var(--ink-rgb) / .06);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.dm-friend-result:hover {
    background: rgb(var(--accent-rgb) / .08);
    border-color: rgb(var(--accent-rgb) / .28);
}
.dm-friend-result img {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.dm-friend-result span { font-size: 13px; color: var(--white); }
.dm-friend-empty {
    color: var(--gray);
    font-size: 12px;
    padding: 6px 2px;
}
.dm-newchat-cancel {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 12px;
    cursor: pointer;
}
.dm-newchat-cancel:hover { color: var(--gold); }

.dm-widget-thread {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dm-thread-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.dm-thread-head button {
    background: none; border: none; color: var(--gray); font-size: 16px; cursor: pointer;
}
.dm-thread-head img {
    width: 26px; height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.dm-thread-head strong { font-size: 13px; }
.dm-thread-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dm-msg-bubble {
    align-self: flex-start;
    max-width: 78%;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 18px 18px 18px 4px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--white);
}
.dm-msg-bubble.mine {
    align-self: flex-end;
    background: rgb(var(--accent-rgb) / .14);
    border-color: rgb(var(--accent-rgb) / .3);
    border-radius: 14px 14px 3px 14px;
}
.dm-msg-time { display: block; font-size: 10px; color: var(--gray); margin-top: 3px; text-align: right; }
.dm-thread-restricted {
    padding: 16px;
    color: var(--gray);
    font-size: 13px;
    text-align: center;
}
.dm-thread-input-row {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.dm-thread-input-row input {
    flex: 1;
    padding: 8px 12px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 24px;
    color: var(--white);
    font-size: 13px;
    outline: none;
}
.dm-thread-input-row input:focus { border-color: var(--gold); }

@media (max-width: 600px) {
    .dm-widget { right: 10px; width: 88vw; }
}

.settings-card {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
}
.settings-card h4 { font-size: 14px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
.settings-hint { color: var(--gray); font-size: 12px; margin-top: 8px; }

.prize-ranks-list { display: flex; flex-direction: column; gap: 8px; }
.prize-rank-row { display: flex; align-items: center; gap: 8px; }
.prize-rank-label { width: 20px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--gold-light); text-align: right; }
.prize-rank-input {
    flex: 1;
    padding: 10px 12px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
}
.prize-rank-input:focus { outline: none; border-color: var(--gold); }
.prize-rank-remove {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: none;
    color: var(--gray);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.prize-rank-remove:hover { border-color: #dc3545; color: #ff8a93; }

.roster-remove-btn:hover { border-color: #dc3545; color: #ff8a93 !important; }
.roster-add-btn:not(:disabled):hover { border-color: var(--gold); color: var(--gold) !important; }

.admin-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
}
.admin-search-row:last-child { border-bottom: none; }
.admin-search-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.admin-search-row span { flex: 1; font-size: 14px; font-weight: 500; }

.settings-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}
.settings-grid-media { display: grid; grid-template-columns: 5fr 7fr; gap: 14px 16px; align-items: start; }
.settings-grid-media > .form-group { margin: 0; min-width: 0; }
.settings-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
/* Izgara kendi boşluğunu verir: form-group'un alt boşluğu ikinci kez eklenip yüksekliği şişirmesin */
.settings-grid-2 > .form-group, .settings-grid-3 > .form-group { margin-bottom: 0; }
.settings-grid-2 + .settings-grid-2, .settings-grid-2 + .form-group, .settings-grid-3 + .settings-grid-3, .form-group + .settings-grid-2 { margin-top: 14px; }
.settings-card .form-group input { padding: .65rem .95rem; }
.settings-card .form-group label { margin-bottom: 5px; }
.settings-label-note { color: var(--gray); font-size: 12px; font-weight: 400; }
.settings-form-actions { display: flex; align-items: flex-end; }
.settings-form-actions .btn { margin: 0; }
.settings-grid-3 > .settings-form-actions { grid-column: 1 / -1; }

/* Yan yana kartlar (ör. profil fotoğrafı + kullanıcı adı, hesap bilgileri + şifre): dikey uzunluk tasarrufu */
.settings-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 16px; }
.settings-cols > .settings-card { margin-bottom: 0; }
.settings-avatar-form { display: flex; align-items: center; gap: 18px; }
.settings-avatar-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.settings-inline { display: flex; align-items: center; gap: 10px; }
.settings-inline .form-group { flex: 1; min-width: 0; margin: 0; }
.settings-inline-top { align-items: flex-end; }
.settings-textarea {
    flex: 1;
    min-width: 0;
    min-height: 84px;
    resize: vertical;
    padding: .65rem .95rem;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 1rem;
    color: var(--white);
    font-size: .95rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color .4s ease;
}
.settings-textarea:hover { border-color: var(--border-strong); }
.settings-textarea:focus { outline: none; border-color: var(--gold); }
.settings-media-row { display: flex; align-items: flex-start; gap: 22px; }
.settings-media-row .form-group { margin: 0; flex-shrink: 0; }
.settings-media-row .settings-media-wide { flex: 1; min-width: 0; max-width: 720px; }
@media (max-width: 720px) { .settings-media-row { flex-direction: column; } .settings-media-row .settings-media-wide { width: 100%; } }
.settings-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.settings-card-head h4 { margin: 0; }
.settings-card { padding: 18px 20px; margin-bottom: 16px; }

@media (max-width: 1100px) {
    .settings-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-sidebar { position: static; }
    .settings-grid-2, .settings-grid-media { grid-template-columns: 1fr; }
    .settings-grid-3 { grid-template-columns: 1fr 1fr; }
    .settings-inline-top { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
    .settings-grid-3 { grid-template-columns: 1fr; }
    .settings-avatar-form { flex-direction: column; align-items: flex-start; }
}

/* ---------- KURALLAR: ZENGİN METİN EDİTÖRÜ ---------- */
.rte-docx-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rte-docx-status { font-size: 12.5px; color: var(--gray); }
.rte-docx-status.is-error { color: #fecaca; }
.rte-docx-status.is-ok { color: #bbf7d0; }
.rte-layout { display: flex; gap: 16px; align-items: flex-start; }
.rte-outline {
    width: 170px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 480px;
    overflow-y: auto;
}
.rte-outline-empty { color: var(--gray); font-size: 12px; font-style: italic; margin: 0; }
.rte-outline-item {
    display: block;
    color: var(--gray);
    font-size: 12.5px;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rte-outline-item:hover { background: rgb(var(--accent-rgb) / .08); color: var(--gold-light); border-left-color: var(--gold); }
.rte-outline-item.rte-outline-h3 { padding-left: 16px; font-size: 12px; }
.rte-outline-item.rte-outline-h4 { padding-left: 24px; font-size: 11.5px; }
.rte-main { flex: 1; min-width: 0; }

.rte-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 6px;
}
.rte-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rte-btn:hover { background: rgb(var(--accent-rgb) / .1); border-color: var(--border); color: var(--gold-light); }
.rte-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.rte-editor {
    min-height: 420px;
    max-width: 100%;
    width: 100%;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 0 0 12px 12px;
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--white);
    resize: vertical;
    overflow: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}
.rte-editor:focus { outline: none; border-color: var(--gold); }
.rte-editor h2 { font-size: 20px; margin: 18px 0 10px; color: var(--gold-light); }
.rte-editor h2:first-child { margin-top: 0; }
.rte-editor h3 { font-size: 17px; margin: 16px 0 8px; color: var(--gold-light); }
.rte-editor h4 { font-size: 14.5px; margin: 14px 0 6px; color: var(--gold-light); }
.rte-editor p { margin: 0 0 10px; }
.rte-editor ul, .rte-editor ol { margin: 0 0 10px; padding-left: 22px; }
.rte-editor blockquote { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--gold); color: var(--gray); background: rgb(var(--accent-rgb) / .05); }
.rte-editor a { color: var(--gold-light); }

@media (max-width: 760px) {
    .rte-layout { flex-direction: column; }
    .rte-outline { width: 100%; position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
}

/* Turnuva detay sayfasında Kurallar sekmesinin raw HTML çıktısı için aynı tipografi. */
.tournament-rules-content { font-size: 14px; line-height: 1.7; color: var(--white); overflow-wrap: break-word; word-break: break-word; }
.tournament-rules-content h2 { font-size: 19px; margin: 18px 0 10px; color: var(--gold-light); }
.tournament-rules-content h2:first-child { margin-top: 0; }
.tournament-rules-content h3 { font-size: 16px; margin: 16px 0 8px; color: var(--gold-light); }
.tournament-rules-content h4 { font-size: 14px; margin: 14px 0 6px; color: var(--gold-light); }
.tournament-rules-content p { margin: 0 0 10px; }
.tournament-rules-content ul, .tournament-rules-content ol { margin: 0 0 10px; padding-left: 22px; }
.tournament-rules-content blockquote { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--gold); color: var(--gray); background: rgb(var(--accent-rgb) / .05); }
.tournament-rules-content a { color: var(--gold-light); }

/* ---------- TIMELINE GÖNDERİLERİ (profil & hub) ---------- */
.timeline-post {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    position: relative;
}
.timeline-post-delete {
    position: absolute;
    top: 10px; right: 10px;
}
.timeline-post-delete button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border-radius: 50%;
    background: none;
    border: 1px solid var(--border);
    color: var(--gray);
    font-size: 17px;
    line-height: 0;     /* × glifinin dikey kaymasını önler: düğmenin tam ortasında durur */
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.timeline-post-delete button:hover { color: #ff8a93; border-color: #e5484d; }
.timeline-post p {
    font-size: 14px;
    color: var(--white);
    margin-bottom: 10px;
    white-space: pre-line;
}
.timeline-post-media {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
}
.timeline-post-date { font-size: 11px; color: var(--gray); }
.timeline-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
}
.timeline-post-author img {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.timeline-post-actions {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.timeline-post-action {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray);
    cursor: pointer;
    background: none;
    border: none;
    transition: color .2s;
}
.timeline-post-action:hover { color: var(--gold-light); }
.timeline-post-action.liked { color: #e5484d; }
.timeline-post-comments { margin-top: 10px; display: none; }
.timeline-post-comments.open { display: block; }
.timeline-comment {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 13px;
}
.timeline-comment img {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.timeline-comment-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.timeline-comment-form input {
    flex: 1;
    padding: 8px 12px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 24px;
    color: var(--white);
    font-size: 13px;
    outline: none;
}
.timeline-comment-form input:focus { border-color: var(--gold); }

/* ---------- CAPS LOCK UYARISI ---------- */
.caps-warning {
    display: none;
    align-items: center;
    gap: 4px;
    color: #f5a623;
    font-size: 12px;
    margin-top: 6px;
}

/* ---------- INPUT GROUP (ön ekli textbox) ---------- */
.input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--field-bg);
    transition: border-color .2s;
}
.input-group:focus-within { border-color: var(--gold); }
.input-group-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--hover-bg);
    color: var(--gray);
    font-size: 13px;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.input-group input {
    flex: 1;
    border: none;
    background: none;
    padding: 12px 14px;
    color: var(--white);
    font-size: 14px;
    outline: none;
    min-width: 0;
}

/* ---------- WEBSITE PANEL (ADMIN) ---------- */
.admin-layout { grid-template-columns: 230px 1fr; }
.admin-layout .settings-sidebar { gap: 6px; }
.tabs-vertical a.tab {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.admin-badge-count {
    margin-left: auto;
    background: rgb(var(--accent-rgb) / .12);
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.admin-stats-grid .stat-box { min-width: 0; }
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.admin-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.admin-list-item:last-child { border-bottom: none; }
.admin-avatar-img {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.admin-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.admin-toolbar .input-group { max-width: 320px; }
.admin-empty { color: var(--gray); font-size: 13px; padding: 6px 0; }

/* Website Panel içeriğini minimalistleştir: daha sıkı tablo/kart/istatistik boyutları */
.admin-content table th, .admin-content table td { padding: 9px 12px; font-size: 13px; }
.admin-stats-grid .stat-box { padding: 12px 14px; }
.admin-stats-grid .stat-box .num { font-size: 20px; }
.admin-stats-grid .stat-box .label { font-size: 12px; }
.admin-content .settings-card { padding: 16px; }
.admin-content .settings-card h4 { font-size: 13px; margin-bottom: 12px; }
.admin-content .section-title,
.admin-content h2 { font-size: 16px; }

@media (max-width: 900px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-dashboard-grid { grid-template-columns: 1fr; }
}

/* ---------- GENERIC MODAL (Takım Oluştur, Hub Kur, Üye Davet Et) ----------
   Overlay display:none → flex olunca CSS animasyonları otomatik yeniden başlar (açılış animasyonu için JS gerekmez);
   kapanış animasyonu için js/core/modal.js esModalClose() .is-closing sınıfını ekler. */
.team-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* main'e z-index verilmediği için footer/header dahil her şeyin üstündedir */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: radial-gradient(circle at 50% 25%, rgb(var(--overlay-rgb) / .5), rgb(var(--overlay-rgb) / .82));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: esOverlayIn .35s ease both;
}
.team-modal-overlay.is-closing { animation: esOverlayOut .26s ease both; }
@keyframes esOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes esOverlayOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes esModalIn { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes esModalOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes esChipIn { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }

.team-modal-box {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: 0;
    overflow: visible; /* açılan dropdown (oyun seçimi) modalın altından kesilmesin; köşeler banner'da ayrıca yuvarlanır */
    border-radius: 1.75rem;
    border: 1px solid var(--border-strong);
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 40px 90px -20px var(--shadow);
    animation: esModalIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.team-modal-overlay.is-closing .team-modal-box { animation: esModalOut .26s ease both; }
/* üstten sızan ışık (kutunun içinde kalır) */
.team-modal-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 45%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 0%, rgb(var(--ink-rgb) / .10), transparent 70%);
    border-radius: inherit;
    pointer-events: none;
}

.team-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.6rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.team-modal-header h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.team-modal-titles p { margin: .2rem 0 0; font-size: .85rem; color: var(--gray); line-height: 1.4; }
.modal-chip {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .95rem;
    color: #fff;
    background: var(--chip-blue);
    box-shadow: 0 12px 28px -8px rgb(59 130 246 / .65);
    animation: esChipIn .7s cubic-bezier(.22, 1, .36, 1) .15s both;
}
.modal-chip-purple { background: var(--chip-purple); box-shadow: 0 12px 28px -8px rgb(168 85 247 / .65); }
.modal-chip-green { background: var(--chip-green); box-shadow: 0 12px 28px -8px rgb(34 197 94 / .6); }
/* PAF işaretli çip (bordo zemin + beyaz, arka plansız işaret): modallarda ortak başlık simgesi */
.modal-chip-brand { background: linear-gradient(135deg, var(--pg-brand), var(--pg-brand-bright)); box-shadow: 0 12px 28px -8px rgb(var(--pg-brand-rgb) / .9); }
.modal-chip-brand img { display: block; width: 52%; height: auto; }
.team-modal-banner + .team-modal-header .modal-chip-brand { box-shadow: 0 0 0 4px var(--panel-solid), 0 12px 28px -8px rgb(var(--pg-brand-rgb) / .9); }

/* Çarpı, yazı karakteri (&times;) yerine iki çizgiyle çizilir: yazı tipinin satır boşluğundan etkilenmez, tam ortalanır. */
.team-modal-close {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--gray);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: transform .35s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.team-modal-close::before,
.team-modal-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 2px;
    background: currentColor;
}
.team-modal-close::before { transform: rotate(45deg); }
.team-modal-close::after { transform: rotate(-45deg); }
.team-modal-close:hover { transform: rotate(90deg) scale(1.08); background: var(--hover-bg); color: var(--white); }

/* Modalın üstündeki küçük banner: görsel + alta doğru modal rengine sönen geçiş; çarpı bunun üstünde durur */
.team-modal-banner {
    position: relative;
    height: 112px;
    overflow: hidden;
    border-radius: calc(1.75rem - 1px) calc(1.75rem - 1px) 0 0; /* kutu overflow:visible olduğundan üst köşeleri kendisi yuvarlar */
}
.team-modal-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 60%;
    /* alt kenar maskeyle gerçekten şeffaflaşır: modal zeminine dikişsiz karışır (iki temada da) */
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 42%, transparent 100%);
    animation: esBannerDrift 16s ease-in-out infinite alternate;
}
.team-modal-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / .14) 0%, transparent 38%);
    pointer-events: none;
}
.team-modal-banner .team-modal-close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    z-index: 2;
    margin: 0;
    color: #fff;
    border-color: rgb(255 255 255 / .28);
    background: rgb(0 0 0 / .32);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.team-modal-banner .team-modal-close:hover { background: rgb(0 0 0 / .55); border-color: rgb(255 255 255 / .5); }
/* banner varken yalnızca ikon rozeti bannerın alt kenarına biner; başlık ve açıklama bannerın altında kalır */
.team-modal-banner + .team-modal-header { align-items: flex-start; padding-top: 0; }
.team-modal-banner + .team-modal-header .modal-chip { position: relative; z-index: 1; margin-top: -1.6rem; box-shadow: 0 0 0 4px var(--panel-solid), 0 12px 28px -8px rgb(59 130 246 / .65); }
.team-modal-banner + .team-modal-header .modal-chip-purple { box-shadow: 0 0 0 4px var(--panel-solid), 0 12px 28px -8px rgb(168 85 247 / .65); }
.team-modal-banner + .team-modal-header .team-modal-titles { padding-top: .85rem; }
@keyframes esBannerDrift { from { transform: scale(1.02) translateX(-1.2%); } to { transform: scale(1.1) translateX(1.2%); } }
@media (prefers-reduced-motion: reduce) { .team-modal-banner img { animation: none; } }

.team-modal-form { position: relative; padding: 1.4rem 1.6rem 1.6rem; }
.team-modal-form > * { animation: esFadeInUp .55s cubic-bezier(.22, 1, .36, 1) both; }
.team-modal-form > *:nth-child(1) { animation-delay: .12s; }
.team-modal-form > *:nth-child(2) { animation-delay: .2s; }
.team-modal-form > *:nth-child(3) { animation-delay: .28s; }
.team-modal-form > *:nth-child(4) { animation-delay: .36s; }
.team-modal-form > *:nth-child(5) { animation-delay: .44s; }
.team-modal-form > *:nth-child(6) { animation-delay: .52s; }
.team-modal-form .form-group textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: .85rem 1.1rem;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 1rem;
    color: var(--white);
    font-size: .95rem;
    transition: all .4s ease;
}
.team-modal-form .form-group textarea:focus { border-color: var(--gold); }
.team-modal-form .form-group textarea::placeholder, .team-modal-form .form-group input::placeholder { color: var(--gray); opacity: .7; }
.team-modal-actions { display: flex; gap: .75rem; margin-top: .4rem; }
.team-modal-actions .btn { flex: 1; margin-top: 0; }
.team-modal-note { margin: 0 0 1rem; font-size: .85rem; color: var(--gray); line-height: 1.6; }

/* Takım oluştururken yazdıkça canlı önizleme */
.team-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    margin-bottom: 1.1rem;
    border: 1px dashed var(--border-strong);
    border-radius: 1.1rem;
    background: var(--field-bg);
}
.team-preview-logo {
    width: 3.1rem;
    height: 3.1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    background: var(--chip-blue);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.team-preview-logo.pop { transform: scale(1.18) rotate(-4deg); }
.team-preview-name { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.team-preview-meta { margin-top: .25rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.team-preview-meta .badge { margin-bottom: 0; }
.team-modal-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; }
@media (max-width: 480px) { .team-modal-row { grid-template-columns: 1fr; gap: 0; } }
.invite-results { max-height: 340px; overflow-y: auto; margin-bottom: 1rem; }
.invite-empty { color: var(--gray); text-align: center; padding: 28px 16px; font-size: .9rem; }
.invite-row { display: flex; align-items: center; gap: 12px; padding: .65rem .5rem; border-radius: .9rem; transition: background .2s ease; animation: esFadeInUp .4s ease both; }
.invite-row:hover { background: var(--hover-bg); }
.invite-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.invite-name { flex: 1; margin: 0; font-weight: 600; font-size: .95rem; }
#teamTricode { text-align: center; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; }

/* ---------- MİNİMALİST TARİH/SAAT SEÇİCİ (dt-picker) ---------- */
.dt-picker { position: relative; }
.dt-picker-display {
    width: 100%;
    padding: 12px 40px 12px 14px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 14px;
    cursor: pointer;
}
.dt-picker-display:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .16); }
.dt-picker-display:disabled { cursor: default; opacity: .7; }
.dt-picker-display.input-error { border-color: #dc3545; }
.dt-picker-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    cursor: pointer;
    display: flex;
}
.dt-picker-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 284px;
    max-width: calc(100vw - 24px);
    background: var(--panel-solid);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgb(var(--shadow-rgb) / .55);
    padding: 14px;
    z-index: 200;
    animation: dt-pop .16s ease-out;
}
.dt-picker-panel.is-up { top: auto; bottom: calc(100% + 6px); }
.dt-picker-panel.is-right { left: auto; right: 0; }
@keyframes dt-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dt-picker-panel { animation: none; } }
.dt-picker-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dt-picker-month {
    flex: 1; min-width: 0; height: 30px; padding: 0 8px; text-align: center; font: inherit; font-size: 13px; font-weight: 700; color: var(--gold-light);
    text-transform: capitalize; background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s;
}
.dt-picker-month:hover, .dt-picker-panel.is-months .dt-picker-month { background: rgb(var(--accent-rgb) / .12); }
.dt-picker-panel .dt-picker-year {
    width: 64px; flex: none; height: 30px; padding: 0 6px; text-align: center; font: inherit; font-size: 13px; font-weight: 700; color: var(--white);
    background: var(--field-bg); border: 1px solid var(--input-border); border-radius: 8px;
}
.dt-picker-panel .dt-picker-year:focus, .dt-picker-panel .dt-picker-time-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18); }
.dt-picker-nav {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--gray);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 0;
    transition: border-color .2s, color .2s, background .2s;
}
.dt-picker-nav svg { display: block; }
.dt-picker-nav:hover { border-color: var(--gold); color: var(--gold); background: rgb(var(--accent-rgb) / .08); }
.dt-picker-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dt-picker-dow-row span { text-align: center; font-size: 11px; font-weight: 600; color: var(--gray); text-transform: capitalize; }
.dt-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dt-picker-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    background: none;
    color: var(--white);
    font: inherit;
    font-size: 12.5px;
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.dt-picker-day:hover { background: rgb(var(--accent-rgb) / .14); }
.dt-picker-day.today { color: var(--gold-light); font-weight: 700; border-color: rgb(var(--accent-rgb) / .45); }
.dt-picker-day.selected { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 700; }
.dt-picker-day.empty { cursor: default; pointer-events: none; }
.dt-picker-day:focus-visible, .dt-picker-mon:focus-visible, .dt-picker-nav:focus-visible, .dt-picker-month:focus-visible, .dt-picker-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.dt-picker-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dt-picker-months[hidden], .dt-picker-grid[hidden], .dt-picker-dow-row[hidden] { display: none; }
.dt-picker-mon {
    padding: 12px 4px; border: 1px solid var(--border); background: none; color: var(--white); font: inherit; font-size: 13px; border-radius: 10px; cursor: pointer;
    text-transform: capitalize; transition: background .15s, border-color .15s;
}
.dt-picker-mon:hover { background: rgb(var(--accent-rgb) / .14); }
.dt-picker-mon.selected { background: var(--gold); border-color: var(--gold); color: #000; font-weight: 700; }
.dt-picker-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.dt-picker-panel.is-months .dt-picker-time { display: none; }
.dt-picker-panel .dt-picker-time-input {
    width: 64px;
    flex: none;
    height: 40px;
    padding: 0;
    text-align: center;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 10px;
    color: var(--white);
}
.dt-picker-time-sep { font-size: 18px; font-weight: 700; color: var(--gray); }
.dt-picker-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.dt-picker-link { background: none; border: none; padding: 4px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--gold-light); cursor: pointer; border-radius: 6px; }
.dt-picker-link:hover { background: rgb(var(--accent-rgb) / .12); }

/* ---------- MİNİMALİST TOGGLE SWITCH (ör. Check-in aç/kapa) ---------- */
.toggle-switch-row { display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.toggle-switch {
    position: relative;
    width: 42px;
    height: 22px;
    border-radius: 16px;
    background: var(--field-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background .2s ease, border-color .2s ease;
}
.toggle-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gray);
    transition: transform .2s ease, background .2s ease;
}
.toggle-switch.active { background: rgb(var(--accent-rgb) / .15); border-color: var(--gold); }
.toggle-switch.active .toggle-switch-knob { transform: translateX(20px); background: var(--gold); }

/* ---------- BRACKET TUR LİSTESİ (turnuva ayarları > Program & Oyun > Program) ---------- */
.round-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.round-row:last-child { border-bottom: none; }
.round-row-name {
    flex: 1;
    min-width: 130px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gold-light);
}
.round-row-date { flex: 1.3; max-width: 220px; }
.round-row-bo {
    width: 84px;
    flex-shrink: 0;
    padding: 10px 8px;
    background: var(--field-bg);
    border: 2px solid var(--input-border);
    border-radius: 12px;
    color: var(--white);
    font-size: 13px;
}
@media (max-width: 560px) {
    .round-row { flex-wrap: wrap; }
    .round-row-date { max-width: none; flex: 1 1 100%; order: 3; }
}

/* ---------- MİNİK BRACKET ÖNİZLEME (turnuva ayarları > Program & Oyun > Program) ---------- */
/* Slot sayısı yüksek turnuvalarda (128-1024) bracket ağacı çok uzun olabileceğinden,
   kutu büyümek yerine (genişlik serbest, yükseklik sınırlı + iki yönlü scroll) okunaklı kalır. */
.bracket-preview-box {
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    max-height: 640px;
    overflow: auto;
}
.bpx-box { margin: 4px 0 6px; }
.bp-bracket { position: relative; }
.bpx-match { position: absolute; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); }
.bpx-team { flex: 1; min-height: 0; display: flex; align-items: center; gap: 7px; padding: 0 9px; font-size: 10.5px; line-height: 1; color: var(--gray); }
.bpx-team + .bpx-team { border-top: 1px solid var(--border); }
.bpx-team i { width: 11px; height: 11px; border-radius: 3px; background: rgb(var(--ink-rgb) / .1); flex-shrink: 0; }
.bpx-team span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-round-label {
    position: absolute;
    top: 0;
    text-align: center;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--gold-light);
    line-height: 1.3;
    white-space: nowrap;
}
.bp-round-label span { color: var(--gray); font-weight: 400; }
.bp-match {
    position: absolute;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    border-radius: 3px;
}
.bp-lines {
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    pointer-events: none;
}
.bp-lines path {
    fill: none;
    stroke: rgb(var(--accent-rgb) / .45);
    stroke-width: 1.5;
}

/* Alt Bracket / Final için kompakt satırlar (double elimination) */
.bracket-preview-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 20px;
}
.bracket-preview-row-losers { opacity: .55; }
.bracket-preview-row-final { opacity: .85; }
.bracket-preview-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    flex: 1;
}
.bracket-preview-bar {
    display: block;
    height: 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--panel);
}
.bracket-preview-label {
    font-size: 10px;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 10px 0 4px;
}
.bracket-preview-group {
    color: var(--gray);
    font-size: 12px;
    text-align: center;
    padding: 24px 0;
}

.slide.has-image::after { background: linear-gradient(180deg, rgb(0 0 0 / .35), rgb(0 0 0 / .72)); }

/* =====================================================================================================
   TASARIM ÜST KATMANI (mertdncl): kart hover'ı, geçişler, cam yüzeyler
   ===================================================================================================== */
.mini-card, .card, .hub-card, .mini-tile, .team-list-card, .mini-card-compact, .friend-row-card,
.timeline-post, .settings-card, .step, .overview-info-box, .prize-pool-box, .empty-state-box {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.mini-card:hover, .team-list-card:hover, .mini-card-compact:hover, .friend-row-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--border-strong);
    box-shadow: 0 25px 50px -12px var(--shadow);
}
.settings-card:hover, .timeline-post:hover { border-color: var(--border-strong); }
.mini-card { border-radius: 1.25rem; }

/* sekmeler */
.tab { transition: color .2s ease, border-color .2s ease; }
.tab:hover { color: var(--white); }

/* yüklenen fotoğraflar olduğu gibi gösterilir; kırpma sadece kutuyu doldurmak içindir */
img { max-width: 100%; }

/* mobil: kartlarda ölçeklendirme taşma yapmasın */
@media (max-width: 560px) {
    header { padding: 10px 4%; }
    .nav-buttons { gap: 6px; }
    .nav-buttons .btn { white-space: nowrap; padding: .4rem .75rem; font-size: .8rem; }
    .mini-card:hover, .team-list-card:hover, .mini-card-compact:hover, .friend-row-card:hover, .card:hover, .hub-card:hover, .mini-tile:hover {
        transform: translateY(-2px);
    }
    }

/* ---------- PROFİL: geniş yerleşim, liste ızgaraları, gizlilik bildirimi ---------- */
.profile-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.profile-overview-side { position: sticky; top: 90px; }
@media (max-width: 960px) {
    .profile-overview-layout { grid-template-columns: 1fr; }
    .profile-overview-side { position: static; order: -1; }
}
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.profile-hub-tile { flex-direction: row; text-align: left; }
.privacy-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 1rem;
    background: var(--field-bg);
    color: var(--gray);
    font-size: .9rem;
}
.privacy-notice svg { flex-shrink: 0; }
.privacy-notice-admin { border-style: solid; }

/* ---------- GİZLİLİK AYARLARI: her bilgi için Herkes / Arkadaşlar / Gizli ---------- */
.privacy-group { margin-top: 22px; }
.privacy-group h5 { margin: 0 0 8px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); font-weight: 600; }
.privacy-group h5 .privacy-group-note { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .78rem; }
/* ayar kutuları: geniş ekranda yan yana dizilir (dikey uzunluk tasarrufu), dar ekranda tek sütun */
.privacy-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.privacy-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--field-bg);
    transition: border-color .25s ease, background .25s ease;
}
.privacy-row:hover { border-color: var(--border-strong); background: var(--hover-bg); }
.privacy-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.privacy-row-text strong { font-size: .95rem; font-weight: 600; }
.privacy-row-text small { font-size: .8rem; color: var(--gray); line-height: 1.4; }
.settings-privacy-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.settings-privacy-foot .privacy-notice { flex: 1; min-width: 240px; }

/* üçlü seçici (hap biçimli segment) */
.privacy-seg {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--field-bg);
}
.privacy-opt { position: relative; flex: 1; cursor: pointer; }
.privacy-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.privacy-opt span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gray);
    white-space: nowrap;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.privacy-opt:hover span { color: var(--white); }
.privacy-opt input:checked + span {
    background: rgb(var(--accent-rgb) / .95);
    color: var(--on-accent);
    box-shadow: 0 6px 16px -6px var(--shadow);
}
.privacy-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.privacy-opt:active span { transform: scale(.96); }

/* ---------- AYARLAR: geniş, ortalı, canlı profil önizlemesi ---------- */
.profile-preview {
    position: relative;
    margin: 0 0 30px;
    padding: 20px 26px 22px;
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    background: var(--card-surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    overflow: hidden;
}
/* üstten sızan ışık */
.profile-preview::before {
    content: '';
    position: absolute;
    top: -55%;
    left: 50%;
    width: 70%;
    height: 100%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgb(var(--ink-rgb) / .10), transparent 65%);
    pointer-events: none;
}
.profile-preview > * { position: relative; }
.profile-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.profile-preview-bar .settings-preview-label { margin-bottom: 2px; }
.profile-preview-sub { margin: 0; font-size: .85rem; color: var(--gray); }
.profile-preview-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 6px 0 4px;
    text-align: center;
}
.pv-avatar {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
    box-shadow: 0 0 0 7px rgb(var(--ink-rgb) / .06), 0 20px 44px -14px var(--shadow);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.pv-avatar:hover { transform: scale(1.04); }
.pv-name { margin: 2px 0 0; font-size: 1.65rem; font-weight: 700; line-height: 1.2; word-break: break-word; }
.pv-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pv-fact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--field-bg);
    font-size: .9rem;
    transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.pv-fact-label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.pv-fact-value.is-muted { color: var(--gray); font-style: italic; }
.pv-fact.is-hidden, .pv-about.is-hidden, .pv-chip.is-hidden { border-style: dashed; border-color: var(--border); }
.pv-about {
    width: 100%;
    max-width: 680px;
    padding: 14px 20px;
    border: 1px solid var(--border-strong);
    border-radius: 1.1rem;
    background: var(--field-bg);
    font-size: .92rem;
    line-height: 1.7;
    white-space: pre-line;
    word-break: break-word;
    transition: border-color .3s ease, color .3s ease;
}
.pv-about.is-muted { color: var(--gray); font-style: italic; }
.pv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2px; }
.pv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--panel);
    font-size: .88rem;
    font-weight: 600;
    transition: border-color .3s ease, color .3s ease, opacity .3s ease;
}
.pv-chip-lock { display: none; align-items: center; margin: 0; color: var(--gray); }
.pv-chip.is-hidden { color: var(--gray); font-weight: 500; opacity: .75; }
.pv-chip.is-hidden .pv-chip-lock { display: inline-flex; }
.pv-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: .78rem; color: var(--gray); }
.pv-pop { animation: esPvPop .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes esPvPop { 0% { transform: scale(.92); opacity: .4; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }
@media (max-width: 640px) {
    .profile-preview { padding: 18px 16px 18px; }
    .profile-preview-bar { justify-content: center; text-align: center; }
    .pv-fact { flex-wrap: wrap; justify-content: center; }
}

/* ---------- ÖNE ÇIKAN TURNUVALAR (anasayfa vitrini): fotoğraf arka plan, ışın efektleri, poster kartlar ---------- */
.hot-stage { position: relative; margin: 34px 0 10px; padding: 46px 0 52px; overflow: hidden; isolation: isolate; border-block: 1px solid var(--border); }
.hot-stage-bg { position: absolute; inset: -20px; z-index: -3; background-size: cover; background-position: center 35%; filter: saturate(1.1) contrast(1.05); transform: scale(1.04); animation: hotDrift 26s ease-in-out infinite alternate; }
.hot-stage::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgb(4 5 10 / .92) 0%, rgb(4 5 10 / .62) 45%, rgb(4 5 10 / .94) 100%), radial-gradient(70% 90% at 50% 0%, rgb(var(--accent-rgb) / .16), transparent 70%); }
.hot-beam { position: absolute; z-index: -1; top: -30%; width: 22%; height: 170%; background: linear-gradient(180deg, transparent, rgb(255 140 60 / .16), transparent); transform: rotate(18deg); filter: blur(14px); pointer-events: none; animation: hotBeam 9s ease-in-out infinite; }
.hot-beam.b1 { left: 8%; }
.hot-beam.b2 { left: 62%; background: linear-gradient(180deg, transparent, rgb(90 140 255 / .16), transparent); animation-delay: -4.5s; }
@keyframes hotDrift { from { transform: scale(1.04) translate3d(-1%, 0, 0); } to { transform: scale(1.1) translate3d(1.5%, -1%, 0); } }
@keyframes hotBeam { 0%, 100% { opacity: .35; transform: rotate(18deg) translateX(-10px); } 50% { opacity: .9; transform: rotate(18deg) translateX(30px); } }
.hot-stage-inner { position: relative; }
.hot-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; color: #fff; }
.hot-flame { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #f97316, #ef4444); box-shadow: 0 0 34px -4px rgb(249 115 22 / .8); animation: hotPulse 2.4s ease-in-out infinite; }
@keyframes hotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.hot-eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .22em; color: #fdba74; }
.hot-head h2 { margin: 2px 0 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 4px 24px rgb(0 0 0 / .6); }
.hot-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .14em; background: rgb(239 68 68 / .18); border: 1px solid rgb(239 68 68 / .5); color: #fca5a5; }
.hot-pill i, .hot-tag i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgb(239 68 68 / .7); animation: hotPing 1.6s ease-out infinite; }
@keyframes hotPing { 0% { box-shadow: 0 0 0 0 rgb(239 68 68 / .7); } 100% { box-shadow: 0 0 0 10px rgb(239 68 68 / 0); } }

.hot-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hot-grid.hot-count-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.hot-grid.hot-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hot-grid.hot-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .hot-grid, .hot-grid.hot-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hot-grid, .hot-grid.hot-count-2, .hot-grid.hot-count-3 { grid-template-columns: minmax(0, 1fr); } .hot-head h2 { font-size: 1.4rem; } .hot-pill { display: none; } }

.hot-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; padding: 16px; border-radius: 24px; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 24px 50px -18px rgb(0 0 0 / .8); transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, border-color .3s ease; }
.hot-card:hover { transform: translateY(-8px); border-color: rgb(255 255 255 / .4); box-shadow: 0 34px 60px -16px rgb(0 0 0 / .9), 0 0 50px -10px rgb(249 115 22 / .55); }
.hot-card::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .18), transparent 60%); }
.hot-card:hover::before { opacity: 1; }
.hot-card-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #3b0764, #0f172a) center / cover no-repeat; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.hot-card:hover .hot-card-bg { transform: scale(1.09); }
.hot-card-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / .05) 32%, rgb(0 0 0 / .82) 68%, rgb(0 0 0 / .96) 100%); }
.hot-card-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hot-tag, .hot-game { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .1em; background: rgb(0 0 0 / .5); border: 1px solid rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hot-tag { color: #fdba74; }
.hot-tag.is-live { color: #fca5a5; border-color: rgb(239 68 68 / .55); }
.hot-game { letter-spacing: .02em; font-weight: 700; min-width: 0; }
.hot-game-name { overflow: hidden; text-overflow: ellipsis; }
.hot-tag { flex-shrink: 0; }
.hot-game img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.hot-card-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.hot-card-body h3 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; text-shadow: 0 3px 18px rgb(0 0 0 / .8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hot-meta { margin: 0; font-size: .82rem; color: rgb(255 255 255 / .72); }
.hot-prize { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 2px; }
.hot-prize small { font-size: 10.5px; letter-spacing: .2em; font-weight: 700; color: #fdba74; }
.hot-prize strong { display: inline-flex; align-items: center; gap: 8px; font-size: 1.7rem; font-weight: 800; line-height: 1.1; background: linear-gradient(90deg, #fde68a, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgb(249 115 22 / .5)); }
.hot-prize strong svg { color: #fbbf24; -webkit-text-fill-color: initial; }
.hot-slots { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgb(255 255 255 / .8); }
.hot-slots > span:first-child { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.hot-bar { flex: 1; height: 6px; border-radius: 999px; background: rgb(255 255 255 / .18); overflow: hidden; }
.hot-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #ef4444); }
.hot-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; padding: 11px 16px; border-radius: 14px; font-size: .9rem; font-weight: 800; background: rgb(255 255 255 / .96); color: #111; transition: background .25s ease, transform .25s ease; }
.hot-cta svg { transition: transform .3s ease; }
.hot-card:hover .hot-cta { background: linear-gradient(90deg, #fb923c, #f97316); color: #fff; }
.hot-card:hover .hot-cta svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .hot-stage-bg, .hot-beam, .hot-flame, .hot-pill i, .hot-tag i { animation: none; } }

/* ---------- HAYALET KARTLAR (sayfa uzunluğu veriden bağımsız kalsın) ---------- */
.ghost-cell { visibility: hidden; pointer-events: none; user-select: none; }
.ghost-cell > * { width: 100%; }
/* ızgaralar boşken mesaj, hayalet kartların üstüne biner; yer kaplamaz */
.mini-grid, .mini-tile-grid, .hub-card-grid { position: relative; }
.grid-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    padding: 18px 20px;
    color: var(--gray);
    font-size: .95rem;
    border: 1px dashed var(--border-strong);
    border-radius: 1rem;
    background: var(--field-bg);
}
.grid-empty a { color: var(--white); }

/* ---------- OYUN SAYFASI HERO'SU (1600x500, 16:5) ----------
   Oyuna özel banner varsa (assets/games/banners/{slug}.jpg|png|webp) arka plan olarak o kullanılır;
   yoksa oyunun vurgu rengiyle ışıklı otomatik tasarım gösterilir. Yazı alanı solda, görselin sağ yarısı serbesttir. */
.game-hero {
    --game-accent: #fff;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 16 / 5;
    min-height: 320px;
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid color-mix(in srgb, var(--game-accent) 35%, var(--border));
    box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--game-accent) 45%, transparent), 0 0 0 1px rgb(var(--ink-rgb) / .04) inset;
    color: #fff;
}
.game-hero-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.game-hero:hover .game-hero-bg { transform: scale(1.04); }
.game-hero-glow {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(55% 120% at 100% 0%, color-mix(in srgb, var(--game-accent) 55%, transparent), transparent 65%),
        radial-gradient(45% 90% at 0% 100%, color-mix(in srgb, var(--game-accent) 25%, transparent), transparent 70%);
    animation: esPulse 7s cubic-bezier(.4, 0, .6, 1) infinite;
}
.game-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .5) 42%, transparent 78%), linear-gradient(0deg, rgb(0 0 0 / .45), transparent 45%); }
.game-hero-cover {
    position: absolute;
    right: 5%;
    top: 50%;
    height: 112%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 1.4rem;
    transform: translateY(-50%) rotate(4deg);
    box-shadow: 0 40px 80px -20px rgb(0 0 0 / .7), 0 0 60px -10px color-mix(in srgb, var(--game-accent) 70%, transparent);
    border: 2px solid rgb(255 255 255 / .18);
    z-index: -1;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.game-hero:hover .game-hero-cover { transform: translateY(-51%) rotate(2deg) scale(1.03); }
.game-hero-content { padding: 2.2rem 2.5rem; max-width: min(720px, 58%); animation: esFadeInUp .8s cubic-bezier(.22, 1, .36, 1) both; }
.game-hero h1 { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 700; line-height: 1.05; margin: 0 0 .7rem; color: #fff; }
.game-hero p { color: rgb(255 255 255 / .8); font-size: .95rem; line-height: 1.7; margin: 0 0 1.1rem; }
.game-hero-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.game-hero-stats span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .8rem;
    background: rgb(0 0 0 / .4);
    border: 1px solid rgb(255 255 255 / .16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.game-hero-stats i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 900px) {
    .game-hero { aspect-ratio: auto; min-height: 460px; }
    .game-hero-content { max-width: 100%; padding: 1.6rem 1.4rem; }
    .game-hero-cover { display: none; }
    .game-hero-shade { background: linear-gradient(0deg, rgb(0 0 0 / .85), rgb(0 0 0 / .25) 70%); }
}
@media (prefers-reduced-motion: reduce) { .game-hero-glow { animation: none; } }

/* ---------- WEBSITE PANEL: çark (yönetici işlemleri) menüsü ---------- */
.gear { display: inline-flex; flex-shrink: 0; }
.gear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--field-bg);
    color: var(--gray);
    cursor: pointer;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .2s ease, color .2s ease, border-color .2s ease;
}
.gear-btn svg { display: block; }
.gear-kebab .gear-btn:hover, .gear-kebab .gear-btn.is-open { transform: none; }
.gear-btn:hover, .gear-btn.is-open { color: var(--white); border-color: var(--gold); background: var(--hover-bg); transform: rotate(60deg); }
.gear-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gear-menu {
    position: fixed;
    z-index: 2600; /* pencerelerin (2000) üstünde de açılır */
    min-width: 230px;
    max-width: 300px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--option-bg); /* opak: arkadaki metinler görünmez */
    box-shadow: 0 18px 44px rgb(var(--shadow-rgb) / .55);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.gear-menu[hidden] { display: none; }
.gear-menu.is-open { opacity: 1; transform: none; }
.gear-menu-title {
    padding: 7px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gear-form { margin: 0; }
.gear-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--white);
    font: inherit;
    font-size: .88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.gear-item svg { flex-shrink: 0; color: var(--gray); transition: color .15s ease; }
.gear-item:hover, .gear-item:focus-visible { outline: none; background: var(--hover-bg); }
.gear-item:hover svg, .gear-item:focus-visible svg { color: var(--white); }
.gear-item.is-danger, .gear-item.is-danger svg { color: #ff8a93; }
.gear-item.is-danger:hover, .gear-item.is-danger:focus-visible { background: rgb(229 72 77 / .14); }
.gear-sep { height: 1px; margin: 5px 4px; background: var(--border); }

/* ---------- WEBSITE PANEL: detaylı filtreler ---------- */
.admin-filters {
    margin-bottom: 18px;
    padding: 16px 18px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
.admin-filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.admin-filters .af-field { margin: 0; min-width: 0; }
.admin-filters .af-field label { margin-bottom: 4px; font-size: 12px; }
.admin-filters .af-wide { grid-column: span 2; }
.admin-filters .form-group input { padding: .55rem .8rem; font-size: .88rem; border-radius: .8rem; }
.admin-filters .custom-select { min-width: 0; }
.admin-filters .custom-select-trigger { padding: .55rem .8rem; font-size: .88rem; border-radius: .8rem; }
.admin-filters .custom-select-option { padding: 7px 10px; font-size: .88rem; }
.af-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-range { grid-column: span 2; }
.admin-filters .dt-picker { min-width: 0; }
.af-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-bottom: 2px; }
.af-actions .btn { margin: 0; }
.af-actions .af-active { align-self: center; }
.admin-content table .badge { margin-bottom: 0; }
.af-active { font-size: .8rem; color: var(--gray); }
.admin-summary { margin: 0 0 12px; font-size: .85rem; color: var(--gray); }
.admin-summary strong { color: var(--white); }
@media (max-width: 640px) {
    .admin-filters .af-wide, .af-range { grid-column: span 1; }
    .af-range .af-pair { grid-template-columns: 1fr; }
}

/* ---------- WEBSITE PANEL: tıklanabilir liste satırları (genel bakış) ---------- */
.admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.admin-card-head h4 { margin: 0; }
.admin-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 6px 12px; white-space: nowrap; }
.admin-view-all svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.admin-view-all:hover svg { transform: translateX(3px); }
.admin-link-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.admin-link-row:last-child { border-bottom: none; }
.admin-link-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px -8px;
    padding: 4px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.admin-link-main:hover { background: var(--hover-bg); transform: translateX(2px); }
.admin-link-main > div { min-width: 0; }
.admin-link-main .admin-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-link-main .badge { margin-left: auto; margin-bottom: 0; flex-shrink: 0; }
.admin-dash { color: var(--gray); }
.admin-cell-actions { width: 1%; white-space: nowrap; text-align: right; }
.admin-content table td .admin-entity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-content table td .admin-entity a { color: var(--gold); text-decoration: none; }
.admin-content table td .admin-entity a:hover { text-decoration: underline; }

/* Dar ekranda geniş yönetim tabloları sayfayı değil kendi içinde yatay kaydırılır */
@media (max-width: 900px) {
    .admin-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-content table th, .admin-content table td { white-space: nowrap; }
}

/* ---------- TAKIM SAYFASI: başlık kartı ve banner ---------- */
.team-header {
    margin-bottom: 32px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.team-header-body { display: flex; gap: 24px; padding: 20px; }
.team-banner {
    aspect-ratio: 1376 / 400;
    max-height: 280px;
    width: 100%;
    background-size: cover;
    background-position: center;
    /* alt kenar karta yumuşakça karışır */
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* banner varken logo bannerın alt kenarına biner */
.team-header.has-banner .team-header-body { margin-top: -3.2rem; position: relative; }
.team-header.has-banner .team-logo { box-shadow: 0 0 0 4px var(--panel-solid), 0 14px 30px -10px var(--shadow); }
@media (max-width: 640px) { .team-header-body { flex-direction: column; } }

/* ---------- SOL KISAYOL ÇUBUĞU (yalnızca simgeler; includes/partials/rail.php + js/core/side-rail.js) ---------- */
body.has-rail { --rail-w: 68px; }
body.has-rail .page-main, body.has-rail footer { margin-left: var(--rail-w); }
.side-rail {
    position: fixed;
    top: var(--header-h, 63px); /* header'ın altından başlar, ondan bağımsızdır */
    left: 0;
    bottom: 0;
    z-index: 90;
    width: var(--rail-w, 68px);
    border-right: 1px solid var(--border-strong);
    background: var(--header-glass); /* header ile aynı cam */
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    backdrop-filter: blur(28px) saturate(1.5);
    box-shadow: 14px 0 36px -20px var(--shadow);
}
.rail-scroll {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 14px 0 96px; /* altta tema düğmesine yer */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rail-sep { width: 26px; height: 1px; margin: 14px 0; background: var(--border-strong); flex-shrink: 0; }

.rail-item {
    position: relative;
    flex-shrink: 0;
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--field-bg);
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .3s ease, border-radius .3s ease;
}
.rail-item img, .rail-tile { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    background: var(--chip-blue);
}
.rail-tile-green { background: var(--chip-green); }
.rail-tile-purple { background: var(--chip-purple); }
.rail-tile-blue { background: var(--chip-blue); }
.rail-tile-add { background: transparent; color: var(--gray); transition: color .2s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.rail-item.rail-add { border-style: dashed; border-color: var(--border-strong); }
.rail-item.rail-add:hover .rail-tile-add { color: var(--white); transform: rotate(90deg); }
.rail-item:hover, .rail-item:focus-visible {
    outline: none;
    transform: translateY(-2px) scale(1.07);
    border-radius: 16px;
    border-color: var(--gold);
    box-shadow: 0 10px 24px -8px rgb(var(--shadow-rgb) / .8), 0 0 0 1px rgb(var(--ink-rgb) / .12);
}
/* bulunduğun sayfa: solunda ince bir işaret + halka */
.rail-item.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / .18); }
.rail-item.is-active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    border-radius: 0 3px 3px 0;
    background: var(--gold);
}

/* üzerine gelince sağda açılan bilgi kutusu (tek, paylaşımlı; <body>'ye eklenir) */
.rail-fly {
    position: fixed;
    z-index: 1550;
    width: 176px;
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: var(--option-bg); /* opak */
    box-shadow: 0 20px 48px rgb(var(--shadow-rgb) / .6);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px) scale(.96);
    transform-origin: left center;
    transition: opacity .16s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility .16s;
}
.rail-fly.is-open { opacity: 1; visibility: visible; transform: none; }
/* kutucuğun solundaki küçük ok */
.rail-fly::before {
    content: '';
    position: absolute;
    left: -6px;
    top: var(--arrow-y, 50%);
    width: 11px;
    height: 11px;
    margin-top: -6px;
    transform: rotate(45deg);
    border-left: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    background: var(--option-bg);
}
.rail-fly-icon { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); }
.rail-fly-icon img, .rail-fly-icon .rail-tile { width: 100%; height: 100%; object-fit: cover; }
.rail-fly-icon .rail-tile { font-size: 1.4rem; }
.rail-fly strong { font-size: .92rem; font-weight: 700; line-height: 1.25; color: var(--white); word-break: break-word; }
.rail-fly-sub { font-size: .75rem; color: var(--gray); }
.rail-fly-btn {
    margin-top: 4px;
    padding: 6px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--field-bg);
    color: var(--white);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.rail-fly-btn:hover { background: var(--white); color: var(--black); border-color: var(--white); transform: translateY(-1px); }
.rail-fly-btn.is-linked { color: #4ade80; border-color: rgb(74 222 128 / .5); cursor: default; }

/* tema düğmesi çubuğun altına oturur */

/* dar ekranlarda çubuk gizlenir (içerik tam genişlikte kalır) */
@media (max-width: 900px) {
    body.has-rail { --rail-w: 0px; }
    .side-rail { display: none; }
    }
@media (prefers-reduced-motion: reduce) { .rail-item, .rail-fly { transition: none; } }

/* ---------- AYARLAR: kullanıcı adı süresi (kırmızı), Sol Menü tercihleri ---------- */
.form-group input:disabled { opacity: .6; cursor: not-allowed; }
.settings-hint-danger { color: #ef4444; font-weight: 500; }
.settings-hint-danger strong { font-weight: 700; }

/* aç/kapa anahtarı */
.es-switch { position: relative; flex-shrink: 0; width: 44px; height: 24px; }
.es-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.es-switch span { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--input-border); background: var(--field-bg); transition: background .3s ease, border-color .3s ease; }
.es-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gray); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .3s ease; }
.es-switch input:checked + span { background: rgb(var(--accent-rgb) / .9); border-color: rgb(var(--accent-rgb) / .9); }
.es-switch input:checked + span::after { transform: translateX(20px); background: var(--on-accent); }
.es-switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.sbp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 18px; align-items: start; margin-bottom: 14px; }
.sbp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--field-bg);
    transition: border-color .25s ease, background .25s ease, opacity .2s ease, box-shadow .25s ease;
}
.sbp-row:hover { border-color: var(--border-strong); background: var(--hover-bg); }
.sbp-row.is-dragging { opacity: .55; border-style: dashed; }
.sbp-row.sbp-flash { animation: esPvPop .5s cubic-bezier(.22, 1, .36, 1); }
.sbp-grip { display: inline-flex; color: var(--gray); cursor: grab; }
.sbp-row:active .sbp-grip { cursor: grabbing; }
.sbp-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; border: 1px solid var(--border-strong); color: var(--white); }
.sbp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sbp-text strong { font-size: .92rem; font-weight: 600; }
.sbp-text small { font-size: .78rem; color: var(--gray); line-height: 1.35; }
.sbp-locked { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: .75rem; color: var(--gray); white-space: nowrap; }
.sbp-move { display: inline-flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sbp-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 20px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--gray); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.sbp-btn:hover { background: var(--hover-bg); color: var(--white); border-color: var(--border-strong); }
.sbp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* mini önizleme: gerçek çubuğun şematik hali */
.sbp-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sbp-preview-label { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.sbp-rail { display: flex; flex-direction: column; align-items: center; width: 52px; padding: 10px 0; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--field-bg); transition: height .3s ease; }
.sbp-pv-group { display: flex; flex-direction: column; align-items: center; gap: 5px; animation: esFadeInUp .35s ease both; }
.sbp-pv-group i { display: block; width: 24px; height: 24px; border-radius: 8px; background: var(--chip-green); }
.sbp-pv-popular_hubs i, .sbp-pv-my_hubs i { background: var(--chip-purple); }
.sbp-pv-teams i { background: var(--chip-blue); }
.sbp-pv-sep { width: 18px; height: 1px; margin: 8px 0; background: var(--border-strong); }
@media (max-width: 720px) {
    .sbp-layout { grid-template-columns: 1fr; }
    .sbp-preview { flex-direction: row; justify-content: center; }
    .sbp-row { flex-wrap: wrap; }
}

/* ---------- TURNUVA SAYFASI: genel bakış yerleşimi ---------- */
.overview-main { max-width: 700px; min-width: 0; }
.overview-info-top { margin-bottom: 22px; }
.organizer-box { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.organizer-head { display: inline-flex; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.organizer-head svg { color: var(--gray); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.organizer-head:hover svg { transform: translateX(4px); color: var(--white); }
.organizer-head strong { font-size: 1rem; }
.organizer-logo { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; object-fit: cover; border: 1px solid var(--border-strong); }
.organizer-logo-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--chip-purple); color: #fff; font-weight: 700; font-size: 1.2rem; }
.organizer-desc { margin: 12px 0 0; color: var(--gray); font-size: 14px; line-height: 1.7; white-space: pre-line; }
.overview-admins { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
.overview-admins .overview-stat-label { display: block; margin-bottom: 2px; }
.overview-admin-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; margin: 0 -6px; border-radius: 10px; color: var(--white); text-decoration: none; font-size: .9rem; transition: background .2s ease; }
.overview-admin-row:hover { background: var(--hover-bg); }
.overview-admin-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); }

/* ---------- WEBSITE PANEL: başlığa tıklayınca sıralama ---------- */
.admin-content table th.th-sort { padding: 0; }
.admin-content table th.th-sort a { display: flex; align-items: center; gap: 6px; padding: 9px 12px; color: inherit; text-decoration: none; white-space: nowrap; transition: color .2s ease, background .2s ease; }
.admin-content table th.th-sort a:hover { color: var(--white); background: var(--hover-bg); }
.sort-ind { display: inline-flex; opacity: 0; color: var(--gray); transition: opacity .2s ease; }
.th-sort a:hover .sort-ind { opacity: .55; }
.th-sort.is-sorted a { color: var(--white); }
.th-sort.is-sorted .sort-ind { opacity: 1; color: var(--white); }
.game-logo-form { display: flex; align-items: center; gap: 14px; }
.game-logo-form .image-picker { flex-shrink: 0; }

/* ---------- SOSYAL MEDYA MARKA SİMGELERİ ---------- */
.brand-icon { display: block; flex-shrink: 0; }
.profile-social-icon { color: var(--gray); }
.profile-social-icon:hover { color: var(--brand, var(--white)); border-color: var(--brand, var(--gold)); background: color-mix(in srgb, var(--brand, transparent) 14%, var(--panel)); }
.profile-social-icon[data-brand="x"]         { --brand: var(--white); }
.profile-social-icon[data-brand="instagram"] { --brand: #e4405f; }
.profile-social-icon[data-brand="discord"]   { --brand: #5865f2; }
.profile-social-icon[data-brand="youtube"]   { --brand: #ff3b3b; }
.profile-social-icon[data-brand="twitch"]    { --brand: #9146ff; }
.profile-social-icon[data-brand="kick"]      { --brand: #53fc18; }
/* ayarlardaki sosyal medya etiketleri: marka simgesi + ad */
.social-label { display: inline-flex; align-items: center; gap: 7px; }
.social-label .brand-icon { color: var(--gray); }

/* ---------- HUB: üyeler paneli ve "Tümünü Görüntüle" penceresi ---------- */
.hub-member-list { gap: 4px; }
.hub-member-list .my-team-member { padding: 8px 10px; border-radius: 12px; font-size: 14px; }
.hub-member-list .my-team-member img { width: 34px; height: 34px; }
.members-modal-box { max-width: 560px; }
.members-toolbar { padding: 14px 1.6rem 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.members-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 2px solid var(--input-border);
    border-radius: 1rem;
    background: var(--field-bg);
    color: var(--gray);
    transition: border-color .3s ease;
    flex: 1;
    min-width: 160px;
}
.members-search:focus-within { border-color: var(--gold); color: var(--white); }
.members-datefilter { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.members-datefilter label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gray); white-space: nowrap; }
.members-datefilter input[type="date"] { padding: 8px 8px; border: 2px solid var(--input-border); border-radius: .7rem; background: var(--field-bg); color: var(--white); font: inherit; font-size: .82rem; color-scheme: dark; }
.members-datefilter input[type="date"]:focus { outline: none; border-color: var(--gold); }
.members-datefilter-clear { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--input-border); background: var(--field-bg); color: var(--gray); cursor: pointer; }
.members-datefilter-clear:hover { color: var(--white); border-color: var(--gold); }
@media (max-width: 560px) { .members-datefilter label span, .members-datefilter label { font-size: 11px; } .members-toolbar { padding: 14px 1.1rem 6px; } }
.members-search input { flex: 1; min-width: 0; padding: .75rem 0; border: 0; outline: 0; background: transparent; color: var(--white); font: inherit; font-size: .95rem; }
.members-list { height: 440px; overflow-y: auto; padding: 6px 1.2rem 10px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    color: var(--white);
    text-decoration: none;
    flex-shrink: 0;
    animation: esFadeInUp .4s cubic-bezier(.22, 1, .36, 1) both;
    transition: background .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
a.member-row:hover { background: var(--hover-bg); transform: translateX(3px); }
.member-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); flex-shrink: 0; }
.member-name { font-weight: 600; font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-row small { margin-left: auto; color: var(--gray); font-size: .75rem; white-space: nowrap; }
.member-row.is-skeleton { animation: none; }
.sk-av, .sk-line { display: block; background: linear-gradient(90deg, var(--field-bg), var(--hover-bg), var(--field-bg)); background-size: 200% 100%; animation: esShimmer 1.2s linear infinite; }
.sk-av { width: 40px; height: 40px; border-radius: 50%; }
.sk-line { height: 12px; width: 40%; border-radius: 6px; }
@keyframes esShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.members-empty { margin: auto; color: var(--gray); font-size: .9rem; text-align: center; }
.members-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 1.6rem 1.4rem; border-top: 1px solid var(--border); }
.members-pager span { color: var(--gray); font-size: .85rem; }
.members-pager .btn { display: inline-flex; align-items: center; gap: 6px; }
.members-pager .btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 520px) { .members-list { height: 52vh; } .member-row small { display: none; } }

/* ---------- BİLDİRİMLER: tarih/saat, sonuç durumu, okunmamış işareti ---------- */
.notif-item-text { min-width: 0; flex: 1; }
.notif-time { display: block; margin-top: 3px; font-size: 11px; color: var(--gray); letter-spacing: .01em; }
.notif-state { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--gray); }
.notif-state.is-ok { color: #4ade80; border-color: rgb(74 222 128 / .45); background: rgb(74 222 128 / .08); }
.notif-item.is-unread { position: relative; }
.notif-item.is-unread::before { content: ''; position: absolute; left: -4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.notif-item a strong { color: var(--gold-light); }

/* ---------- DM: sohbet listesi (önizleme + tarih/saat), gün ayraçları, düzenle/sil, ek, emoji ---------- */
.dm-conv-item { padding: 10px 10px; gap: 12px; }
.dm-conv-item img { width: 40px; height: 40px; flex-shrink: 0; }
.dm-conv-meta { flex: 1; gap: 3px; }
.dm-conv-top, .dm-conv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dm-conv-name { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-conv-time { flex-shrink: 0; font-size: 11px; color: var(--gray); }
.dm-conv-preview { font-size: 12px; flex: 1; min-width: 0; }
.dm-conv-preview.is-deleted { font-style: italic; opacity: .8; }
.dm-conv-unread { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; }

.dm-thread-user { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--white); text-decoration: none; border-radius: 10px; padding: 3px 8px 3px 4px; transition: background .2s ease; }
.dm-thread-user:hover { background: var(--hover-bg); }
.dm-thread-user:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.dm-thread-head img { width: 30px; height: 30px; }
.dm-thread-messages { gap: 4px; padding: 12px 12px 8px; }
.dm-date-sep { align-self: center; margin: 12px 0 6px; padding: 3px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--field-bg); color: var(--gray); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.dm-date-sep:first-child { margin-top: 2px; }
.dm-msg-row { display: flex; }
.dm-msg-row.mine { justify-content: flex-end; }
.dm-msg-bubble { position: relative; display: flex; flex-direction: column; gap: 4px; word-break: break-word; }
.dm-msg-bubble.is-deleted { background: transparent; border-style: dashed; }
.dm-msg-deleted { font-style: italic; color: var(--gray); font-size: 12.5px; }
.dm-msg-text { white-space: pre-wrap; }
.dm-msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.dm-msg-meta .dm-msg-time { display: inline; margin: 0; }
.dm-edited { font-size: 10px; color: var(--gray); font-style: italic; }
.dm-msg-image { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: cover; }
.dm-msg-image-link { display: block; margin: -2px -4px 0; }
/* kendi mesajının üstünde belirir */
.dm-msg-actions { position: absolute; top: -13px; right: 8px; display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--option-bg); box-shadow: 0 6px 16px -6px rgb(var(--shadow-rgb) / .7); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.dm-msg-bubble:hover .dm-msg-actions, .dm-msg-actions:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.dm-msg-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray); cursor: pointer; transition: background .15s ease, color .15s ease; }
.dm-msg-act:hover { background: var(--hover-bg); color: var(--white); }
.dm-msg-act.is-danger:hover { background: rgb(229 72 77 / .16); color: #ff8a93; }
.dm-edit-wrap { display: flex; align-items: center; gap: 4px; min-width: 200px; }
.dm-edit-input { flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid var(--gold); border-radius: 10px; background: var(--field-bg); color: var(--white); font: inherit; font-size: 13px; outline: none; }
.dm-edit-btn { width: 24px; height: 24px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--gray); cursor: pointer; font-size: 12px; }
.dm-edit-btn.is-ok { color: #4ade80; border-color: rgb(74 222 128 / .5); }
.dm-edit-btn:hover { background: var(--hover-bg); }

.dm-thread-form { flex-direction: column; flex-shrink: 0; position: relative; }
.dm-thread-form .dm-thread-input-row { align-items: center; gap: 6px; }
.dm-tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray); cursor: pointer; transition: background .2s ease, color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.dm-tool-btn:hover { background: var(--hover-bg); color: var(--white); transform: scale(1.08); }
.dm-attach-preview { display: flex; align-items: center; gap: 10px; margin: 8px 10px 0; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--field-bg); font-size: 12px; color: var(--gray); animation: esFadeInUp .3s ease both; }
.dm-attach-preview[hidden] { display: none; }
.dm-attach-preview img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.dm-attach-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-attach-preview button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--gray); cursor: pointer; }
.dm-attach-preview button:hover { color: var(--white); background: var(--hover-bg); }
.dm-emoji-panel { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); max-height: 190px; overflow-y: auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--option-bg); box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .6); z-index: 5; animation: esFadeInUp .25s ease both; scrollbar-width: thin; }
.dm-emoji-panel[hidden] { display: none; }
.dm-emoji { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; transition: background .15s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
.dm-emoji:hover { background: var(--hover-bg); transform: scale(1.2); }

/* ---------- Engellenen kullanıcılar listesi (Ayarlar → Gizlilik) ---------- */
.blocked-list { display: flex; flex-direction: column; gap: 8px; }
.blocked-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .02); }
.blocked-row-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: var(--white); }
.blocked-row-user img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blocked-row-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.blocked-row-date { color: var(--gray); font-size: 12px; white-space: nowrap; }
.blocked-empty { margin: 0; color: var(--gray); font-size: 13px; }
@media (max-width: 520px) { .blocked-row-date { display: none; } }

/* ---------- KAYDEDİLMEMİŞ DEĞİŞİKLİK KUTUSU (js/core/unsaved-bar.js) ---------- */
.save-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1850;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 10px 10px 20px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background: var(--option-bg); /* opak: arkadaki içerik görünmez */
    box-shadow: 0 18px 44px rgb(var(--shadow-rgb) / .45);
    transform: translate(-50%, 170%);
    opacity: 0;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, border-color .25s ease;
}
.save-bar.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.save-bar-text { font-size: 14px; font-weight: 600; color: var(--white); white-space: nowrap; }
.save-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.save-bar .btn { margin: 0; }
.save-bar .save-bar-ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.save-bar .save-bar-ok:hover { background: #15803d; border-color: #15803d; }
.save-bar.is-busy { opacity: .85; }
.save-bar.is-busy .btn { pointer-events: none; }
/* çıkmaya çalışınca: titrer, çevresi kırmızıya döner, bitince eski haline gelir */
.save-bar.is-shaking { animation: save-bar-shake .62s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes save-bar-shake {
    0%   { transform: translate(-50%, 0);           border-color: var(--border-strong); }
    10%  { transform: translate(calc(-50% - 9px), 0); border-color: #ef4444; }
    25%  { transform: translate(calc(-50% + 9px), 0); border-color: #ef4444; }
    40%  { transform: translate(calc(-50% - 7px), 0); border-color: #ef4444; }
    55%  { transform: translate(calc(-50% + 7px), 0); border-color: #ef4444; }
    70%  { transform: translate(calc(-50% - 4px), 0); border-color: #ef4444; }
    85%  { transform: translate(calc(-50% + 3px), 0); border-color: #ef4444; }
    100% { transform: translate(-50%, 0);           border-color: var(--border-strong); }
}
@media (max-width: 640px) {
    .save-bar { bottom: 84px; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 14px; width: calc(100vw - 32px); }
    .save-bar-text { white-space: normal; text-align: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .save-bar.is-shaking { animation: save-bar-flash .62s ease both; }
    @keyframes save-bar-flash { 0%, 100% { border-color: var(--border-strong); } 15%, 85% { border-color: #ef4444; } }
}

.slide-delete-form { margin-top: 10px; }

/* Kapak görseli olmayan (yeni eklenen) oyun kartında logo + ad gösterilir */
.game-card-fallback { display: none; }
.game-card.no-art .game-card-fallback { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: #fff; }
.game-card-fallback img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.game-card-fallback b { font-size: 16px; text-shadow: 0 2px 10px rgb(0 0 0 / .5); }
.game-link { display: inline-flex; align-items: center; gap: 7px; }
.game-link-icon { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

/* ---------- WEBSITE PANEL: oyun listesi (ad + logo) ---------- */
.admin-game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.admin-game-row { display: flex; align-items: center; gap: 18px; margin: 0; }
.admin-game-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-game-slug { font-size: 12px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twofa-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.twofa-pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); }
.twofa-pill.is-on { color: #6ee7a0; border-color: rgb(110 231 160 / .4); background: rgb(110 231 160 / .1); }
.twofa-pill.is-off { color: var(--gray); }
.twofa-setup, .twofa-recovery { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.twofa-steps { margin: 0 0 14px; padding-left: 20px; color: var(--gray); font-size: 13px; line-height: 1.7; }
.twofa-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; color: var(--white); word-break: break-all; }
.twofa-qr-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.twofa-qr-row img { background: #fff; padding: 8px; border-radius: 12px; }
.twofa-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.twofa-codes code { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); text-align: center; letter-spacing: 1px; color: var(--white); }
.ng-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ng-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--field-bg); }
.ng-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ng-meta small { color: var(--gray); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-actions { display: flex; gap: 6px; margin: 0; }
.ng-mv { padding: .4rem .55rem; }
.ng-row form { margin: 0; }
@media (max-width: 520px) { .ng-row { flex-wrap: wrap; } .ng-meta { flex-basis: calc(100% - 60px); } }
@media (max-width: 520px) { .admin-game-list { grid-template-columns: minmax(0, 1fr); } .admin-game-row { flex-direction: column; align-items: stretch; } }

/* ---------- Google ile giriş/kayıt düğmesi ---------- */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--gray); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: .7rem 1rem; border-radius: 1rem; border: 1px solid var(--border-strong);
    background: var(--field-bg); color: var(--white); font: inherit; font-weight: 600; font-size: .92rem; text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-google:hover { background: var(--hover-bg); border-color: rgb(var(--ink-rgb) / .5); transform: translateY(-1px); }
.btn-google svg { flex-shrink: 0; }

.rail-fly-account { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #4ade80; }
.rail-fly-btn.is-linked { cursor: pointer; }

/* ---------- Oyun bağlantıları (Ayarlar) ---------- */
.game-link-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.game-link-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 16px; background: rgb(var(--ink-rgb) / .02); transition: border-color .2s ease, background .2s ease; }
.game-link-row:hover { border-color: var(--border-strong); background: var(--hover-bg); }
.game-link-row.is-linked { border-color: rgb(74 222 128 / .35); }
.game-link-logo { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--accent-rgb) / .16); font-weight: 700; }
.game-link-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-link-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.game-link-meta strong { font-size: 14.5px; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-link-meta small { font-size: 12px; color: var(--gray); }
.game-link-account { display: inline-flex; align-items: center; gap: 6px; color: #4ade80 !important; min-width: 0; }
.game-link-account img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.game-link-account em { color: var(--gray); font-style: normal; }
@media (max-width: 520px) { .game-link-row { flex-wrap: wrap; } .game-link-row .btn { width: 100%; } .game-link-row .game-link-rank, .game-link-row .game-link-rank-add { width: 100%; justify-content: center; } }

/* ---------- Profil: bağlı oyun hesapları ---------- */
/* ---------- Profil: Oyun Hesapları kartı — her hesap oyunun rengiyle vurgulanan bir kart ---------- */
.gacc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gacc-head h4 { margin: 0; }
.gacc-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; background: rgb(var(--ink-rgb) / .1); color: var(--white); }
.gacc-add { margin-left: auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--gray); text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.gacc-add:hover { color: var(--white); border-color: var(--gold); background: var(--hover-bg); transform: rotate(90deg); }
.gacc-list { display: flex; flex-direction: column; gap: 10px; }
.gacc-tile { --gacc: #8a8f98; position: relative; display: flex; align-items: center; gap: 6px; border-radius: 18px; overflow: visible; border: 1px solid var(--border); background: linear-gradient(115deg, rgb(var(--ink-rgb) / .07), rgb(var(--ink-rgb) / .02) 70%); transition: border-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }
@supports (background: color-mix(in srgb, red 50%, blue)) {
    .gacc-tile { border-color: color-mix(in srgb, var(--gacc) 32%, var(--border)); background: linear-gradient(115deg, color-mix(in srgb, var(--gacc) 24%, transparent), color-mix(in srgb, var(--gacc) 5%, transparent) 62%, transparent); }
}
.gacc-tile::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gacc); box-shadow: 0 0 14px var(--gacc); }
.gacc-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -20px var(--gacc); }
.gacc-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 13px 12px 13px 16px; color: inherit; text-decoration: none; }
.gacc-icons { display: inline-flex; flex-shrink: 0; }
.gacc-icons img { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; border: 2px solid var(--panel-solid, var(--bg)); margin-left: -16px; box-shadow: 0 8px 18px -8px rgb(0 0 0 / .7); }
.gacc-icons img:first-child { margin-left: 0; }
.gacc-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.gacc-game { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gacc-name { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 16px; line-height: 1.25; color: var(--white); }
.gacc-name .gacc-avatar { align-self: center; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-right: 4px; }
.gacc-nick { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gacc-tag { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--gray); flex-shrink: 0; }
.gacc-chip { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; margin-top: 3px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: rgb(var(--ink-rgb) / .08); color: var(--gray); }
.gacc-chip.is-verified { background: rgb(34 197 94 / .14); color: #4ade80; }
.gacc-go { position: absolute; top: 11px; right: 12px; color: var(--gray); opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.gacc-tile:hover .gacc-go { opacity: 1; transform: none; }
.gacc-tile .gear-kebab { flex-shrink: 0; margin-right: 8px; }
.gacc-lock { margin-right: 10px; flex-shrink: 0; width: 30px; height: 30px; padding: 0; justify-content: center; }
.gacc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 140px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--white); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
.gacc-empty:hover { border-color: var(--gold); background: var(--hover-bg); transform: translateY(-2px); }
.gacc-empty strong { font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.gacc-empty small { font-size: 12px; line-height: 1.5; color: var(--gray); max-width: 240px; }
.gacc-empty-ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--ink-rgb) / .08); color: var(--white); }

/* ---------- Profil: Son Hareketler ---------- */
.profile-more-link { font-size: 12.5px; font-weight: 700; color: var(--gray); text-decoration: none; transition: color .2s ease; }
.profile-more-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.profile-activity-card { padding-top: 6px; padding-bottom: 6px; }
/* Beşten fazla hareket varsa alt kısım bulanıklaşıp karartılarak "devamı var" hissi verir (Tümünü Görüntüle'ye yönlendirir) */
.profile-activity-card.has-more { position: relative; }
.profile-activity-card.has-more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-radius: 0 0 16px 16px; background: linear-gradient(rgb(10 11 14 / 0), var(--panel-solid) 88%); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); pointer-events: none; }

/* ---------- Turnuvada oynarken kilit (includes/tournament_lock.php) ---------- */
.tl-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgb(245 158 11 / .4); background: rgb(245 158 11 / .08); font-size: 13.5px; line-height: 1.6; }
.tl-notice svg { flex-shrink: 0; margin-top: 2px; color: #fbbf24; }
.tl-notice strong { color: var(--white); }
.tl-notice a { color: #fbbf24; font-weight: 700; text-decoration: none; }
.tl-notice a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-fieldset { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.tl-fieldset:disabled > * { opacity: .5; pointer-events: none; user-select: none; }
.tl-lock-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; color: #fbbf24; background: rgb(245 158 11 / .12); border: 1px solid rgb(245 158 11 / .35); white-space: nowrap; transition: background .2s ease; }
.tl-lock-chip:hover { background: rgb(245 158 11 / .22); }
.game-link-account a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- DM: GIF arama paneli ---------- */
.dm-tool-gif { width: auto; min-width: 32px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.dm-gif-panel { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--option-bg); box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .6); z-index: 5; animation: esFadeInUp .25s ease both; }
.dm-gif-panel[hidden] { display: none; }
.dm-gif-panel input[type="search"] { width: 100%; padding: .5rem .8rem; font-size: .85rem; border-radius: .8rem; }
.dm-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; }
.dm-gif-item { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgb(var(--ink-rgb) / .06); cursor: pointer; aspect-ratio: 1; transition: transform .2s ease, box-shadow .2s ease; }
.dm-gif-item:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgb(var(--shadow-rgb) / .4); }
.dm-gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-gif-msg { grid-column: 1 / -1; margin: 10px 0; text-align: center; color: var(--gray); font-size: 13px; }
.dm-gif-credit { text-align: right; color: var(--gray); font-size: 10px; letter-spacing: .04em; }

.login-opt-logo { background: rgb(var(--ink-rgb) / .06); color: var(--white); }
.dlg-chip:has(.dlg-chip-img) { background: transparent; padding: 0; overflow: hidden; }
.dlg-chip-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

.admin-link-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; align-items: start; }
.admin-link-form .form-group { margin: 0; }

/* =====================================================================================================
   FİKSTÜR v2 (FACEIT/Ready4.gg tarzı kartlar) + MAÇ ODASI
   ===================================================================================================== */
.fx2 .fx-header-divider { background: var(--border-strong); }
.fx2-round { position: absolute; top: 0; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.fx2-round strong { font-size: 13.5px; font-weight: 700; color: var(--white); }
.fx2-round-count { font-size: 11px; color: var(--gray); font-weight: 500; }
.fx2-round-when { font-size: 10.5px; color: var(--gray); opacity: .85; letter-spacing: .01em; }

.fx2-match { position: absolute; display: block; padding: 0; text-decoration: none; color: var(--white); background: none; border: 0; z-index: 1; }
.fx2-top { display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 2px 3px; }
.fx2-status { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; background: rgb(var(--ink-rgb) / .12); color: var(--gray); }
.fx2-status.s-live { background: rgb(239 68 68 / .18); color: #f87171; }
.fx2-status.s-ready, .fx2-status.s-veto { background: rgb(var(--accent-rgb) / .2); color: var(--white); }
.fx2-status.s-finished { background: rgb(var(--ink-rgb) / .14); }
.fx2-status.s-disputed { background: rgb(245 158 11 / .18); color: #fbbf24; }
.fx2-no { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--gray); }
.fx2-team {
    position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 8px;
    background: var(--panel); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    transition: background .2s ease, opacity .2s ease;
}
.fx2-top + .fx2-team { border-top: 1px solid var(--border); border-radius: 9px 9px 0 0; }
.fx2-team + .fx2-team { border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; }
.fx2-logo { width: 22px; height: 22px; border-radius: 6px; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--accent-rgb) / .16); font-size: 14px; font-weight: 700; color: var(--white); border: 1px solid var(--border); }
.fx2-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx2-logo-empty { background: rgb(var(--ink-rgb) / .05); color: var(--gray); }
.fx2-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.fx2-score { font-size: 13.5px; font-weight: 700; color: var(--gray); }
.fx2-team.is-empty .fx2-name { color: var(--gray); font-weight: 500; }
.fx2-team.is-win { background: var(--hover-bg); }
.fx2-team.is-win::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: rgb(var(--accent-rgb)); border-radius: 0 6px 6px 0; }
.fx2-team.is-win .fx2-name { color: var(--white); }
.fx2-team.is-win .fx2-score { color: #4ade80; }
.fx2-team.is-lose .fx2-score { color: #f87171; }
.fx2-status.s-paused, .fx2-status.s-cancelled { background: rgb(245 158 11 / .16); color: #fbbf24; }
.fx2-status.s-cancelled { background: rgb(239 68 68 / .14); color: #f87171; }
.fx2-team.is-lose { opacity: .55; }
.fx2-foot { display: flex; align-items: center; gap: 6px; height: 20px; padding: 4px 2px 0; font-size: 10.5px; color: var(--gray); }
.fx2-foot svg { flex-shrink: 0; opacity: .8; }
.fx2-foot i { font-style: normal; opacity: .6; }
.fx2-match.is-link { cursor: pointer; }
.fx2-match.is-open { cursor: pointer; }
.fx2-match.is-open:hover .fx2-team { border-color: var(--border-strong); }
.fx2-match.is-link:hover .fx2-team { border-color: var(--border-strong); }
.fx2-match.is-link:hover .fx2-team:not(.is-win) { background: var(--hover-bg); }
.fx2-match.is-link:hover .fx2-no { color: var(--white); }
.fx2-match.s-bye { opacity: .7; }
@media (max-width: 700px) { .fx2-round strong { font-size: 13.5px; } }

/* ---------- MAÇ ODASI (skor tahtası + aşama çizgisi + sahne) ---------- */
.mr-back { display: inline-block; margin-bottom: 14px; color: var(--gray); font-size: 13px; text-decoration: none; transition: color .2s ease; }
.mr-back:hover { color: var(--white); }
.matchroom { --mr-a: #3b82f6; --mr-b: #f43f5e; display: flex; flex-direction: column; gap: 18px; }
.mr-loading { color: var(--gray); }
.side-A { --side: var(--mr-a); }
.side-B { --side: var(--mr-b); }

/* skor tahtası */
.mr-hero { position: relative; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 26px; padding: 18px 26px 26px; background: var(--panel-solid); isolation: isolate; }
.mr-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 0% 50%, rgb(59 130 246 / .22), transparent 70%), radial-gradient(60% 120% at 100% 50%, rgb(244 63 94 / .2), transparent 70%); }
.mr-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.mr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-chip { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgb(var(--ink-rgb) / .08); border: 1px solid var(--border); color: var(--white); }
.mr-when { font-size: 13px; color: var(--gray); }
.mr-hero-body { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; }
.mr-hero-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.mr-hero-logo { width: 96px; height: 96px; border-radius: 24px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--side), rgb(0 0 0 / .4)); border: 2px solid var(--side); box-shadow: 0 0 40px -6px var(--side); }
.mr-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr-hero-name { font-size: 22px; font-weight: 800; color: var(--white); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-hero-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.mr-hero-tag { font-size: 12px; color: var(--gray); letter-spacing: .08em; }
.mr-hero-team.is-loser { opacity: .55; }
.mr-winner-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgb(34 197 94 / .16); color: #4ade80; }
.mr-hero-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 150px; text-align: center; }
.mr-vs { font-size: 44px; font-weight: 800; letter-spacing: .04em; color: var(--white); opacity: .9; }
.mr-score { font-size: 54px; font-weight: 800; letter-spacing: .04em; color: var(--white); line-height: 1; }
.mr-score.is-pending { opacity: .6; }
.mr-hero-sub { font-size: 13px; color: var(--gray); }
.mr-status { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgb(var(--ink-rgb) / .12); color: var(--white); }
.mr-status.s-live { background: rgb(239 68 68 / .2); color: #f87171; }
.mr-status.s-ready, .mr-status.s-veto { background: rgb(var(--accent-rgb) / .25); }
.mr-status.s-finished { background: rgb(34 197 94 / .18); color: #4ade80; }
.mr-status.s-disputed { background: rgb(245 158 11 / .2); color: #fbbf24; }

/* aşama çizgisi */
.mr-timeline { display: flex; list-style: none; margin: 0; padding: 0; position: relative; }
.mr-tl-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; font-size: 12.5px; color: var(--gray); }
.mr-tl-step::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; }
.mr-tl-step:first-child::before { display: none; }
.mr-tl-step.is-done::before, .mr-tl-step.is-active::before { background: rgb(34 197 94 / .6); }
.mr-tl-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--panel-solid); border: 2px solid var(--border-strong); color: var(--gray); transition: all .3s ease; }
.mr-tl-step.is-done .mr-tl-dot { background: #16a34a; border-color: #16a34a; color: #fff; }
.mr-tl-step.is-active .mr-tl-dot { border-color: rgb(var(--accent-rgb)); color: var(--white); box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .18); animation: mrPulse 2s ease-in-out infinite; }
.mr-tl-step.is-active .mr-tl-name, .mr-tl-step.is-done .mr-tl-name { color: var(--white); font-weight: 600; }
@keyframes mrPulse { 0%, 100% { box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .18); } 50% { box-shadow: 0 0 0 9px rgb(var(--accent-rgb) / .05); } }

/* ana yerleşim */
.mr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.mr-side { display: flex; flex-direction: column; gap: 14px; }
.mr-stage, .mr-roster { border: 1px solid var(--border); border-radius: 22px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); padding: 18px 20px; }
.mr-stage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mr-stage-head h3 { margin: 0; font-size: 19px; }
.mr-stage-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: rgb(var(--accent-rgb) / .18); color: var(--white); }
.mr-muted { color: var(--gray); font-size: 13px; margin: 8px 0; }
.mr-big { font-size: 22px; font-weight: 800; margin: 10px 0; color: var(--white); }
.mr-sub-title { margin: 16px 0 4px; font-weight: 700; font-size: 14px; }
.mr-warn { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #fbbf24; margin: 14px 0; }
.mr-count { font-variant-numeric: tabular-nums; }
.btn-lg { padding: .9rem 2rem; font-size: 1.05rem; }
.mr-btn-ready { background: #16a34a; border-color: #16a34a; color: #fff; }
.mr-btn-ready:hover { background: #15803d; border-color: #15803d; }
.mr-winner { font-size: 18px; font-weight: 800; color: #4ade80; margin: 4px 0 14px; }
.mr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* hazır ölçerler */
.mr-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0; }
.mr-meter-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.mr-meter-top span { color: var(--gray); font-variant-numeric: tabular-nums; }
.mr-meter-top span.is-ok { color: #4ade80; font-weight: 700; }
.mr-meter-bar { height: 10px; border-radius: 999px; background: rgb(var(--ink-rgb) / .1); overflow: hidden; }
.mr-meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--side); transition: width .5s cubic-bezier(.22, 1, .36, 1); }

/* sıra göstergesi */
.mr-turn { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(90deg, color-mix(in srgb, var(--side) 16%, transparent), transparent); border-left: 4px solid var(--side); }
.mr-turn.is-mine { box-shadow: 0 0 0 1px color-mix(in srgb, var(--side) 60%, transparent), 0 0 30px -6px var(--side); }
.mr-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.mr-ring svg { transform: rotate(-90deg); }
.mr-ring-bg { fill: none; stroke: rgb(var(--ink-rgb) / .12); stroke-width: 4; }
.mr-ring-fg { fill: none; stroke: var(--side); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.mr-ring-fg.is-low { stroke: #ef4444; }
.mr-ring-n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.mr-turn-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mr-turn-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--side); }
.mr-turn-text strong { font-size: 18px; }
.mr-turn-what { font-size: 13px; color: var(--gray); }
.mr-steps-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.mr-pill { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border); color: var(--gray); }
.mr-pill.is-done { background: color-mix(in srgb, var(--side) 22%, transparent); border-color: color-mix(in srgb, var(--side) 50%, transparent); color: var(--white); }
.mr-pill.is-now { border-color: var(--side); color: var(--white); box-shadow: 0 0 0 2px color-mix(in srgb, var(--side) 35%, transparent); }

/* harita karoları (görselli) */
.mr-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.mr-maps.is-final { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mr-map { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #1f2937, #0b1220); border: 1px solid rgb(255 255 255 / .12); color: #fff; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, filter .3s ease; }
.mr-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.mr-map-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .78)); }
.mr-map-info { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.mr-map-name { font-size: 19px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 2px 12px rgb(0 0 0 / .7); }
.mr-map-sides { display: flex; gap: 6px; font-size: 11px; opacity: .95; }
.mr-map-sides em { font-style: normal; font-weight: 800; padding: 0 5px; border-radius: 5px; background: var(--side); color: #fff; }
/* Taraf rozeti (CS2: T/CT gerçek renkleriyle; VALORANT ve diğerleri: kırmızı saldıran / yeşil savunan) — takım etiketinin yanında */
.mr-map-side, .mr2-mapsides .mr-map-side { display: inline-flex; align-items: center; gap: 4px; }
.mr-map-side.is-cs { gap: 3px; padding: 1px 8px 1px 2px; border-radius: 999px; background: var(--side); }
.mr-map-side.is-cs em { background: none; padding: 0; color: #fff; }
.mr-faction { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 10.5px; letter-spacing: .02em; }
.mr-faction em, .mr-map-sides .mr-faction em, .mr2-mapsides .mr-faction em { font-style: normal; font-weight: inherit; background: none; padding: 0; color: inherit; }
.mr-faction svg { flex-shrink: 0; }
.mr-map.is-available.is-actionable:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -10px rgb(0 0 0 / .6); }
.mr-map.is-available.is-actionable:hover img { transform: scale(1.06); }
.mr-map-btn { position: absolute; inset: 0; margin: auto; width: 96px; height: 38px; border: 0; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: #fff; cursor: pointer; opacity: 0; transform: scale(.9); transition: opacity .2s ease, transform .2s ease; }
.mr-map-btn.is-ban { background: #dc2626; }
.mr-map-btn.is-pick { background: #16a34a; }
.mr-map.is-actionable:hover .mr-map-btn, .mr-map-btn:focus-visible { opacity: 1; transform: none; }
.mr-map.is-banned img { filter: grayscale(1) brightness(.45); }
.mr-map.is-banned .mr-map-name { text-decoration: line-through; opacity: .8; }
.mr-map.is-banned { box-shadow: none; }
.mr-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 2px 16px; border: 3px solid #ef4444; border-radius: 8px; font-size: 26px; font-weight: 900; letter-spacing: .12em; color: #ef4444; text-shadow: 0 2px 10px rgb(0 0 0 / .6); }
.mr-map.is-picked, .mr-map.is-decider { border-color: rgb(255 255 255 / .6); box-shadow: 0 0 0 2px rgb(255 255 255 / .18), 0 14px 32px -10px rgb(0 0 0 / .6); }
.mr-order { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; background: rgb(0 0 0 / .65); backdrop-filter: blur(6px); }
.mr-ribbon { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; background: var(--side, #64748b); color: #fff; }
.mr-ribbon.is-decider { background: #eab308; color: #1a1300; }

/* taraf seçimi */
.mr-side-pick { margin: 6px 0 10px; }
.mr-side-title { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.mr-side-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mr-side-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 18px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.mr-side-card strong { font-size: 17px; }
.mr-side-card small { color: var(--gray); }
.mr-side-card:not(.is-disabled):hover { transform: translateY(-3px); border-color: rgb(var(--accent-rgb)); background: var(--hover-bg); }
.mr-side-card.is-disabled { opacity: .55; cursor: default; }

/* sonuç formu */
.mr-score-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; margin-top: 10px; }
.mr-score-pick { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; }
.mr-score-pick > span { border-left: 3px solid var(--side); padding-left: 8px; }
.mr-score-row { display: flex; gap: 8px; }
.mr-score-btn { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; transition: all .2s ease; }
.mr-score-btn:hover { background: var(--hover-bg); }
.mr-score-btn.is-on { background: rgb(var(--accent-rgb)); color: var(--on-accent); border-color: rgb(var(--accent-rgb)); transform: scale(1.06); }

/* kadrolar + günlük */
.mr-roster { padding: 14px 16px; border-left: 4px solid var(--side, var(--border-strong)); }
.mr-roster-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mr-roster-logo { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--side); flex-shrink: 0; }
.mr-roster-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr-roster-name { flex: 1; min-width: 0; font-weight: 700; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-roster-ready { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgb(var(--ink-rgb) / .08); color: var(--gray); }
.mr-roster-ready.is-ok { background: rgb(34 197 94 / .16); color: #4ade80; }
.mr-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.mr-player { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 11px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .02); font-size: 13px; }
.mr-player.is-ready { border-color: rgb(34 197 94 / .4); background: rgb(34 197 94 / .08); }
.mr-player img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mr-player-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--white); text-decoration: none; }
.mr-player-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.mr-role { font-size: 11px; color: var(--gray); }
.mr-tick { width: 16px; text-align: center; font-weight: 700; color: #4ade80; }
.mr-log-card { border-left-color: var(--border-strong); }
.mr-log-card h4 { margin: 0 0 8px; font-size: 14px; }
.mr-log { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--gray); }
.mr-log li { padding-left: 8px; border-left: 3px solid var(--side); }
.mr-admin { border: 1px dashed var(--border-strong); border-radius: 16px; padding: 12px 16px; }
.mr-admin summary { cursor: pointer; font-weight: 600; color: var(--gray); }
.mr-admin-body { padding-top: 12px; }

@media (max-width: 1000px) {
    .mr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .mr-hero { padding: 14px 14px 20px; border-radius: 20px; }
    .mr-hero-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mr-hero-mid { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: center; flex-wrap: wrap; }
    .mr-hero-logo { width: 68px; height: 68px; border-radius: 18px; font-size: 28px; }
    .mr-hero-name { font-size: 16px; }
    .mr-vs { font-size: 28px; } .mr-score { font-size: 36px; }
    .mr-meters, .mr-side-cards { grid-template-columns: 1fr; }
    .mr-tl-name { font-size: 10.5px; text-align: center; }
    .mr-maps { grid-template-columns: repeat(2, 1fr); }
    .mr-map-name { font-size: 15px; }
}
.admin-content table td { overflow-wrap: anywhere; }

/* =====================================================================================================
   HUB SAYFASI: duyurular, kompakt timeline, geniş pencere
   ===================================================================================================== */
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head-row .btn { flex-shrink: 0; margin-bottom: .9rem; } /* başlığın alt çizgi boşluğu kadar yukarı: buton başlık metniyle aynı hizada */
.section-head-row .section-header { margin-bottom: 0; }

/* ---------- duyurular ---------- */
.ann-card { border: 1px solid var(--border); border-radius: 18px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); padding: 12px; }
.ann-composer { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.ann-composer-main { flex: 1; min-width: 0; }
.ann-composer textarea { display: block; width: 100%; resize: vertical; min-height: 44px; padding: .6rem .9rem; font-size: .88rem; border-radius: .9rem; }
.ann-composer-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ann-composer .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ann-media-link { display: block; margin-top: 8px; width: fit-content; max-width: 100%; }
.ann-media { display: block; max-width: min(100%, 460px); max-height: 260px; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; }
.ann-list { display: flex; flex-direction: column; gap: 8px; }
.ann-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .025); transition: border-color .2s ease, background .2s ease; }
.ann-item:hover { border-color: var(--border-strong); background: var(--hover-bg); }
.ann-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: rgb(var(--accent-rgb) / .16); color: var(--white); flex-shrink: 0; }
.ann-body { flex: 1; min-width: 0; }
.ann-text { font-size: 14px; line-height: 1.55; color: var(--white); overflow-wrap: anywhere; }
.ann-meta { margin-top: 3px; font-size: 12px; color: var(--gray); }
.ann-meta a { color: var(--gray); text-decoration: none; }
.ann-meta a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.ann-del { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--gray); cursor: pointer; opacity: 0; transition: opacity .2s ease, color .2s ease, background .2s ease; }
.ann-item:hover .ann-del, .ann-del:focus-visible { opacity: 1; }
.ann-del:hover { color: #ff8a93; background: rgb(229 72 77 / .12); }
.ann-empty { margin: 4px 2px; color: var(--gray); font-size: 13px; }
.wide-ann { padding: 4px 4px 12px; }

/* ---------- timeline (Twitter tarzı kompakt) ---------- */
.hub-posts-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 38%, 470px); max-width: 1260px; gap: 20px; align-items: start; }   /* akış ~760px'te kalır (gereksiz genişlemez), paylaşma kutusu geniş */
.tl-feed { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); overflow: hidden; }
.tl-feed .empty-state-box { border: 0; border-radius: 0; }
.tl-post { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background .2s ease; }
.tl-post:last-of-type { border-bottom: 0; }
.tl-post:hover { background: rgb(var(--ink-rgb) / .025); }
.tl-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.tl-main { flex: 1; min-width: 0; }
.tl-head { display: flex; align-items: center; gap: 6px; min-height: 24px; font-size: 14px; }
.tl-name { font-weight: 700; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-dot, .tl-time { color: var(--gray); font-size: 13px; white-space: nowrap; }
.tl-menu { margin-left: auto; }
.tl-menu .gear-btn { width: 28px; height: 28px; border: 0; background: transparent; }
.tl-text { margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--white); overflow-wrap: anywhere; }
.tl-media-link { display: block; }
.tl-media { display: block; margin-top: 8px; max-width: 100%; max-height: 420px; border-radius: 14px; border: 1px solid var(--border); object-fit: cover; }
.tl-actions { display: flex; align-items: center; gap: 22px; margin-top: 8px; }
.tl-action { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 0; border: 0; background: transparent; color: var(--gray); font: inherit; font-size: 13px; cursor: pointer; transition: color .2s ease; }
.tl-action svg { flex-shrink: 0; transition: transform .2s ease, fill .2s ease; }
.tl-action:hover { color: var(--white); }
.tl-action:hover svg { transform: scale(1.12); }
.tl-action.liked { color: #f43f5e; }
.tl-action.liked svg { fill: currentColor; }
.tl-comments { margin-top: 6px; }
.tl-comment { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; color: var(--gray); }
.tl-comment img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-top: 1px; }
.tl-comment strong { color: var(--white); }
.tl-comment-form { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tl-comment-form input { flex: 1; min-width: 0; padding: .45rem .8rem; font-size: .84rem; border-radius: 999px; }
.tl-send { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--accent-rgb)); color: var(--on-accent); cursor: pointer; flex-shrink: 0; transition: transform .2s ease; }
.tl-send:hover { transform: scale(1.08); }

.tl-composer-card { position: sticky; top: calc(var(--header-vis, var(--header-h, 64px)) + 16px); border: 1px solid var(--border); border-radius: 18px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); padding: 14px; }
.tl-composer-card h4 { margin: 0 0 10px; font-size: 15px; }
.tl-composer-card textarea { width: 100%; resize: vertical; min-height: 96px; padding: .7rem .9rem; font-size: .9rem; border-radius: .9rem; }
.tl-composer-note { margin: 0 0 10px; font-size: 13px; color: var(--gray); }
.tl-composer-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tl-attach-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 12px; font-size: 12.5px; color: var(--gray); }
.tl-attach-preview[hidden] { display: none; }
.tl-attach-preview img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.tl-attach-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-attach-preview button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--ink-rgb) / .1); color: var(--white); font-size: 15px; line-height: 0; cursor: pointer; }
@media (max-width: 900px) {
    .hub-posts-layout { grid-template-columns: minmax(0, 1fr); }
    .tl-composer-card { position: static; order: -1; }
}

/* ---------- geniş pencere (esWideModal) ---------- */
.wide-modal-box { max-width: min(1320px, 96vw); height: min(88vh, 900px); display: flex; flex-direction: column; }
.wide-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 1.4rem 8px; scrollbar-width: thin; }
.wide-modal-box .team-modal-header { flex-shrink: 0; }
.wide-modal-box .members-toolbar, .wide-modal-box .members-pager { flex-shrink: 0; }
.wide-modal-body .is-loading { opacity: .5; transition: opacity .2s ease; }
.wide-grid { margin-top: 4px; }
@media (max-width: 700px) { .wide-modal-box { height: 92vh; } .wide-modal-body { padding: 10px 12px 6px; } }

/* ---------- Dil seçici (üst sağ, kullanıcı menüsünün yanında yuvarlak bayrak) ---------- */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--field-bg); cursor: pointer; overflow: hidden; transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .2s ease; }
.lang-btn img { width: 100%; height: 100%; display: block; }
.lang-btn:hover, .lang-btn[aria-expanded="true"] { transform: scale(1.08); border-color: rgb(var(--ink-rgb) / .6); box-shadow: 0 6px 18px -6px var(--shadow); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1600; min-width: 170px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--option-bg); box-shadow: 0 18px 44px rgb(var(--shadow-rgb) / .55); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
.lang-menu[hidden] { display: none; }
.lang-menu.is-open { opacity: 1; transform: none; }
.lang-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--white); text-decoration: none; font-size: .9rem; transition: background .15s ease; }
.lang-item img { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }
.lang-item:hover { background: var(--hover-bg); }
.lang-item.is-current { font-weight: 700; background: rgb(var(--ink-rgb) / .06); }
@media (max-width: 700px) { .lang-btn { width: 26px; height: 26px; } }

/* =====================================================================================================
   MAÇ ODASI v2: FACEIT tarzı skor tahtası, 3 sütun (kadro | sahne | kadro) ve sağda sohbet; 3-3-1 harita ızgarası
   ===================================================================================================== */
.mr2-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.mr2 { gap: 14px; }
.mr2-top-wrap { display: flex; flex-direction: column; gap: 10px; }
.mr2-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mr2-titles h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.mr2-titles p { margin: 2px 0 0; font-size: 13px; color: rgb(var(--accent-rgb)); filter: brightness(1.25); }
.mr2-tools { display: flex; align-items: center; gap: 10px; }
.mr2-tool { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray); cursor: pointer; transition: background .2s ease, color .2s ease; }
.mr2-tool:hover { background: var(--hover-bg); color: var(--white); }
.mr2-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(140px, 200px) auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 22px 10px 8px; }
.mr2-team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mr2-team.side-A { justify-content: flex-end; }
.mr2-team-name { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr2-team-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.mr2-team-logo { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--side), rgb(0 0 0 / .4)); border: 2px solid var(--side); }
.mr2-team-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr2-team.is-loser { opacity: .55; }
.mr2-num { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--gray); min-width: 34px; text-align: center; }
.mr2-num.is-win { color: #4ade80; }
.mr2-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.mr2-mid-top { font-size: 14px; font-weight: 600; color: var(--white); }
.mr2-mid-status { font-size: 15px; color: var(--white); }
.mr2-mid-sub { font-size: 12px; color: var(--gray); }
.mr2-when { margin: 0; text-align: center; font-size: 12px; color: var(--gray); }

.mr2-cols { display: grid; grid-template-columns: minmax(170px, 190px) minmax(0, 1fr) minmax(170px, 190px); gap: 18px; align-items: start; margin-top: 4px; }
.mr2-center { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mr2-roster { display: flex; flex-direction: column; gap: 8px; }
.mr2-group { margin: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--white); }
.mr2-player { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgb(var(--ink-rgb) / .045); border: 1px solid var(--border); transition: border-color .2s ease, background .2s ease; }
.mr2-player:hover { background: var(--hover-bg); border-color: var(--border-strong); }
.mr2-player.is-ready { border-color: rgb(34 197 94 / .5); background: rgb(34 197 94 / .08); }
.mr2-av { position: relative; width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; }
.mr2-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.mr2-crown { position: absolute; top: -6px; left: -4px; font-style: normal; font-size: 13px; line-height: 1; padding: 1px 4px; border-radius: 6px; background: #eab308; color: #1a1300; }
.mr2-pname { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr2-pname:hover { text-decoration: underline; text-underline-offset: 3px; }
.mr2-pready { font-weight: 800; color: var(--gray); }
.mr2-pready.is-ok { color: #4ade80; }

/* sahne */
.mr2 .mr-stage { padding: 4px 4px 8px; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mr2 .mr-stage-head h3 { font-size: 15px; font-weight: 700; }
.mr2 .mr-stage-icon { width: 30px; height: 30px; border-radius: 9px; }
.mr2 .mr-stage-icon svg { width: 16px; height: 16px; }
.mr2-cta { display: block; margin-top: 16px; padding: 12px 16px; border-radius: 4px; text-align: center; font-weight: 800; font-size: .9rem; letter-spacing: .04em; background: rgb(var(--accent-rgb)); color: var(--on-accent); text-decoration: none; transition: filter .2s ease, transform .2s ease; }
.mr2-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mr2-problem { display: block; margin-top: 12px; text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--gray); text-decoration: none; }
.mr2-problem:hover { color: var(--white); }
.mr2-maplist { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mr2-mapline { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 8px; background: rgb(var(--ink-rgb) / .05); border: 1px solid var(--border); }
.mr2-mapline img { width: 64px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.mr2-mapinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mr2-mapinfo strong { font-size: 14px; }
.mr2-mapinfo small { font-size: 11.5px; color: var(--gray); }
.mr2-mapsides { font-size: 11.5px; color: var(--gray); white-space: nowrap; }
.mr2-mapsides em { font-style: normal; font-weight: 800; padding: 0 5px; border-radius: 5px; background: var(--side); color: #fff; }
.mr2-mapno { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--gray); white-space: nowrap; }

/* harita eleme: 3-3-1 ızgara (6 sütun; ilk altı harita 2'şer sütun, yedinci ortada) */
.mr-maps.is-veto { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mr-maps.is-veto .mr-map { grid-column: span 2; }
.mr-maps.is-veto .mr-map:nth-child(7):last-child { grid-column: 3 / span 2; }
.mr-map.awaits-side .mr-map-shade { background: rgb(0 0 0 / .7); }
.mr-map.awaits-side { border-color: rgb(var(--accent-rgb)); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .35), 0 0 30px -6px rgb(var(--accent-rgb) / .6); }
.mr-side-over { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
.mr-side-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; max-width: 150px; padding: 8px 10px; border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #fff; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.mr-side-img { display: inline-block; flex-shrink: 0; object-fit: contain; vertical-align: middle; }
.mr-side-btn.is-icon { background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .22); padding: 6px 10px; }
.mr-side-btn.is-attack { background: #dc2626; }
.mr-side-btn.is-defense { background: #2563eb; }
.mr-side-btn:hover { transform: scale(1.06); filter: brightness(1.12); }
.mr-side-wait { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #fff; animation: mrBlink 1.4s ease-in-out infinite; }
@keyframes mrBlink { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* sohbet */
.mr2-chat { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-vis, var(--header-h, 64px)) + 12px); max-height: calc(100vh - var(--header-vis, var(--header-h, 64px)) - 24px); }
.rc-card { display: flex; flex-direction: column; min-height: 0; flex: 1; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); overflow: visible; position: relative; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.rc-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.rc-select { max-width: 60%; padding: .3rem .7rem; font-size: .82rem; border-radius: .7rem; background: var(--field-bg); color: var(--white); border: 1px solid var(--border-strong); }
.rc-list { flex: 1; min-height: 160px; max-height: 320px; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.rc-empty { margin: auto; text-align: center; font-size: 13px; color: var(--gray); }
.rc-day { align-self: center; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: var(--gray); text-transform: uppercase; margin: 4px 0; }
.rc-msg { display: flex; gap: 10px; align-items: flex-start; }
.rc-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-top: 2px; }
.rc-main { flex: 1; min-width: 0; }
.rc-meta { display: flex; align-items: center; gap: 8px; }
.rc-name { font-weight: 700; font-size: 14px; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.rc-time { font-size: 11.5px; color: var(--gray); }
.rc-edited { font-size: 10.5px; color: var(--gray); font-style: italic; }
.rc-acts { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.rc-msg:hover .rc-acts, .rc-acts:focus-within { opacity: 1; }
.rc-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gray); cursor: pointer; }
.rc-act:hover { background: var(--hover-bg); color: var(--white); }
.rc-act.is-danger:hover { color: #ff8a93; background: rgb(229 72 77 / .14); }
.rc-text { font-size: 14px; line-height: 1.5; color: var(--white); overflow-wrap: anywhere; white-space: pre-wrap; }
.rc-text.is-deleted { color: var(--gray); font-style: italic; }
.rc-img { display: block; margin-top: 6px; max-width: 100%; max-height: 220px; border-radius: 10px; border: 1px solid var(--border); }
.rc-edit { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.rc-edit input { flex: 1; min-width: 0; padding: .4rem .7rem; font-size: .85rem; border-radius: .7rem; }
.rc-form { position: relative; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.rc-form[hidden] { display: none; }
.rc-row { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--field-bg); border: 1px solid var(--border); }
.rc-row:focus-within { border-color: var(--border-strong); }
.rc-row input[type="text"] { flex: 1; min-width: 0; padding: .45rem 0; border: 0; background: transparent; box-shadow: none; font-size: .9rem; }
.rc-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--gray); cursor: pointer; transition: color .2s ease, background .2s ease; }
.rc-tool:hover { color: var(--white); background: var(--hover-bg); }
.rc-tool.is-text { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.rc-tool.is-send { color: rgb(var(--accent-rgb)); filter: brightness(1.2); }
.rc-panels { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); z-index: 6; }
.rc-emoji, .rc-gif { margin-bottom: 6px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--option-bg); box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .6); }
.rc-emoji[hidden], .rc-gif[hidden], .rc-attach[hidden] { display: none; }
.rc-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 170px; overflow-y: auto; scrollbar-width: thin; }
.rc-emoji button { padding: 4px 0; border: 0; border-radius: 8px; background: transparent; font-size: 18px; cursor: pointer; }
.rc-emoji button:hover { background: var(--hover-bg); }
.rc-gif { display: flex; flex-direction: column; gap: 6px; }
.rc-gif input { width: 100%; padding: .45rem .8rem; font-size: .84rem; border-radius: .8rem; }
.rc-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-height: 190px; overflow-y: auto; scrollbar-width: thin; }
.rc-gif-item { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: rgb(var(--ink-rgb) / .08); }
.rc-gif-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-gif-msg { grid-column: 1 / -1; margin: 8px 0; text-align: center; font-size: 12.5px; color: var(--gray); }
.rc-gif small { text-align: right; font-size: 10px; color: var(--gray); }
.rc-attach { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--option-bg); font-size: 12px; color: var(--gray); }
.rc-attach img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.rc-attach span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-attach button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--ink-rgb) / .12); color: var(--white); font-size: 15px; line-height: 0; cursor: pointer; }
.rc-notice { margin: 0; padding: 10px 16px 14px; font-size: 12.5px; color: var(--gray); }
.rc-notice[hidden] { display: none; }

@media (max-width: 1250px) {
    .mr2-layout { grid-template-columns: minmax(0, 1fr); }
    .mr2-chat { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
    .rc-card { flex: 1 1 320px; }
}
@media (max-width: 640px) {
    .mr2-score { grid-template-columns: 1fr auto auto 1fr; gap: 10px; }
    .mr2-score > .mr2-mid { grid-column: 1 / -1; order: 10; }
    .mr2-num { font-size: 2.4rem; }
    .mr2-team { flex-direction: column; gap: 6px; text-align: center; }
    .mr2-team.side-A { justify-content: center; flex-direction: column-reverse; }
    .mr2-team-name { font-size: .95rem; max-width: 100%; }
    .mr-maps.is-veto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mr-maps.is-veto .mr-map, .mr-maps.is-veto .mr-map:nth-child(7):last-child { grid-column: auto; }
}

/* ---------- Profil önizlemesi v2: gerçek profil sayfasının küçük kopyası ---------- */
.pp2 .profile-preview-bar { margin-bottom: 14px; }
.pp2-frame { border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden; background: rgb(var(--bg-rgb) / .35); box-shadow: 0 20px 50px -24px var(--shadow); }
.pp2-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgb(var(--ink-rgb) / .06); border-bottom: 1px solid var(--border); }
.pp2-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--ink-rgb) / .22); }
.pp2-url { margin-left: 10px; flex: 1; min-width: 0; padding: 4px 12px; border-radius: 14px; font-size: 11.5px; line-height: 1.4; color: var(--gray); background: rgb(var(--ink-rgb) / .06); overflow-wrap: anywhere; word-break: break-all; }   /* uzun bağlantı kesilmez, alt satıra sarılır */
.pp2-url b { font-weight: 600; color: var(--white); }
.pp2-page { padding: 20px 22px 18px; }
.pp2-head { display: flex; align-items: center; gap: 18px; }
.pp2-avatar { width: 84px; height: 84px; flex-shrink: 0; margin: 0; }
.pp2-headtext { flex: 1; min-width: 0; text-align: left; }
.pp2-headtext .pv-name { font-size: 1.35rem; text-align: left; margin: 0 0 8px; }
.pp2-headtext .pv-facts { justify-content: flex-start; gap: 8px; }
.pp2-edit { align-self: flex-start; padding: 5px 12px; border: 1.5px solid rgb(var(--ink-rgb) / .35); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--white); white-space: nowrap; }
.pp2-tabs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 16px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.pp2-tab { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; font-size: 12.5px; font-weight: 600; color: var(--gray); background: none; border: 0; border-radius: 0; box-shadow: none; }
.pp2-tab.is-active { color: var(--white); }
.pp2-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: var(--white); }
.pp2-tab.pv-chip.is-hidden { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.pp2-tab .pv-chip-lock { margin-left: 2px; }
.pp2-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.pp2-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pp2-skel { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .025); display: flex; flex-direction: column; gap: 7px; }
.pp2-skel i { display: block; height: 8px; border-radius: 4px; background: rgb(var(--ink-rgb) / .1); }
.pp2-skel i.w60 { width: 60%; } .pp2-skel i.w40 { width: 40%; }
.pp2-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .03); text-align: left; }
.pp2-card h5 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.pp2-card .pv-about { margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 13px; min-height: 0; max-width: none; }
@media (max-width: 640px) { .pp2-head { flex-wrap: wrap; } .pp2-edit { display: none; } .pp2-grid { grid-template-columns: minmax(0, 1fr); } .pp2-page { padding: 16px 14px; } }

/* ---------- Turnuva önizlemesi v2: kart + sayfa ---------- */
.tp2-grid { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 22px; align-items: start; }
.tp2-block { min-width: 0; }
.tp2-label { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.tp2-card { pointer-events: none; margin: 0; }
.tp2-card .mini-card-title-inner { animation: none; }
.tp2-page { padding: 0 0 16px; }
.tp2-banner { position: relative; aspect-ratio: 1376 / 480; min-height: 150px;   /* gerçek turnuva sayfasıyla aynı oran */ display: flex; align-items: flex-end; background: radial-gradient(circle at 30% 20%, rgb(var(--accent-rgb) / .22), transparent 55%), linear-gradient(135deg, rgb(var(--ink-rgb) / .10), rgb(var(--ink-rgb) / .03)); background-size: cover; background-position: center; }
.tp2-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 25%, rgb(0 0 0 / .8) 100%); }
.tp2-banner-in { position: relative; z-index: 1; width: 100%; padding: 14px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #fff; }
.tp2-banner-text { min-width: 0; }
.tp2-banner-text h3 { margin: 6px 0 2px; font-size: 1.25rem; line-height: 1.2; color: #fff; word-break: break-word; }
.tp2-banner-text p { margin: 0; font-size: 11.5px; color: rgb(255 255 255 / .78); }
.tp2-hub { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 10.5px; }
.tp2-cta { pointer-events: none; }
.tp2-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 14px 18px 0; }
.tp2-step { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgb(var(--ink-rgb) / .025); font-size: 11px; min-width: 0; }
.tp2-step i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); }
.tp2-step.is-done i { background: var(--gold); border-color: var(--gold); }
.tp2-step b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp2-step span { color: var(--gray); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp2-page .pp2-tabs { margin: 14px 18px 12px; }
.tp2-page .pp2-grid { padding: 0 18px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.tp2-desc { font-size: 12.5px; line-height: 1.6; white-space: pre-line; word-break: break-word; }
.tp2-desc.is-muted { color: var(--gray); font-style: italic; }
.tp2-prizes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.tp2-prizes li { display: flex; gap: 8px; }
.tp2-prizes li b { color: var(--gray); min-width: 18px; }
.tp2-prizes li.is-muted { color: var(--gray); font-style: italic; }
.tp2-facts { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--gray); }
.tp2-facts span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 900px) { .tp2-grid { grid-template-columns: minmax(0, 1fr); } .tp2-card { max-width: 320px; } }
@media (max-width: 640px) { .tp2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px 0; } .tp2-page .pp2-tabs { margin: 12px 14px 10px; } .tp2-page .pp2-grid { padding: 0 14px; grid-template-columns: minmax(0, 1fr); } .tp2-banner-in { padding: 12px 14px; } }
.tp2 .profile-preview-bar { margin-bottom: 14px; }
.tp2-hub { color: #fff; background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .32); }

/* taraf seçimi bekleyen küçük harita karosu: ad üstte, iki buton altta; alttaki rozet/şeritler gizlenir */
.mr-map.awaits-side .mr-map-info { top: 7px; bottom: auto; left: 9px; right: 9px; }
.mr-map.awaits-side .mr-map-name { font-size: 12px; letter-spacing: .04em; }
.mr-map.awaits-side .mr-map-sides, .mr-map.awaits-side .mr-ribbon, .mr-map.awaits-side .mr-order, .mr-map.awaits-side .mr-stamp { display: none; }
.mr-map.awaits-side .mr-map-shade { background: rgb(0 0 0 / .68); }
.mr-side-over { justify-content: flex-end; gap: 5px; padding: 8px 8px 8px; }
.mr-side-btn { max-width: none; padding: 4px 8px; font-size: 10.5px; gap: 5px; border-radius: 8px; }
.mr-side-btn svg { width: 15px; height: 15px; }
.mr-side-btn .mr-side-img { width: 28px !important; height: 28px !important; }
.mr-side-wait { align-items: flex-end; padding-bottom: 10px; font-size: 10.5px; }
@media (max-width: 640px) {
    .mr2-mapline { flex-wrap: wrap; row-gap: 6px; }
    .mr2-mapinfo { flex: 1 1 90px; }
    .mr2-mapsides { order: 4; flex-basis: 100%; white-space: normal; }
}
/* panel tablolarında rozet/durum etiketleri ortadan bölünmesin */
.admin-content table .badge { white-space: nowrap; overflow-wrap: normal; word-break: normal; }

/* =====================================================================================================
   PREMIUM: rozet (sakin yeşil, parlama yok), şekilli/renkli kullanıcı adı ve profil kartı arkaplanları
   ===================================================================================================== */
:root { --premium: var(--pg-brand-bright); }
/* Premium rozeti: PAF ikonunun arka plansız bordo işareti; üstüne gelince parlar */
.prem-badge { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; flex-shrink: 0; margin-left: 3px; cursor: default; }
.prem-badge img { display: block; height: auto; max-height: 1.9em; transition: filter .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); filter: drop-shadow(0 0 0 rgb(255 60 90 / 0)); }
.prem-badge:hover img, .prem-badge:focus-visible img { filter: drop-shadow(0 0 3px rgb(255 70 100 / .95)) drop-shadow(0 0 11px rgb(200 16 46 / .85)); transform: scale(1.16) rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .prem-badge img { transition: filter .3s ease; } .prem-badge:hover img { transform: none; } }

/* Kademeli altıgen rozetler (includes/badges.php): yalnızca sayı + tür ikonu; kademe rengi SVG içinde */
.bdg { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; flex-shrink: 0; margin-left: 3px; cursor: default; border-radius: 6px; transition: transform .3s cubic-bezier(.22, 1, .36, 1), filter .3s ease; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--bdg-glow, #fff) 55%, transparent)); }
.bdg:hover, .bdg:focus-visible { transform: translateY(-1px) scale(1.14); outline: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--bdg-glow, #fff) 85%, transparent)); }
.bdg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 8px; }
.bdg-row .bdg { margin-left: 0; }
.bdg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px; }
.bdg-gallery-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); font-size: 12px; color: var(--gray); }

/* Özel bilgi kutusu (js/core/tip.js): tarayıcı title'ı yerine, öğenin ALTINDA çıkan tek bir kutu */
#es-tip { position: fixed; z-index: 100000; left: 0; top: 0; max-width: min(280px, calc(100vw - 20px)); padding: 10px 13px; border-radius: 12px; border: 1px solid var(--border-strong, var(--border)); background: var(--panel-solid, #15171c); color: var(--white); box-shadow: 0 16px 36px -12px rgb(0 0 0 / .65); pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
#es-tip.is-in { opacity: 1; transform: none; }
#es-tip strong { display: block; font-size: 13px; font-weight: 800; line-height: 1.3; }
#es-tip span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--gray); }
#es-tip::before { content: ''; position: absolute; top: -5px; left: var(--tip-arrow, 50%); width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: inherit; border-left: 1px solid var(--border-strong, var(--border)); border-top: 1px solid var(--border-strong, var(--border)); }

/* Yazı stilleri (font) — "şekilli kullanıcı adı": Google Fonts yalnızca kullanıldıkları sayfalarda yüklenir (bkz. js/core/nickfont.js, footer.php) */
.nf-gangsta { font-family: 'UnifrakturCook', cursive; font-weight: 700; font-size: 1.14em; }
.nf-gothic { font-family: 'Metal Mania', cursive; font-size: 1.05em; }
.nf-graffiti { font-family: 'Permanent Marker', cursive; }
.nf-typewriter { font-family: 'Special Elite', 'Courier New', monospace; }
.nf-typewriter2 { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; }
.nf-script { font-family: 'Pacifico', cursive; font-size: 1.02em; }
.nf-marker { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.2em; }
.nf-arcade { font-family: 'Press Start 2P', monospace; font-size: .7em; line-height: 1.6; }
.nf-cyber { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: .92em; letter-spacing: .04em; }
.nf-comic { font-family: 'Bangers', cursive; font-size: 1.12em; letter-spacing: .05em; }
.nf-serif { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: 1.05em; }
.prem-fonts .prem-opt > span b { font-size: 16px; }
.nick.has-color { color: var(--nick); }

.cbg-aurora { background: linear-gradient(120deg, #0f2a44, #1d6a72 45%, #4b3b8f); }
.cbg-ember { background: linear-gradient(120deg, #3a0f14, #8a2d2d 55%, #c2632c); }
.cbg-ocean { background: linear-gradient(120deg, #08243f, #12578a 55%, #1b9aaa); }
.cbg-forest { background: linear-gradient(120deg, #0d2a1c, #1f5f3e 55%, #4a8a52); }
.cbg-dusk { background: linear-gradient(120deg, #231437, #5a2a6b 55%, #b0466f); }
.cbg-steel { background: linear-gradient(120deg, #151b24, #2f3b4d 55%, #56657a); }
.cbg-rose { background: linear-gradient(120deg, #3a1526, #8c3358 55%, #d0708e); }
.cbg-sand { background: linear-gradient(120deg, #3a2c14, #8a6a2e 55%, #c9a45a); }
.cbg-grid { background: linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(135deg, #10151f, #1d2a3f); }
.cbg-stripes { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .06) 0 10px, transparent 10px 20px), linear-gradient(135deg, #1a1f2b, #3a2f5a); }
.cbg-stars { background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / .6) 0 1px, transparent 2px) 0 0 / 60px 60px, radial-gradient(circle at 70% 60%, rgb(255 255 255 / .45) 0 1px, transparent 2px) 0 0 / 45px 45px, linear-gradient(135deg, #0a0e24, #241c4a); }
.cbg-mono { background: linear-gradient(135deg, #0b0b0d, #2a2a30); }

/* =====================================================================================================
   MAÇ ODASI v3: üst çubuk düğmeleri, zamanlayıcı, oyuncu kartları, büyük harita, harita skorları, sohbet kutusu
   ===================================================================================================== */
.mr2-page { padding-left: 2.2%; padding-right: 2.2%; overflow-x: clip; }   /* sohbet kapanırken sağa kayan kutu yatay kaydırma çubuğu açmasın */
.mr2-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.mr2-layout.is-chat-closed { grid-template-columns: minmax(0, 1fr); }
.mr2-layout.is-chat-closed .mr2-chat { display: none; }
.mr2-dyn { display: flex; flex-direction: column; gap: 14px; }
.mr2-tools { gap: 6px; }
.mr2-tools .mr-status { margin-right: 8px; }
.mr2-tool { position: relative; }
.mr2-tool.is-on { background: var(--hover-bg); color: var(--white); }
.mr2-tool.gear-btn { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--gray); transform: none; }
.mr2-tool.gear-btn:hover, .mr2-tool.gear-btn.is-open { transform: none; background: var(--hover-bg); color: var(--white); border: 0; }
.mr2-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; font-style: normal; text-align: center; }
.mr2-badge[hidden] { display: none; }
.mr2-menu { min-width: 290px; max-width: 350px; }
.mr2-menu .gear-item.is-disabled, .mr2-menu .gear-item:disabled { opacity: .38; cursor: not-allowed; }
.mr2-menu .gear-item.is-disabled:hover { background: transparent; }
.mr-status.s-paused { background: rgb(245 158 11 / .2); color: #fbbf24; }
.mr-status.s-cancelled { background: rgb(239 68 68 / .16); color: #f87171; }

.mr2-num.is-lose { color: #f87171; }
.mr2-num.is-wo { font-size: 1.7rem; letter-spacing: .04em; }

/* tek zamanlayıcı */
.mr2-timer { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; margin: 2px auto; padding: 10px 30px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.mr2-timer-ic { display: inline-flex; color: var(--gray); }
.mr2-timer-txt { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.mr2-timer-label { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); text-align: center; }
.mr2-timer-val { font-size: 2.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mr2-timer.is-idle .mr2-timer-label { display: none; }
.mr2-timer.is-idle .mr2-timer-val { font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.mr2-timer.tone-warn .mr2-timer-val { color: #fbbf24; }
.mr2-timer.tone-live .mr2-timer-val { color: #4ade80; }
.mr2-timer.tone-live { border-color: rgb(34 197 94 / .4); }
.mr2-timer.tone-paused { border-color: rgb(245 158 11 / .45); }
.mr2-timer.tone-paused .mr2-timer-val { color: #fbbf24; }
.mr2-timer.is-low .mr2-timer-val { color: #f87171; }

/* üç sütun: kadro | sahne | kadro */
.mr2-cols { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) minmax(210px, 250px); gap: 16px; }
.mr2-roster { gap: 10px; }
.mr2-group { margin: 4px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.mr2-group.is-team { display: flex; align-items: center; gap: 10px; margin: 2px 0 2px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--white); font-weight: 800; }
.mr2-group.is-team span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr2-group-logo { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; background: rgb(var(--ink-rgb) / .18); }
.mr2-group-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr2-pcard { position: relative; display: flex; align-items: center; gap: 12px; min-height: 98px; padding: 12px 14px; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff; border: 1px solid rgb(255 255 255 / .14); background: #10141c; transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease; }
.mr2-pcard:hover { transform: translateY(-2px); border-color: rgb(255 255 255 / .3); }
.mr2-pcard.is-ready { border-color: rgb(34 197 94 / .7); }
.mr2-pcard-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.mr2-pcard-bg.is-avatar { filter: blur(16px) saturate(1.3) brightness(.55); transform: scale(1.4); }
.mr2-pcard-bg.is-img { filter: none; }
.mr2-pcard-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / .12) 70%); }
.mr2-av { position: relative; width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgb(255 255 255 / .8); box-shadow: 0 6px 18px rgb(0 0 0 / .45); }
.mr2-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mr2-crown { position: absolute; right: -4px; bottom: -3px; top: auto; left: auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: #d4a017; color: #201500; font-size: 12px; border: 2px solid #10141c; }
.mr2-pbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mr2-pname { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 15px; font-weight: 700; color: #fff; min-width: 0; }
.mr2-pname .nick { color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mr2-pname .nick.has-color { color: var(--nick); }
.mr2-pname a.nick:hover { text-decoration: underline; text-underline-offset: 3px; }
.mr2-prole { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .72); }
.mr2-acc { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; width: fit-content; margin-top: 2px; padding: 2px 9px 2px 7px; border-radius: 999px; background: rgb(0 0 0 / .42); font-size: 11.5px; color: #fff; }
.mr2-acc svg { flex-shrink: 0; opacity: .8; }
.mr2-acc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr2-acc.is-none { color: rgb(255 255 255 / .6); font-style: italic; }
.mr2-pready { position: absolute; top: 10px; right: 12px; font-weight: 800; font-size: 16px; color: rgb(255 255 255 / .5); }
.mr2-pready.is-ok { color: #4ade80; }

/* aşama sahnesi */
.mr2 .mr-stage.mr-paused { border: 1px solid rgb(245 158 11 / .4); background: rgb(245 158 11 / .08); border-radius: 16px; padding: 12px 16px; }
.is-frozen { opacity: .45; pointer-events: none; filter: saturate(.6); }
.mr-timeline.is-dead .mr-tl-step { opacity: .5; }

/* Harita kartı (oynanıyor + bitti): bilgiler haritanın ÜSTÜNDE — en üstte seçen, ortada harita adı + durum, altta taraflar */
.mr2-hero { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; min-width: 0; }
.mr2-hero-pic { position: relative; aspect-ratio: 16 / 9; min-height: 244px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #1f2937, #0b1220); border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 22px 50px -24px rgb(0 0 0 / .8); color: #fff; }
.mr2-hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr2-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .3) 42%, rgb(0 0 0 / .3) 58%, rgb(0 0 0 / .72) 100%); }
.mr2-hero-pic.is-empty::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgb(var(--accent-rgb) / .25), transparent 60%); }
.mr2-hero-ov { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding: 14px 16px; text-align: center; }
.mr2-hero-top { grid-row: 1; align-self: start; display: flex; justify-content: center; max-width: 100%; min-width: 0; }
.mr2-hero-mid { grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.mr2-hero-bot { grid-row: 3; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 100%; min-width: 0; }
.mr2-hero-bot small, .mr2-hero-pill small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.mr2-hero-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 13px 4px 6px; border-radius: 999px; background: rgb(0 0 0 / .58); border: 1px solid rgb(255 255 255 / .22); font-size: 13px; }
.mr2-hero-pill small { padding-left: 8px; }
.mr2-hero-pill b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mr2-hero-pill-logo { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--side, rgb(255 255 255 / .2)); }
.mr2-hero-pill-logo img { position: static; width: 100%; height: 100%; object-fit: cover; }
.mr2-hero-pill.is-decider { padding: 5px 14px; background: rgb(255 255 255 / .92); color: #111; border-color: transparent; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mr2-hero-no { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: rgb(255 255 255 / .8); }
.mr2-hero-name { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; font-weight: 800; letter-spacing: .04em; text-shadow: 0 4px 24px rgb(0 0 0 / .85); overflow-wrap: anywhere; }
.mr2-hero-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgb(0 0 0 / .58); border: 1px solid rgb(255 255 255 / .28); }
.mr2-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.mr2-hero-status.is-live { color: #4ade80; border-color: rgb(34 197 94 / .6); background: rgb(6 40 20 / .7); }
.mr2-hero-status.is-live .mr2-hero-dot { animation: mrLiveDot 1.4s ease-in-out infinite; }
.mr2-hero-status.is-done { color: #fff; }
.mr2-hero-status.is-paused { color: #fbbf24; border-color: rgb(245 158 11 / .55); }
.mr2-hero-status.is-next, .mr2-hero-status.is-off { color: rgb(255 255 255 / .75); }
.mr2-hero-status.is-off .mr2-hero-dot { opacity: .45; }
@keyframes mrLiveDot { 0%, 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / .55); } 50% { box-shadow: 0 0 0 6px rgb(74 222 128 / 0); } }
.mr2-hero-score b { font-size: 21px; }
.mr2-hero-bot .mr2-mapsides { white-space: normal; font-size: 12.5px; color: #fff; }
.mr2-mapstrip { display: flex; gap: 10px; }
.mr2-strip-item { appearance: none; -webkit-appearance: none; font: inherit; text-align: left; cursor: pointer; position: relative; flex: 1 1 0; min-width: 0; height: 84px; border-radius: 14px; overflow: hidden; background: #111827; border: 1px solid rgb(255 255 255 / .14); color: #fff; padding: 8px 10px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, opacity .2s ease; }
.mr2-strip-item:hover { transform: translateY(-2px); border-color: rgb(255 255 255 / .4); }
.mr2-strip-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mr2-strip-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr2-strip-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .2), rgb(0 0 0 / .78)); }
.mr2-strip-item small, .mr2-strip-item strong, .mr2-strip-item .mr2-ms { position: relative; }
.mr2-strip-item small { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.mr2-strip-item strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr2-strip-item.is-cur { border-color: rgb(255 255 255 / .75); }
.mr2-strip-item.is-unused, .mr2-strip-item.is-next { opacity: .7; }
.mr2-strip-item.is-cur.is-next { opacity: 1; }
.mr2-strip-score { position: absolute !important; right: 10px; top: 8px; }

/* harita kartı + seçim günlüğü yan yana (merkez sütun yeterince genişse); dar alanda alt alta */
.mr2-center { container-name: mrc; container-type: inline-size; }
.mr2-showrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.mr-log b.mr-hl { color: var(--pg-brand-bright, #c8102e); font-weight: 800; }
.mr-log li { line-height: 1.45; color: rgb(var(--ink-rgb) / .82); }
.mr-log .mr-log-auto { font-size: 11px; color: var(--gray); }
@container mrc (min-width: 600px) {
    .mr2-showrow.has-log { grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); align-items: stretch; }
    .mr2-showrow.has-log > .mr-log-card { contain: size; display: flex; flex-direction: column; min-height: 0; }
    .mr2-showrow.has-log > .mr-log-card .mr-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
}

/* harita skoru: kazanan yeşil, kaybeden kırmızı */
.mr2-ms { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr2-ms b { font-size: 17px; font-weight: 800; }
.mr2-ms i { font-style: normal; color: var(--gray); }
.mr2-ms b.is-win { color: #4ade80; }
.mr2-ms b.is-lose { color: #f87171; }
.mr2-ms-none { font-style: normal; font-size: 11.5px; color: var(--gray); }
.mr2-mapline { gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; }
.mr2-mapline img { width: 84px; height: 48px; border-radius: 8px; }
.mr2-mapline.is-unused { opacity: .55; }
.mr2-mapline-ph { width: 84px; height: 48px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gray); background: rgb(var(--ink-rgb) / .08); flex-shrink: 0; }
.mr2-strip-item .mr2-ms b.is-win { color: #4ade80; }
.mr2-strip-item .mr2-ms b.is-lose { color: #f87171; }

/* sonuç bildirme formu ve yönetici pencereleri */
.mr-report { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mr-report-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mr-report-row[hidden] { display: none; }
.mr-report-map { font-size: 13px; font-weight: 600; }
.mr-score-inputs { display: inline-flex; align-items: center; gap: 10px; }
.mr-score-inputs label { display: inline-flex; align-items: center; gap: 8px; }
.mr-score-inputs label > span { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 2px 7px; border-radius: 6px; background: var(--side, rgb(var(--ink-rgb) / .2)); color: #fff; }
.mr-score-inputs label.side-A > span { background: var(--mr-a, #3b82f6); }
.mr-score-inputs label.side-B > span { background: var(--mr-b, #f43f5e); }
.mr-score-inputs b { color: var(--gray); }
.mr-num { width: 60px; padding: 8px 6px; text-align: center; font-size: 1.05rem; font-weight: 700; border-radius: 12px; border: 2px solid var(--input-border); background: var(--field-bg); color: var(--white); outline: none; }
.mr-num:focus, .mr-num:focus-visible { border-color: var(--gold); outline: none; }
.mr-report-sum { margin: 2px 0; font-size: 13px; color: var(--gray); }
.mr-report-sum.is-ok { color: #4ade80; font-weight: 600; }
.mr-report .btn:disabled { opacity: .5; cursor: not-allowed; }
.mr-trackergg { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .12); }
.mr-trackergg-status { font-size: 12px; color: var(--gray); }
.mr-trackergg-status.is-error { color: #fecaca; }
.mr-trackergg-list { display: flex; flex-direction: column; gap: 6px; }
.mr-trackergg-item { text-align: left; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--field-bg); color: var(--white); font-size: 12.5px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mr-trackergg-item:hover { border-color: var(--gold); background: rgb(var(--accent-rgb) / .1); }
.mr-trackergg-item:disabled { opacity: .5; cursor: not-allowed; }
.mr-modal { width: min(94vw, 460px); }
.mr-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 1.1rem; text-align: left; }
.mr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-pill-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.mr-pill-btn:hover { background: var(--hover-bg); }
.mr-pill-btn.is-on { border-color: var(--gold); background: rgb(var(--accent-rgb) / .16); font-weight: 700; }
.mr-modal .mr-score-inputs { justify-content: center; flex-wrap: wrap; }
.mr-modal .mr-muted { margin: 0; font-size: 12.5px; }
.mr-series-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mr-series-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; cursor: pointer; text-align: left; transition: background .15s ease, border-color .15s ease; }
.mr-series-opt strong { font-size: 13px; }
.mr-series-opt span { font-size: 1.15rem; font-weight: 800; }
.mr-series-opt:hover { background: var(--hover-bg); }
.mr-series-opt.is-on { border-color: var(--gold); background: rgb(var(--accent-rgb) / .16); }

/* ---------- sohbet: ayrı kutu, uzun, daraltılabilir ---------- */
.mr2-chat { height: calc(100vh - var(--header-vis, var(--header-h, 64px)) - 28px); min-height: 540px; max-height: 920px; max-height: min(920px, calc(100vh - var(--header-vis, var(--header-h, 64px)) - 28px)); padding: 12px; gap: 10px; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.rc-boxhead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0 6px; }
.rc-boxhead h2 { margin: 0; font-size: 16px; font-weight: 800; }
.rc-collapse { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--gray); cursor: pointer; }
.rc-collapse:hover { background: var(--hover-bg); color: var(--white); }
.mr2-chat .rc-card { flex: 1 1 0; min-height: 0; background: rgb(var(--ink-rgb) / .035); border-radius: 16px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mr2-chat .rc-card:first-of-type { flex-grow: 1.35; }
.mr2-chat .rc-list { min-height: 0; max-height: none; }
.rc-head { padding: 10px 14px; min-height: 48px; }
.rc-head .custom-select { min-width: 0; max-width: 62%; }
.rc-head .custom-select-trigger { padding: 6px 10px; font-size: 12.5px; border-width: 1px; border-color: var(--border-strong); border-radius: 10px; gap: 8px; }
.rc-head .custom-select-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-head .custom-select-options { left: auto; right: 0; min-width: 190px; max-height: 220px; }
.rc-head .custom-select-option { padding: 8px 10px; font-size: 13px; }
.rc-dd.is-single .custom-select-trigger { cursor: default; }
.rc-dd.is-single .custom-select-trigger svg { display: none; }
.rc-dd.is-single:hover .custom-select-trigger { border-color: var(--border-strong); }
.rc-dd:not(.is-single):focus-within .custom-select-trigger { border-color: var(--gold); }
/* DM'deki gibi: odaktaki metin kutusunda tarayıcının beyaz çerçevesi çıkmaz; çerçeve satırın kenarına vurgu olarak biner */
.rc-row input[type="text"], .rc-row input[type="text"]:focus, .rc-row input[type="text"]:focus-visible,
.rc-gif input, .rc-gif input:focus, .rc-gif input:focus-visible, .rc-edit input, .rc-edit input:focus, .rc-edit input:focus-visible { outline: none; box-shadow: none; }
.rc-row { border: 2px solid var(--input-border); border-radius: 24px; padding: 3px 4px 3px 14px; transition: border-color .2s ease; }
.rc-row:focus-within { border-color: var(--gold); }
.rc-gif input:focus, .rc-edit input:focus { border-color: var(--gold); }
.rc-tool:focus-visible, .rc-act:focus-visible, .rc-collapse:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 8px; }
.rc-name.nick { font-weight: 700; }
.rc-meta .prem-badge { margin-left: 0; }

@media (max-width: 1250px) {
    .mr2-layout { grid-template-columns: minmax(0, 1fr); }
    .mr2-chat { position: static; height: 640px; max-height: none; flex-direction: column; flex-wrap: nowrap; }
    .mr2-chat .rc-card { flex: 1 1 0; }
}
@media (max-width: 640px) {
    .mr2-page { padding-left: 14px; padding-right: 14px; }
    .mr2-timer { padding: 8px 20px; }
    .mr2-timer-val { font-size: 1.9rem; }
    .mr2-hero-ov { padding: 12px; }
    .mr2-strip-item { height: 72px; }
    .mr2-strip-item strong { font-size: 12.5px; }
    .mr2-pcard { min-height: 92px; }
    .mr-series-opts { grid-template-columns: minmax(0, 1fr); }
    .mr-report-row { flex-direction: column; align-items: flex-start; }
    .mr2-chat { height: 560px; }
    .mr2-menu { min-width: 0; max-width: 92vw; }
}

/* ---------- Premium: ayarlar kartları, önizleme eklentileri ve Premium sayfası ---------- */
.prem-settings .settings-card-head h4 { display: inline-flex; align-items: center; gap: 8px; }
.prem-status { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--gray); }
.prem-status.is-on { color: var(--white); }
.prem-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.prem-look { position: relative; }
.prem-fields { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.prem-fields:disabled { opacity: .35; filter: blur(1.5px); pointer-events: none; user-select: none; }
.prem-group { display: flex; flex-direction: column; gap: 10px; }
.prem-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.prem-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.prem-opt input, .prem-swatch input, .prem-bgopt input { position: absolute; opacity: 0; pointer-events: none; }
.prem-opt { position: relative; }
.prem-opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 116px; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--field-bg); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.prem-opt > span b { font-size: 14px; font-weight: 700; }
.prem-opt > span small { font-size: 11px; color: var(--gray); }
.prem-opt:hover > span { background: var(--hover-bg); }
.prem-opt input:checked + span { border-color: var(--gold); background: rgb(var(--accent-rgb) / .12); }
.prem-opt input:focus-visible + span, .prem-swatch input:focus-visible + span, .prem-bgopt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.prem-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.prem-swatch { position: relative; }
.prem-swatch > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--panel-solid); cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.prem-swatch.is-none > span { background: var(--field-bg); color: var(--gray); border-color: var(--border-strong); box-shadow: none; }
.prem-swatch:hover > span { transform: scale(1.1); }
.prem-swatch input:checked + span { border-color: var(--white); }
.prem-bgs-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.prem-bgopt { position: relative; display: block; }
.prem-bgopt > span { display: flex; align-items: flex-end; height: 62px; padding: 7px 9px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.prem-bgopt > span small { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
.prem-bgopt.is-none > span, .prem-bgopt.is-custom > span { border-color: var(--border-strong); background: var(--field-bg); }
.prem-bgopt.is-none > span small, .prem-bgopt.is-custom > span small { color: var(--white); text-shadow: none; }
.prem-bgopt:hover > span { transform: translateY(-2px); }
.prem-bgopt input:checked + span { border-color: var(--white); }
.prem-custom { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 4px; }
.prem-custom .prem-bgopt { width: 130px; }
.prem-lock { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 20px; border: 0; border-radius: inherit; background: rgb(var(--bg-rgb) / .35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; color: var(--white); font: inherit; transition: background .2s ease; }
.prem-lock:hover { background: rgb(var(--bg-rgb) / .5); }
.prem-lock-in { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 360px; text-align: center; }
.prem-lock-in strong { font-size: 15px; }
.prem-lock-in > span { font-size: 13px; color: var(--gray); }
.prem-lock-in em { font-style: normal; margin-top: 4px; }

.pv-name .pv-badge { margin-left: 8px; vertical-align: middle; }
.pv-badge[hidden] { display: none; }
.pp2-social { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.pp2-social[hidden] { display: none; }
.pp2-social .profile-social-icon[hidden] { display: none; }
.pv-games-list { display: flex; flex-direction: column; gap: 8px; }
.pv-games-list[hidden], .pv-games-hidden[hidden] { display: none; }
.pv-games-empty, .pv-games-hidden { margin: 0; font-size: 12.5px; color: var(--gray); font-style: italic; }
.pv-game-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgb(var(--ink-rgb) / .03); }
.pv-game-icons { display: inline-flex; gap: 3px; flex-shrink: 0; }
.pv-game-icons img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.pv-game-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pv-game-meta small { font-size: 10.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-game-meta strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp2-matchwrap .pp2-matchcard { min-height: 92px; }
.pp2-matchwrap .pp2-matchcard:hover { transform: none; }
.prem-look-preview { margin: 14px 0 18px; }
.prem-look-preview .mr2-pcard { max-width: 300px; }
.pv-cardnote { margin: 8px 0 0; font-size: 11.5px; color: var(--gray); }
.pp2-headtext .pv-name { display: flex; align-items: center; }

.prem-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 30px 10px 26px; }
.prem-hero h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.prem-hero p { margin: 0; max-width: 620px; color: var(--gray); line-height: 1.7; }
.prem-hero-badge { display: inline-flex; padding: 20px 22px; border-radius: 26px; border: 1px solid var(--border-strong); background: radial-gradient(circle at 50% 30%, rgb(var(--pg-brand-rgb) / .35), transparent 70%), var(--panel); box-shadow: 0 24px 60px -30px rgb(var(--pg-brand-rgb) / .9); }
.prem-hero-badge .prem-badge img { max-height: none; }
.prem-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.prem-note { font-size: 12.5px; color: var(--gray); }
.prem-hero .prem-status { justify-content: center; margin: 0; }
.prem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prem-card-wide { grid-column: 1 / -1; }
.prem-samples { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prem-samples li { display: flex; flex-direction: column; gap: 2px; font-size: 1.05rem; font-weight: 700; }
.prem-samples small { font-size: 11px; font-weight: 500; color: var(--gray); }
.prem-colors { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; font-weight: 700; }
.prem-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.prem-bg { display: flex; flex-direction: column; gap: 5px; }
.prem-bg > span { display: block; height: 64px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .12); }
.prem-bg small { font-size: 11.5px; color: var(--gray); }
.prem-badge-demo { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 1.2rem; font-weight: 700; }
.prem-modal { width: min(94vw, 460px); text-align: center; }
.prem-modal-chip { width: 4.4rem; height: 4.4rem; margin: 0 auto 12px; border-radius: 1.3rem; animation: none; }
.prem-modal-chip img { width: 56%; }
.prem-features { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.prem-features li { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .04); }
.prem-features li strong { font-size: 13.5px; }
.prem-features li span { font-size: 12.5px; color: var(--gray); }
.prem-note { margin: 0 0 14px; }
@media (max-width: 720px) { .prem-grid { grid-template-columns: minmax(0, 1fr); } .prem-opt > span { min-width: 100px; } }

.mr2-mapinfo .mr2-mapsides { margin-top: 3px; white-space: normal; }


/* =====================================================================================================
   MAÇ ODASI v4: hub + logo, soluk oyuncular, animasyonlu sohbet, daha geniş oyuncu kartları, günlük penceresi
   ===================================================================================================== */
.mr2-hub { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 12px 4px 5px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgb(var(--ink-rgb) / .05); color: var(--white); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.mr2-hub:hover { background: var(--hover-bg); border-color: var(--gold); transform: translateY(-1px); }
.mr2-hub-logo { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: rgb(var(--ink-rgb) / .18); }
.mr2-hub-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr2-hub-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.mr2-mid { gap: 4px; }
.mr2-mid-bo { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; margin-top: 4px; }
.mr2-mid-sub { font-size: 13px; color: var(--white); font-weight: 500; }
.mr2-mid-when { font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; }

.mr2-pcard { transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, opacity .5s ease, filter .5s ease; }
.mr2-pcard.is-dim { opacity: .38; filter: saturate(.4); }
.mr2-pcard.is-dim:hover { opacity: .7; }

/* oyuncu kartları: yatayda geniş, dikeyde küçük; kadro sütunları odanın %26'sı (en çok 300 px) — sohbet açılıp kapanınca 3 sütun düzeni bozulmaz, oyuncular aşağı kaymaz */
.mr2-cols { grid-template-columns: minmax(200px, min(300px, 26%)) minmax(0, 1fr) minmax(200px, min(300px, 26%)); }
.mr2-pcard { min-height: 78px; padding: 9px 14px; gap: 12px; border-radius: 14px; }
.mr2-av { width: 52px; height: 52px; }
.mr2-crown { width: 18px; height: 18px; font-size: 10px; right: -3px; bottom: -3px; }
.mr2-pname { font-size: 14px; }
.mr2-prole { font-size: 9.5px; }
.mr2-acc { font-size: 11px; padding: 1px 8px 1px 6px; margin-top: 1px; }
.mr2-roster { gap: 8px; }
.mr2-pcard-bg.is-plain { background: #08080a; }
/* sütun düzeni, ekranın değil ODANIN genişliğine göre (sohbet açık/kapalı fark eder): geniş → kadro | sahne | kadro (sohbet açıkken de korunur: eşik 620px); orta → sahne üstte, kadrolar altta yan yana; dar → tek sütun */
.matchroom.mr2 { container-name: mrroom; container-type: inline-size; }
@container mrroom (max-width: 619px) {
    .mr2-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mr2-center { grid-column: 1 / -1; order: -1; }
}
@container mrroom (max-width: 479px) {
    .mr2-cols { grid-template-columns: minmax(0, 1fr); }
}

/* sohbet açılıp kapanırken kayar, solar ve sayfa yeniden düzenlenir */
.mr2-layout { --mr-chat-w: clamp(340px, 24vw, 420px); grid-template-columns: minmax(0, 1fr) var(--mr-chat-w); transition: grid-template-columns .5s cubic-bezier(.22, 1, .36, 1), column-gap .5s cubic-bezier(.22, 1, .36, 1); }
.mr2-layout.is-chat-closed { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; }
.mr2-layout.is-chat-closed .mr2-chat { display: flex; }
.mr2-chat { min-width: 0; overflow: hidden; opacity: 1; transform: none; visibility: visible; transition: opacity .35s ease .08s, transform .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1), border-width .5s ease, height .5s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.mr2-layout.is-chat-closed .mr2-chat { opacity: 0; transform: translateX(46px); padding-left: 0; padding-right: 0; border-width: 0; pointer-events: none; visibility: hidden; transition: opacity .3s ease, transform .5s cubic-bezier(.22, 1, .36, 1), padding .5s cubic-bezier(.22, 1, .36, 1), border-width .5s ease, height .5s cubic-bezier(.22, 1, .36, 1), visibility 0s .5s; }
@media (max-width: 1250px) {
    .mr2-layout, .mr2-layout.is-chat-closed { grid-template-columns: minmax(0, 1fr); }
    .mr2-layout.is-chat-closed { row-gap: 0; }
    .mr2-layout.is-chat-closed .mr2-chat { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; transform: translateY(24px); }
}

/* günlük penceresi */
.mr-modal-wide { width: min(94vw, 680px); }
.mr-loglist { display: flex; flex-direction: column; gap: 2px; max-height: 58vh; overflow-y: auto; margin-bottom: 1rem; padding-right: 4px; text-align: left; scrollbar-width: thin; }
.mr-logrow { display: grid; grid-template-columns: 96px 10px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.mr-logrow:hover { background: rgb(var(--ink-rgb) / .05); }
.mr-logtime { font-size: 11.5px; color: var(--gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-logdot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); align-self: center; }
.mr-logrow.side-A .mr-logdot { background: var(--mr-a, #3b82f6); }
.mr-logrow.side-B .mr-logdot { background: var(--mr-b, #f43f5e); }
.mr-logrow.is-admin .mr-logdot { background: #f59e0b; }
.mr-logrow.is-admin .mr-logtext { color: #fbbf24; }
.mr-logtext { overflow-wrap: anywhere; }
@media (max-width: 640px) { .mr-logrow { grid-template-columns: 78px 8px minmax(0, 1fr); gap: 8px; } }

/* fikstür: kaynağı belli boş yuvalar ("Yarı Final Maç 1 kaybedeni") soluk yazılır */
.fx2-team.is-ph .fx2-name { color: var(--gray); opacity: .65; font-style: italic; font-size: 12.5px; font-weight: 500; }
.fx2-team.is-ph .fx2-logo { opacity: .5; }

/* giriş: "Şifremi unuttum" şifre kutusunun sağ üstünde (etiketle aynı satırda) */
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.field-head label { margin: 0 !important; }
.forgot-link { font-size: 12.5px; font-weight: 500; color: var(--gray); text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.forgot-link:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

/* dil seçici: alt bilgide, yuvarlak bayraklı ad düğmeleri */
.footer-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 20px; padding: 0 16px; }
.footer-lang { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--field-bg); color: var(--gray); font-size: 13px; font-weight: 500; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
.footer-lang img { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; }
.footer-lang:hover { color: var(--white); border-color: var(--border-strong); background: var(--hover-bg); transform: translateY(-2px); }
.footer-lang.is-current { color: var(--white); font-weight: 700; border-color: rgb(var(--ink-rgb) / .45); background: rgb(var(--ink-rgb) / .08); }
.rc-head h3 { white-space: nowrap; }
.rc-head .custom-select { max-width: 56%; flex-shrink: 1; }


/* =====================================================================================================
   MARKA: logo, ikon ve bordo vurgu (ikonun arka plan rengi). Tema bozulmaz: yalnızca aktif menü, sekme çizgisi ve yükleme halkası bordo olur.
   ===================================================================================================== */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo-img { height: 40px; width: auto; display: block; }
.loader-mark { position: absolute; inset: 15px; width: calc(100% - 30px); height: calc(100% - 30px); border-radius: 22%; object-fit: cover; animation: esMarkPulse 1.6s ease-in-out infinite; }
@keyframes esMarkPulse { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } }

/* üst menü: aktif sekme bordo hap (yazı beyaz), üzerine gelince hafif bordo */
nav ul li a { transition: color .2s ease, background .25s ease, box-shadow .25s ease; }
nav ul li a:hover { color: var(--white); background: rgb(var(--pg-brand-rgb) / .28); }
nav ul li a.active, nav ul li a.active:hover { color: #fff; background: var(--pg-brand); box-shadow: 0 8px 22px -12px rgb(var(--pg-brand-rgb) / .95), inset 0 0 0 1px rgb(255 255 255 / .1); }

/* sayfa içi sekmeler: aktif sekme çizgisi bordo */
.tabs:not(.tabs-vertical) .tab.active { color: var(--white); border-bottom-color: var(--pg-brand-bright); }
.tabs.tabs-vertical .tab.active { box-shadow: inset 3px 0 0 var(--pg-brand-bright); }

/* alt bilgi ve giriş penceresinde marka ikonu */
.footer-brand { display: inline-flex; margin: 0 auto 14px; transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; opacity: .95; }
.footer-brand:hover { transform: translateY(-2px) scale(1.06); opacity: 1; }
.footer-brand img { width: 40px; height: 40px; border-radius: 22%; display: block; }
footer { text-align: center; }
.auth-mark { display: block; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 22%; }

/* =====================================================================================================
   BAĞLANTILAR: yazılan metindeki adresler otomatik bordo bağlantı olur, sağında bordo "aç" düğmesi durur
   (PHP: render_rich_text(), JS: esRichText() — aynı işaretleme)
   ===================================================================================================== */
.es-link { display: inline; }
.es-link-a { color: var(--pg-brand-bright); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; word-break: break-word; border-bottom: 1px solid rgb(var(--pg-brand-rgb) / .6); transition: color .2s ease, border-color .2s ease; }
.es-link-a:hover { color: #ff5a75; border-bottom-color: currentColor; }
.es-link-go { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-left: 5px; vertical-align: -4px; border-radius: 6px; background: var(--pg-brand); color: #fff; border: 1px solid rgb(255 255 255 / .14); text-decoration: none; transition: transform .2s ease, box-shadow .25s ease, background .2s ease; }
.es-link-go svg { display: block; }
.es-link-go:hover { background: var(--pg-brand-bright); transform: translateY(-1px) scale(1.08); box-shadow: 0 6px 16px -6px rgb(var(--pg-brand-rgb) / .95); }
.es-link-go:focus-visible, .es-link-a:focus-visible { outline: 2px solid var(--pg-brand-bright); outline-offset: 2px; border-radius: 4px; }

/* ---------- HUB AYARLARI: canlı hub önizlemesi (kart + sayfa; turnuva önizlemesiyle aynı çerçeve) ---------- */
.hp2-card { pointer-events: none; margin: 0; }
.hp2-banner { min-height: 190px; }
.hp2-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hp2 .tp2-grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
.hp2-icon { width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; object-fit: cover; border: 2px solid rgb(255 255 255 / .85); background: rgb(0 0 0 / .35); }
.hp2-star { display: inline-flex; vertical-align: middle; color: #fff; }
.hp2-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hp2-social .profile-social-icon { width: 24px; height: 24px; }
.hp2-social .profile-social-icon[hidden] { display: none; }
.hp2-desc { margin-top: 8px !important; max-width: 520px; font-size: 11.5px; line-height: 1.5; color: rgb(255 255 255 / .8) !important; overflow-wrap: anywhere; }
.hp2-desc[hidden] { display: none; }
.hp2-sections { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; padding: 14px 18px 0; }
.hp2-section { min-width: 0; }
.hp2-ghosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hp2-ghosts i { display: block; aspect-ratio: 16 / 11; border-radius: 10px; border: 1px dashed var(--border-strong); background: rgb(var(--ink-rgb) / .03); }
.hp2-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.hp2-lines i { display: block; height: 26px; border-radius: 8px; border: 1px dashed var(--border-strong); background: rgb(var(--ink-rgb) / .03); }
@media (max-width: 900px) { .hp2 .tp2-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hp2-sections { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 0; } .hp2-icon { width: 44px; height: 44px; } }

/* =====================================================================================================
   İŞLENİYOR GERİ BİLDİRİMİ (js/core/busy.js): düğmede dönen halka + ekranın ortasında arka planı bulanık "işleniyor" penceresi
   ===================================================================================================== */
.btn.is-loading, .save-bar .btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading::before {
    content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px; flex-shrink: 0;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: esSpin .7s linear infinite;
}
.busy-overlay {
    position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgb(0 0 0 / .42); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s;
}
.busy-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
.busy-box {
    display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: min(300px, 100%); padding: 26px 30px 22px;
    border: 1px solid var(--border-strong); border-radius: 24px; background: linear-gradient(135deg, rgb(var(--ink-rgb) / .10), rgb(var(--ink-rgb) / .03)), rgb(var(--solid-rgb) / .92);
    box-shadow: 0 30px 70px -24px rgb(0 0 0 / .8); transform: translateY(10px) scale(.97); transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.busy-overlay.is-open .busy-box { transform: none; }
.busy-ring {
    width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgb(var(--ink-rgb) / .14); border-top-color: var(--pg-brand-bright);
    animation: esSpin .85s linear infinite;
}
.busy-msg { font-size: 14px; font-weight: 600; color: var(--white); text-align: center; }
.busy-bar { position: relative; width: 100%; height: 4px; border-radius: 999px; overflow: hidden; background: rgb(var(--ink-rgb) / .12); }
.busy-bar i { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: inherit; background: linear-gradient(90deg, var(--pg-brand), var(--pg-brand-bright)); animation: esBusyBar 1.15s ease-in-out infinite; }
@keyframes esBusyBar { 0% { left: -40%; } 100% { left: 102%; } }
@media (prefers-reduced-motion: reduce) { .busy-ring, .busy-bar i, .btn.is-loading::before { animation-duration: 2.4s; } }

.prem-samples-fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prem-samples-fonts li { font-size: 1.15rem; overflow: hidden; }
@media (max-width: 720px) { .prem-samples-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =====================================================================================================
   TAKIM KARTI (Takımlar sayfası): kapakta banner / oyun gradyanı, üstüne binen logo, oyun etiketi, üye avatarları
   ===================================================================================================== */
.team-card-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1280px) { .team-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .team-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .team-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 440px) { .team-card-grid { grid-template-columns: minmax(0, 1fr); } }
.team-card-grid > * { min-width: 0; }
.team-card-grid .grid-empty { grid-column: 1 / -1; }
.team-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden; color: var(--white); text-decoration: none;
    border: 1px solid var(--border); border-radius: 20px; background: var(--panel);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .35s ease;
}
.team-card:hover { transform: translateY(-5px); border-color: rgb(var(--pg-brand-rgb) / .7); box-shadow: 0 24px 46px -24px rgb(0 0 0 / .9), 0 0 0 1px rgb(var(--pg-brand-rgb) / .35), 0 0 34px -12px rgb(var(--pg-brand-rgb) / .8); }
.team-card-cover { position: relative; aspect-ratio: 1376 / 400; background-size: cover; background-position: center; overflow: hidden; }
.team-card-cover::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 14px); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.team-card:hover .team-card-cover::before { transform: translateX(14px); }
.team-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 20%, rgb(0 0 0 / .55) 100%); }
.team-card-game {
    position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 4px; border-radius: 999px; background: rgb(0 0 0 / .5); border: 1px solid rgb(255 255 255 / .16); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.team-card-game img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.team-card-game svg { margin-left: 5px; }
.team-card-logo {
    position: relative; z-index: 2; width: 66px; height: 66px; margin: -33px 0 0 16px; border-radius: 19px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--chip-blue); color: #fff; font-weight: 800; font-size: 22px;
    box-shadow: 0 0 0 4px rgb(var(--solid-rgb)), 0 14px 26px -10px rgb(0 0 0 / .85); transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.team-card:hover .team-card-logo { transform: scale(1.06) rotate(-2deg); }
.team-card-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card-body { display: flex; flex-direction: column; gap: 5px; padding: 10px 16px 14px; min-width: 0; }
.team-card-name { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; line-height: 1.25; min-width: 0; }
.team-card-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-card-tag { align-self: flex-start; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgb(var(--ink-rgb) / .05); color: var(--gray); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.team-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--gray); }
.team-card-people { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.team-card-people b { color: var(--white); font-weight: 700; margin-right: -3px; }
.team-card-stack { display: inline-flex; }
.team-card-stack img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(var(--solid-rgb)); }
.team-card-stack img + img { margin-left: -8px; }
.team-card-go { display: inline-flex; align-items: center; gap: 5px; color: var(--white); font-weight: 600; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); white-space: nowrap; }
.team-card:hover .team-card-go { opacity: 1; transform: none; }
.team-card.is-verified { border-color: rgb(var(--ink-rgb) / .22); }
.team-card.is-verified .team-card-cover::after { background: linear-gradient(180deg, rgb(255 255 255 / .06) 10%, rgb(0 0 0 / .55) 100%); }
@media (hover: none) { .team-card-go { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .team-card, .team-card-logo, .team-card-go, .team-card-cover::before { transition: none; } }

/* ---------- KAYIT: Kullanıcı Sözleşmesi + Gizlilik Politikası onayı ---------- */
.es-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--gray); padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink-rgb) / .03); transition: border-color .2s ease, background .2s ease; }
.es-check:hover { border-color: var(--border-strong); background: var(--hover-bg); }
.es-check.input-error { border-color: #ef4444; background: rgb(239 68 68 / .08); animation: esShakeX .4s ease; }
.es-check input { position: absolute; opacity: 0; pointer-events: none; }
.es-check-box { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; border-radius: 7px; border: 2px solid var(--border-strong); color: transparent; background: var(--field-bg); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.es-check input:checked + .es-check-box { background: var(--pg-brand); border-color: var(--pg-brand-bright); color: #fff; transform: scale(1.06); }
.es-check input:focus-visible + .es-check-box { outline: 2px solid var(--pg-brand-bright); outline-offset: 2px; }
.es-check-text a, .auth-legal a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(var(--pg-brand-rgb) / .9); font-weight: 600; }
.es-check-text a:hover, .auth-legal a:hover { color: var(--pg-brand-bright); }
.es-check-text i, .auth-legal i { font-style: normal; opacity: .5; margin: 0 2px; }
.auth-legal { margin: 16px 2px 0; font-size: 12.5px; line-height: 1.6; text-align: center; color: var(--gray); }
@keyframes esShakeX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* =====================================================================================================
   PERFORMANS: tekrarlanan öğelerde arka plan bulanıklığı (backdrop-filter) kapalıdır.
   Her backdrop-filter'lı öğe ayrı bir birleştirme katmanı ve her karede arkasını yeniden örnekleyip bulanıklaştırır; liste/ızgara sayfalarında
   (takımlar, turnuvalar, fikstür...) onlarca kart aynı anda ekranda olunca kaydırma kasıyordu. Kartların zemini zaten yarı saydam olduğundan
   görünüm aynı kalır. Bulanıklık yalnızca tek seferde bir tane görünen yüzeylerde kalır: üst çubuk, kenar çubuğu, açılır paneller, pencereler,
   bildirimler, sohbet ve görsel üstündeki küçük rozetler.
   ===================================================================================================== */
.btn, .card, .mini-card, .mini-card-compact, .mini-tile, .team-list-card, .team-card, .hub-card, .friend-row-card,
.stat-box, .step, .step-dot, .overview-info-box, .prize-pool-box, .empty-state-box, .settings-card, .timeline-post,
.bracket-match, .fx-match, .fx-bracket-scroll, .fx2-team, .profile-social-icon, .pagination-arrow, .carousel-arrow,
.alert, footer, .messages-friend-list, .messages-thread, .admin-filters, .profile-preview,
.mr-stage, .mr-roster, .mr2-timer, .ann-card, .tl-feed, .tl-composer-card, .rc-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Uzun liste/ızgaralarda ekran dışındaki kartlar çizilmez ve görselleri (arka plan görselleri dahil) yaklaşınca yüklenir (content-visibility).
   Bu kartların taşan içeriği zaten kırpılıyor (overflow: hidden), bu yüzden görünüm değişmez; auto: son ölçülen boyut hatırlanır, kaydırma çubuğu zıplamaz. */
.team-card { content-visibility: auto; contain-intrinsic-size: auto 249px; }
.mini-card { content-visibility: auto; contain-intrinsic-size: auto 279px; }

/* Kart kapağı: gerçek <img> (tembel yüklenir); önceki background-image gibi kutuyu doldurur, üstteki süs katmanları ve rozetler görselin üzerinde kalır */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.team-card-cover::before, .team-card-cover::after { z-index: 1; }
.team-card-game { z-index: 2; }

/* ---------- Profil: Genel Bakış blokları, arkadaş penceresi, Premium banner ---------- */
.profile-block { margin-bottom: 26px; }
.profile-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.profile-block-head h4 { margin: 0; font-size: 15px; }
.profile-grid-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.profile-friends-panel { margin-top: 18px; }
.friend-modal-row { cursor: default; }
.friend-modal-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.friend-modal-link:hover .member-name { text-decoration: underline; text-underline-offset: 3px; }
.friend-modal-row .gear { flex-shrink: 0; margin-left: 6px; }
.profile-banner { position: relative; aspect-ratio: 1376 / 400;   /* yüklenen 1376x400 görsel kırpılmadan oturur */ border-radius: 22px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 18px; }
.profile-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .45)); }
.profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-header.has-banner .profile-av-wrap { margin-top: -54px; position: relative; z-index: 1; }
.profile-header.has-banner .profile-avatar { box-shadow: 0 10px 30px -8px rgb(0 0 0 / .7); }
@media (max-width: 640px) { .profile-header.has-banner .profile-av-wrap { margin-top: -40px; } }

/* =====================================================================================================
   TURNUVA · TAKIMLAR: liste (satır) düzeni — logo + ad + kayıt zamanı | kadro yan yana | doluluk, onay durumu, yönetici menüsü
   ===================================================================================================== */
.trow-list { display: flex; flex-direction: column; gap: 10px; }
.trow { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); transition: border-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
.trow:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.trow.is-mine { border-color: rgb(var(--pg-brand-rgb) / .55); background: linear-gradient(100deg, rgb(var(--pg-brand-rgb) / .12), var(--panel) 60%); }
.trow.is-just-moved { animation: trowJustMoved 1.6s ease; }
@keyframes trowJustMoved { 0%, 100% { box-shadow: none; } 15%, 55% { box-shadow: 0 0 0 2px var(--gold), 0 0 24px -6px var(--gold); } }
.trow-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trow-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.trow-logo.is-round { border-radius: 50%; }
.trow-logo-fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; background: var(--chip-blue, #3b4a6b); }
.trow-team-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trow-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trow-name { font-weight: 700; font-size: 15px; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.trow-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.trow-mine { align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: rgb(var(--pg-brand-rgb) / .3); color: #fff; }
.trow-date { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--gray); white-space: nowrap; }
.trow-members { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.trow-mem { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .04); font-size: 12.5px; }
.trow-mem-link { display: inline-flex; align-items: center; gap: 7px; color: var(--white); text-decoration: none; }
.trow-mem-link img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.trow-mem-link b { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-mem-link em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.trow-mem-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.trow-mem-x button { width: 20px; height: 20px; padding: 0; line-height: 1; border-radius: 50%; border: 0; background: rgb(var(--ink-rgb) / .1); color: var(--gray); font-size: 15px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.trow-mem-x button:hover { background: #dc3545; color: #fff; }
.trow-mem.is-empty { border-style: dashed; padding: 4px 5px 4px 12px; color: var(--gray); background: transparent; }
.trow-mem-ph { font-size: 12px; }
.trow-add { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--gold); background: rgb(var(--ink-rgb) / .08); color: var(--white); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.trow-add:hover { background: var(--gold); color: var(--on-accent, #000); transform: scale(1.1); }
.trow-side { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.trow-count { margin: 0; }
.trow-status { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: rgb(var(--ink-rgb) / .08); color: var(--gray); }
.trow-status.is-ok { background: rgb(34 197 94 / .16); color: #4ade80; }
.trow-status.is-locked { display: inline-flex; align-items: center; gap: 4px; }
.trow-side .gear { flex-shrink: 0; }
@media (max-width: 1000px) {
    .trow { grid-template-columns: minmax(0, 1fr) auto; }
    .trow-members { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 520px) { .trow { padding: 12px; gap: 12px; } .trow-mem-link b { max-width: 90px; } }

/* kadro slotu (+) penceresi */
.roster-add-body { padding: 4px 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 18px; max-height: 62vh; overflow-y: auto; scrollbar-width: thin; }
.roster-add-section h5 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.roster-add-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.roster-add-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .03); }
.roster-add-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.roster-add-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-add-warn { flex-shrink: 0; font-size: 11px; color: #fecaca; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) {
    .roster-add-row { flex-wrap: wrap; row-gap: 4px; }
    .roster-add-warn { flex-basis: 100%; max-width: none; white-space: normal; margin: 0 0 0 44px; order: 3; }
}

/* ---------- Sohbet: @ etiketleme, etiket bildirimi, öneri listesi ---------- */
.rc-mention-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 6px); z-index: 6; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--option-bg); box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .6); animation: esFadeInUp .18s ease both; }
.rc-mention-pop[hidden] { display: none; }
.rc-mention-item { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--white); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.rc-mention-item.is-on, .rc-mention-item:hover { background: rgb(var(--pg-brand-rgb) / .28); }
.rc-mention-at { color: var(--pg-brand-bright); font-weight: 800; }
.rc-mention-flag { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid rgb(var(--pg-brand-rgb) / .7); background: rgb(var(--pg-brand-rgb) / .35); color: #fff; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; animation: mrMentionPulse 1.6s ease-in-out 3; }
.rc-mention-flag[hidden] { display: none; }
@keyframes mrMentionPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--pg-brand-rgb) / .7); } 50% { box-shadow: 0 0 0 7px rgb(var(--pg-brand-rgb) / 0); } }
.rc-msg.is-mentioned { background: rgb(var(--pg-brand-rgb) / .14); border-radius: 12px; box-shadow: inset 3px 0 0 var(--pg-brand-bright); }
.rc-mention-chip { font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: rgb(var(--pg-brand-rgb) / .4); color: #fff; }
.rc-tag { color: var(--pg-brand-bright); font-weight: 800; }
.mr2-badge.is-mention { background: var(--pg-brand-bright); }
.rc-mention-chip { white-space: nowrap; }
.rc-meta { flex-wrap: wrap; }

/* ---------- Sürüklenebilir + kendiliğinden kayan şerit (Takımlar → Onaylı Takımlar) ---------- */
.drag-carousel { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 6px 2px 14px; margin: 0 -2px; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.drag-carousel::-webkit-scrollbar { display: none; }
.drag-carousel.is-grabbing { cursor: grabbing; }
.drag-carousel.is-grabbing a { pointer-events: none; }
.drag-track { display: flex; gap: 16px; width: max-content; }
.drag-item { flex: 0 0 clamp(220px, 19vw, 300px); min-width: 0; }
.drag-item > .team-card { height: 100%; }
@media (max-width: 700px) { .drag-item { flex-basis: 62vw; } .drag-track { gap: 12px; } }

/* =====================================================================================================
   TURNUVA · GENEL BAKIŞ: "bento" ızgara — durum halkası, hızlı bilgiler, hakkında, ödül podyumu, düzenleyen, kayıtlı takımlar, ekip.
   Oyunun rengi (--bt-accent) halka, ikon ve vurgularda kullanılır; her kutu boş olunca hiç çizilmez (boşluk bırakmaz).
   ===================================================================================================== */
.bento { --bt-accent: #c8102e; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; }
.bt-tile { position: relative; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); overflow: hidden; }
.bt-tile h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.bt-tile h3 span { width: 4px; height: 16px; border-radius: 3px; background: var(--bt-accent); box-shadow: 0 0 12px var(--bt-accent); }
.bt-muted { color: var(--gray); font-size: 14px; }
.bt-status { grid-column: span 5; display: flex; align-items: center; gap: 22px; background: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--bt-accent) 26%, transparent), transparent 62%), linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); }
.bt-facts { grid-column: span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; align-content: center; }
.bt-about { grid-column: span 8; }
.bt-org { grid-column: span 4; }
.bt-prize { grid-column: span 8; }
.bt-teams { grid-column: span 4; }
.bt-staff { grid-column: span 12; }
@media (max-width: 1100px) { .bt-status, .bt-facts, .bt-about, .bt-org, .bt-prize, .bt-teams { grid-column: span 12; } .bt-org, .bt-teams { grid-column: span 6; } }
@media (max-width: 720px) { .bt-org, .bt-teams { grid-column: span 12; }  .bt-tile { padding: 18px; border-radius: 20px; } .bt-status { flex-direction: column; text-align: center; } }

/* durum halkası */
.bt-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.bt-ring svg { display: block; }
.bt-ring-bg { fill: none; stroke: rgb(var(--ink-rgb) / .12); stroke-width: 9; }
.bt-ring-fg { fill: none; stroke: var(--bt-accent); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--bt-accent)); transition: stroke-dasharray 1s cubic-bezier(.22, 1, .36, 1); }
.bt-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.bt-ring-in strong { font-size: 34px; font-weight: 800; }
.bt-ring-in small { font-size: 11px; color: var(--gray); }
.bt-status-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bt-status-text small { color: var(--gray); font-size: 12.5px; }
.bt-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgb(var(--ink-rgb) / .08); }
.bt-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--gray); }
.bt-status.is-open .bt-pill { background: rgb(34 197 94 / .16); color: #4ade80; }
.bt-status.is-open .bt-pill i { background: #4ade80; animation: mrLiveDot 1.6s ease-in-out infinite; }
.bt-status.is-live .bt-pill { background: rgb(239 68 68 / .16); color: #f87171; }
.bt-status.is-live .bt-pill i { background: #f87171; animation: mrLiveDot 1.2s ease-in-out infinite; }
.bt-status.is-closed .bt-pill { background: rgb(245 158 11 / .16); color: #fbbf24; }
.bt-count { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.1; }
.bt-left { font-size: 12.5px; font-weight: 700; color: var(--bt-accent); }
.bt-left.is-full { color: #f87171; }

/* hızlı bilgiler */
.bt-fact { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bt-fact-ic { width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bt-accent) 20%, transparent); color: var(--white); border: 1px solid color-mix(in srgb, var(--bt-accent) 35%, transparent); }
.bt-fact-ic img { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; }
.bt-fact > div { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.bt-fact small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.bt-fact strong, .bt-fact a { font-size: 14px; font-weight: 700; color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-fact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-fact em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--gray); }

/* hakkında */
.bt-about-text { font-size: 14.5px; line-height: 1.8; color: rgb(var(--ink-rgb) / .82); white-space: pre-line; max-height: 12.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); transition: max-height .5s cubic-bezier(.22, 1, .36, 1); }
.bt-about-text.is-open { max-height: 200em; -webkit-mask-image: none; mask-image: none; }
.bt-about-text:not(.is-open):not(:has(+ .bt-more:not([hidden]))) { -webkit-mask-image: none; mask-image: none; }
.bt-more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--bt-accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.bt-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-more[hidden] { display: none; }

/* düzenleyen */
.bt-org { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--bt-accent) 22%, transparent), transparent 60%), linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); transition: border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.bt-org { cursor: default; }
.bt-org-go { align-self: flex-start; text-decoration: none; }
.bt-org-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-org-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.bt-org-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bt-org-head strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-org-logo { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-strong); }
.bt-org-fallback { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; background: rgb(var(--ink-rgb) / .12); }
.bt-org-desc { font-size: 13px; line-height: 1.6; color: var(--gray); }
.bt-org-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bt-accent); }

/* ödül podyumu */
.bt-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding-top: 6px; }
.bt-pod { position: relative; flex: 1 1 0; max-width: 220px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 0; border-radius: 18px 18px 0 0; text-align: center; background: linear-gradient(180deg, rgb(var(--ink-rgb) / .08), rgb(var(--ink-rgb) / .02)); border: 1px solid var(--border); border-bottom: 0; }
.bt-pod strong { font-size: clamp(15px, 2vw, 22px); font-weight: 800; overflow-wrap: anywhere; }
.bt-pod-base { display: block; width: 100%; margin-top: 4px; }
.bt-pod.is-1 { padding-top: 24px; background: linear-gradient(180deg, rgb(250 204 21 / .22), rgb(250 204 21 / .03)); border-color: rgb(250 204 21 / .5); }
.bt-pod.is-1 .bt-pod-base { height: 46px; }
.bt-pod.is-2 { background: linear-gradient(180deg, rgb(203 213 225 / .2), rgb(203 213 225 / .03)); border-color: rgb(203 213 225 / .4); }
.bt-pod.is-2 .bt-pod-base { height: 26px; }
.bt-pod.is-3 { background: linear-gradient(180deg, rgb(217 119 6 / .22), rgb(217 119 6 / .03)); border-color: rgb(217 119 6 / .45); }
.bt-pod.is-3 .bt-pod-base { height: 12px; }
.bt-medal { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: #1a1300; box-shadow: 0 8px 20px -6px rgb(0 0 0 / .6); }
.bt-pod.is-1 .bt-medal { background: linear-gradient(135deg, #fde047, #f59e0b); width: 46px; height: 46px; font-size: 19px; }
.bt-pod.is-2 .bt-medal { background: linear-gradient(135deg, #f1f5f9, #94a3b8); }
.bt-pod.is-3 .bt-medal { background: linear-gradient(135deg, #fdba74, #b45309); }
.bt-prize-rest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bt-prize-rest > div { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .04); font-size: 13px; }
.bt-prize-rest span { color: var(--gray); font-weight: 700; }

/* kayıtlı takımlar */
.bt-teams { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bt-logos { display: flex; flex-wrap: wrap; }
.bt-logos img, .bt-logos span, .bt-logos em { width: 40px; height: 40px; margin-right: -10px; border-radius: 50%; object-fit: cover; border: 2px solid var(--panel-solid, #0d0d10); flex-shrink: 0; }
.bt-logos span, .bt-logos em { display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; font-weight: 800; background: rgb(var(--ink-rgb) / .16); }
.bt-logos em { background: color-mix(in srgb, var(--bt-accent) 45%, #000); font-size: 12px; margin-right: 0; }
.bt-teams-meta { margin: 0; font-size: 13.5px; color: var(--gray); }
.bt-teams-meta b { color: var(--white); }

/* yönetim ekibi */
.bt-staff-list { display: flex; flex-wrap: wrap; gap: 10px; }
.bt-staff-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .04); color: var(--white); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: border-color .2s ease, background .2s ease; }
.bt-staff-chip:hover { border-color: var(--bt-accent); background: var(--hover-bg); }
.bt-staff-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.bt-fact > div > em { display: block; font-style: normal; font-weight: 500; font-size: 12px; color: var(--gray); }
.bt-logos span, .bt-logos em { font-size: 11px; overflow: hidden; }

/* ---------- Matchroom: harita kartındaki bilgi düğmesi (seçim günlüğü), taraf rozetleri, günlük penceresi ---------- */
.mr2-hero-info { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .28); background: rgb(0 0 0 / .55); color: #fff; cursor: pointer; transition: background .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease; }
.mr2-hero-info:hover { background: rgb(var(--pg-brand-rgb) / .85); border-color: transparent; transform: scale(1.08); }
.mr2-hero-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: calc(100% - 70px); }
.mr2-hero-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 11px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .22); background: rgb(0 0 0 / .55); color: #fff; font-size: 12.5px; font-weight: 700; }
.mr2-hero-badge svg { flex-shrink: 0; }
.mr2-hero-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr2-hero-lobby { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgb(0 0 0 / .5); border: 1px solid rgb(255 255 255 / .2); color: rgb(255 255 255 / .9); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mr2-hero-status.is-pending { color: #fbbf24; border-color: rgb(245 158 11 / .55); background: rgb(48 32 4 / .7); }
.mr2-hero-status.is-pending .mr2-hero-dot { animation: mrLiveDot 1.4s ease-in-out infinite; }

/* ---------- CS2 sunucu otomasyonu (DatHost): bağlan / IP kopyala / izle ---------- */
.mr2-server { margin-top: 10px; }
.mr2-server.is-loading, .mr2-server.is-error { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 12px; background: rgb(var(--ink-rgb) / .05); color: var(--gray); font-size: 12.5px; }
.mr2-server.is-error { color: #f87171; }
.mr2-server-row { display: flex; align-items: stretch; position: relative; }
.mr2-server-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px 0 0 12px; background: var(--gold); color: var(--on-accent, #000); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: filter .15s ease; }
.mr2-server-btn:hover { filter: brightness(1.08); }
.mr2-server-toggle { width: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0 12px 12px 0; border-left: 1px solid rgb(0 0 0 / .18); background: var(--gold); color: var(--on-accent, #000); cursor: pointer; transition: filter .15s ease; }
.mr2-server-toggle:hover { filter: brightness(1.08); }
.mr2-server-drop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 220px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--panel-solid); box-shadow: 0 14px 30px -10px rgb(0 0 0 / .6); }
.mr2-server-drop[hidden] { display: none; }
.mr2-server-drop-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--white); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.mr2-server-drop-item:hover { background: var(--hover-bg); }
.mr2-server-watch { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 14px; border-radius: 12px; border: 0; background: #fff; color: #111; font-weight: 700; font-size: 13.5px; text-decoration: none; transition: filter .15s ease; }
.mr2-server-watch:hover { filter: brightness(.92); }
.mr-statslist { max-height: 58vh; overflow-y: auto; text-align: left; scrollbar-width: thin; }
.mr-stats-maptitle { margin: 16px 0 8px; font-size: 13px; color: var(--gold-light); text-transform: uppercase; letter-spacing: .06em; }
.mr-stats-maptitle:first-child { margin-top: 0; }
.mr-stats-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; }
.mr-stats-table th, .mr-stats-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.mr-stats-table th { color: var(--gray); font-weight: 600; font-size: 11.5px; text-transform: uppercase; }
.mr-stats-raw { max-height: 260px; overflow: auto; padding: 10px; border-radius: 10px; background: rgb(var(--ink-rgb) / .05); font-size: 11.5px; color: var(--gray); white-space: pre-wrap; }
.mr2-stats { margin-top: 14px; text-align: left; }
.mr-stats-wrap { overflow-x: auto; scrollbar-width: thin; }
.mr-stats-table a { color: var(--white); font-weight: 600; text-decoration: none; }
.mr-stats-table a:hover { color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }
.mr2-demos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mr2-demo { flex: 1 1 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font-size: 13.5px; font-weight: 700; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.mr2-demo:hover { border-color: var(--gold); background: var(--hover-bg); }
.mr2-sideduo { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mr2-sidebadge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 12px; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .2); border-left: 3px solid var(--side); color: #fff; font-size: 12px; }
.mr2-sidebadge svg { flex-shrink: 0; color: var(--side); }
.mr2-sidebadge b { font-weight: 800; letter-spacing: .04em; }
.mr2-sidebadge em { font-style: normal; font-weight: 700; opacity: .95; color: var(--faction, inherit); }
.mr-vetolog-copy { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mr-vetolog-copy:hover { border-color: var(--gold); background: var(--hover-bg); }
.mr-vetolog { max-height: 58vh; overflow-y: auto; padding: 4px 2px 6px; text-align: left; scrollbar-width: thin; }
.mr-vetolog .mr-log { font-size: 14px; gap: 8px; }
.mr-vetolog .mr-log li { padding: 8px 12px; border-radius: 10px; background: rgb(var(--ink-rgb) / .04); }
a.rc-tag { text-decoration: none; cursor: pointer; border-radius: 6px; padding: 0 2px; margin: 0 -2px; transition: background .15s ease; }
a.rc-tag:hover { background: rgb(var(--pg-brand-rgb) / .3); text-decoration: underline; text-underline-offset: 2px; }

/* Üst menüdeki Premium seçeneği: altın renk, üstüne gelince parlar */
.user-menu-dropdown a.user-menu-premium { color: #f5c542; font-weight: 700; transition: color .2s ease, background .2s ease, text-shadow .25s ease; }
.user-menu-dropdown a.user-menu-premium svg { color: #f5c542; transition: filter .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.user-menu-dropdown a.user-menu-premium:hover { color: #ffe08a; background: rgb(245 197 66 / .12); text-shadow: 0 0 12px rgb(245 197 66 / .85), 0 0 26px rgb(245 197 66 / .45); }
.user-menu-dropdown a.user-menu-premium:hover svg { color: #ffe08a; filter: drop-shadow(0 0 6px rgb(245 197 66 / .95)) drop-shadow(0 0 14px rgb(245 197 66 / .6)); transform: scale(1.12) rotate(-8deg); }

/* ---------- Turnuva ayarları · Yasaklar ---------- */
.ban-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ban-kind { display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--field-bg); }
.ban-kind label { cursor: pointer; }
.ban-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ban-kind span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--gray); transition: background .2s ease, color .2s ease; }
.ban-kind input:checked + span { background: var(--white); color: #000; }
.ban-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ban-result { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .03); color: var(--white); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ban-result:hover { border-color: var(--gold); background: var(--hover-bg); }
.ban-result img, .ban-picked img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ban-picked { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 6px 8px 6px 8px; border: 1px solid var(--gold); border-radius: 999px; background: rgb(var(--ink-rgb) / .05); }
.ban-picked[hidden] { display: none; }
.ban-picked button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgb(var(--ink-rgb) / .12); color: var(--white); cursor: pointer; }
.ban-list { display: flex; flex-direction: column; gap: 10px; }
.ban-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--ink-rgb) / .03); }
.ban-type { flex-shrink: 0; margin-top: 2px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ban-type.is-team { background: rgb(var(--pg-brand-rgb) / .3); color: #fff; }
.ban-type.is-user { background: rgb(245 158 11 / .2); color: #fbbf24; }
.ban-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ban-main strong a { color: var(--white); text-decoration: none; }
.ban-main strong a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ban-reason { font-size: 13.5px; color: rgb(var(--ink-rgb) / .85); overflow-wrap: anywhere; }
.ban-meta, .ban-via { font-size: 11.5px; color: var(--gray); }
.ban-via { color: #fbbf24; }

/* Takımlar listesi: kadro iki satır — üstte kaptan + oyuncular, altta yedekler + koç (açıksa boş da olsa yuvalar görünür); kaptan yazısı altın */
.trow-members { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px; }
.trow-line { display: grid; grid-template-columns: repeat(var(--slots, 5), minmax(0, 1fr)); gap: 8px; }
.trow-mem { min-width: 0; padding: 4px 8px 4px 5px; border-radius: 12px; }
.trow-mem.is-empty { padding: 4px 6px 4px 10px; min-height: 40px; justify-content: space-between; border-radius: 12px; }
.trow-mem-link { flex: 1; min-width: 0; }
.trow-mem-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.trow-mem-link b { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.trow-mem-link em { font-size: 9.5px; }
.trow-mem.is-captain em { color: #f5c542; font-weight: 800; text-shadow: 0 0 10px rgb(245 197 66 / .4); }
.trow-line.is-bench { padding-top: 8px; border-top: 1px dashed var(--border); }
.trow-mem-k { flex-shrink: 0; }
.trow-mem-k .gear-btn { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; }
.trow-mem-k .gear-btn:hover, .trow-mem-k .gear-btn.is-open { transform: none; background: var(--hover-bg); }
.trow-mem-ph { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .trow-line { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 520px) { .trow-side { gap: 6px; } .trow-count { display: none; } .trow-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Turnuva · Genel Bakış v3: durum şeridi + tam genişlik bilgiler + ana/yan sütun ---------- */
.bento { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bt-strip, .bt-facts, .bt-col { grid-column: auto; }
.bt-strip { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px 26px; padding: 16px 22px; background: linear-gradient(100deg, color-mix(in srgb, var(--bt-accent) 22%, transparent), rgb(var(--ink-rgb) / .03) 55%); }
.bt-strip-count { display: flex; flex-direction: column; gap: 1px; }
.bt-strip-count small { color: var(--gray); font-size: 12px; }
.bt-strip .bt-count { font-size: 24px; }
.bt-strip-fill { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bt-strip-fill-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--gray); }
.bt-strip-fill-top b { color: var(--white); font-size: 16px; }
.bt-strip-fill-top em { font-style: normal; font-weight: 700; color: var(--bt-accent); }
.bt-strip-fill-top em.is-full { color: #f87171; }
.bt-bar { height: 8px; border-radius: 999px; background: rgb(var(--ink-rgb) / .12); overflow: hidden; }
.bt-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bt-accent), color-mix(in srgb, var(--bt-accent) 55%, #fff)); box-shadow: 0 0 12px var(--bt-accent); transition: width 1s cubic-bezier(.22, 1, .36, 1); }
.bt-ready-count { margin-left: 6px; font-size: 11px; opacity: .8; }
/* Tek bar, iki iç dolgu üst üste: soluk gri = kayıt sayısı, renkli (üstte) = hazır sayısı */
.bt-bar-combo { position: relative; }
.bt-bar-combo i { position: absolute; top: 0; left: 0; }
.bt-bar-combo .bt-bar-reg { background: rgb(156 163 175 / .5); box-shadow: none; z-index: 1; }
.bt-bar-combo .bt-bar-ready { z-index: 2; }
.bt-strip.is-open .bt-pill { background: rgb(34 197 94 / .16); color: #4ade80; }
.bt-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }   /* check-in kapalıyken 5 madde: kutuyu eşit paylaşır, sağda boşluk kalmaz */
.bt-facts .bt-fact { flex: 1 1 0; min-width: 120px; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 4px 6px; }
.bt-facts .bt-fact > div { align-items: center; }
.bt-facts .bt-fact strong, .bt-facts .bt-fact a { white-space: normal; }
.bt-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bt-col > .bt-tile { grid-column: auto; }
@media (min-width: 1101px) { .bento { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .bt-strip, .bt-facts { grid-column: 1 / -1; } }
@media (max-width: 1100px) { .bt-facts .bt-fact { flex: 1 1 28%; } }
@media (max-width: 720px) { .bt-strip { grid-template-columns: 1fr; }  .bt-facts .bt-fact { flex-direction: row; align-items: center; } }
.bt-staff-list { display: flex; flex-direction: column; gap: 8px; }
.bt-staff-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .03); color: var(--white); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
.bt-staff-row:hover { border-color: var(--bt-accent); background: var(--hover-bg); transform: translateX(3px); }
.bt-staff-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bt-staff-row span { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.bt-staff-row b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-staff-row small { font-size: 11.5px; color: var(--gray); }
.bt-staff-row svg { color: var(--gray); flex-shrink: 0; }
.ban-add .settings-textarea { width: 100%; }
.ban-type { min-width: 72px; text-align: center; }
.trow-status.is-short { background: rgb(245 158 11 / .16); color: #fbbf24; }

/* Pencereler daha geniş ve yanlardan rahat (iç tasarım diyaloğu, maç odası pencereleri, giriş, takım/oda pencereleri) */
.dlg-panel { max-width: 38rem; padding: 2rem 2.4rem; }
.dlg-panel.mr-modal, .dlg-panel.prem-modal { max-width: none; }
.mr-modal { width: min(94vw, 600px); }
.mr-modal-wide { width: min(94vw, 900px); }
.prem-modal { width: min(94vw, 560px); }
.modal-box { max-width: 460px; padding: 44px 44px; }
.team-modal-box { max-width: 580px; }
@media (max-width: 520px) {
    .dlg-panel { padding: 1.5rem 1.3rem; }
    .modal-box { padding: 36px 24px; }
}
.team-modal-box.members-modal-box { max-width: 860px; }
.team-modal-box.wide-modal-box { max-width: min(1320px, 96vw); }

/* ---------- Oyun derecesi (rank) rozeti ve seçme penceresi (js/core/game-rank.js, includes/game_rank.php) ---------- */
.rk { position: relative; display: inline-flex; flex-shrink: 0; width: var(--rk, 26px); height: var(--rk, 26px); }
.rk img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .45)); }
.rk b { position: absolute; right: -3px; bottom: -3px; min-width: 13px; height: 13px; padding: 0 2px; border-radius: 999px; background: #0b0d12; border: 1px solid rgb(255 255 255 / .25); color: #fff; font-size: 8.5px; font-weight: 800; line-height: 13px; text-align: center; }
.rk-modal { width: min(94vw, 420px); }
.rk-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rk-tier-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.rk-tier-btn:hover { background: var(--hover-bg); }
.rk-tier-btn.is-on { border-color: var(--rkc); background: color-mix(in srgb, var(--rkc) 22%, transparent); font-weight: 700; }
.rk-tier-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rkc); box-shadow: 0 0 6px color-mix(in srgb, var(--rkc) 70%, transparent); }
.rk-divs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.1rem; }
.rk-divs[hidden] { display: none; }
.rk-div-btn { min-width: 34px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rk-div-btn.is-on { border-color: var(--gold); background: rgb(var(--accent-rgb) / .16); color: var(--gold-light); }
.gacc-rank { margin-left: 4px; align-self: center; }
.game-link-rank { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.game-link-rank:hover { border-color: var(--gold); background: var(--hover-bg); }
.game-link-rank-add { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--border-strong); background: transparent; color: var(--gray); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.game-link-rank-add:hover { border-color: var(--gold); color: var(--gold-light); }
.mr2-rank { flex-shrink: 0; }

/* ---------- Hesap Bağla penceresi (js/core/game-link.js: esGameLinkPicker) ---------- */
.gl-modal { width: min(94vw, 600px); }
.gl-picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 1.1rem; text-align: left; scrollbar-width: thin; }
.gl-picker-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--field-bg); color: var(--white); font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.gl-picker-row:hover { border-color: var(--gold); background: var(--hover-bg); }
.gl-picker-row img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.gl-picker-ph { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(var(--accent-rgb) / .16); font-weight: 700; flex-shrink: 0; }
.gl-picker-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.gl-picker-meta strong { font-size: 13.5px; }
.gl-picker-meta small { font-size: 11.5px; color: var(--gray); }

/* kadro yer değiştirme (sürükle-bırak) */
.trow-mem.is-movable { cursor: grab; }
.trow-mem.is-movable:active { cursor: grabbing; }
.trow-mem.is-dragging { opacity: .4; }
.trow-mem.is-drop { outline: 2px dashed var(--gold); outline-offset: 2px; background: rgb(var(--accent-rgb) / .12); }

/* maç odası: izleyici (spectator) penceresi */
.mr-spec { text-align: left; }
.mr-spec-list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; scrollbar-width: thin; }
.mr-spec-title { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.mr-spec-row { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .04); }
.mr-spec-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mr-spec-row b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-spec-row em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray); }
.mr-spec-btn { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mr-spec-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--hover-bg); }
.mr-spec-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Takımlar sayfası: Takımlarım kartları + Onaylı Takımlar vitrini ---------- */
.mt-carousel-wrap { position: relative; }
.mt-carousel { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 16px; margin: 0 -2px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.mt-carousel::-webkit-scrollbar { display: none; }
.mt-track { display: flex; gap: 16px; width: max-content; }
.mt-carousel-item { flex: 0 0 300px; min-width: 0; }
.mt-carousel-item > .mt-card { height: 100%; }
.mt-nav { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel); color: var(--white); cursor: pointer; transition: background .2s ease, transform .2s ease; transform: translateY(-50%); }
.mt-nav:hover { background: var(--hover-bg); transform: translateY(-50%) scale(1.08); }
.mt-nav-prev { left: -14px; }
.mt-nav-next { right: -14px; }
@media (max-width: 520px) { .mt-carousel-item { flex-basis: 78vw; } .mt-nav { display: none; } }
.mt-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); transition: border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.mt-card:hover { border-color: rgb(var(--pg-brand-rgb) / .6); transform: translateY(-3px); }
.mt-cover { display: block; aspect-ratio: 1376 / 400; background-size: cover; background-position: center; }
.mt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 16px; margin-top: -30px; position: relative; }
.mt-logo { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-solid); border: 3px solid var(--panel-solid); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .7); font-weight: 800; color: var(--white); }
.mt-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-role { align-self: flex-end; margin-bottom: 4px; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); border: 1px solid var(--border-strong); background: rgb(var(--ink-rgb) / .05); }
.mt-role.is-captain { color: var(--gold-light); border-color: rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .14); }
.mt-body { padding: 10px 16px 4px; min-width: 0; }
.mt-name { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; min-width: 0; }
.mt-name a { color: var(--white); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mt-name a:hover { color: var(--gold-light); }
.mt-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--gray); }
.mt-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mt-meta img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.mt-tag { padding: 0 8px; border-radius: 6px; background: rgb(var(--ink-rgb) / .08); font-weight: 700; letter-spacing: .05em; }
.mt-actions { display: flex; gap: 8px; padding: 12px 16px 16px; margin-top: auto; }
.mt-actions .btn { flex: 1; text-align: center; }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.vt-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); color: var(--white); text-decoration: none; isolation: isolate; transition: border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.vt-tile:hover { border-color: rgb(var(--pg-brand-rgb) / .65); transform: translateY(-3px); }
.vt-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .32; -webkit-mask-image: linear-gradient(to right, transparent 20%, #000 100%); mask-image: linear-gradient(to right, transparent 20%, #000 100%); }
.vt-logo { width: 52px; height: 52px; border-radius: 14px; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--ink-rgb) / .08); border: 1px solid var(--border-strong); font-weight: 800; }
.vt-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vt-info b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; min-width: 0; }
.vt-info b > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-info small { font-size: 12px; color: var(--gray); }
.vt-tag { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .16); color: #fff; }

/* takım sayfası banner'ı: yüklenen 1376x400 görsel kırpılmadan oturur (hub sayfası düzeniyle aynı, oran farklı) */
.team-page-banner { aspect-ratio: 1376 / 400; }
@media (max-width: 700px) { .team-page-banner { aspect-ratio: auto; } }

/* maç odası istatistikleri: iki takım yan yana, +/- ve K/D */
.mr-stats-title { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); text-align: center; }
.mr-stats-teamlink { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
a.mr-stats-teamlink:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.mr-stats-plink { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.mr-stats-plink:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mr-stats-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; background: rgb(var(--ink-rgb) / .1); }
.mr-stats-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.mr-stats-col h5 { margin: 0 0 6px; font-size: 13px; font-weight: 700; padding-left: 8px; border-left: 3px solid var(--side, var(--gold)); display: flex; align-items: center; gap: 8px; }
.mr-stats-logo { width: 26px; height: 26px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--ink-rgb) / .1); font-size: 12px; font-weight: 800; }
.mr-stats-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr-stats-col.side-A { --side: #3b82f6; }
.mr-stats-col.side-B { --side: #f43f5e; }
.mr-stats-duo .mr-stats-table { font-size: 12px; }
.mr-stats-duo .mr-stats-table th, .mr-stats-duo .mr-stats-table td { padding: 5px 6px; }
.mr-diff.is-pos { color: #4ade80; font-weight: 700; }
.mr-diff.is-neg { color: #f87171; font-weight: 700; }
.mr2-statsbtn { width: auto; gap: 7px; padding: 0 12px; border-radius: 17px; }
.mr2-statsbtn-txt { font-size: 12.5px; font-weight: 700; }
.mr2-statsbtn.is-on { border-color: var(--gold); background: var(--hover-bg); }
@media (max-width: 760px) { .mr-stats-duo { grid-template-columns: minmax(0, 1fr); } }

/* eşleştirme yapıldıktan sonra kilitlenen ayarlar */
.ts-locked { pointer-events: none; opacity: .5; user-select: none; }
.ts-lock-note { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgb(245 158 11 / .4); background: rgb(245 158 11 / .08); color: #fbbf24; }
.ts-move-hint { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--gray); }
.bp-divider { position: absolute; left: 0; height: 1px; background: var(--border-strong); }
.bp-bracket .bp-round-label { font-size: 10px; }
.tp2-step[hidden] { display: none; }
.mr2-stats { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.mr2-stats .mr-stats-duo .mr-stats-table { font-size: 13px; }

/* sunucu bayrağı, pasif demo düğmesi, EA FC skor bildirimi */
.mr2-hero-badge.mr2-hero-flag { padding: 0; border: 0; background: none; border-radius: 3px; }
.mr2-flag { display: block; width: 20px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .28), 0 2px 6px rgb(0 0 0 / .45); }
.mr2-demo.is-off { opacity: .45; cursor: not-allowed; }
.mr2-demo.is-off:hover { border-color: var(--border-strong); background: var(--field-bg); }
.mr-ea { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.mr-ea-filelbl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; cursor: pointer; font-size: 13px; color: var(--gray); }
.mr-ea-filelbl:hover { border-color: var(--gold); color: var(--white); }
.mr-ea-file { font-size: 12px; max-width: 100%; }
.mr-ea-thumb img { max-height: 120px; border-radius: 10px; border: 1px solid var(--border); }
.mr-ea-admin { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; }
.mr-ea-admin b.side-A { color: #60a5fa; } .mr-ea-admin b.side-B { color: #fb7185; }
.fx2-foot svg { width: 11px; height: 11px; }
.fx2-team .fx2-logo-empty { font-size: 11px; }
/* takım üzerine gelince tüm bracket'ta vurgu */
.fx2.is-hl .fx2-match { opacity: .32; transition: opacity .15s ease; }
.fx2.is-hl .fx2-match.is-hl-card { opacity: 1; }
.fx2.is-hl .fx-lines path { opacity: .18; }
.fx2.is-hl .fx-lines path.is-hl-line { opacity: 1; stroke: var(--gold); stroke-width: 2.5; }
.fx2-team.is-hl-team { background: rgb(var(--accent-rgb) / .22); box-shadow: inset 3px 0 0 var(--gold); }
.mr2-statsbtn[hidden] { display: none; }
.mr-ea-filelbl { flex-wrap: nowrap; }
.mr-ea-filelbl > span { white-space: nowrap; }
.mr-ea-file { flex: 1; min-width: 0; }
.fx2-match.is-busy { pointer-events: none; opacity: .6; }

/* ---------- Oyun seçici (ikonlu kutucuklar; Turnuvalar sayfası) ---------- */

/* maç odası: sunucu konsolu */
.mr-console-wrap { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.mr-console { margin: 0; height: min(46vh, 420px); overflow: auto; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: #05070a; color: #b7f5c5; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; scrollbar-width: thin; }
.mr-console-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-console-row { display: flex; gap: 8px; }
.mr-console-input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mr-modal-wide { width: min(94vw, 820px); }

/* konsol düğmesi: sunucu açıkken animasyonla belirir */
.mr2-consolebtn { width: 0; min-width: 0; margin-left: -6px; opacity: 0; transform: scale(.4); overflow: hidden; pointer-events: none; transition: width .35s cubic-bezier(.22, 1, .36, 1), margin .35s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.mr2-consolebtn.is-srv { width: 34px; margin-left: 0; opacity: 1; transform: none; pointer-events: auto; }

/* macOS tarzı konsol penceresi */
.mr-cwin { position: fixed; z-index: 1900; left: 50%; top: 50%; width: min(1180px, 94vw); height: min(84vh, 820px); display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #0a0d12; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 90px -20px rgb(0 0 0 / .85); opacity: 0; transform: translate(-50%, -46%) scale(.96); transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1), width .3s ease, height .3s ease, left .3s ease, top .3s ease; }
.mr-cwin.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mr-cwin.is-max { width: calc(100vw - 32px); height: calc(100vh - 32px); }
.mr-cwin.is-free, .mr-cwin.is-free.is-in { transform: none; }
.mr-cwin.is-dragging { transition: none; }
.mr-cwin.is-dragging .mr-cwin-log { pointer-events: none; }
.mr-cwin-bar { cursor: grab; touch-action: none; }
.mr-cwin.is-dragging .mr-cwin-bar { cursor: grabbing; }
.mr-cwin.is-max .mr-cwin-bar, .mr-cwin.is-min .mr-cwin-bar { cursor: default; }
.mr-cwin-rz { position: absolute; z-index: 3; touch-action: none; }
.mr-cwin-rz.is-n, .mr-cwin-rz.is-s { left: 12px; right: 12px; height: 7px; cursor: ns-resize; } .mr-cwin-rz.is-n { top: 0; } .mr-cwin-rz.is-s { bottom: 0; }
.mr-cwin-rz.is-e, .mr-cwin-rz.is-w { top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; } .mr-cwin-rz.is-e { right: 0; } .mr-cwin-rz.is-w { left: 0; }
.mr-cwin-rz.is-ne, .mr-cwin-rz.is-nw, .mr-cwin-rz.is-se, .mr-cwin-rz.is-sw { width: 14px; height: 14px; }
.mr-cwin-rz.is-ne { top: 0; right: 0; cursor: nesw-resize; } .mr-cwin-rz.is-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.mr-cwin-rz.is-nw { top: 0; left: 0; cursor: nwse-resize; } .mr-cwin-rz.is-se { bottom: 0; right: 0; cursor: nwse-resize; }
.mr-cwin.is-max .mr-cwin-rz, .mr-cwin.is-min .mr-cwin-rz { display: none; }
.mr-cwin-rz.is-se::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border-right: 2px solid rgb(255 255 255 / .28); border-bottom: 2px solid rgb(255 255 255 / .28); border-radius: 0 0 3px 0; }
.mr-cwin.is-min { width: 340px; height: 44px; left: 24px; top: auto; bottom: 18px; transform: none; }
.mr-cwin.is-min .mr-cwin-log, .mr-cwin.is-min .mr-cwin-acts, .mr-cwin.is-min .mr-cwin-row, .mr-cwin.is-min .mr-cwin-sub { display: none; }
.mr-cwin-bar { display: flex; align-items: center; gap: 14px; padding: 0 14px; height: 44px; flex-shrink: 0; background: #161b23; border-bottom: 1px solid rgb(255 255 255 / .08); user-select: none; }
.mr-cwin-dots { display: flex; gap: 8px; }
.mr-cwin-dot { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.mr-cwin-dot:hover { filter: brightness(1.25); transform: scale(1.12); }
.mr-cwin-dot.is-red { background: #ff5f57; } .mr-cwin-dot.is-yellow { background: #febc2e; } .mr-cwin-dot.is-green { background: #28c840; }
.mr-cwin-title { flex: 1; min-width: 0; color: rgb(255 255 255 / .82); font-size: 13px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-cwin-map { padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .08); color: #86efac; font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.mr-cwin-map[hidden] { display: none; }
.mr-cwin-log { flex: 1; min-height: 0; margin: 0; overflow: auto; padding: 12px 16px; color: #b7f5c5; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; scrollbar-width: thin; }
.mr-cwin-acts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px 14px 6px; border-top: 1px solid rgb(255 255 255 / .08); }
.mr-cwin-btn { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .06); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; white-space: nowrap; }
.mr-cwin-btn:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); }
.mr-cwin-btn.is-primary { background: var(--gold); border-color: transparent; color: var(--on-accent, #000); }
.mr-cwin-btn.is-ghost { background: transparent; color: rgb(255 255 255 / .7); }
.mr-cwin-sub { padding: 4px 14px 2px; }
.mr-cwin-subrow { display: flex; align-items: center; gap: 8px; }
.mr-cwin-sublbl { font-size: 12.5px; color: rgb(255 255 255 / .7); white-space: nowrap; }
.mr-cwin-row { display: flex; gap: 8px; padding: 6px 14px 14px; }
.mr-cwin-input { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid rgb(255 255 255 / .16); background: #05070a; color: #fff; font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: none; }
.mr-cwin-input:focus { border-color: var(--gold); }
.mr-cwin-row .mr-cwin-input { flex: 1; min-width: 0; }
.mr-cwin-num { width: 130px; } .mr-cwin-sel { min-width: 160px; }
@media (max-width: 720px) { .mr-cwin-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mr-cwin:not(.is-free) { height: 92vh; } .mr-cwin-subrow { flex-wrap: wrap; } .mr-cwin-sublbl { white-space: normal; } }

/* canlı skor (CS2) */
.mr2-livescore { margin: 4px 0 14px; padding: 12px 16px 14px; border-radius: 16px; border: 1px solid rgb(239 68 68 / .35); background: linear-gradient(180deg, rgb(239 68 68 / .12), rgb(239 68 68 / .03)); }
.mr2-livescore-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; font-size: 11.5px; color: var(--gray); }
.mr2-livescore-head b { color: #f87171; letter-spacing: .12em; }
.mr2-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: mrLiveDot 1.4s ease-in-out infinite; }
.mr2-livescore-board { display: flex; align-items: center; justify-content: center; gap: 16px; }
.mr2-ls-team { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; font-weight: 700; }
.mr2-ls-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.mr2-ls-team strong { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.mr2-ls-team.side-A strong { color: #60a5fa; } .mr2-ls-team.side-B strong { color: #fb7185; }
.mr2-livescore-board em { font-style: normal; font-size: 26px; color: var(--gray); }
@keyframes mrLiveRed { 0%, 100% { box-shadow: 0 0 0 0 rgb(239 68 68 / .55); } 50% { box-shadow: 0 0 0 6px rgb(239 68 68 / 0); } }
.mr2-live-dot { animation-name: mrLiveRed; }
.mr-cwin.is-min .mr-cwin-map { display: none; }
.mr-cwin.is-min .mr-cwin-title { text-align: left; cursor: pointer; }

/* Website Panel > Harita Havuzu */
.mp-section { margin-bottom: 18px; }
.mp-head { display: flex; align-items: baseline; gap: 10px; }
.mp-count { font-size: 12px; font-weight: 500; color: var(--gray); }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mp-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); overflow: hidden; margin: 0; transition: border-color .2s ease, transform .2s ease; }
.mp-card:hover { border-color: rgb(255 255 255 / .22); transform: translateY(-2px); }
.mp-card.is-off .mp-pic img { filter: grayscale(1) brightness(.55); }
.mp-pic { position: relative; aspect-ratio: 16 / 9; background: rgb(255 255 255 / .04); display: flex; align-items: center; justify-content: center; }
.mp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-noimg { color: var(--gray); font-size: 12px; }
.mp-badge { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgb(0 0 0 / .7); color: var(--white); font-size: 11px; font-weight: 600; }
.mp-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mp-name { font-weight: 700; font-size: 14px; color: var(--white); }
.mp-sub { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gray); margin-top: -4px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-actions form { margin: 0; }
.mp-add { border-style: dashed; justify-content: center; }
.mp-add input[type=text] { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: rgb(0 0 0 / .25); color: var(--white); font: inherit; font-size: 13px; }
.mp-file { cursor: pointer; text-align: center; }

/* Harita eleme: havuz boyutu panelden değişebildiği için 3'lü ızgarada son satırdaki 1-2 harita ortalanır (eski tasarım korunur) */
.mr-maps.is-veto[data-rem="1"] .mr-map:last-child { grid-column: 3 / span 2; }
.mr-maps.is-veto[data-rem="2"] .mr-map:nth-last-child(2) { grid-column: 2 / span 2; }
.mr-maps.is-veto[data-rem="2"] .mr-map:last-child { grid-column: 4 / span 2; }
@media (max-width: 640px) {
    .mr-maps.is-veto[data-rem] .mr-map, .mr-maps.is-veto[data-rem] .mr-map:nth-last-child(2), .mr-maps.is-veto[data-rem] .mr-map:last-child { grid-column: auto; }
    .mr-maps.is-veto[data-rem] .mr-map:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Sosyal giriş: yuvarlak Google / Facebook / Discord / Steam düğmeleri */
.auth-social { display: flex; align-items: center; justify-content: center; gap: 14px; }
.auth-social-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); cursor: pointer; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.auth-social-btn:hover { background: var(--hover-bg); border-color: rgb(var(--ink-rgb) / .5); transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgb(0 0 0 / .8); }
.auth-social-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.auth-social-btn svg { flex-shrink: 0; }
.auth-social-btn.is-discord svg { color: #5865F2; }
.auth-social-btn.is-kick svg { color: #53FC18; }
.auth-social-btn.is-steam svg { color: var(--white); }

/* Profil: gelen arkadaşlık istekleri */
.friend-requests { margin-bottom: 14px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: rgb(var(--accent-rgb) / .06); }
.friend-requests-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; }
.friend-requests-title span { padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--on-accent, #000); font-size: 11px; font-weight: 800; }
.friend-request-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; transition: opacity .2s ease; }
.friend-request-row.is-busy { opacity: .5; pointer-events: none; }
.friend-request-user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--white); text-decoration: none; font-size: 13px; font-weight: 600; }
.friend-request-user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.friend-request-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-request-btn { padding: .3rem .7rem; font-size: .78rem; }

/* Turnuva ayarları önizlemesi: ödül karosu canlı sayfadakiyle aynı (bento .bt-prize) */
.tp2-bento { display: block; grid-column: 1 / -1; }
.tp2-bento .bt-prize { grid-column: auto; padding: 14px; border-radius: 16px; }
.tp2-bento .bt-prize[hidden] { display: none; }

/* Telefon alanı: ülke seçici + biçimli numara (js/core/phone-input.js) */
.phone-input { position: relative; display: flex; align-items: stretch; gap: 8px; }
.phone-input .phone-national { flex: 1; min-width: 0; }
.phone-cc { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 0 12px; min-height: 48px; border-radius: 1rem; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.phone-cc:hover, .phone-input.open .phone-cc { background: var(--hover-bg); border-color: rgb(var(--ink-rgb) / .5); }
.phone-flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); flex-shrink: 0; }
.phone-chev { display: inline-flex; color: var(--gray); transition: transform .2s ease; }
.phone-input.open .phone-chev { transform: rotate(180deg); }
.phone-menu { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(340px, 100%); min-width: 260px; padding: 8px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--panel, #12151b); box-shadow: 0 24px 60px -16px rgb(0 0 0 / .8); animation: phoneMenuIn .16s ease; }
.phone-menu[hidden] { display: none; }
@keyframes phoneMenuIn { from { opacity: 0; transform: translateY(-4px); } }
.phone-search { width: 100%; padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--field-bg); color: var(--white); font: inherit; font-size: 13px; outline: none; }
.phone-search:focus { border-color: var(--gold); }
.phone-list { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.phone-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--white); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.phone-opt:hover, .phone-opt.is-on { background: var(--hover-bg); }
.phone-opt img { width: 24px; height: 17px; border-radius: 3px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.phone-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-opt-code { color: var(--gray); font-variant-numeric: tabular-nums; }
.phone-none { margin: 8px; color: var(--gray); font-size: 13px; }
@media (max-width: 480px) { .phone-menu { min-width: 0; width: 100%; } }

/* Şifre alanı: göster/gizle gözü (js/core/password-field.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--gray); cursor: pointer; transition: color .2s ease, background .2s ease; }
.pw-eye:hover, .pw-eye[aria-pressed="true"] { color: var(--white); background: var(--hover-bg); }
.pw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Profil önizlemesi: Ziyaretçi/Arkadaş geçişi anında hissedilsin (eski .3-.5 sn geçişler kısaltıldı) */
.privacy-opt span { transition: background .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease; }
.pv-fact, .pv-chip, .pv-about { transition: border-color .12s ease, background .12s ease, color .12s ease, opacity .12s ease; }
.pv-pop { animation-duration: .22s; }

/* ---------- Öne çıkan turnuvalar v2 (vitrin): büyük kart + kompakt liste ---------- */
.fx-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.fx-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.fx-hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 380px; padding: 22px; border-radius: 26px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; border: 1px solid var(--border-strong); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.fx-hero:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -24px rgb(0 0 0 / .8); }
.fx-hero-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, #1b2233, #0b0f18) center / cover; transition: transform .8s ease; }
.fx-hero:hover .fx-hero-bg { transform: scale(1.05); }
.fx-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .25) 0%, rgb(0 0 0 / .05) 35%, rgb(0 0 0 / .88) 100%); }
.fx-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fx-game { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 700; }
.fx-game img { width: 24px; height: 24px; border-radius: 8px; object-fit: cover; }
.fx-date { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 8px 12px; border-radius: 16px; background: rgb(255 255 255 / .94); color: #0b0f18; line-height: 1.05; }
.fx-date b { font-size: 24px; font-weight: 800; }
.fx-date em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--gold); }
.fx-date small { margin-top: 3px; font-size: 11px; font-weight: 700; opacity: .6; }
.fx-hero-body h3 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; line-height: 1.12; text-shadow: 0 4px 24px rgb(0 0 0 / .6); }
.fx-meta { margin: 0 0 16px; font-size: 13.5px; opacity: .8; }
.fx-hero-foot { display: flex; align-items: flex-end; gap: 22px; }
.fx-prize { display: flex; flex-direction: column; gap: 2px; }
.fx-prize small, .fx-fill span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.fx-prize strong { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; color: #fde68a; }
.fx-fill { flex: 1; display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.fx-fill i, .fx-item-bar { display: block; height: 6px; border-radius: 999px; background: rgb(255 255 255 / .16); overflow: hidden; }
.fx-fill i b, .fx-item-bar b { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.fx-go { margin-left: auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #0b0f18; transition: transform .25s ease; }
.fx-hero:hover .fx-go { transform: translateX(4px); }
.fx-list { display: flex; flex-direction: column; gap: 12px; }
.fx-item { position: relative; flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); color: var(--white); text-decoration: none; transition: border-color .2s ease, transform .25s ease, background .2s ease; }
.fx-item:hover { border-color: var(--border-strong); background: var(--hover-bg); transform: translateX(4px); }
.fx-thumb { position: relative; flex-shrink: 0; width: 104px; height: 78px; border-radius: 16px; background: linear-gradient(135deg, #1b2233, #0b0f18) center / cover; overflow: hidden; }
.fx-thumb img { position: absolute; left: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 8px; object-fit: cover; box-shadow: 0 4px 12px rgb(0 0 0 / .6); }
.fx-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fx-item-body small { font-size: 11.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-item-body strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-item-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gray); }
.fx-item-foot em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-weight: 700; color: #fde68a; }
.fx-item-bar { background: rgb(var(--ink-rgb) / .1); height: 4px; margin-top: 2px; }
.fx-item-go { flex-shrink: 0; color: var(--gray); transition: transform .2s ease, color .2s ease; }
.fx-item:hover .fx-item-go { transform: translateX(3px); color: var(--white); }
@media (max-width: 980px) { .fx-grid { grid-template-columns: minmax(0, 1fr); } .fx-hero { min-height: 320px; } }
@media (max-width: 520px) { .fx-hero { padding: 16px; border-radius: 20px; } .fx-hero-foot { flex-wrap: wrap; gap: 14px; } .fx-fill { max-width: none; flex-basis: 100%; order: 3; } .fx-thumb { width: 84px; height: 66px; } .fx-item { padding: 10px; border-radius: 18px; } }

/* Yöneticiler: kadro satırlarında bağlı oyun hesabı (oyun ikonuyla, satırın sağında) + CSV indirme */
.trow-mem-acc { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; margin-left: auto; font-size: 10.5px; color: var(--gold-light, #fde68a); }
.trow-mem-acc img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.trow-mem-acc em { font-style: normal; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-mem-acc.is-solo em { max-width: none; }
.team-checkin-subtabs.has-export { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 26px; }
.tr-export-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: .22rem .65rem; font-size: 11.5px; font-weight: 600; border-radius: .6rem; margin-bottom: 8px; }

/* Bağlı oyun hesabı kartları: daha alçak ve sade (oyun içi ad rozeti kaldırıldı; doğrulama yalnızca küçük onay simgesi) */
.gacc-list { gap: 8px; }
.gacc-main { padding: 9px 10px 9px 14px; gap: 12px; }
.gacc-icons img { width: 38px; height: 38px; border-radius: 12px; margin-left: -14px; }
.gacc-tile { border-radius: 16px; }
.gacc-tile::before { top: 10px; bottom: 10px; }
.gacc-meta { gap: 0; }
.gacc-name { font-size: 15px; line-height: 1.2; align-items: center; }
.gacc-verified { display: inline-flex; align-items: center; color: #4ade80; flex-shrink: 0; margin-left: 2px; }

/* Görsel büyütme penceresi (js/core/lightbox.js) */
.lb-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(0 0 0 / .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.lb-overlay.is-in { opacity: 1; }
.lb-win { position: relative; display: flex; flex-direction: column; max-width: min(1200px, 94vw); max-height: 92vh; border-radius: 14px; overflow: hidden; background: #0a0d12; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 90px -20px rgb(0 0 0 / .85); transform: scale(.96); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.lb-overlay.is-in .lb-win { transform: none; }
.lb-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; flex-shrink: 0; background: #161b23; border-bottom: 1px solid rgb(255 255 255 / .08); user-select: none; }
.lb-dots { display: flex; gap: 8px; }
.lb-dot { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.lb-dot:hover { filter: brightness(1.25); transform: scale(1.12); }
.lb-dot.is-red { background: #ff5f57; } .lb-dot.is-yellow { background: #febc2e; } .lb-dot.is-green { background: #28c840; }
.lb-title { flex: 1; min-width: 0; text-align: center; color: rgb(255 255 255 / .6); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 48px; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 0; scrollbar-width: thin; }
.lb-img { display: block; max-width: min(1200px, 94vw); max-height: calc(92vh - 40px); width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.lb-win.is-actual .lb-img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-ext { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgb(0 0 0 / .7); backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1px solid rgb(255 255 255 / .18); transition: background .2s ease, transform .2s ease; }
.lb-ext:hover { background: rgb(0 0 0 / .9); transform: translateY(-1px); }
@media (max-width: 520px) { .lb-overlay { padding: 10px; } .lb-ext { right: 8px; bottom: 8px; } }

/* Telefon alanı: dar iki sütunlu formlarda tüm satırı kaplar; açılır liste opak ve diğer alanların üstünde */
.form-group:has(.phone-input), .settings-grid-2 > .form-group:has(.phone-input) { grid-column: 1 / -1; }
.phone-input.open { z-index: 90; }
.phone-menu { background: #12151b; }
.fx-date em { color: #b4132a; }

.gl-join-note { font-size: 12px; opacity: .65; margin-top: 4px; }

/* Vitrin v3: daha çok bilgi + dönüşümlü gösterim */
.fx-hero-slot { display: contents; }
.fx-grid { position: relative; }
/* Kart geçişi: mevcut vitrin kartı bulanıklaşıp sola (ileri) ya da sağa (geri) kayarak çıkar, yenisi listeden büyüyerek merkeze gelir */
.fx-hero.is-out-fwd { transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease, filter .4s ease; transform: translateX(-32px) scale(.96); opacity: 0; filter: blur(6px); }
.fx-hero.is-out-back { transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease, filter .4s ease; transform: translateX(32px) scale(.96); opacity: 0; filter: blur(6px); }
.fx-hero.is-in-fwd { transform: translateX(28px) scale(.94); opacity: 0; filter: blur(4px); }
.fx-hero.is-in-back { transform: translateX(-28px) scale(.94); opacity: 0; filter: blur(4px); }
.fx-hero.is-in-fwd, .fx-hero.is-in-back { transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .42s ease, filter .42s ease; }
.fx-hero.is-settled { transform: none; opacity: 1; filter: none; }
.fx-list { transition: opacity .3s ease; }
.fx-list.is-fading { opacity: .35; }
.fx-nav { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .18); background: rgb(0 0 0 / .45); color: #fff; backdrop-filter: blur(6px); cursor: pointer; transition: background .2s ease, transform .2s ease; transform: translateY(-50%); }
.fx-nav:hover { background: rgb(0 0 0 / .7); transform: translateY(-50%) scale(1.08); }
.fx-nav-prev { left: 14px; }
.fx-nav-next { right: 14px; }
.fx-progress { grid-column: 1 / -1; margin-top: 10px; height: 3px; border-radius: 999px; background: rgb(var(--ink-rgb) / .12); overflow: hidden; }
.fx-progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--gold); transform-origin: left center; transform: scaleX(0); animation: fxProgressFill 7s linear forwards; }   /* width yerine scaleX: düzen yeniden hesaplanmaz (kompozitörde çalışır) */
.fx-progress.is-paused i { animation-play-state: paused; }
@keyframes fxProgressFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fx-dots { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; }
.fx-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--ink-rgb) / .2); transition: width .3s ease, background .3s ease; }
.fx-dots i.is-on { background: rgb(var(--ink-rgb) / .5); }
.fx-dots i.is-first { width: 18px; background: var(--gold); }
.fx-status { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgb(0 0 0 / .5); backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; margin-bottom: 8px; }
.fx-status i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.fx-status em { font-style: normal; font-weight: 600; opacity: .7; padding-left: 7px; border-left: 1px solid rgb(255 255 255 / .25); }
.fx-status.is-open i { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.fx-status.is-live i { background: #f87171; box-shadow: 0 0 8px #f87171; }
.fx-status.is-closed i { background: #fbbf24; }
.fx-status.is-mini { margin: 0; padding: 2px 8px 2px 7px; font-size: 10.5px; background: rgb(var(--ink-rgb) / .08); backdrop-filter: none; color: var(--white); }
.fx-facts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; margin-bottom: 14px; }
.fx-fact { display: flex; flex-direction: column; gap: 2px; }
.fx-fact small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.fx-fact strong { font-size: 15px; font-weight: 700; }
.fx-prize small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.fx-item-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11.5px; color: var(--gray); }
.fx-item-left { margin-left: auto; color: var(--gray); }
.fx-item-foot { flex-wrap: wrap; gap: 2px 12px; }
@media (max-width: 520px) { .fx-facts { gap: 8px 18px; } }

.fx-date u { text-decoration: none; margin-bottom: 3px; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.fx-date { min-width: 70px; }

/* Önizleme: açılır-kapanır (yükseklik animasyonlu) + üstte sekme + header'ın altından açılan çekmece (js/core/preview-dock.js) */
.pd-toggle { flex-shrink: 0; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); cursor: pointer; transition: transform .25s ease, background .2s ease; }
.pd-toggle:hover { background: var(--hover-bg); }
.profile-preview-bar > .pd-toggle + div { margin-right: auto; }
.profile-preview.is-collapsed .pd-toggle { transform: rotate(-90deg); }
.profile-preview.is-collapsed { padding-bottom: 14px; }
.profile-preview .settings-preview-label { cursor: pointer; }
.pd-fold { overflow: hidden; transition: max-height .42s cubic-bezier(.65, 0, .35, 1); }
/* Yalnızca kaydırınca çıkan "Önizleme" sekmesiyle açılan çekmece için: imleç üzerinde değilse saydam (arkadaki sayfa görünür), üzerine gelince tam görünür. Sayfaya gömülü önizleme saydamlaşmaz. */
.pd-drawer.is-in:not(:hover):not(:focus-within) { opacity: .28; }
.pd-placeholder { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-bottom: 16px; border: 1px dashed var(--border-strong); border-radius: 18px; color: var(--gray); font-size: 13px; }
.pd-placeholder[hidden] { display: none; }
/* top: JS'ten satır içi (header'ın gerçek alt kenarı + 8px) — sabit bir değer değil, header boyu değişse de altına yapışır */
.pd-tab { position: fixed; z-index: 1700; left: 50%; transform: translate(-50%, -14px); opacity: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 14px; border: 1px solid var(--border-strong); background: rgb(18 21 27 / .92); backdrop-filter: blur(10px); color: var(--white); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .8); transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, background .2s ease, top .15s ease; }
.pd-tab[hidden] { display: none; }
.pd-tab.is-in { transform: translate(-50%, 0); opacity: 1; }
.pd-tab:hover { background: rgb(28 32 40 / .96); }
.pd-tab.is-live { border-color: var(--gold); }

.profile-preview.is-docked .pd-toggle { display: none; }
.profile-preview.is-docked { border: 0; background: transparent; box-shadow: none; }

/* Nasıl kullanılır? (pages/info/howto.php) */
.ht-lead { margin: 8px 0 0; max-width: 720px; color: var(--gray); font-size: 15px; line-height: 1.6; }
.ht-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; }
.ht-toc { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--border); border-radius: 18px; background: rgb(var(--ink-rgb) / .03); max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
.ht-toc-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; color: var(--gray); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease; }
.ht-toc-link span { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(var(--ink-rgb) / .08); font-size: 11px; font-weight: 800; }
.ht-toc-link:hover { background: var(--hover-bg); color: var(--white); }
.ht-content { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ht-section { scroll-margin-top: 90px; padding: 26px; border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(160deg, rgb(var(--ink-rgb) / .05), rgb(var(--ink-rgb) / .015)); }
.ht-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ht-ic { width: 46px; height: 46px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgb(var(--accent-rgb) / .16); color: var(--white); }
.ht-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.ht-head h3 { margin: 2px 0 0; font-size: 21px; font-weight: 800; }
.ht-intro { margin: 0 0 16px; color: var(--gray); font-size: 14.5px; line-height: 1.65; }
/* Madde listesi + TEK görsel yan yana (Mert'in isteği, 2026-10-03: madde-görsel-madde-görsel, çok görselle
   doldurma) — görsel kutusu kendi genişliğine/oranına göre küçülür (inline-block + max-width/max-height), grid
   hücresine zorla uydurulup etrafında boş kutu görünmez; dar (GIF, mobil biçimli) ya da geniş (ekran görüntüsü)
   her oran için çalışır. */
.ht-body { display: flex; gap: 24px; align-items: flex-start; }
.ht-steps { flex: 1; min-width: 0; list-style: none; counter-reset: ht; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.ht-steps li { counter-increment: ht; position: relative; padding: 12px 14px 12px 52px; border-radius: 14px; background: rgb(var(--ink-rgb) / .04); border: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
.ht-steps li::before { content: counter(ht); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: var(--on-accent, #000); font-size: 12.5px; font-weight: 800; }
.ht-steps li b { color: var(--white); }
.ht-tip { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgb(253 230 138 / .45); background: rgb(253 230 138 / .06); color: #fde68a; font-size: 13.5px; line-height: 1.55; }
.ht-tip svg { flex-shrink: 0; margin-top: 2px; }
.ht-fig { flex: none; max-width: min(360px, 100%); margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ht-fig a { display: inline-block; max-width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: 0 18px 40px -26px rgb(0 0 0 / .9); transition: transform .25s ease, border-color .2s ease; cursor: zoom-in; line-height: 0; }
.ht-fig a:hover { transform: translateY(-2px); border-color: rgb(var(--ink-rgb) / .5); }
.ht-fig img { display: block; width: auto; height: auto; max-width: 100%; max-height: 480px; }
.ht-fig figcaption { font-size: 12.5px; color: var(--gray); line-height: 1.5; padding: 0 4px; }
@media (max-width: 960px) { .ht-layout { grid-template-columns: minmax(0, 1fr); } .ht-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; } .ht-toc-link { padding: 6px 10px; } }
@media (max-width: 720px) { .ht-body { flex-direction: column; } .ht-fig { max-width: 100%; align-self: flex-start; } }
@media (max-width: 520px) { .ht-section { padding: 18px; border-radius: 20px; } .ht-steps li { padding: 12px 12px 12px 48px; } }

/* Önizleme çekmecesi: yatay, yukarıdan aşağı; tek kırmızı düğme sol altta.
   .pd-drawer-clip: header'ın altına (top, JS'ten satır içi) sabit, overflow:hidden bir "pencere" — içindeki .pd-drawer ondan asla taşmaz, bu yüzden
   açılma/kapanma animasyonu sırasında (ara karelerde de) header'ın üstüne ASLA binmez; .pd-drawer bu pencerenin içinde 0 yüksekliğe kadar kayar. */
.pd-drawer-clip { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); width: min(980px, 92vw); height: min(56vh, 560px); overflow: hidden; border-radius: 0 0 18px 18px; pointer-events: none; }
.pd-drawer-clip.is-open { pointer-events: auto; }
.pd-drawer { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 0 0 18px 18px; overflow: hidden; background: #0a0d12; border: 1px solid rgb(255 255 255 / .12); border-top: 0; box-shadow: 0 40px 90px -20px rgb(0 0 0 / .85); transform: translateY(-100%); opacity: 0; transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.pd-drawer.is-in { transform: translateY(0); opacity: 1; }
.pd-drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; scrollbar-width: thin; }
.pd-drawer-body > .profile-preview { margin: 0; }
.pd-drawer-bar { display: flex; align-items: center; gap: 12px; height: 38px; flex-shrink: 0; padding: 0 14px; background: #161b23; border-top: 1px solid rgb(255 255 255 / .08); }
.pd-drawer-title { color: rgb(255 255 255 / .6); font-size: 12.5px; font-weight: 600; }
@media (max-width: 720px) { .pd-drawer-clip { width: 96vw; height: 72vh; } }

.pd-dot { width: 13px; height: 13px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.pd-dot:hover { filter: brightness(1.25); transform: scale(1.12); }
.pd-dot.is-red { background: #ff5f57; }

/* How-to: soldaki içindekiler vurgusu + kırmızı yönetici bölümü */
.ht-toc-group { display: block; margin: 6px 8px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.ht-toc-group.is-admin { margin-top: 14px; padding: 6px 10px; border-radius: 9px; background: #b4132a; color: #fff; }
.ht-toc-link.is-active { background: rgb(var(--accent-rgb) / .16); color: var(--white); }
.ht-toc-link.is-active span { background: var(--gold); color: var(--on-accent, #000); }
.ht-toc-link.is-admin span { background: rgb(180 19 42 / .28); }
.ht-toc-link.is-admin.is-active { background: rgb(180 19 42 / .22); }
.ht-toc-link.is-admin.is-active span { background: #b4132a; color: #fff; }
.ht-admin-band { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 28px 30px; border-radius: 26px; background: linear-gradient(120deg, #b4132a, #6d0a18 70%); color: #fff; box-shadow: 0 30px 60px -30px rgb(180 19 42 / .7); scroll-margin-top: 90px; }
.ht-admin-band > span { width: 56px; height: 56px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: rgb(255 255 255 / .16); }
.ht-admin-band small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; opacity: .8; }
.ht-admin-band h2 { margin: 4px 0 4px; font-size: 28px; font-weight: 800; color: #fff; }
.ht-admin-band p { margin: 0; opacity: .85; font-size: 14px; }
.ht-section.is-admin { border-color: rgb(180 19 42 / .45); background: linear-gradient(160deg, rgb(180 19 42 / .1), rgb(var(--ink-rgb) / .015)); }
.ht-section.is-admin .ht-ic { background: rgb(180 19 42 / .3); }
.ht-section.is-admin .ht-steps li::before { background: #b4132a; color: #fff; }

/* =====================================================================================================
   ÇEVRİMİÇİ DURUM TOPU: profil fotoğrafının sağ altında (yeşil = çevrimiçi · sarı = yakın zamanda çevrimiçiydi · gri = çevrimdışı)
   ===================================================================================================== */
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; line-height: 0; }
.av-wrap > img { display: block; }
.pres-dot { position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 9px; min-height: 9px; max-width: 20px; max-height: 20px; border-radius: 50%; border: 2px solid var(--option-bg); background: #6b7280; box-sizing: border-box; }
.pres-online { background: #22c55e; box-shadow: 0 0 8px rgb(34 197 94 / .65); }
.pres-away { background: #eab308; box-shadow: 0 0 8px rgb(234 179 8 / .5); }
.pres-offline { background: #6b7280; }
.profile-av-wrap { align-self: center; }
.profile-av-wrap .pres-dot { z-index: 2; right: 6px; bottom: 6px; width: 24px; height: 24px; border-width: 3px; }
.my-team-member .av-wrap { width: 24px; height: 24px; }
.hub-member-list .my-team-member .av-wrap { width: 34px; height: 34px; }
.member-row .av-wrap { width: 40px; height: 40px; }
.member-row .av-wrap .pres-dot, .my-team-member .av-wrap .pres-dot { width: 10px; height: 10px; border-width: 2px; }
.hub-member-list .my-team-member .av-wrap .pres-dot { width: 11px; height: 11px; }

/* ROZET SATIRI: isim + tüm rozetler tek satırda yan yana; liste satırlarında ismin sağında küçük */
.profile-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.profile-name-row .bdg { margin-left: 0; }
.bdg-inline { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.bdg-inline .bdg { margin-left: 0; }

/* PROFİL KARTLARI: onay simgesi ve uzun adlar kutunun İÇİNDE kalır */
.profile-team-card { min-width: 0; overflow: hidden; }
.pcard-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--white); font-weight: 600; font-size: 14px; }
.pcard-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hub-tile { min-width: 0; overflow: hidden; }
.profile-hub-tile .mini-tile-info { flex: 1; min-width: 0; align-items: flex-start; }
.profile-hub-tile .mini-tile-name-row { justify-content: flex-start; min-width: 0; width: 100%; }
.profile-hub-tile .mini-tile-meta { justify-content: flex-start !important; }

/* PROFİL > TURNUVALAR: takım adı, kadro, derece ve ödül */
.ptour-list { display: flex; flex-direction: column; gap: 12px; }
.ptour-card { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: border-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }
.ptour-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.ptour-card.is-gold { border-color: rgb(245 158 11 / .55); background: linear-gradient(100deg, rgb(245 158 11 / .12), var(--panel) 55%); }
.ptour-card.is-silver { border-color: rgb(203 213 225 / .45); background: linear-gradient(100deg, rgb(203 213 225 / .09), var(--panel) 55%); }
.ptour-card.is-bronze { border-color: rgb(217 119 6 / .45); background: linear-gradient(100deg, rgb(217 119 6 / .10), var(--panel) 55%); }
.ptour-thumb { width: 96px; height: 64px; border-radius: 14px; background: rgb(var(--ink-rgb) / .06) center / cover no-repeat; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); overflow: hidden; }
.ptour-thumb img { width: 34px; height: 34px; object-fit: contain; }
.ptour-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ptour-title { color: var(--white); font-weight: 700; font-size: 15px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptour-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.ptour-meta { color: var(--gray); font-size: 12px; }
.ptour-team { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.ptour-team-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--white); font-size: 13px; font-weight: 600; text-decoration: none; }
a.ptour-team-link:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.ptour-team-logo { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--chip-blue); color: #fff; font-size: 12px; font-weight: 700; }
.ptour-roster { display: inline-flex; align-items: center; }
.ptour-rm { display: inline-flex; margin-left: -7px; border-radius: 50%; transition: transform .2s ease; }
.ptour-rm:first-child { margin-left: 0; }
.ptour-rm:hover { transform: translateY(-2px); z-index: 1; }
.ptour-rm img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid var(--option-bg); }
.ptour-rm.is-me img { border-color: var(--pg-brand-bright); }
.ptour-result { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.ptour-place { display: inline-flex; align-items: baseline; gap: 5px; color: var(--white); }
.ptour-place svg { align-self: center; color: #f59e0b; }
.ptour-place b { font-size: 28px; line-height: 1; font-weight: 800; }
.ptour-place small { color: var(--gray); font-size: 11px; }
.is-gold .ptour-place b { color: #fbbf24; }
.is-silver .ptour-place b { color: #e2e8f0; }
.is-bronze .ptour-place b { color: #f59e0b; }
.ptour-prize { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fbbf24; background: rgb(245 158 11 / .12); border: 1px solid rgb(245 158 11 / .35); }
.ptour-state { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--gray); border: 1px solid var(--border); }
.ptour-state.is-live { color: #4ade80; border-color: rgb(34 197 94 / .4); background: rgb(34 197 94 / .08); }
.ptour-state.is-out { color: #f87171; border-color: rgb(239 68 68 / .35); background: rgb(239 68 68 / .07); }
@media (max-width: 640px) {
    .ptour-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
    .ptour-thumb { width: 64px; height: 48px; }
    .ptour-result { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding-top: 8px; border-top: 1px solid var(--border); }
}

/* Ayarlar > profil önizlemesi: banner + rozetler + durum topu */
.pp2-banner { margin: -20px -22px 16px; aspect-ratio: 1376 / 400; overflow: hidden; border-radius: 14px 14px 0 0; background: rgb(var(--ink-rgb) / .05); }
.pp2-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp2-av-wrap { align-self: flex-start; }
.pp2-av-wrap .pres-dot { width: 18px; height: 18px; right: 2px; bottom: 2px; }
.pv-badges { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle; }
.pv-badges .bdg { margin-left: 0; }
@media (max-width: 640px) { .pp2-banner { margin: -16px -14px 14px; } }

/* Takım ayarları > önizleme (hub önizlemesiyle aynı sistem) */
.tv2-card { pointer-events: none; margin: 0; }
.tv2-logo { display: inline-flex; flex-shrink: 0; }
.tv2-letter { display: inline-flex; align-items: center; justify-content: center; background: var(--chip-blue); color: #fff; font-weight: 800; font-size: 22px; }
.tv2-game { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; }
.tv2-game img { width: 13px; height: 13px; object-fit: contain; }
.tv2 .team-card-cover .cover-img[hidden] { display: none; }

/* Profil > Turnuvalar: kartın TAMAMI turnuva sayfasına gider (başlık bağlantısı kartı kaplar; takım/oyuncu bağlantıları üstte kalır) */
.ptour-card { position: relative; cursor: pointer; }
.ptour-title::after { content: ''; position: absolute; inset: 0; border-radius: 20px; }
.ptour-team-link, .ptour-rm, .ptour-thumb { position: relative; z-index: 2; }
.ptour-meta { display: flex; align-items: center; gap: 6px; }
.ptour-game { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

/* Tarih filtresi (üyeler / arkadaşlar pencereleri): sitenin kendi tarih seçicisi, küçük boyut */
.members-datefilter .dt-picker { width: 128px; }
.members-datefilter .dt-picker-display { padding: 8px 30px 8px 10px; border-width: 2px; border-radius: .7rem; font-size: 12.5px; }
.members-datefilter .dt-picker-icon { right: 9px; }
.members-datefilter .dt-picker-panel { right: 0; left: auto; z-index: 400; }
.members-datefilter label + label .dt-picker-panel { right: 0; }

/* Turnuva ayarları > Seeding & Fikstür */
.seed-lock { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 14px; background: rgb(var(--ink-rgb) / .03); color: var(--gray); font-size: 13.5px; line-height: 1.6; }
.seed-lock svg { flex-shrink: 0; margin-top: 3px; }
.seed-lock b { color: var(--white); font-weight: 700; }
.seed-method { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.seed-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.seed-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--field-bg); color: var(--white); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.seed-pill small { color: var(--gray); font-weight: 500; font-size: 11.5px; }
.seed-pill.is-on { border-color: var(--pg-brand-bright); background: rgb(var(--pg-brand-rgb) / .16); }
.seed-pill:disabled { opacity: .55; cursor: not-allowed; }
.seed-actions { display: flex; gap: 10px; margin-top: 18px; }
.seed-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.seed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seed-count { color: var(--gray); font-size: 13px; font-weight: 600; }
.seed-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.seed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.seed-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.seed-match > small { grid-column: 1 / -1; color: var(--gray); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.seed-vs { color: var(--gray); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.seed-team { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 10px; background: rgb(var(--ink-rgb) / .04); }
.seed-team.is-bye { opacity: .5; }
.seed-team img, .seed-logo { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.seed-logo { display: inline-flex; align-items: center; justify-content: center; background: var(--chip-blue); color: #fff; font-size: 10px; font-weight: 800; }
.seed-no { flex-shrink: 0; min-width: 20px; text-align: center; font-size: 11px; font-weight: 800; color: var(--gray); }
.seed-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--white); }
@media (max-width: 520px) { .seed-grid { grid-template-columns: minmax(0, 1fr); } }

/* Seeding: kayıt/check-in bitmeden bulanık + kilitli; gerçek fikstür önizlemesi (bracket önizlemesiyle aynı ağaç) */
.seed-card { position: relative; }
.seed-card.is-veiled .seed-body { filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; }
.seed-veil { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; color: var(--gray); }
.seed-veil[hidden] { display: none; }
.seed-veil b { color: var(--white); font-size: 15px; }
.seed-veil span { font-size: 13px; white-space: nowrap; }
@media (max-width: 640px) { .seed-veil span { white-space: normal; } }
.seed-bracket { overflow: auto; max-height: 640px; padding: 4px 0 8px; }
.bpx-team.is-team { color: var(--white); font-weight: 600; }
.bpx-team.is-team i { background-size: cover; background-position: center; background-color: var(--chip-blue); }
.bpx-team.is-bye { opacity: .45; font-style: italic; }
.bpx-team em { flex-shrink: 0; font-style: normal; font-size: 9px; font-weight: 800; color: var(--gray); min-width: 12px; }

/* Kilitli tur: tarih alanı da Bo alanı gibi soluk (değiştirilemez) */
.round-row-date.is-locked-date { opacity: .5; }
.round-row-date.is-locked-date .dt-picker-display { color: var(--white); -webkit-text-fill-color: var(--white); }

/* =====================================================================================================
   MÜSABAKALAR: sol menü öğesi + panel + "maça 7 dk kaldı" alt kartı (js/core/matches-ui.js)
   ===================================================================================================== */
button.rail-item { padding: 0; font: inherit; cursor: pointer; }
.rail-tile-matches { position: relative; isolation: isolate; overflow: hidden; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px transparent; transition: color .45s ease, box-shadow .45s ease; }
/* bordo zemin ayrı bir katmandır: müsabaka yokken animasyonla saydamlaşır, gelince animasyonla dolar (gradyan doğrudan geçiş yapamaz) */
.rail-tile-matches::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #a30a33, var(--pg-brand, #810020)); opacity: 1; transition: opacity .5s ease; }
.rail-vs { font-size: 17px; font-weight: 800; letter-spacing: .02em; line-height: 1; font-style: normal; }
.rail-matches.is-idle .rail-tile-matches, .rail-tile-matches.is-idle-tile { color: var(--gray); box-shadow: inset 0 0 0 1px var(--border); }
.rail-matches.is-idle .rail-tile-matches::before, .rail-tile-matches.is-idle-tile::before { opacity: 0; }
.rail-matches.is-idle:hover .rail-tile-matches { color: var(--white); }
.rail-matches.is-blink { animation: railBlink 1s ease-in-out infinite; }
@keyframes railBlink { 0%, 100% { box-shadow: 0 0 0 0 rgb(200 30 70 / .0); filter: brightness(1); } 50% { box-shadow: 0 0 0 5px rgb(200 30 70 / .45), 0 0 18px 2px rgb(200 30 70 / .55); filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .rail-matches.is-blink { animation: none; box-shadow: 0 0 0 3px rgb(200 30 70 / .6); } .rail-tile-matches, .rail-tile-matches::before { transition: none; } }

.mx-panel { position: fixed; z-index: 1500; width: 380px; max-width: calc(100vw - 96px); display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: 0 24px 60px -12px rgb(0 0 0 / .7); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); opacity: 0; transform: translateX(-8px); transition: opacity .18s ease, transform .18s ease; overflow: hidden; }
.mx-sep { height: 1px; background: var(--border); margin: 6px 4px; flex: none; }
.mx-panel[hidden] { display: none; }
.mx-panel.is-open { opacity: 1; transform: none; }
.mx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.mx-head strong { font-size: 15px; }
.mx-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgb(var(--ink-rgb) / .06); }
.mx-tab { border: 0; background: transparent; color: var(--gray); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.mx-tab.is-on { background: var(--white); color: var(--on-accent); }
.mx-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.mx-empty { margin: 18px 6px; text-align: center; color: var(--gray); font-size: 13px; }
.mx-foot { border-top: 1px solid var(--border); }
.mx-foot:empty { display: none; }
.mx-foot-btn { display: block; width: 100%; padding: 10px 16px; border: 0; background: transparent; color: var(--gray); font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; border-radius: 0 0 var(--radius, 14px) var(--radius, 14px); }
.mx-foot-btn:hover { color: var(--white); }
.mx-hid-note { margin: 2px 4px 4px; font-size: 12.5px; color: var(--gray); }
.mx-hid { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.mx-hid-name { font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-hid-btn { flex: none; border: 1px solid var(--border-strong, var(--border)); background: transparent; color: var(--white); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.mx-hid-btn:hover { background: rgb(var(--ink-rgb) / .08); }
.mx-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--white); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.mx-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.mx-card.is-soon { background: #facc15; border-color: #eab308; color: #1a1400; }
.mx-card.is-soon .mx-meta, .mx-card.is-soon .mx-x, .mx-card.is-soon .mx-when { color: rgb(26 20 0 / .72); }
.mx-top.mx-top3 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.mx-top3 .mx-when, .mx-top3 .mx-res { white-space: nowrap; }
.mx-top3 .mx-top-hub { justify-self: center; }
.mx-top3 > :first-child { justify-self: start; }
.mx-top3 > :last-child { justify-self: end; }
.mx-top-hub { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-size: 11.5px; font-weight: 700; color: var(--white); }
.mx-top-hubn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-l1 { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; text-align: center; }
.mx-l1t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-l2 { font-size: 11.5px; color: var(--gray); text-align: center; }
.mx-card.is-live { border-color: rgb(239 68 68 / .55); }
.mx-card.is-live .mx-when { color: #f87171; }
.mx-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-when { font-size: 12px; font-weight: 800; color: var(--gray); font-variant-numeric: tabular-nums; }
.mx-game { width: 16px; height: 16px; object-fit: contain; }
.mx-vs { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-team { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; }
.mx-tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-logo { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.mx-logo-l { display: inline-flex; align-items: center; justify-content: center; background: var(--chip-blue); color: #fff; font-size: 11px; font-weight: 800; }
.mx-x { font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--gray); }
.mx-score { font-size: 15px; font-weight: 800; white-space: nowrap; }
.mx-meta { font-size: 11.5px; color: var(--gray); line-height: 1.5; }
.mx-hub { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.mx-hub-ic { width: 13px; height: 13px; border-radius: 4px; object-fit: cover; }
.mx-res { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--gray); }
.mx-res.is-win { color: #4ade80; border-color: rgb(34 197 94 / .45); background: rgb(34 197 94 / .08); }
.mx-res.is-loss { color: #f87171; border-color: rgb(239 68 68 / .4); background: rgb(239 68 68 / .07); }
.mx-res.is-cancel { color: #fbbf24; border-color: rgb(245 158 11 / .4); }

/* Alt sarı kart: ekranın altından yukarı çıkar, yalnızca ÜST köşeleri hafif yuvarlak, ekranın ortasına gelmeden biter */
.ma-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; display: flex; justify-content: center; pointer-events: none; animation: maUp .55s cubic-bezier(.22, 1, .36, 1) both; }
.ma-wrap.is-out { animation: maDown .3s ease-in both; }
@keyframes maUp { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes maDown { from { transform: translateY(0); } to { transform: translateY(105%); } }
.ma-card { pointer-events: auto; width: min(760px, 100%); max-height: 34vh; overflow: auto; padding: 12px 22px 14px; background: #facc15; color: #1a1400; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px -8px rgb(250 204 21 / .45), 0 -2px 0 rgb(0 0 0 / .15) inset; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ma-card.is-split { width: min(1180px, 100%); flex-direction: row; align-items: stretch; gap: 0; padding: 12px 0 14px; }
.ma-part { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 22px; }
.ma-part.is-urgent .ma-label { color: #7a0d0d; }
.ma-part .ma-vs { max-width: 100%; flex-wrap: wrap; gap: 2px 12px; }
.ma-part .mx-team { min-width: 0; max-width: 100%; }
.ma-part .mx-tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-divider { flex: none; width: 1px; background: rgb(26 20 0 / .35); margin: 4px 0; }
.ma-card:not(.is-split) .ma-part { padding: 0; width: 100%; }
.ma-link { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; color: inherit; text-decoration: none; cursor: pointer; }
.ma-link:hover .ma-time { text-decoration: underline; text-underline-offset: 4px; }
.ma-btns { display: flex; justify-content: center; gap: 10px; width: min(420px, 100%); }
.ma-btn { flex: 1; text-align: center; padding: 7px 12px; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; border: 2px solid #1a1400; }
.ma-go { background: #1a1400; color: #facc15; }
.ma-off { background: transparent; color: #1a1400; }
.ma-btn:hover { filter: brightness(1.12); }
.ma-label { margin-top: 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgb(26 20 0 / .72); }
.ma-time { font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ma-vs { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 2px; }
.ma-card .mx-team { font-size: 14px; }
.ma-card .mx-x { color: rgb(26 20 0 / .6); }
.ma-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; font-size: 12.5px; font-weight: 600; color: rgb(26 20 0 / .82); }
.ma-tour { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 820px) { .ma-card.is-split { flex-direction: column; max-height: 52vh; padding: 12px 0 14px; } .ma-divider { width: auto; height: 1px; margin: 6px 22px; } }
@media (max-width: 520px) { .ma-part .ma-vs { flex-direction: column; gap: 2px; } .ma-part .mx-tn { max-width: 70vw; } .ma-card { width: 100%; } .mx-panel { left: 12px !important; max-width: calc(100vw - 24px); } }

/* ---------- Harita eleme v2 (2026-09-25): 2'li büyük harita kartları; taraf seçimi yan yana iki düğme (CS2: T | CT simgesi, VALORANT: Saldıran | Savunan) ---------- */
.mr-maps.is-veto { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mr-maps.is-veto .mr-map, .mr-maps.is-veto .mr-map:nth-child(7):last-child { grid-column: span 2; }
.mr-maps.is-veto[data-rem="1"] .mr-map:last-child { grid-column: 2 / span 2; }
.mr-maps.is-veto .mr-map .mr-map-name { font-size: 17px; }
.mr-map.awaits-side .mr-map-name { font-size: 15px; letter-spacing: .04em; }
.mr-map.awaits-side .mr-map-info { top: 10px; left: 12px; right: 12px; }
.mr-side-over { flex-direction: row; align-items: flex-end; justify-content: center; gap: 8px; padding: 10px 12px 12px; }
.mr-side-btn { flex: 1 1 0; width: auto; min-width: 0; max-width: none; height: 46px; padding: 6px 8px; font-size: 11.5px; gap: 6px; border-radius: 12px; }
.mr-side-btn.is-icon { border-width: 2px; }
.mr-side-btn .mr-side-img { width: 34px !important; height: 34px !important; }
.mr-side-wait { align-items: flex-end; padding-bottom: 12px; font-size: 11.5px; }
@media (max-width: 640px) {
    .mr-maps.is-veto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mr-maps.is-veto .mr-map, .mr-maps.is-veto .mr-map:nth-child(7):last-child, .mr-maps.is-veto[data-rem="1"] .mr-map:last-child { grid-column: auto; }
    .mr-side-over { gap: 5px; padding: 8px; }
    .mr-side-btn { height: 40px; font-size: 10px; gap: 4px; }
    .mr-side-btn .mr-side-img { width: 28px !important; height: 28px !important; }
}
.mr-map img.mr-side-img { position: static; inset: auto; object-fit: contain; transition: none; transform: none; filter: none; }
.mr-map:hover img.mr-side-img { transform: none; }
.mr-side-btn.is-icon.is-attack, .mr-side-btn.is-icon.is-defense { background: rgb(0 0 0 / .6); }
.mr-side-btn.is-icon:hover { background: rgb(0 0 0 / .78); }
.mr-map-side.is-cs .mr-side-img { margin: 0; }
/* T/CT simgeleri (img) kart/hero içindeki genel `img { position:absolute; inset:0 }` kurallarından etkilenmesin — her yerde satır içi kalır */
.matchroom img.mr-side-img { position: static !important; inset: auto !important; object-fit: contain; transform: none !important; filter: none !important; transition: none; max-width: none; }

/* =====================================================================================================
   PREMIUM harita eleme + harita kartı tasarımı (2026-09-25) — yalnızca `.mr-prem` (js/features/matchroom.js > MR_PREMIUM).
   Kapatmak için bayrağı false yapmak yeterli; önceki (v2) tasarımın tam yedeği: ~/Desktop/web/esportarena_backups/veto-design-v2_2026-09-25
   ===================================================================================================== */
@keyframes mrPremSweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes mrPremPulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--side) 24%, transparent), 0 8px 24px -12px var(--side); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--side) 10%, transparent), 0 10px 30px -10px var(--side); } }
@keyframes mrPremShine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

/* --- sıra kartı --- */
.mr-prem .mr-turn { position: relative; overflow: hidden; gap: 16px; padding: 16px 20px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--side) 40%, var(--border)); background: radial-gradient(120% 180% at 0% 0%, color-mix(in srgb, var(--side) 30%, transparent), transparent 62%), linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015)); backdrop-filter: blur(14px); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--side) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / .09); }
.mr-prem .mr-turn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--side) 50%, transparent 100%); }
.mr-prem .mr-turn.is-mine { box-shadow: 0 0 0 1px color-mix(in srgb, var(--side) 55%, transparent), 0 24px 50px -22px var(--side), inset 0 1px 0 rgb(255 255 255 / .09); }
.mr-prem .mr-turn-logo { width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: rgb(var(--ink-rgb) / .12); box-shadow: 0 0 0 2px var(--side), 0 0 22px -4px var(--side); }
.mr-prem .mr-turn-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr-prem .mr-turn-label { letter-spacing: .2em; font-size: 10.5px; }
.mr-prem .mr-turn-text { flex: 1; }
.mr-prem .mr-turn-text strong { font-size: 21px; letter-spacing: .005em; }
.mr-prem .mr-turn-act { flex: none; padding: 9px 18px; border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: .2em; border: 1px solid; }
.mr-prem .mr-turn-act.is-ban { color: #f87171; background: rgb(239 68 68 / .12); border-color: rgb(239 68 68 / .45); }
.mr-prem .mr-turn-act.is-pick { color: #4ade80; background: rgb(34 197 94 / .12); border-color: rgb(34 197 94 / .45); }
.mr-prem .mr-turn-act.is-side { color: #facc15; background: rgb(250 204 21 / .1); border-color: rgb(250 204 21 / .45); }

/* --- adım zinciri --- */
.mr-prem .mr-steps-rail { display: flex; align-items: stretch; gap: 8px; margin: 14px 0 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.mr-prem .mr-stp { position: relative; flex: 1 0 auto; min-width: 64px; display: grid; justify-items: center; gap: 2px; padding: 9px 10px 8px; border-radius: 14px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .03); transition: background .25s ease, border-color .25s ease; }
.mr-prem .mr-stp + .mr-stp::before { content: ''; position: absolute; left: -9px; top: 50%; width: 9px; height: 1px; background: var(--border-strong); }
.mr-prem .mr-stp i { font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--gray); letter-spacing: .08em; }
.mr-prem .mr-stp b { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--side); }
.mr-prem .mr-stp em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); }
.mr-prem .mr-stp.is-done { background: color-mix(in srgb, var(--side) 16%, transparent); border-color: color-mix(in srgb, var(--side) 45%, transparent); }
.mr-prem .mr-stp.is-done em, .mr-prem .mr-stp.is-done i { color: var(--white); }
.mr-prem .mr-stp:not(.is-done):not(.is-now) { opacity: .6; }
.mr-prem .mr-stp.is-now { border-color: var(--side); background: color-mix(in srgb, var(--side) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--side) 22%, transparent); }
.mr-prem .mr-stp.is-now em { color: var(--white); }

/* --- harita kartları --- */
.mr-prem .mr-maps.is-veto { gap: 14px; margin-top: 12px; }
.mr-prem .mr-map { aspect-ratio: 16 / 10; border-radius: 20px; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 22px 44px -26px rgb(0 0 0 / .9); isolation: isolate; }


.mr-prem .mr-map-shade { background: linear-gradient(180deg, rgb(3 5 10 / .4) 0%, transparent 34%, rgb(3 5 10 / .9) 100%); }
.mr-prem .mr-map-info { left: 16px; right: 16px; bottom: 14px; gap: 6px; }
.mr-prem .mr-map .mr-map-name, .mr-prem .mr-maps.is-veto .mr-map .mr-map-name { font-size: 21px; letter-spacing: .02em; font-weight: 800; }
.mr-prem .mr-order { top: 12px; left: 12px; padding: 4px 11px; border-radius: 999px; background: rgb(3 5 10 / .62); border: 1px solid rgb(255 255 255 / .16); letter-spacing: .14em; }
.mr-prem .mr-ribbon { top: 12px; right: 12px; padding: 4px 11px; border-radius: 999px; box-shadow: 0 8px 20px -10px var(--side, #000); }
.mr-prem .mr-map.is-banned img { filter: grayscale(1) brightness(.38); }
.mr-prem .mr-map.is-banned .mr-map-name { text-decoration: none; opacity: .55; }
.mr-prem .mr-stamp { border-width: 2px; font-size: 15px; letter-spacing: .34em; padding: 5px 14px 5px 20px; border-radius: 8px; background: rgb(3 5 10 / .45); transform: translate(-50%, -50%) rotate(-8deg); }
.mr-prem .mr-map.is-picked, .mr-prem .mr-map.is-decider { border-color: color-mix(in srgb, var(--side, #facc15) 80%, #fff 8%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--side, #facc15) 45%, transparent), 0 26px 54px -22px var(--side, #facc15); }
.mr-prem .mr-map.is-decider { --side: #facc15; }
/* ban/pick: kartın ÜSTÜNDEN aşağı inen şerit (harita adını kapatmaz); tıklama şeride değil kartın her yerine geçerlidir. Kartlar hiç büyümez/oynamaz. */
.mr-prem .mr-map.is-actionable { cursor: pointer; }
.mr-prem .mr-map-btn { inset: 0 0 auto 0; margin: 0; width: auto; height: 42px; border-radius: 0; font-size: 12.5px; letter-spacing: .26em; opacity: 1; pointer-events: none; transform: translateY(-101%); transition: transform .26s cubic-bezier(.22, 1, .36, 1); }
.mr-prem .mr-map.is-actionable:hover .mr-map-btn, .mr-prem .mr-map.is-actionable:focus-visible .mr-map-btn { transform: none; }
.mr-prem .mr-map.is-actionable:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mr-prem .mr-map-btn.is-ban { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.mr-prem .mr-map-btn.is-pick { background: linear-gradient(90deg, #15803d, #22c55e); }
.mr-prem .mr-map.is-available.is-actionable:hover, .mr-prem .mr-map.is-actionable:hover { transform: none; box-shadow: 0 22px 44px -26px rgb(0 0 0 / .9), 0 0 0 2px rgb(255 255 255 / .35); }
.mr-prem .mr-map.is-available.is-actionable:hover img, .mr-prem .mr-map.is-actionable:hover img { transform: none; }
.mr-prem .mr-map, .mr-prem .mr-map img { transition: none; }

/* --- taraf seçimi: kartın alt yarısını kaplayan iki büyük panel --- */
.mr-prem .mr-map.awaits-side { border-color: #facc15; box-shadow: 0 0 0 1px rgb(250 204 21 / .45), 0 26px 56px -22px rgb(250 204 21 / .6); }
.mr-prem .mr-map.awaits-side .mr-map-shade { background: linear-gradient(180deg, rgb(3 5 10 / .55), rgb(3 5 10 / .85)); }
.mr-prem .mr-map.awaits-side .mr-map-info { top: 12px; left: 16px; right: 16px; }
.mr-prem .mr-map.awaits-side .mr-map-name { font-size: 17px; }
.mr-prem .mr-side-over { inset: auto 0 0 0; top: 46px; align-items: stretch; gap: 10px; padding: 0 14px 14px; }
.mr-prem .mr-side-btn { height: auto; min-height: 0; border-radius: 16px; font-size: 12px; letter-spacing: .14em; flex-direction: column; gap: 6px; box-shadow: 0 14px 30px -16px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .18); }
.mr-prem .mr-side-btn.is-icon { background: rgb(255 255 255 / .07); backdrop-filter: blur(6px); border-width: 1.5px; }
.mr-prem .mr-side-btn.is-icon.is-attack, .mr-prem .mr-side-btn.is-icon.is-defense { background: rgb(255 255 255 / .07); }
.mr-prem .mr-side-btn.is-icon:hover { background: rgb(255 255 255 / .16); transform: none; filter: none; }
.mr-prem .mr-side-btn:hover { transform: none; }
.mr-prem .mr-side-btn .mr-side-img { width: 46px !important; height: 46px !important; }
.mr-prem .mr-side-btn svg { width: 24px; height: 24px; }
.mr-prem .mr-side-wait { top: 46px; letter-spacing: .2em; }

/* --- hero (oynanacak/oynanan harita) --- */
.mr-prem .mr2-hero-pic { min-height: 300px; border-radius: 26px; border-color: rgb(255 255 255 / .14); box-shadow: 0 34px 70px -32px rgb(0 0 0 / .95), inset 0 1px 0 rgb(255 255 255 / .08); }
.mr-prem .mr2-hero-shade { background: radial-gradient(85% 75% at 50% 45%, rgb(3 5 10 / .05) 0%, rgb(3 5 10 / .6) 100%), linear-gradient(180deg, rgb(3 5 10 / .6), rgb(3 5 10 / .1) 40%, rgb(3 5 10 / .88)); }
.mr-prem .mr2-hero-no { display: inline-flex; align-items: center; gap: 12px; letter-spacing: .3em; }
.mr-prem .mr2-hero-no::before, .mr-prem .mr2-hero-no::after { content: ''; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .6)); }
.mr-prem .mr2-hero-no::after { transform: scaleX(-1); }
.mr-prem .mr2-hero-name { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: .01em; text-shadow: 0 6px 32px rgb(0 0 0 / .8); }
.mr-prem .mr2-hero-pill { background: rgb(6 8 14 / .6); backdrop-filter: blur(10px); border-color: rgb(255 255 255 / .2); }
.mr-prem .mr2-hero-status { backdrop-filter: blur(8px); }
/* takım plakaları: her takımın tarafı (T/CT · Saldıran/Savunan) kendi kısaltmasının yanında */
.mr-plates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; width: min(340px, 100%); }
.mr-plate { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 12px 5px 8px; border-radius: 12px; background: rgb(6 8 14 / .66); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .16); border-bottom: 2px solid var(--side); box-shadow: 0 12px 24px -16px rgb(0 0 0 / .9); text-align: left; }
.mr-plate.side-B { flex-direction: row-reverse; padding: 5px 8px 5px 12px; text-align: right; }
.mr-plate .mr-side-img, .mr-plate svg { flex: none; }
.mr-plate svg { color: var(--faction); }
.mr-plate-tx { display: grid; gap: 1px; min-width: 0; }
.mr-plate-tx b { font-size: 14px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; color: #fff; }
.mr-plate-tx span { display: none; font-size: 11px; color: rgb(255 255 255 / .68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-plate-tx em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--faction); }
.mr-plate-vs { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: lowercase; color: rgb(255 255 255 / .55); }
/* harita şeridi */
.mr-prem .mr2-mapstrip { gap: 12px; }
.mr-prem .mr2-strip-item { height: 100px; border-radius: 18px; border-color: rgb(255 255 255 / .12); padding: 10px 14px; }
.mr-prem .mr2-strip-item small { font-size: 10px; letter-spacing: .18em; }
.mr-prem .mr2-strip-item strong { font-size: 16px; }
.mr-prem .mr2-strip-item.is-cur { border-color: var(--gold); box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / .5), 0 18px 34px -16px rgb(var(--accent-rgb) / .7); }
@media (max-width: 560px) {
    .mr-prem .mr-turn { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
    .mr-prem .mr-turn-act { padding: 6px 12px; }
    .mr-prem .mr-map .mr-map-name, .mr-prem .mr-maps.is-veto .mr-map .mr-map-name { font-size: 16px; }
    .mr-prem .mr-side-btn .mr-side-img { width: 34px !important; height: 34px !important; }
    .mr-plates { grid-template-columns: 1fr; }
    .mr-plate-vs { display: none; }
    .mr-plate, .mr-plate.side-B { flex-direction: row; text-align: left; }
}
.mr-prem .mr-map-sides { flex-wrap: wrap; gap: 4px 6px; }
@media (max-width: 560px) { .mr-prem .mr-order, .mr-prem .mr-ribbon { font-size: 9px; padding: 3px 8px; top: 8px; } .mr-prem .mr-order { left: 8px; } .mr-prem .mr-ribbon { right: 8px; } .mr-prem .mr-map-info { left: 12px; right: 12px; bottom: 10px; } }

/* harita şeridinden haritalar arası geçiş: eski görsel yana kayarak solar, yenisi karşıdan kayarak girer */
@keyframes mrHeroOutL { to { opacity: 0; transform: translateX(-28px) scale(.985); filter: blur(3px); } }
@keyframes mrHeroOutR { to { opacity: 0; transform: translateX(28px) scale(.985); filter: blur(3px); } }
@keyframes mrHeroInL { from { opacity: 0; transform: translateX(28px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mrHeroInR { from { opacity: 0; transform: translateX(-28px) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.mr2-hero-pic.is-out-l { animation: mrHeroOutL .22s ease-in both; }
.mr2-hero-pic.is-out-r { animation: mrHeroOutR .22s ease-in both; }
.mr2-hero-pic.is-in-l { animation: mrHeroInL .42s cubic-bezier(.22, 1, .36, 1) both; }
.mr2-hero-pic.is-in-r { animation: mrHeroInR .42s cubic-bezier(.22, 1, .36, 1) both; }
.mr2-strip-item { transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease; }
.mr-prem .mr2-strip-item:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .mr2-hero-pic.is-out-l, .mr2-hero-pic.is-out-r, .mr2-hero-pic.is-in-l, .mr2-hero-pic.is-in-r { animation: none; } }

/* =====================================================================================================
   PREMIUM CS2 istatistikleri (2026-09-25) — `#mrStats.mrs` (js/features/matchroom.js > MR_PREMIUM_STATS).
   Önceki tasarımın yedeği: ~/Desktop/web/esportarena_backups/stats-design-v1_2026-09-25 (eski .mr-stats-* kuralları yukarıda duruyor)
   ===================================================================================================== */
.mr2-stats.mrs { padding: 22px clamp(14px, 2.4vw, 26px) 26px; border-radius: 24px; border-color: rgb(255 255 255 / .1); background: radial-gradient(120% 90% at 50% -10%, rgb(var(--accent-rgb) / .10), transparent 60%), var(--panel); box-shadow: 0 30px 70px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06); }
.mrs-title { display: grid; justify-items: center; gap: 4px; margin-bottom: 20px; }
.mrs-title h4 { margin: 0; font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mrs-title small { font-size: 11px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--gray); }
.mrs-title::after { content: ''; width: 90px; height: 2px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.mrs-map + .mrs-map { margin-top: 26px; }
.mrs-maphead { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding: 14px 22px; border-radius: 20px; border: 1px solid rgb(255 255 255 / .12); background: #0b1220; margin-bottom: 14px; }
.mrs-maphead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(.75); }
.mrs-maphead-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(3 5 10 / .88) 0%, rgb(3 5 10 / .35) 55%, rgb(3 5 10 / .78) 100%); }
.mrs-maphead-l, .mrs-score { position: relative; z-index: 1; }
.mrs-maphead-l { display: grid; gap: 2px; }
.mrs-maphead-l small { font-size: 10.5px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.mrs-maphead-l strong { font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: #fff; text-shadow: 0 4px 22px rgb(0 0 0 / .7); }
.mrs-score { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 16px; background: rgb(6 8 14 / .6); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / .16); color: #fff; }
.mrs-score b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mrs-score b.is-win { color: #4ade80; } .mrs-score b.is-lose { color: #f87171; }
.mrs-score i { font-style: normal; opacity: .5; font-weight: 800; }
.mrs-score em { font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 3px 9px; border-radius: 8px; background: var(--side); color: #fff; }
.mrs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mrs-team { --side: #3b82f6; min-width: 0; border-radius: 20px; border: 1px solid rgb(255 255 255 / .09); background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .012)); overflow: hidden; box-shadow: inset 0 2px 0 var(--side); }
.mrs-team.side-B { --side: #f43f5e; }
.mrs-team-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--side) 18%, transparent), transparent 70%); }
.mrs-team-link { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
a.mrs-team-link:hover .mrs-team-name { text-decoration: underline; text-underline-offset: 4px; }
.mrs-logo { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: rgb(var(--ink-rgb) / .12); box-shadow: 0 0 0 2px var(--side), 0 0 18px -4px var(--side); }
.mrs-logo img { width: 100%; height: 100%; object-fit: cover; }
.mrs-team-name { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrs-total { display: grid; justify-items: end; line-height: 1.05; flex: none; }
.mrs-total b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--side); }
.mrs-total small { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); }
.mrs-scroll { overflow-x: auto; scrollbar-width: thin; padding: 0 8px 10px; }
.mrs-table { min-width: 430px; display: grid; }
.mrs-row { display: grid; grid-template-columns: minmax(130px, 1.9fr) repeat(6, minmax(38px, .6fr)); align-items: center; gap: 4px; padding: 7px 10px; border-radius: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mrs-row > span { text-align: center; }
.mrs-row > span:first-child { text-align: left; }
.mrs-row.is-head { padding-top: 4px; padding-bottom: 6px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.mrs-row:not(.is-head):nth-child(even) { background: rgb(var(--ink-rgb) / .035); }
.mrs-row.is-top { background: linear-gradient(90deg, color-mix(in srgb, var(--side) 16%, transparent), transparent 80%) !important; }
.mrs-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mrs-plink { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: inherit; text-decoration: none; font-weight: 700; }
a.mrs-plink:hover .mrs-pname { text-decoration: underline; text-underline-offset: 3px; }
.mrs-av { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .18); background: rgb(var(--ink-rgb) / .1); }
.mrs-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrs-star { font-style: normal; font-size: 12px; color: #facc15; flex: none; }
.mrs-k { position: relative; display: flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 8px; overflow: hidden; }
.mrs-k::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: color-mix(in srgb, var(--side) 30%, transparent); border-radius: inherit; }
.mrs-k b { position: relative; font-weight: 800; }
.mrs-diff.is-pos { color: #4ade80; font-weight: 800; } .mrs-diff.is-neg { color: #f87171; font-weight: 800; }
.mrs-kd { font-weight: 700; }
@media (max-width: 860px) { .mrs-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .mrs-maphead { padding: 12px 14px; flex-wrap: wrap; } .mrs-score b { font-size: 21px; } .mrs-team-head { padding: 12px 14px 10px; } }

/* adım zinciri: kaydırma yok — adımlar küçülüp satıra sığar (çok adımda alt satıra geçer) */
.mr-prem .mr-steps-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; overflow: visible; padding: 4px 0 6px; margin: 12px 0 4px; }
.mr-prem .mr-stp { min-width: 0; padding: 5px 4px 5px; border-radius: 10px; gap: 1px; }
.mr-prem .mr-stp + .mr-stp::before { display: none; }
.mr-prem .mr-stp i { font-size: 8.5px; }
.mr-prem .mr-stp b { font-size: 11px; letter-spacing: .02em; }
.mr-prem .mr-stp em { font-size: 8.5px; letter-spacing: .1em; }
.mr-prem .mr-stp.is-now { box-shadow: 0 0 0 2px color-mix(in srgb, var(--side) 30%, transparent); }
/* "Belirleyici harita" rozeti: premium koyu cam zeminde beyaz yazı */
.mr-prem .mr2-hero-pill.is-decider { color: #fff; background: rgb(6 8 14 / .6); border-color: rgb(255 255 255 / .2); box-shadow: none; }
.mr-prem .mr2-hero-pill.is-decider * { color: inherit; }

/* sıra kartı metinleri tek satır (örn. "Sunset için başlangıç tarafını seçiyor") */
.mr-prem .mr-turn-text { min-width: 0; }
.mr-prem .mr-turn-text strong, .mr-prem .mr-turn-what { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-prem .mr-turn-text strong { font-size: 19px; }
.mr-prem .mr-turn-what { font-size: 11.5px; letter-spacing: 0; }
.mr-prem .mr-turn-label { white-space: nowrap; }
.mr-prem .mr-turn-act { white-space: nowrap; }
@media (max-width: 560px) { .mr-prem .mr-turn { flex-wrap: nowrap; } .mr-prem .mr-turn-what { font-size: 10.5px; } .mr-prem .mr-turn-text strong { font-size: 16px; } .mr-prem .mr-turn-logo { width: 38px; height: 38px; } .mr-prem .mr-turn-act { padding: 5px 9px; letter-spacing: .12em; font-size: 10.5px; } }

/* harita eleme → maç geçişi: eski sahne solar, yeni sahne (harita görseli) belirir */
@keyframes mrGhostOut { from { opacity: 1; } to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes mrStageIn { from { opacity: 0; transform: scale(.975); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.mr2-center.is-crossfade { position: relative; }
.mr2-center.is-crossfade > :not(.mr2-ghost) { animation: mrStageIn .6s cubic-bezier(.22, 1, .36, 1) both; }
.mr2-ghost { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; background: var(--bg, transparent); animation: mrGhostOut .5s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .mr2-center.is-crossfade > :not(.mr2-ghost) { animation: none; } .mr2-ghost { display: none; } }

.mr-prem .mr-turn-row { display: flex; align-items: center; gap: 8px; }
.mr-prem .mr-turn-row .mr-turn-act { padding: 2px 8px; border-radius: 6px; font-size: 9.5px; letter-spacing: .16em; }
.mr-prem .mr-turn { gap: 14px; }

/* harita değişince/yeni belirince ekstra kutular (sunucu hazırlanıyor · hata · bağlan/izle) animasyonla girer-çıkar */
@keyframes mrExtraIn { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mrExtraOut { to { opacity: 0; transform: translateY(6px) scale(.985); } }
.mr2-server.is-fade-in { animation: mrExtraIn .5s .1s cubic-bezier(.22, 1, .36, 1) both; }
.mr2-server.is-fade-out { animation: mrExtraOut .2s ease-in both; }
@media (prefers-reduced-motion: reduce) { .mr2-server.is-fade-in, .mr2-server.is-fade-out { animation: none; } }

/* Müsabakalar paneli: yazılar ortalı; hub belirteci durum ile oyun simgesi arasında */
.mx-meta { text-align: center; margin-top: 2px; }
.mx-card.is-soon .mx-top-hub { color: #1a1400; }
.mx-top3 > .mx-game:last-child { justify-self: end; }
/* ekran görüntüsü: "Yükle" düğmeli satır (dosya seç alanı yok) */
.mr-ea-filelbl { cursor: default; justify-content: space-between; flex-wrap: wrap; }
.mr-ea-filelbl:hover { border-color: var(--border-strong); color: inherit; }
.mr-ea-fl-t { flex: 1 1 auto; min-width: 0; }
.mr-ea-chosen { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--white); }
.mr-ea-up { flex: none; }
.mx-card:not(.mx-past) .mx-vs { justify-content: center; gap: 14px; }

/* Admin çağır: üst çubuk düğmesi + açık çağrı şeridi */
.mr2-callbtn { width: auto; gap: 7px; padding: 0 12px; border-radius: 17px; }
.mr2-callbtn-txt { font-size: 12.5px; font-weight: 700; }
.mr2-callbtn[hidden] { display: none; }
.mr2-callbtn.is-open { color: #facc15; border-color: rgb(250 204 21 / .5); opacity: 1; }
.mr2-callbtn:disabled { cursor: default; }
.mr-acall { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 4px 0; border-radius: 16px; border: 1px solid rgb(250 204 21 / .45); background: linear-gradient(90deg, rgb(250 204 21 / .12), rgb(250 204 21 / .03)); }
.mr-acall.is-handling { border-color: rgb(34 197 94 / .45); background: linear-gradient(90deg, rgb(34 197 94 / .12), rgb(34 197 94 / .03)); }
.mr-acall.is-new { animation: mrExtraIn .5s cubic-bezier(.22, 1, .36, 1) both; }
.mr-acall-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgb(250 204 21 / .18); color: #facc15; }
.mr-acall.is-handling .mr-acall-ic { background: rgb(34 197 94 / .18); color: #4ade80; }
.mr-acall-tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mr-acall-tx strong { font-size: 14px; }
.mr-acall-tx span { font-size: 12.5px; color: var(--gray); overflow-wrap: anywhere; }
.mr-acall-act { flex: none; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .mr-acall { flex-wrap: wrap; } .mr2-callbtn-txt { display: none; } .mr2-callbtn { padding: 0; width: 34px; justify-content: center; } }

/* Sonuç bildirme satırı: takım adları kenarlarda, skor kutuları ortada */
.mr-score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; }
.mr-sr-name { min-width: 0; font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-sr-name.side-A { text-align: left; color: var(--mr-a, #3b82f6); }
.mr-sr-name.side-B { text-align: right; color: var(--mr-b, #f43f5e); }
.mr-sr-mid { display: inline-flex; align-items: center; gap: 10px; }
.mr-sr-mid b { color: var(--gray); }
.mr-report-row { flex-wrap: wrap; }
.mr-report-row .mr-score-row { flex: 1 1 100%; }

/* Yönetici Çağır: aşama başlığının sağ ucunda sarı düğme */
.mr-stage-head { display: flex; align-items: center; gap: 10px; }
.mr-callbtn { margin-left: auto; flex: none; padding: 7px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; background: #facc15; color: #1a1400; cursor: pointer; box-shadow: 0 10px 24px -14px rgb(250 204 21 / .9); }
.mr-callbtn:hover:not(:disabled) { filter: brightness(1.08); }
.mr-callbtn.is-used, .mr-callbtn:disabled { background: rgb(250 204 21 / .16); color: #facc15; box-shadow: none; cursor: default; border: 1px solid rgb(250 204 21 / .4); }

/* =====================================================================================================
   Turnuva "Yönetici" sayfası (pages/tournaments/admin.php) — canlı sorunlar (yönetici çağrıları) + maçlar
   ===================================================================================================== */
.tab.tab-admin { color: #facc15; }
.tab.tab-admin:hover { color: #fde047; }
.ta-page { max-width: 1240px; margin: 0 auto; padding: 26px clamp(14px, 3vw, 32px) 60px; }
.ta-title { margin: 0 0 18px; text-align: center; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; }
.ta-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding: 0 2px 12px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.ta-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); border-bottom: 2px solid transparent; }
.ta-nav a:hover { color: var(--white); }
.ta-nav .ta-nav-back { color: var(--white); margin-right: 8px; }
.ta-nav .ta-nav-item.is-on { color: #facc15; border-bottom-color: #facc15; }
.ta-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; background: rgb(var(--ink-rgb) / .07); color: var(--white); cursor: pointer; }
.ta-chip:hover { background: rgb(var(--ink-rgb) / .12); }
.ta-chip.is-on { background: rgb(250 204 21 / .16); color: #facc15; box-shadow: inset 0 0 0 1px rgb(250 204 21 / .45); }
.ta-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.ta-field { display: grid; gap: 8px; font-size: 13.5px; font-weight: 700; }
.ta-field select, .ta-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg, rgb(var(--ink-rgb) / .05)); color: var(--white); font: inherit; font-size: 14px; font-weight: 500; }
.ta-list { display: grid; gap: 16px; }
.ta-empty { padding: 26px; text-align: center; color: var(--gray); font-size: 14px; border: 1px dashed var(--border); border-radius: 16px; }
.ta-card { border: 1px solid var(--border); border-radius: 16px; background: var(--panel); padding: 16px 20px 18px; }
.ta-card[hidden] { display: none; }
.ta-card-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 28px; }
.ta-who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray); }
.ta-who b { color: var(--white); font-weight: 700; }
.ta-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gray); }
.ta-who.is-resolved .ta-dot { background: var(--gray); border-color: var(--gray); box-shadow: none; }
.ta-who.is-handling .ta-dot { background: #facc15; border-color: #facc15; }
.ta-who.is-open .ta-dot { border-color: #f87171; }
.ta-meta { font-size: 12px; color: var(--gray); }
.ta-toggle { margin-left: auto; border: 0; background: transparent; color: #facc15; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ta-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.ta-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 0 6px; }
.ta-team { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; font-weight: 700; }
.ta-team.is-a { justify-content: flex-end; text-align: right; }
.ta-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-team img, .ta-team-l { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: rgb(var(--ink-rgb) / .1); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.ta-mid { display: grid; justify-items: center; gap: 3px; min-width: 130px; text-align: center; }
.ta-mid small { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: var(--gray); }
.ta-date { font-size: 12px; color: var(--gray); }
.ta-score { font-size: 24px; font-weight: 800; }
.ta-details { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border); display: grid; gap: 18px; }
.ta-details[hidden] { display: none; }
.ta-reason { margin: 0; font-size: 13.5px; }
.ta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.ta-spacer { flex: 1; }
.ta-link { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; color: var(--gray); cursor: pointer; }
.ta-link:hover { color: var(--white); }
.ta-btn { padding: 8px 16px; border: 1px solid var(--border-strong); border-radius: 10px; background: transparent; color: var(--white); font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.ta-btn:hover:not(:disabled) { background: rgb(var(--ink-rgb) / .08); }
.ta-btn.is-gold { background: #facc15; border-color: #facc15; color: #1a1400; }
.ta-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ta-roster h4, .ta-log h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ta-log h4 small { font-weight: 500; color: var(--gray); text-transform: none; letter-spacing: 0; }
.ta-player { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: inherit; }
.ta-player:hover { background: rgb(var(--ink-rgb) / .06); }
.ta-player img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.ta-player b { font-size: 13.5px; }
.ta-player small { margin-left: auto; font-size: 11px; color: var(--gray); }
.ta-log-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; padding: 4px 0; font-size: 12px; border-bottom: 1px solid var(--border); }
.ta-log-row time { color: var(--gray); font-variant-numeric: tabular-nums; }
.ta-log-row em { font-style: normal; color: var(--gray); }
.ta-mrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: inherit; }
.ta-mrow:hover { border-color: var(--border-strong); }
.ta-mrow-when { font-size: 12px; color: var(--gray); font-variant-numeric: tabular-nums; }
.ta-mrow-teams { font-weight: 700; font-size: 14px; }
.ta-mrow-teams b { margin: 0 8px; }
.ta-mrow-st { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--gray); }
.ta-mrow-call { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgb(250 204 21 / .16); color: #facc15; }
@media (max-width: 760px) {
    .ta-fields, .ta-cols { grid-template-columns: minmax(0, 1fr); }
    .ta-match { grid-template-columns: 1fr; justify-items: center; gap: 10px; }
    .ta-team.is-a { flex-direction: row-reverse; justify-content: center; }
    .ta-mrow { grid-template-columns: 1fr; gap: 4px; }
}

/* Gömülü maç odası (turnuva Yönetici sayfasındaki iframe'ler): ?embed=admin|log|chat — sayfa iskeleti gizlenir */
html.mr-embed header, html.mr-embed .side-rail, html.mr-embed footer, html.mr-embed .mr-back, html.mr-embed #toast-container ~ .rail-fly { display: none !important; }
html.mr-embed body.has-rail .page-main, html.mr-embed body.has-rail footer { margin-left: 0 !important; }
html.mr-embed body { background: var(--bg, transparent); min-height: 0; }
html.mr-embed .mr2-page { padding: 0 !important; }
html.mr-embed-admin .mr2-page, html.mr-embed-log .mr2-page { display: none; }
.mr-embed-panel { padding: 14px; }
.mr-embed-panel .gear { position: static; display: block; }
.mr-embed-panel .gear-menu { position: static; display: flex; flex-direction: column; width: 100%; max-width: none; box-shadow: none; opacity: 1; transform: none; visibility: visible; }
.mr-embed-panel .gear-menu[hidden] { display: none; }
.mr-embed-note { padding: 24px; text-align: center; color: var(--gray); }
.admin-support-embed { height: calc(100vh - 170px); min-height: 480px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.admin-support-embed iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--panel-solid, #10131c); }
html.mr-embed-chat .mr2-layout { display: block; }
html.mr-embed-chat .mr2-chat { position: static; display: flex; flex-direction: row; align-items: stretch; gap: 12px; width: 100%; height: 100vh; max-height: none; min-height: 0; border: 0; border-radius: 0; padding: 8px; }
html.mr-embed-chat .mr2-chat .rc-boxhead { display: none; }
html.mr-embed-chat .mr2-chat .rc-card { flex: 1 1 0; min-width: 0; height: 100%; max-height: none; }
html.mr-embed-chat #matchRoom { display: none; }

/* --- Yönetici sayfası v2: bağlantılar, aksiyon/log çubuğu, kadro + oda sohbeti, modal --- */
.ta-field .custom-select { width: 100%; }
.ta-field .custom-select-trigger { padding: 12px 14px; }
a.ta-team { color: inherit; }
a.ta-team:hover .ta-team-name { text-decoration: underline; text-underline-offset: 4px; }
a.ta-mid { color: inherit; text-decoration: none; }
a.ta-mid:hover .ta-score { color: #facc15; }
.ta-user { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.ta-user img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ta-user:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ta-meta a:hover, .ta-ticket-txt a:hover, .ta-roster h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ta-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.ta-bar-c { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.ta-link.is-off { opacity: .5; cursor: default; }
.ta-ticket { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgb(250 204 21 / .07); border: 1px solid rgb(250 204 21 / .25); }
.ta-ticket-txt { flex: 1; min-width: 0; font-size: 13px; }
.ta-body { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ta-rosters { display: grid; gap: 16px; }
.ta-player { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; }
.ta-player-main { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.ta-player-nick { font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-player-badges { display: inline-flex; align-items: center; gap: 3px; }
.ta-player-badges:empty { display: none; }
.ta-player-main:hover .ta-player-nick { text-decoration: underline; text-underline-offset: 3px; }
.ta-chat { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: rgb(var(--ink-rgb) / .02); height: 100%; min-height: 360px; }
.ta-chat-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.ta-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgb(3 5 10 / .6); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.ta-modal.is-open { opacity: 1; }
.ta-modal-box { width: min(960px, 100%); height: min(760px, 88vh); display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: 22px; background: var(--panel-solid, #10131c); box-shadow: 0 40px 90px -30px rgb(0 0 0 / .9); overflow: hidden; transform: scale(.97); transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.ta-modal.is-open .ta-modal-box { transform: none; }
.ta-modal-box.is-narrow { width: min(680px, 100%); height: min(700px, 88vh); }
.ta-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; }
.ta-modal-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(var(--ink-rgb) / .08); color: var(--white); font-size: 20px; line-height: 1; cursor: pointer; }
.ta-modal-x:hover { background: rgb(var(--ink-rgb) / .16); }
.ta-modal-body { position: relative; flex: 1; min-height: 0; }
.ta-modal-frame { width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .25s ease; }
.ta-modal-frame.is-ready { opacity: 1; }
.ta-modal-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gray); margin: 0; }
@media (max-width: 860px) { .ta-body { grid-template-columns: minmax(0, 1fr); } .ta-bar { grid-template-columns: 1fr; justify-items: center; } }
/* gömülü yönetici işlemleri paneli: düz koyu zemin, açık ve düzenli liste */
html.mr-embed, html.mr-embed body { background: var(--panel-solid, #10131c) !important; }
html.mr-embed body::before, html.mr-embed body::after, html.mr-embed .bg-particles, html.mr-embed canvas { display: none !important; }
.mr-embed-panel .gear-btn { display: none !important; }
.mr-embed-panel .gear-menu { display: block; position: static !important; min-width: 0; max-width: none; width: 100%; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.mr-embed-panel .gear-menu[hidden] { display: none; }
.mr-embed-panel .gear-item { padding: 12px 12px; }
.mr-embed-panel .gear-menu-title { padding: 4px 10px 10px; }
html.mr-embed .ambient-bg, html.mr-embed .dm-widget, html.mr-embed .rail-fly, html.mr-embed .spotlight-overlay, html.mr-embed .mx-panel, html.mr-embed .ma-wrap, html.mr-embed #dmWidget { display: none !important; }

.ta-loading { padding: 30px; text-align: center; color: var(--gray); }
.ta-page { padding-top: 6px; }
.ta-nav button.ta-nav-item { border: 0; background: transparent; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; }
.ta-nav button.ta-nav-item, .ta-nav a.ta-nav-item { display: inline-flex; align-items: center; padding: 8px 2px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.ta-nav .ta-nav-item.is-on { color: #facc15; border-bottom-color: #facc15; }
.ta-pane[hidden] { display: none; }
.ta-score.is-phase { font-size: 17px; letter-spacing: .01em; }
.ta-ticket { justify-content: flex-end; }

.ta-page { max-width: none; padding: 6px 0 40px; margin: 0; }

/* Sohbet mesajı emoji tepkileri (js/core/reactions.js): maç odası sohbeti + DM */
.es-reacts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.es-react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: rgb(var(--ink-rgb) / .05); color: var(--white); font: inherit; font-size: 12px; cursor: pointer; }
.es-react:hover:not(:disabled) { background: rgb(var(--ink-rgb) / .12); }
.es-react.is-mine { border-color: rgb(250 204 21 / .6); background: rgb(250 204 21 / .14); }
.es-react:disabled { cursor: default; opacity: .8; }
.es-react-e { font-size: 13px; line-height: 1; }
.es-react-c { font-weight: 700; font-variant-numeric: tabular-nums; }
.es-react-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gray); cursor: pointer; }
.es-react-add:hover { background: var(--hover-bg); color: var(--white); }
.dm-msg-actions .es-react-add { width: 22px; height: 22px; }
.es-react-pop { position: fixed; z-index: 9800; display: flex; gap: 2px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--option-bg, #14171f); box-shadow: 0 16px 36px rgb(0 0 0 / .5); }
.es-react-opt { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; font-size: 17px; cursor: pointer; }
.es-react-opt:hover { background: rgb(var(--ink-rgb) / .12); }
.mr-callslot:empty { display: none; }
.mr-callslot { margin-bottom: 12px; }
.ta-ticket { background: none; border: 0; padding: 0; }

/* Yönetici işlemleri: normal açılır menüde açıklama/grup başlığı gizli; Yönetici sekmesindeki gömülü görünümde (premium) gösterilir */
.gear-desc, .gear-group { display: none; }
.mr-embed-panel { padding: 18px 18px 22px; }
.mr-embed-panel .gear-menu-title { display: none; }
.mr-embed-panel .gear-group { display: block; padding: 14px 6px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #facc15; }
.mr-embed-panel .gear-group:first-of-type { padding-top: 0; }
.mr-embed-panel .gear-sep { display: none; }
.mr-embed-panel .gear-menu { display: block; }
.mr-embed-panel .gear-item { align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015)); text-align: left; transition: border-color .2s ease, background .2s ease; }
.mr-embed-panel .gear-item:hover:not(:disabled) { border-color: var(--border-strong); background: rgb(255 255 255 / .07); }
.mr-embed-panel .gear-item svg { flex: none; box-sizing: content-box; width: 17px; height: 17px; padding: 10px; border-radius: 12px; background: rgb(var(--ink-rgb) / .08); color: var(--white); }
.mr-embed-panel .gear-item.is-danger { border-color: rgb(239 68 68 / .3); background: linear-gradient(180deg, rgb(239 68 68 / .09), rgb(239 68 68 / .02)); }
.mr-embed-panel .gear-item.is-danger svg { background: rgb(239 68 68 / .15); color: #ff8a93; }
.mr-embed-panel .gear-item.is-disabled { opacity: .42; }
.mr-embed-panel .gear-tx { display: grid; gap: 2px; min-width: 0; font-size: 14px; font-weight: 700; }
.mr-embed-panel .gear-desc { display: block; font-size: 12px; font-weight: 500; color: var(--gray); line-height: 1.35; }
/* gömülü Matchroom Log: modalın gövdesinde düz zaman çizelgesi */
html.mr-embed-log body { padding: 0; }
.mr-loglist.is-embed { padding: 18px 20px 24px; max-height: none; overflow: visible; }

/* Maç odası sohbeti: daha sıkı yazı ve mesaj aralığı */
.rc-list { gap: 4px; padding: 8px 12px; }
.rc-msg { gap: 8px; padding: 2px 0; }
.rc-av { width: 28px; height: 28px; margin-top: 1px; }
.rc-meta { gap: 6px; }
.rc-text { font-size: 13px; line-height: 1.38; }
.rc-time { font-size: 11px; }
.es-reacts { margin-top: 3px; }
/* Yönetici Çağır düğmesi iki durumda da aynı genişlikte (büyümez) */
.mr-callbtn { min-width: 152px; text-align: center; white-space: nowrap; }
/* Yönetici sekmesi kartı: sol durum · TAM ORTADA oluşturan + tarih · sağ ayrıntı düğmesi */
.ta-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }
.ta-card-top .ta-who { justify-self: start; }
.ta-card-top .ta-meta { justify-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gray); text-align: center; flex-wrap: wrap; justify-content: center; }
.ta-card-top .ta-meta .ta-user b { color: var(--white); font-weight: 700; }
.ta-card-top .ta-toggle { justify-self: end; margin-left: 0; }
@media (max-width: 760px) { .ta-card-top { grid-template-columns: 1fr; justify-items: center; gap: 6px; } .ta-card-top .ta-who, .ta-card-top .ta-toggle { justify-self: center; } }
/* kadro: rozetler ölçülü ve isimle aynı satırda; isim altı çizgisi yok */
.ta-player { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.ta-player-main { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none !important; }
.ta-player-main *, .ta-player-nick, .ta-player-nick * { text-decoration: none !important; }
.ta-player-nick { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.ta-player-nick > .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-player-nick svg, .ta-player-nick img, .ta-player-nick .prem-badge { height: 16px !important; width: auto !important; max-width: 20px; flex: none; }
.ta-player-badges { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.ta-player-badges svg, .ta-player-badges img { height: 16px !important; width: auto !important; max-width: 20px; }
.ta-player > small { margin-left: auto; flex: none; font-size: 11px; color: var(--gray); }
.ta-player-main:hover .ta-player-nick { text-decoration: none; }

/* Yönetici sekmesi: açık çağrı rozetleri + yeni gelen kartın vurgusu */
.ta-tabbadge, .ta-navbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0; }
.ta-card.is-new { animation: taNew 4s ease-out; }
@keyframes taNew { 0% { box-shadow: 0 0 0 2px rgb(250 204 21 / .9), 0 0 30px -4px rgb(250 204 21 / .7); } 100% { box-shadow: 0 0 0 0 rgb(250 204 21 / 0); } }
.ta-ticket-slot:empty { display: none; }
.ta-ticket-slot .ta-ticket { justify-content: flex-end; }

/* Sohbetlerde (maç odası + DM) nick'in yanındaki rozet çok büyük durmasın */
.rc-meta .prem-badge img, .dm-msg-meta .prem-badge img { width: auto; height: 15px; max-height: none; }

/* =====================================================================================================
   "Maç Sonucu Raporla" kartı (VALORANT/CS2 skor formu + EA FC bildirimi) — geniş skor tahtası, −/+ ile kolay giriş
   ===================================================================================================== */
.mr-rep { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 14px 0 0; padding: 16px 14px 16px; border-radius: 22px; text-align: left; isolation: isolate;
    border: 1px solid transparent; background: linear-gradient(var(--panel-solid, #0d0d10), var(--panel-solid, #0d0d10)) padding-box, linear-gradient(140deg, rgb(var(--accent-rgb) / .55), rgb(var(--ink-rgb) / .08) 40%, rgb(var(--accent-rgb) / .3)) border-box; box-shadow: 0 22px 46px -28px rgb(0 0 0 / .9); }
.mr-rep::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(80% 60% at 0% 0%, rgb(var(--accent-rgb) / .09), transparent 60%); pointer-events: none; }
.mr-rep-head { display: flex; align-items: center; gap: 12px; }
.mr-rep-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / .13); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .3); }
.mr-rep-ic svg { width: 18px; height: 18px; }
.mr-rep-tx { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex-wrap: wrap; }
.mr-rep-tx strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.mr-rep-tx small { font-size: 12.5px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* her harita bir geniş "skor tahtası": solda takım A, ortada ayraç, sağda takım B */
.mr-rep .mr-report-row { display: grid; gap: 10px; padding: 0; border: 0; background: none; }
.mr-rep .mr-report-row[hidden] { display: none; }
.mr-rep .mr-report-row:not([hidden]) { animation: mrRepIn .35s cubic-bezier(.22, 1, .36, 1) both; }
.mr-rep .mr-report-map { justify-self: start; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: var(--gray); }
.mr-rep-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.mr-rc-sep { align-self: center; font-size: 22px; font-weight: 700; color: var(--gray); }
.mr-rc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 8px 16px; border-radius: 18px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .045); overflow: hidden; }
.mr-rc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--side, var(--gray)); opacity: .9; }
.mr-rc-head { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; max-width: 100%; }
.mr-rc-logo { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--side, var(--gray)); }
.mr-rc-logo img { width: 100%; height: 100%; object-fit: cover; }
.mr-rc-name { min-width: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-rc.side-A .mr-rc-name { color: var(--mr-a, #3b82f6); }
.mr-rc.side-B .mr-rc-name { color: var(--mr-b, #f43f5e); }
.mr-rc-step { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.mr-rc-btn { width: 34px; height: 34px; flex: none; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--field-bg); color: var(--white); font: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.mr-rc-btn:hover { background: var(--hover-bg); border-color: rgb(var(--accent-rgb)); }
.mr-rc-btn:active { transform: scale(.92); }
.mr-rep .mr-rc .mr-num { width: 68px; min-width: 0; padding: 7px 2px; font-size: 1.9rem; font-weight: 800; line-height: 1.1; border-radius: 16px; border-width: 1.5px; transition: border-color .2s ease, box-shadow .2s ease; }
.mr-rep .mr-num:focus, .mr-rep .mr-num:focus-visible { border-color: rgb(var(--accent-rgb)); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .16); }

/* özet: durum satırı */
.mr-rep .mr-report-sum { margin: 0; padding: 10px 14px; border-radius: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--gray); background: rgb(var(--ink-rgb) / .04); border: 1px dashed var(--border-strong); }
.mr-rep .mr-report-sum.is-ok { color: #4ade80; background: rgb(34 197 94 / .10); border: 1px solid rgb(34 197 94 / .4); }

/* gönder düğmesi: kutular boşken gizli, yazılınca belirir; kartın tam genişliğinde */
.mr-rep-go { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 22px; border-radius: 16px; font-size: 15px; font-weight: 800; box-shadow: 0 16px 30px -18px rgb(var(--accent-rgb) / .9); animation: mrRepIn .3s cubic-bezier(.22, 1, .36, 1) both; }
.mr-rep-go svg { width: 17px; height: 17px; }
.mr-rep-go[hidden] { display: none; }
.mr-rep-go:disabled { opacity: .45; box-shadow: none; }

/* EA FC: ekran görüntüsü satırı, önizleme, uyarılar kartın içinde */
.mr-rep .mr-ea-filelbl { border-radius: 14px; padding: 12px 16px; font-size: 13px; background: rgb(var(--ink-rgb) / .03); }
.mr-rep .mr-ea-thumb { align-self: flex-start; cursor: zoom-in; }
.mr-rep .mr-ea-thumb img { max-height: 110px; border-radius: 12px; }
.mr-rep .mr-sub-title, .mr-rep .mr-muted, .mr-rep .mr-warn { margin: 0; font-size: 12.5px; }

@keyframes mrRepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mr-rep .mr-report-row:not([hidden]), .mr-rep-go { animation: none; } }
@media (max-width: 560px) {
    .mr-rep { padding: 14px 12px 16px; border-radius: 18px; }
    .mr-rep-board { gap: 8px; }
    .mr-rc { padding: 12px 8px 14px; gap: 10px; }
    .mr-rc-name { font-size: 13px; }
    .mr-rc-logo { width: 28px; height: 28px; }
    .mr-rc-btn { width: 34px; height: 34px; font-size: 19px; }
    .mr-rep .mr-rc .mr-num { width: 56px; font-size: 1.6rem; }
    .mr-rc-step { gap: 6px; }
    .mr-rc-sep { font-size: 20px; }
}

/* Müsabakalar > Geçmiş kartı, Yaklaşan kartla aynı düzende (skor "vs" yerinde, sonuç hapı altta) */
.mx-card.mx-past .mx-vs { justify-content: center; gap: 14px; }
.mx-resrow { display: flex; justify-content: center; }
.mx-card.is-won { border-color: rgb(34 197 94 / .4); }
.mx-card.is-lost { border-color: rgb(239 68 68 / .35); }

/* Yönetici sekmesi: talebi açanı öne çıkar, tarih|saat ayracı, İlgileniyorum/Çözüldü "Müsabaka Odası"nın altında */
.ta-card-top .ta-meta .ta-user { padding: 3px 11px 3px 4px; border-radius: 999px; background: rgb(250 204 21 / .14); box-shadow: inset 0 0 0 1px rgb(250 204 21 / .5); transition: background .2s ease; }
.ta-card-top .ta-meta .ta-user:hover { background: rgb(250 204 21 / .22); }
.ta-card-top .ta-meta .ta-user b { color: #fde047; font-weight: 800; }
.ta-card-top .ta-meta .ta-user img { box-shadow: 0 0 0 2px rgb(250 204 21 / .6); }
.ta-dsep { display: inline-block; width: 1px; height: 11px; margin: 0 8px; vertical-align: -1px; background: var(--border-strong, rgb(var(--ink-rgb) / .3)); }
.ta-bar-c { flex-direction: column; gap: 10px; }
.ta-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; }
.ta-bar-c .ta-ticket-slot { display: flex; justify-content: center; }
.ta-bar-c .ta-ticket-slot .ta-ticket { justify-content: center; }
.ta-bar-c { flex-wrap: nowrap; }
.ta-bar-c .ta-ticket-slot:empty { display: none; }

/* Duyuru / gönderi yazma kutusu: emoji + GIF seçici açılır panelleri (js/features/feed.js) */
.fd-tools-host { position: relative; }
.fd-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--option-bg); box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .6); animation: esFadeInUp .25s ease both; }
.fd-pop[hidden] { display: none; }
.fd-pop.fd-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 2px; max-height: 200px; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.fd-pop.fd-gif { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.fd-pop.fd-gif input[type="search"] { width: 100%; padding: .5rem .8rem; font-size: .85rem; border-radius: .8rem; }
.ann-composer .ann-composer-actions { flex-wrap: wrap; justify-content: flex-end; }
.fd-pop[hidden], .fd-pop.fd-emoji[hidden], .fd-pop.fd-gif[hidden] { display: none !important; }

/* Site yöneticisi: hub üyesini çıkar düğmesi (üyeler paneli + üyeler penceresi) */
.hub-mrow { display: flex; align-items: center; gap: 6px; }
.hub-mrow > .my-team-member { flex: 1; min-width: 0; }
.hub-kick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 0; border-radius: 50%; background: rgb(239 68 68 / .12); color: #f87171; font-size: 15px; line-height: 1; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.hub-kick:hover { background: rgb(239 68 68 / .3); transform: scale(1.1); }
/* Yönetici sekmesi: kadro listesinde talebi açan oyuncu sarı vurgulanır */
.ta-player.is-caller { border-radius: 12px; background: rgb(250 204 21 / .14); box-shadow: inset 0 0 0 1px rgb(250 204 21 / .5); }
.ta-player.is-caller .ta-player-main img { box-shadow: 0 0 0 2px rgb(250 204 21 / .6); }

/* =====================================================================================================
   "Maç Sonucu Raporla" düğmesi (harita görseli ile harita şeridi arası) + geniş rapor penceresi
   ===================================================================================================== */
.mr-rep-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22, 1, .36, 1); }
.mr-rep-slot.is-open { grid-template-rows: 1fr; }
.mr-rep-slot-w { min-height: 0; overflow: hidden; }
.mr-rep-slot-in { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; opacity: 0; transform: translateY(-8px) scale(.97); transition: opacity .45s ease .12s, transform .5s cubic-bezier(.22, 1, .36, 1) .12s; }
.mr-rep-slot.is-open .mr-rep-slot-in { opacity: 1; transform: none; }
.mr-rep-open { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 13px 22px; border-radius: 16px; font-size: 15px; font-weight: 800; box-shadow: 0 16px 30px -18px rgb(var(--accent-rgb) / .9); }
.mr-rep-hint { font-size: 12px; color: var(--gray); text-align: center; }
.mr-rep-hint.is-warn { color: #fbbf24; }
@media (prefers-reduced-motion: reduce) { .mr-rep-slot, .mr-rep-slot-in { transition: none; } }

.mr-rmodal { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgb(3 5 10 / .66); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; }
.mr-rmodal.is-in { opacity: 1; }
.mr-rmodal-box { width: min(880px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; border-radius: 26px; border: 1px solid var(--border-strong); background: var(--panel-solid, #0d0d10); box-shadow: 0 40px 90px -24px rgb(0 0 0 / .9); transform: translateY(14px) scale(.97); transition: transform .3s cubic-bezier(.22, 1, .36, 1); overflow: hidden; }
.mr-rmodal.is-in .mr-rmodal-box { transform: none; }
.mr-rmodal-head { display: flex; align-items: center; gap: 14px; padding: 20px 26px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgb(var(--accent-rgb) / .08), transparent); }
.mr-rmodal-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mr-rmodal-tx strong { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.mr-rmodal-tx small { font-size: 13px; color: var(--gray); }
.mr-rmodal-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(var(--ink-rgb) / .08); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s ease; }
.mr-rmodal-x:hover { background: rgb(var(--ink-rgb) / .16); }
.mr-rmodal-body { padding: 26px; overflow-y: auto; }
/* pencerede kart görünümü yok: içerik doğrudan geniş ve iri */
.mr-rmodal .mr-rep { border: 0; background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0; gap: 18px; }
.mr-rmodal .mr-rep::before { display: none; }
.mr-rmodal .mr-rep-board { gap: 18px; }
.mr-rmodal .mr-rc { padding: 24px 18px 26px; gap: 18px; border-radius: 22px; }
.mr-rmodal .mr-rc-logo { width: 46px; height: 46px; font-size: 18px; }
.mr-rmodal .mr-rc-name { font-size: 19px; }
.mr-rmodal .mr-rc-btn { width: 46px; height: 46px; font-size: 26px; }
.mr-rmodal .mr-rep .mr-rc .mr-num { width: 118px; padding: 10px 4px; font-size: 3rem; border-radius: 20px; }
.mr-rmodal .mr-rc-step { gap: 14px; }
.mr-rmodal .mr-rc-sep { font-size: 34px; }
.mr-rmodal .mr-rep-go { padding: 16px 24px; font-size: 16px; }

/* ekran görüntüsü alanı */
.mr-shot { display: grid; gap: 12px; }
.mr-shot-pick { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border: 1.5px dashed var(--border-strong); border-radius: 18px; background: rgb(var(--ink-rgb) / .03); color: var(--white); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.mr-shot-pick:hover { border-color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / .06); }
.mr-shot.is-set .mr-shot-pick { border-style: solid; border-color: rgb(34 197 94 / .5); }
.mr-shot-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--accent-rgb)); background: rgb(var(--accent-rgb) / .13); }
.mr-shot-tx { display: grid; gap: 2px; min-width: 0; }
.mr-shot-tx b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-shot-tx small { font-size: 12.5px; color: var(--gray); }
.mr-shot-prev { justify-self: start; cursor: zoom-in; }
.mr-shot-prev[hidden] { display: none; }
.mr-shot-prev img { display: block; max-height: 170px; max-width: 100%; border-radius: 14px; border: 1px solid var(--border); }
@media (max-width: 560px) {
    .mr-rmodal { padding: 10px; align-items: flex-end; }
    .mr-rmodal-body { padding: 16px; }
    .mr-rmodal-head { padding: 14px 16px; }
    .mr-rmodal .mr-rc { padding: 16px 8px 18px; }
    .mr-rmodal .mr-rep .mr-rc .mr-num { width: 66px; font-size: 1.9rem; }
    .mr-rmodal .mr-rc-btn { width: 36px; height: 36px; }
    .mr-rmodal .mr-rc-name { font-size: 14px; }
    .mr-rmodal .mr-rc-logo { width: 32px; height: 32px; }
}
/* Yönetici sekmesi: sistem çağrısı */
.ta-user.ta-sys { padding: 3px 11px; border-radius: 999px; background: rgb(250 204 21 / .14); box-shadow: inset 0 0 0 1px rgb(250 204 21 / .5); }
.ta-user.ta-sys b { color: #fde047; font-weight: 800; }
.ta-sys-why { font-style: normal; color: #fbbf24; font-size: 12px; }
.mr-rc-step .mr-num { flex: none; }
@media (max-width: 560px) {
    .mr-rmodal .mr-rep .mr-rc .mr-num { width: 54px; font-size: 1.7rem; }
    .mr-rmodal .mr-rc-btn { width: 30px; height: 30px; font-size: 20px; }
    .mr-rmodal .mr-rc-step { gap: 6px; }
}
/* Takım/hub üye listelerinde premium rozeti diğer rozetlerle aynı boyda */
.my-team-member .prem-badge img, .settings-card .bdg-inline .prem-badge img { width: auto; height: 16px; max-height: none; }

/* =====================================================================================================
   TAKIM SAYFASI (pages/teams/view.php) — premium yeniden tasarım: başlık, istatistik şeridi, sekmeler, üye kartları, kadro paneli
   ===================================================================================================== */
.team-page .tp-head { align-items: flex-end; }
.tp-id { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
.tp-logo { flex: none; width: 96px; height: 96px; border-radius: 26px; object-fit: cover; background: var(--chip-blue); border: 2px solid rgb(255 255 255 / .85); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .9), 0 0 0 6px rgb(0 0 0 / .28); }
.tp-logo-fallback { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 32px; }
.tp-id-tx { min-width: 0; padding-bottom: 4px; }
.tp-name { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.tp-name > span { min-width: 0; overflow-wrap: anywhere; }
.tp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #f3f4f6; text-decoration: none; background: rgb(0 0 0 / .4); border: 1px solid rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tp-chip img { width: 15px; height: 15px; object-fit: contain; }
a.tp-chip:hover { border-color: rgb(255 255 255 / .55); }
.tp-chip-tag { letter-spacing: .08em; }
.tp-chip-ok { color: #ddd6fe; border-color: rgb(167 139 250 / .55); background: rgb(124 58 237 / .25); }
.tp-head .tournament-banner-cta .btn { padding: 11px 22px; font-weight: 800; }

/* istatistik şeridi */
.tp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.tp-stat { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); color: inherit; text-decoration: none; }
a.tp-stat { transition: border-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
a.tp-stat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.tp-stat-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fca5b4; background: rgb(129 0 32 / .28); box-shadow: inset 0 0 0 1px rgb(200 30 70 / .35); }
.tp-stat small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.tp-stat strong { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; }
.tp-stat > div { min-width: 0; }
.tp-stat-nm { display: flex !important; align-items: center; gap: 4px; font-size: 15px !important; overflow: hidden; white-space: nowrap; }
.tp-stat-av { width: 42px !important; height: 42px !important; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-strong); }
.tp-stat-owner .av-wrap { width: 42px; height: 42px; }
.tp-stat .bdg-inline { display: inline-flex; align-items: center; gap: 2px; }
.tp-stat .prem-badge img { width: auto; height: 16px; max-height: none; }

/* sekmeler: hap görünümlü */
.tp-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .04); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tp-tabs .tab { padding: 9px 20px; border-radius: 999px; border: 0; font-weight: 700; white-space: nowrap; }
.tp-tabs .tab.active { background: var(--pg-brand, #810020); color: #fff; box-shadow: 0 10px 24px -14px rgb(200 30 70 / .9); }
.tp-tabs .tab::after { display: none; }

/* bölüm başlığı + boş durum */
.tp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tp-sec-head h3 { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.tp-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgb(129 0 32 / .3); color: #fca5b4; box-shadow: inset 0 0 0 1px rgb(200 30 70 / .35); }
.tp-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; border: 1px dashed var(--border-strong); border-radius: 20px; text-align: center; color: var(--gray); }
.tp-empty strong { color: var(--white); font-size: 16px; }
.tp-empty p { margin: 0; font-size: 13.5px; }
.tp-empty-ic { width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; color: #fca5b4; background: rgb(129 0 32 / .25); }

/* üye kartları */
.tp-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.tp-member { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); overflow: hidden; transition: border-color .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.tp-member:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.tp-member::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.tp-member.is-owner { border-color: rgb(250 204 21 / .35); background: linear-gradient(160deg, rgb(250 204 21 / .09), rgb(var(--ink-rgb) / .02)); }
.tp-member.is-owner::before { background: #facc15; }
.tp-member.is-mgr::before { background: #a78bfa; }
.tp-m-av { flex: none; line-height: 0; }
.tp-m-av .av-wrap { width: 54px; height: 54px; }
.tp-m-av .tp-m-img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-strong); }
.tp-m-av .pres-dot { width: 13px; height: 13px; border-width: 2px; }
.tp-m-main { flex: 1; min-width: 0; display: grid; gap: 5px; }
.tp-m-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; font-size: 15px; font-weight: 800; }
.tp-m-name > a { color: var(--white); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.tp-m-name > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-m-name .bdg-inline { display: inline-flex; align-items: center; gap: 2px; }
.tp-m-name .prem-badge img { width: auto; height: 16px; max-height: none; }
.tp-m-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--gray); }
.tp-role { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: rgb(var(--ink-rgb) / .08); color: var(--gray); }
.tp-role.is-owner { background: rgb(250 204 21 / .16); color: #fde047; box-shadow: inset 0 0 0 1px rgb(250 204 21 / .4); }
.tp-role.is-mgr { background: rgb(167 139 250 / .16); color: #c4b5fd; box-shadow: inset 0 0 0 1px rgb(167 139 250 / .4); }
.tp-m-act { flex: 1 1 100%; display: flex; gap: 8px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); }
.tp-act { flex: 1; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: transparent; color: var(--white); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.tp-act:hover { background: rgb(var(--ink-rgb) / .08); }
.tp-act.is-danger { color: #f87171; border-color: rgb(239 68 68 / .4); }
.tp-act.is-danger:hover { background: rgb(239 68 68 / .12); }

/* kadro paneli (sağ) */
.team-page .hub-members-panel { padding: 20px; border-radius: 22px; border: 1px solid var(--border); background: linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); align-self: start; }
.team-page .hub-members-panel h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; color: var(--gray); }
.team-page .my-team-member { padding: 8px 10px; border-radius: 14px; }
.team-page .my-team-member:hover { background: rgb(var(--ink-rgb) / .06); }
.team-page .my-team-member .bdg-inline { display: inline-flex; align-items: center; gap: 2px; }

@media (max-width: 900px) { .tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .tp-id { align-items: center; gap: 14px; }
    .tp-logo { width: 68px; height: 68px; border-radius: 20px; }
    .tp-members { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .tp-stat { padding: 12px; gap: 10px; } .tp-stat-owner { grid-column: 1 / -1; } .tp-tabs { display: flex; } .tp-tabs .tab { padding: 8px 14px; } }

/* Takım sayfasında banner görseli yok: başlık kartı düz zemin (oyun gradyanı inline) + koyu örtü; hub'da banner yüklüyse kapak olarak kalır */
.team-page-banner.is-plain { aspect-ratio: auto; height: 280px; min-height: 0; background-size: auto; }
.tp-desc { margin: 10px 0 0; max-width: 640px; font-size: 13.5px; line-height: 1.5; color: #d1d5db; }
.hub-page .my-team-member .prem-badge img, .team-page .my-team-member .prem-badge img { width: auto; height: 16px; max-height: none; }
@media (max-width: 700px) { .team-page-banner.is-plain { height: auto; min-height: 300px; } }
.hub-page .hub-members-panel { padding: 18px 14px; }
.hub-page .hub-mrow { gap: 2px; }
.hub-page .hub-mrow .hub-kick { margin-left: 0; }
.hub-page .hub-member-list .my-team-member { min-width: 0; padding-right: 4px; }
.hub-page .hub-member-list .my-team-member > small { font-size: 10.5px !important; white-space: nowrap; flex: none; }
.hub-page .hub-member-list .my-team-member > span:nth-of-type(1) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .tp-stat strong { font-size: 15px; } .tp-stat-ic { width: 36px; height: 36px; } }

/* Takım sayfası: banner yok — yalın başlık kartı */
.tp-top { padding: 24px 28px; border-radius: 26px; border: 1px solid var(--border); background: radial-gradient(90% 140% at 0% 0%, rgb(129 0 32 / .22), transparent 60%), linear-gradient(160deg, rgb(var(--ink-rgb) / .06), rgb(var(--ink-rgb) / .02)); }
.tp-head-flat { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.tp-head-flat .tp-id { align-items: center; }
.tp-head-flat .tp-logo { width: 84px; height: 84px; border-radius: 24px; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .9); border-color: var(--border-strong); }
.tp-head-flat .tp-name { color: var(--white); }
.tp-head-flat .tp-chip { background: rgb(var(--ink-rgb) / .07); border-color: var(--border-strong); color: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tp-head-flat .tp-chip-ok { color: #ddd6fe; background: rgb(124 58 237 / .22); border-color: rgb(167 139 250 / .5); }
@media (max-width: 700px) { .tp-top { padding: 18px 16px; border-radius: 22px; } .tp-head-flat .tp-logo { width: 64px; height: 64px; border-radius: 18px; } }

/* sekme geçişi animasyonu */
.tp-tab-in { animation: tpTabIn .38s cubic-bezier(.22, 1, .36, 1) both; }
.tp-tab-out { animation: tpTabOut .16s ease both; }
@keyframes tpTabIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tpTabOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .tp-tab-in, .tp-tab-out { animation: none; } }

/* Hub: bilgi şeridi sol sütunda (3 kutu); üyeler paneli başlığın hemen altından başlar */
.tp-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 26px; }
@media (max-width: 480px) { .tp-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tp-stats-3 .tp-stat { flex-direction: column; align-items: flex-start; } }
/* Üyeler penceresi: satırdaki genel "avatar" görsel kuralı rozet görsellerini bozmasın */
.member-row .prem-badge img { width: auto; height: 16px; max-height: none; border: 0; border-radius: 0; object-fit: contain; }
.member-row .bdg-inline { display: inline-flex; align-items: center; gap: 2px; }

/* Ayarlardaki canlı önizleme iframe'i (gerçek hub/takım sayfası, ?embed=preview) */
.pf-host { position: relative; border-radius: 18px; border: 1px solid var(--border-strong); overflow: hidden; background: var(--bg, #000); }
.pf-frame { display: block; width: 100%; height: 640px; border: 0; pointer-events: none; }
html.es-embed-prev .loader-screen, html.es-embed-prev header, html.es-embed-prev .side-rail, html.es-embed-prev footer, html.es-embed-prev .dm-widget, html.es-embed-prev #toast-container, html.es-embed-prev .ambient, html.es-embed-prev .rail-fly { display: none !important; }
html.es-embed-prev body.has-rail, html.es-embed-prev body.has-rail .page-main { margin-left: 0 !important; padding-left: 0 !important; }
html.es-embed-prev body { min-height: 0 !important; }
html.es-embed-prev .team-page, html.es-embed-prev .hub-page { padding-top: 16px !important; padding-bottom: 8px !important; }
.tp2-block:has(> .pf-host) { grid-column: 1 / -1; }
.pf-scale { position: relative; width: 100%; overflow: hidden; }
.pf-scale .pf-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; }
.profile-social-icon[hidden], .profile-social-row:not(:has(.profile-social-icon:not([hidden]))) { display: none !important; }

/* Ayarlardaki canlı önizleme (?embed=preview): içerik bölümleri gösterilmez, yalnızca başlık kartı (+ bilgi şeridi/sekmeler) kalır */
html.es-embed-prev .team-page #tab-posts { display: none !important; }
html.es-embed-prev .hub-page .hub-layout { grid-template-columns: minmax(0, 1fr); margin-top: 16px !important; }
html.es-embed-prev .hub-page .hub-layout > div > :not(.tp-stats) { display: none !important; }
html.es-embed-prev .hub-page .hub-members-panel, html.es-embed-prev .team-page .hub-members-panel { display: none !important; }
html.es-embed-prev .team-page .hub-layout { grid-template-columns: minmax(0, 1fr); }
html.es-embed-prev .hub-page .tp-stats { margin-bottom: 0; }
/* Akış (gönderi/yorum/duyuru/hareket) kişi adı yanındaki rozetler */
.tl-head .bdg-inline, .tl-comment .bdg-inline, .ann-meta .bdg-inline, .activity-log .bdg-inline { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin-left: 4px; }
.tl-head .prem-badge img, .tl-comment .prem-badge img, .ann-meta .prem-badge img, .activity-log .prem-badge img { width: auto; height: 15px; max-height: none; }
.tl-head { flex-wrap: wrap; }
.ann-meta a.tl-name { color: var(--gray); font-weight: 600; }

/* Çoklu oyun filtresi (Turnuvalar + Takımlar): oyun çipleri, birden fazlası seçilebilir */
.search-bar:has(.game-filter) { max-width: 980px; }
.game-filter { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.gf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--field-bg); color: var(--white); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.gf-chip svg { flex: none; margin-left: 4px; color: var(--gray); }
.gf-chip img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; flex: none; }
.gf-chip:hover { border-color: rgb(var(--accent-rgb) / .7); transform: translateY(-1px); }
.gf-chip.is-active { background: var(--pg-brand, #810020); border-color: rgb(200 30 70 / .8); box-shadow: 0 10px 22px -14px rgb(200 30 70 / .9); }
.gf-chip.is-active svg { color: #fff; }
@media (max-width: 640px) { .gf-chip { font-size: 12px; padding: 6px 12px 6px 6px; } }
/* Oyun hesapları: harici profil düğmesi (Steam profili / Tracker.gg) — yalnızca küçük simge; ad üzerine gelince özel ipucu kutusunda görünür (nick'i kapatmaz) */
.gacc-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgb(var(--ink-rgb) / .06); color: var(--gray); text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.gacc-btn:hover { background: var(--gacc, rgb(var(--accent-rgb))); border-color: var(--gacc, rgb(var(--accent-rgb))); color: #fff; transform: translateY(-1px); }

/* =====================================================================================================
   ÇERÇEVE TASARIMI: header + sol çubuk tek bir "L" yüzey; birleştikleri köşede içerik penceresinin yuvarlak (içbükey) köşesi.
   Üst menü = kayan bordo göstergeli hap "dock"; sağ = tek kapsül (arama · bildirim · mesaj · hesap). Mobilde menü ikinci satırda kaydırılır.
   ===================================================================================================== */
:root { --frame-r: 28px; --frame-bg: rgb(16 18 26 / .5); --frame-blur: blur(26px) saturate(1.5); }

header {
    background: var(--frame-bg);
    -webkit-backdrop-filter: var(--frame-blur);
    backdrop-filter: var(--frame-blur);
    border-bottom: 0;
    padding: 9px 22px 9px 20px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 22px;
}
header.scrolled { background: var(--frame-bg); border-bottom: 0; box-shadow: 0 16px 34px -22px var(--shadow); }
/* alt çizgi: kavisli köşeden (varsa) sonra başlar, çubuk yoksa baştan */
header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-strong); pointer-events: none; }
body.has-rail header::after { left: calc(var(--rail-w, 68px) + var(--frame-r)); }
.logo-img { height: 36px; }

/* sol çubuk: header ile aynı yüzey, sağ çizgi köşeden sonra başlar */
.side-rail { background: var(--frame-bg); -webkit-backdrop-filter: var(--frame-blur); backdrop-filter: var(--frame-blur); border-right: 0; box-shadow: none; }
.side-rail::after { content: ''; position: absolute; top: var(--frame-r); right: 0; bottom: 0; width: 1px; background: var(--border-strong); pointer-events: none; }

/* içbükey köşe: içerik penceresinin sol-üst köşesi yuvarlak; dışarısı çerçeve yüzeyi, kenarı 1px çizgi */
.frame-corner {
    position: fixed; left: var(--rail-w, 68px); top: var(--header-vis, var(--header-h, 64px));
    width: var(--frame-r); height: var(--frame-r); z-index: 95; pointer-events: none;
    background:
        radial-gradient(circle at 100% 100%, transparent calc(var(--frame-r) - 1px), var(--border-strong) calc(var(--frame-r) - 1px), var(--border-strong) var(--frame-r), transparent var(--frame-r)),
        var(--frame-bg);
    -webkit-backdrop-filter: var(--frame-blur); backdrop-filter: var(--frame-blur);
    -webkit-mask: radial-gradient(circle at 100% 100%, transparent calc(var(--frame-r) - 1px), #000 calc(var(--frame-r) - 1px));
            mask: radial-gradient(circle at 100% 100%, transparent calc(var(--frame-r) - 1px), #000 calc(var(--frame-r) - 1px));
}
body:not(.has-rail) .frame-corner { display: none; }
html.mr-embed .frame-corner, html.es-embed-prev .frame-corner { display: none !important; }

/* üst menü: cam hap içinde kayan gösterge */
nav { justify-self: start; }
nav ul {
    position: relative; gap: 2px; padding: 4px; border-radius: 999px;
    background: rgb(255 255 255 / .05); border: 1px solid var(--border);
}
nav ul li a { position: relative; z-index: 1; padding: .48rem 1.1rem; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--gray); letter-spacing: .01em; }
nav ul li a:hover { color: var(--white); background: none; }
nav ul li a.active, nav ul li a.active:hover { color: #fff; }
nav:not(.nav-ind-on) ul li a.active, nav:not(.nav-ind-on) ul li a.active:hover { background: var(--pg-brand); box-shadow: 0 8px 22px -12px rgb(var(--pg-brand-rgb) / .95), inset 0 0 0 1px rgb(255 255 255 / .1); }
nav.nav-ind-on ul li a.active, nav.nav-ind-on ul li a.active:hover { background: none; box-shadow: none; }
nav.nav-ind-on ul li a:hover, nav.nav-ind-on ul li a:focus-visible { color: #fff; }
.nav-ind {
    position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; opacity: 0; border-radius: 999px; pointer-events: none;
    background: linear-gradient(135deg, var(--pg-brand-bright, #a30a33), var(--pg-brand));
    box-shadow: 0 10px 24px -12px rgb(var(--pg-brand-rgb) / .95), inset 0 0 0 1px rgb(255 255 255 / .14);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
nav ul li a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* sağ: tek kapsül */
.nav-buttons {
    gap: 4px; padding: 4px; border-radius: 999px;
    background: rgb(255 255 255 / .05); border: 1px solid var(--border);
}
.nav-buttons .icon-btn { width: 38px; height: 38px; transition: color .2s, background .2s, transform .2s; }
.nav-buttons .icon-btn:hover { transform: none; background: rgb(255 255 255 / .1); }
.nav-buttons .nav-search { width: auto; gap: 9px; padding: 0 8px 0 13px; border-radius: 999px; }
.nav-search-label { font-size: 13px; font-weight: 600; }
.nav-search-kbd {
    font: inherit; font-size: 11px; font-weight: 700; line-height: 1; color: var(--gray); padding: 3px 7px; border-radius: 6px;
    border: 1px solid var(--border-strong); background: rgb(255 255 255 / .05);
}
.nav-buttons .header-divider { height: 22px; margin: 0 3px; }
.nav-buttons .icon-btn-badge { top: 3px; right: 3px; }
.user-menu-trigger { border: 0; background: rgb(255 255 255 / .07); padding: 4px 12px 4px 4px; height: 38px; border-radius: 999px; transition: background .2s, box-shadow .2s; }
.user-menu-trigger:hover, .user-menu.open .user-menu-trigger { background: rgb(var(--pg-brand-rgb) / .35); box-shadow: inset 0 0 0 1px rgb(var(--pg-brand-rgb) / .8); border-color: transparent; }
.user-menu-avatar { width: 30px; height: 30px; }
.nav-buttons .btn { border-radius: 999px; padding: .5rem 1.15rem; font-size: 13px; }

@media (max-width: 1180px) { .nav-search-label, .nav-search-kbd { display: none; } .nav-buttons .nav-search { width: 38px; padding: 0; } }
@media (max-width: 900px) { .frame-corner { display: none; } body.has-rail header::after { left: 0; } }
/* mobil: menü ikinci satırda, yatay kaydırılır (eskiden gizliydi) */
@media (max-width: 768px) {
    header { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding: 8px 12px 10px; }
    nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; overflow-x: auto; scrollbar-width: none; }
    nav::-webkit-scrollbar { display: none; }
    nav ul { display: flex; width: max-content; min-width: 100%; }
    nav ul li a { padding: .44rem .95rem; font-size: .88rem; }
    .nav-buttons { justify-self: end; }
    .logo-img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .nav-ind { transition: opacity .2s ease; } }
@media (max-width: 520px) {
    .user-menu-trigger { padding: 4px; width: 38px; justify-content: center; gap: 0; }
    .user-menu-trigger > span, .user-menu-trigger > svg { display: none; }
    .nav-buttons { gap: 2px; }
    .nav-buttons .btn { padding: .45rem .8rem; font-size: 12px; }
    .logo { min-width: max-content; }
    header { column-gap: 10px; }
}
.user-menu-dropdown { top: 54px; }
header .notif-panel { top: calc(100% + 4px); }

/* =====================================================================================================
   HEADER KAYDIRMA DAVRANIŞI · MÜSABAKALAR (üst menüde) · HESAP MENÜSÜ v2
   ===================================================================================================== */
/* header'ın görünen yüksekliği (gizliyken 0): sol çubuk, köşe ve yapışkan kutular bunu izler; değişince animasyonla kayar */
@property --header-vis { syntax: '<length>'; inherits: true; initial-value: 64px; }
html { --header-vis: var(--header-h, 64px); transition: --header-vis .38s cubic-bezier(.22, 1, .36, 1); }
html.hdr-hidden { --header-vis: 0px; }
header { transition: transform .38s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, box-shadow .3s ease; will-change: transform; }
html.hdr-hidden header { transform: translateY(-101%); box-shadow: none; }
html.hdr-hidden header .notif-panel { display: none; }

/* sol çubuk artık ekranın en üstünden başlar; header onun ÜSTÜNDE durur (üstteki header bölgesi maskelenir: iki cam üst üste binip koyulaşmasın) */
.side-rail {
    top: 0;
    -webkit-mask: linear-gradient(to bottom, transparent 0, transparent var(--header-vis, 64px), #000 var(--header-vis, 64px));
            mask: linear-gradient(to bottom, transparent 0, transparent var(--header-vis, 64px), #000 var(--header-vis, 64px));
}
.rail-scroll { padding-top: calc(var(--header-vis, 64px) + 14px); }
.side-rail::after { top: calc(var(--header-vis, 64px) + var(--frame-r)); }
.frame-corner { top: var(--header-vis, 64px); }
@media (max-width: 900px) { .frame-corner { display: none; } }

/* Müsabakalar: üst menüde 5. öğe */
nav ul li.nav-matches-li { display: flex; }
.nav-matches {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: .48rem 1.05rem .48rem .8rem; border: 0; border-radius: 999px; background: none; font: inherit; font-size: .92rem; font-weight: 600; letter-spacing: .01em;
    color: #fff; transition: color .2s ease;
}
.nav-matches .nm-vs { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: linear-gradient(135deg, #a30a33, var(--pg-brand, #810020)); color: #fff; transition: background .4s ease, color .3s ease, box-shadow .3s ease; }
.nav-matches .nm-dot { position: absolute; top: 7px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 2px rgb(16 18 26 / .9); opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s ease; }
.nav-matches.is-idle { color: var(--gray); }
.nav-matches.is-idle .nm-vs { background: rgb(255 255 255 / .08); color: var(--gray); box-shadow: inset 0 0 0 1px var(--border); }
.nav-matches:hover, .nav-matches[aria-expanded="true"] { color: #fff; }
.nav-matches.is-idle:hover .nm-vs, .nav-matches.is-idle[aria-expanded="true"] .nm-vs { background: rgb(255 255 255 / .18); color: #fff; }
.nav-matches.is-blink .nm-dot { opacity: 1; transform: scale(1); animation: nmPulse 1.1s ease-in-out infinite; }
.nav-matches.is-blink .nm-vs { box-shadow: 0 0 14px rgb(255 77 109 / .55); }
@keyframes nmPulse { 0%, 100% { box-shadow: 0 0 0 2px rgb(16 18 26 / .9), 0 0 0 2px rgb(255 77 109 / 0); } 50% { box-shadow: 0 0 0 2px rgb(16 18 26 / .9), 0 0 0 6px rgb(255 77 109 / .35); } }
@media (prefers-reduced-motion: reduce) { .nav-matches.is-blink .nm-dot { animation: none; } }
.nav-matches:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mx-panel { transform: translateY(-8px); transform-origin: top left; }
.mx-panel.is-open { transform: none; }
@media (max-width: 768px) { .nav-matches { padding: .44rem .95rem .44rem .7rem; font-size: .88rem; } }

/* ---------- HESAP MENÜSÜ v2 ---------- */
.user-menu-dropdown { width: 300px; min-width: 300px; padding: 10px; border-radius: 22px; top: 56px; box-shadow: 0 30px 70px -18px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .04); }
.user-menu-dropdown .user-menu-divider { display: none; }
.user-menu-dropdown a { border-radius: 12px; }
.um-card {
    display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 16px !important;
    background: linear-gradient(135deg, rgb(var(--pg-brand-rgb) / .55), rgb(var(--pg-brand-rgb) / .12) 60%, rgb(255 255 255 / .04));
    border: 1px solid rgb(var(--pg-brand-rgb) / .55); transition: border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.user-menu-dropdown a.um-card:hover { background: linear-gradient(135deg, rgb(var(--pg-brand-rgb) / .7), rgb(var(--pg-brand-rgb) / .2) 60%, rgb(255 255 255 / .06)); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -16px rgb(var(--pg-brand-rgb) / .9); }
.um-card-avatar { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px rgb(255 255 255 / .18); }
.um-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.um-card-meta strong { font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-card-meta small { font-size: 11.5px; color: rgb(255 255 255 / .62); }
.um-card-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.um-chip { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: rgb(255 255 255 / .12); color: rgb(255 255 255 / .85); }
.um-chip.is-admin { background: rgb(96 165 250 / .22); color: #93c5fd; }
.um-chip.is-prem { background: rgb(245 197 66 / .2); color: #f5c542; }
.um-chip.is-founder { background: rgb(167 139 250 / .22); color: #c4b5fd; }
.um-card > svg { color: rgb(255 255 255 / .55); flex-shrink: 0; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.um-card:hover > svg { transform: translateX(3px); color: #fff; }
.um-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.user-menu-dropdown .um-grid a {
    flex-direction: column; justify-content: center; gap: 6px; padding: 12px 4px 10px; font-size: 11.5px; font-weight: 600; text-align: center;
    background: rgb(255 255 255 / .05); border: 1px solid var(--border); border-radius: 14px;
    transition: background .2s, border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1), color .2s;
}
.um-grid a svg { width: 18px; height: 18px; }
.user-menu-dropdown .um-grid a:hover { background: rgb(var(--pg-brand-rgb) / .3); border-color: rgb(var(--pg-brand-rgb) / .8); color: #fff; transform: translateY(-2px); }
.user-menu-dropdown a.um-premium {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin-bottom: 6px; border-radius: 14px;
    background: linear-gradient(120deg, rgb(245 197 66 / .22), rgb(245 197 66 / .06)); border: 1px solid rgb(245 197 66 / .35);
}
.um-premium > span { display: flex; flex-direction: column; gap: 1px; }
.um-premium b { font-size: 13px; font-weight: 700; }
.um-premium small { font-size: 11px; color: rgb(245 197 66 / .75); font-weight: 500; }
.user-menu-dropdown a.um-premium:hover { background: linear-gradient(120deg, rgb(245 197 66 / .32), rgb(245 197 66 / .1)); }
.user-menu-dropdown a.um-row { padding: 9px 12px; font-size: 13.5px; }
.user-menu-dropdown a.um-logout {
    justify-content: center; margin-top: 6px; padding: 10px; font-size: 13px; font-weight: 700; color: #ff8a93;
    background: rgb(229 72 77 / .08); border: 1px solid rgb(229 72 77 / .28);
}
.user-menu-dropdown a.um-logout svg { color: currentColor; }
.user-menu-dropdown a.um-logout:hover { background: rgb(229 72 77 / .2); color: #ffb3b8; }
@media (max-width: 520px) { .user-menu-dropdown { width: min(300px, calc(100vw - 24px)); min-width: 0; } }

/* =====================================================================================================
   KABUK (masaüstü, >900px): FACEIT tarzı — solda geniş kenar çubuğu (logo · arama · ana menü · kısayollar · alt bağlantılar), sağda ince simge çubuğu
   (hesap · Müsabakalar · bildirim · mesaj), ortada yuvarlak köşeli içerik penceresi. Üst header YOKTUR; dar ekranda eski üst header çalışır.
   ===================================================================================================== */
:root { --shell-bg: #0c0d12; }
.shell-frame { display: none; }
.frame-corner { display: none !important; }
.nav-matches { padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 12px; }
.nav-matches .nm-label { display: none; }
.nav-matches .nm-vs { font-size: 11.5px; padding: 3px 7px; }
.nav-matches .nm-dot { top: 3px; right: 3px; }
.nav-matches:hover .nm-vs { filter: brightness(1.12); }

@media (min-width: 901px) {
    body.has-rail { --rail-w: 244px; --rail-r: 66px; }
    body.has-rail:not(.is-auth) { --rail-r: 0px; }
    body.has-rail .page-main, body.has-rail footer { margin-left: var(--rail-w); margin-right: var(--rail-r); }
    html { --header-vis: 12px; }
    html.hdr-hidden { --header-vis: 12px; }
    .shell-frame { display: block; position: fixed; z-index: 60; pointer-events: none; left: var(--rail-w); right: var(--rail-r); top: 8px; bottom: 8px; border-radius: 22px; box-shadow: 0 0 0 100vmax var(--shell-bg); }
    #toast-container { top: 20px; right: calc(var(--rail-r, 0px) + 16px); }
    body.is-auth .dm-widget { right: calc(var(--rail-r, 66px) + 14px); }

    /* --- sağ çubuk (header'ın kendisi) --- */
    header {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: var(--rail-r); z-index: 100;
        display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; column-gap: 0;
        background: var(--shell-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; transform: none !important; will-change: auto;
    }
    header.scrolled { background: var(--shell-bg); box-shadow: none; }
    header::after { display: none !important; }
    body:not(.is-auth) header { display: none; }
    header .logo, header nav, header #searchBtn, header .header-divider { display: none !important; }
    .nav-buttons { flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; border-radius: 0; width: 100%; justify-self: auto; }
    .nav-buttons .user-menu { order: -1; margin-bottom: 8px; }
    .nav-buttons .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
    .nav-buttons .icon-btn:hover { background: rgb(255 255 255 / .08); }
    .nav-matches { width: 44px; height: 44px; border-radius: 12px; }
    .nav-matches:hover { background: rgb(255 255 255 / .08); }
    .user-menu-trigger { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; background: none; border-radius: 50%; position: relative; }
    .user-menu-trigger > span, .user-menu-trigger > svg { display: none; }
    .user-menu-trigger:hover, .user-menu.open .user-menu-trigger { background: none; box-shadow: none; }
    .user-menu-avatar { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgb(255 255 255 / .12); transition: box-shadow .2s; }
    .user-menu-trigger:hover .user-menu-avatar, .user-menu.open .user-menu-avatar { box-shadow: 0 0 0 2px var(--pg-brand-bright, #a30a33); }
    .user-menu-trigger::after { content: ''; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px var(--shell-bg); }
    .user-menu-dropdown { top: 0; right: calc(100% + 16px); }
    header .notif-panel { left: auto; right: calc(100% + 16px); top: 64px; }

    /* --- sol çubuk --- */
    .side-rail {
        top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 90; display: flex; flex-direction: column; padding: 16px 12px 12px;
        background: var(--shell-bg); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask: none; mask: none; border: 0; box-shadow: none;
    }
    .side-rail::after { display: none; }
    .sb-top { padding: 0 4px; }
    .sb-logo { display: inline-flex; align-items: center; line-height: 0; }
    .sb-logo .logo-img { height: 34px; }
    .sb-search {
        display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; margin: 16px 0 14px; padding: 0 12px; border: 0; border-radius: 12px; cursor: pointer;
        background: rgb(255 255 255 / .06); color: var(--gray); font: inherit; font-size: 14px; font-weight: 600; transition: background .2s, color .2s;
    }
    .sb-search:hover { background: rgb(255 255 255 / .1); color: #fff; }
    .sb-search kbd { margin-left: auto; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; color: var(--gray); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border-strong); }
    .sb-nav, .sb-foot { display: flex; flex-direction: column; gap: 2px; }
    .sb-link {
        position: relative; display: flex; align-items: center; gap: 13px; height: 42px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 600;
        color: rgb(255 255 255 / .74); transition: background .2s, color .2s;
    }
    .sb-link svg { flex-shrink: 0; color: rgb(255 255 255 / .6); transition: color .2s, transform .3s cubic-bezier(.22, 1, .36, 1); }
    .sb-link:hover { background: rgb(255 255 255 / .06); color: #fff; }
    .sb-link:hover svg { color: #fff; transform: scale(1.08); }
    .sb-link.is-active { background: rgb(255 255 255 / .09); color: #fff; }
    .sb-link.is-active svg { color: var(--pg-brand-bright, #c8123d); }
    .sb-link.is-active::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pg-brand-bright, #c8123d); }
    .sb-upgrade, .sb-upgrade svg { color: #f5c542; }
    .sb-upgrade:hover { background: rgb(245 197 66 / .12); color: #ffe08a; }
    .sb-upgrade:hover svg { color: #ffe08a; }
    .sb-foot { padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .07); }
    .sb-auth { width: 100%; justify-content: center; margin-top: 6px; text-align: center; border-radius: 12px; }

    .rail-scroll { flex: 1; min-height: 0; height: auto; align-items: stretch; padding: 4px 0 8px; margin-top: 12px; border-top: 1px solid rgb(255 255 255 / .07); }
    .rail-scroll::-webkit-scrollbar { display: none; }
    .rail-group { align-items: stretch; gap: 2px; }
    .rail-sep { display: none; }
    .rail-title { padding: 14px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgb(255 255 255 / .38); }
    .rail-item {
        display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 8px; border: 0; border-radius: 12px; background: none; overflow: visible; box-shadow: none;
        transition: background .2s;
    }
    .rail-item:hover, .rail-item:focus-visible { transform: none; background: rgb(255 255 255 / .06); border-radius: 12px; box-shadow: none; }
    .rail-item.is-active { background: rgb(255 255 255 / .09); box-shadow: none; }
    .rail-item.is-active::before { left: -12px; }
    .rail-item img, .rail-item .rail-tile { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }
    .rail-item .rail-tile { font-size: .85rem; }
    .rail-item.rail-add { border: 0; }
    .rail-name { min-width: 0; font-size: 14px; font-weight: 600; color: rgb(255 255 255 / .86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rail-item:hover .rail-name { color: #fff; }
}
/* gömülü görünümlerde kabuk yok */
html.mr-embed .shell-frame, html.es-embed-prev .shell-frame { display: none !important; }
html.mr-embed body.has-rail .page-main, html.mr-embed body.has-rail footer, html.es-embed-prev body.has-rail .page-main { margin-right: 0 !important; }
.rail-name, .rail-title, .sb-top, .sb-nav, .sb-foot { }
@media (max-width: 900px) { .sb-top, .sb-nav, .sb-foot, .rail-title, .rail-name { display: none; } }

/* ---------- SOL MENÜ: daraltılmış kip (yalnızca girişliyken; tarayıcı yakınlaştırması %85 üstündeyse otomatik, bkz. js/core/sidebar-mode.js) ----------
   Düzen iki kipte AYNI kalır (simgeler hep aynı x konumunda); yalnızca menü genişliği (--rail-w) ve yazıların opaklığı/genişliği animasyonla değişir. */
@property --rail-w { syntax: '<length>'; inherits: false; initial-value: 244px; }
/* inherits:false → animasyon sırasında her karede TÜM alt ağacın stili yeniden hesaplanmaz; değeri yalnızca kullanan doğrudan çocuklar (menü, çerçeve, içerik, altbilgi, mesaj penceresi) `inherit` ile alır */
body.has-rail > * { --rail-w: inherit; }
button.sb-link { width: 100%; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.sb-toggle svg { transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .2s; }
.sb-logo-mark { display: none; }
.rb-dock, .rb-set { display: none; }
html body.has-rail.is-auth { transition: opacity .28s ease; }
/* Menü daralma/genişleme: --rail-w'yi (body'de) animasyonla değiştirmek her karede TÜM sayfanın (~1000 öğe) stilini yeniden hesaplatıyordu (kasma).
   Bunun yerine değeri KULLANAN öğelerin kendi özelliği geçiş yapar (menü genişliği, çerçeve kenarı). İçerik/altbilgi ise geçişte YENİDEN DÜZENLENMEZ: son genişliğe hemen oturur, görüntü menüyle birlikte yakınlaşıp uzaklaşır (transform: scale, js/core/sidebar-mode.js) — tasarımlar sabit kalır */
@media (min-width: 901px) {
    html body.has-rail.is-auth > .side-rail { transition: width .4s cubic-bezier(.22, 1, .36, 1); }
    html body.has-rail.is-auth > .shell-frame, html body.has-rail.is-auth > .frame-corner { transition: left .4s cubic-bezier(.22, 1, .36, 1); }
}
@media (prefers-reduced-motion: reduce) { html body.has-rail.is-auth, html body.has-rail.is-auth > * { transition: none !important; } }

@media (min-width: 901px) {
    html.sb-collapsed body.is-auth.has-rail { --rail-w: 71px; }

    /* logo: geniş logo ↔ kare işaret (çapraz geçiş) */
    .sb-top { padding: 0; }
    .sb-logo { position: relative; display: block; width: 100%; height: 44px; }
    .sb-logo .logo-img { position: absolute; left: 4px; top: 50%; height: 34px; width: auto; transform: translateY(-50%); transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
    .sb-logo-mark { display: block; position: absolute; left: 3.5px; top: 2px; width: 40px; height: 40px; border-radius: 12px; opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
    html.sb-collapsed body.is-auth .sb-logo .logo-img { opacity: 0; transform: translateY(-50%) translateX(-8px); }
    html.sb-collapsed body.is-auth .sb-logo-mark { opacity: 1; transform: none; }
    .sb-search { position: relative; margin: 12px 0 14px; padding: 0 14px; }
    .sb-search kbd { transition: opacity .2s ease; }
    html.sb-collapsed body.is-auth .sb-search kbd { position: absolute; right: 10px; opacity: 0; pointer-events: none; }

    /* yazılar: genişlik + opaklık animasyonu (kip değişince düzen zıplamaz) */
    .sb-link { padding: 0 14px; }
    .sb-link > span, .sb-search > span, .rail-name { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 1; transition: max-width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
    html.sb-collapsed body.is-auth .sb-link > span, html.sb-collapsed body.is-auth .sb-search > span, html.sb-collapsed body.is-auth .rail-name { max-width: 0; opacity: 0; }
    .rail-title { max-height: 34px; overflow: hidden; white-space: nowrap; transition: max-height .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, padding .4s cubic-bezier(.22, 1, .36, 1); }
    html.sb-collapsed body.is-auth .rail-title { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

    /* simge menü öğelerinde ad: üzerine gelince sağda küçük kutu (oyun/hub kısayollarında zaten js/core/side-rail.js kutusu açılır) */
    html.sb-collapsed body.is-auth .sb-link::after, html.sb-collapsed body.is-auth .sb-search::after {
        content: attr(data-label); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-6px); z-index: 300;
        padding: 6px 11px; border-radius: 9px; background: #1a1b22; border: 1px solid var(--border-strong); box-shadow: 0 12px 28px -10px rgb(0 0 0 / .8);
        font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
    }
    html.sb-collapsed body.is-auth .sb-link:hover::after, html.sb-collapsed body.is-auth .sb-link:focus-visible::after,
    html.sb-collapsed body.is-auth .sb-search:hover::after, html.sb-collapsed body.is-auth .sb-search:focus-visible::after { opacity: 1; transform: translateY(-50%); }

    /* sol menü altı: Ayarlar sağ çubuğa taşındı */
    .sb-foot { margin-top: auto; }

    /* popüler hublar: kaydırma çubuklu kutu */
    .rail-scroll {
        flex: 0 1 auto; min-height: 0; margin: 12px 0 10px; padding: 0 0 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        border: 1px solid rgb(255 255 255 / .07); border-radius: 16px; background: rgb(255 255 255 / .025);
        scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent;
    }
    .rail-scroll::-webkit-scrollbar { display: block; width: 6px; }
    .rail-scroll::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
    .rail-scroll::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .18); border-radius: 6px; }
    .rail-scroll::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / .32); }
    html.sb-collapsed body.is-auth .rail-scroll { scrollbar-width: none; }
    html.sb-collapsed body.is-auth .rail-scroll::-webkit-scrollbar { display: none; }
    .rail-scroll .rail-title { padding-top: 12px; }
    .rail-scroll .rail-item.is-active::before { display: none; }

    /* ---------- SAĞ ÇUBUK DOCK: oyunlar · ilk 2 takım · "Takımlarım" · en altta Ayarlar ---------- */
    header .nav-buttons { flex: 1; min-height: 0; }
    header .rb-dock { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-height: 0; width: 100%; padding: 4px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
    header .rb-dock::-webkit-scrollbar { display: none; }
    header .rb-set { display: inline-flex; }
    header .rb-sep { display: block; flex-shrink: 0; width: 26px; height: 1px; margin: 4px 0; background: rgb(255 255 255 / .1); }
    header .rb-dock .rail-item { flex-shrink: 0; width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 12px; }
    header .rb-dock .rail-item img, header .rb-dock .rail-item .rail-tile { width: 34px; height: 34px; border-radius: 10px; }
    header .rb-dock .rail-name { display: none; }
    header .rb-dock .rail-item.is-active::before { display: block; left: auto; right: -11px; top: 50%; bottom: auto; border-radius: 3px 0 0 3px; }   /* dikey ortalı: tabandaki margin-top:-9px ile uyumlu (eskiden top:10px + margin yüzünden ~12px yukarı kayıyordu) */
    header .rb-link {
        flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
        color: rgb(255 255 255 / .62); transition: background .2s, color .2s;
    }
    header .rb-link:hover, header .rb-link:focus-visible { background: rgb(255 255 255 / .08); color: #fff; }
    header .rb-link svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
    header .rb-link:hover svg { transform: scale(1.1); }
    header .rb-set { margin-top: 6px; }
    header .rb-set:hover svg { transform: rotate(60deg) scale(1.05); }
}
/* kutucuk sağ çubuktan solda açılınca (js/core/side-rail.js: is-left) */
.rail-fly.is-left { transform-origin: right center; transform: translateX(8px) scale(.96); }
.rail-fly.is-left.is-open { transform: none; }
.rail-fly.is-left::before { left: auto; right: -6px; border-left: 0; border-bottom: 0; border-right: 1px solid var(--border-strong); border-top: 1px solid var(--border-strong); }
.rail-fly.rail-fly-mini { width: auto; padding: 8px 13px; border-radius: 11px; }
.rail-fly.rail-fly-mini strong { font-size: .8rem; white-space: nowrap; }


/* ---------- doksan ikinci tur: sol menü (kutusuz, yalnızca simge), logo ortalı, ince sayfa çubuğu, vitrin okları, profil menüsü v3 ---------- */
/* sayfanın kaydırma çubuğu: çok ince, saydam iz (yalnızca kaydırırken belirir; bkz. js/core/theme.js .is-scrolled) */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 5px; height: 5px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .28); border-radius: 5px; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / .5); }
html:not(.is-scrolled)::-webkit-scrollbar-thumb, body:not(.is-scrolled)::-webkit-scrollbar-thumb { background: transparent; }

@media (min-width: 901px) {
    body.has-rail { --rail-w: 204px; }
    html.sb-collapsed body.is-auth.has-rail { --rail-w: 71px; }
    /* logo: ortalı; daraltılmışta yalnızca P işareti (saydam arka plan) */
    .sb-logo .logo-img { left: 50%; transform: translate(-50%, -50%); }
    html.sb-collapsed body.is-auth .sb-logo .logo-img { transform: translate(-50%, -50%) translateX(-8px); }
    .sb-logo-mark { left: 50%; top: 50%; width: 39px; height: 40px; border-radius: 0; transform: translate(-50%, -50%) scale(.7); }
    html.sb-collapsed body.is-auth .sb-logo-mark { transform: translate(-50%, -50%); }
    /* popüler hublar / oyunlar: kutusuz, yalnızca simge (geniş menüde 4'lü ızgara, dar menüde tek sütun) */
    .rail-scroll { margin: 10px 0 8px; padding: 10px 0 4px; border: 0; border-top: 1px solid rgb(255 255 255 / .07); border-radius: 0; background: none; }
    .rail-scroll .rail-title, .side-rail .rail-name { display: none; }
    .rail-group { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px; padding: 2px 0 6px; }
    .rail-group + .rail-group { margin-top: 6px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .06); }
    .side-rail .rail-item { position: relative; width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center; border-radius: 11px; flex-shrink: 0; }
    .side-rail .rail-item img, .side-rail .rail-item .rail-tile { width: 38px; height: 38px; border-radius: 11px; }
    .side-rail .rail-item:hover img, .side-rail .rail-item:hover .rail-tile { filter: brightness(1.12); }
    .side-rail .rail-item.is-active { background: none; box-shadow: 0 0 0 2px rgb(255 255 255 / .55); }
}
/* popüler hub rozeti: logonun sağ altında küçük yıldız */
.verified-badge.rail-pop { position: absolute; right: -4px; bottom: -4px; z-index: 2; width: 16px; height: 16px; border: 2px solid var(--shell-bg, #0c0d12); box-shadow: 0 2px 6px rgb(0 0 0 / .5); pointer-events: none; }

/* öne çıkan turnuvalar: oklar kartların yanında (üstüne binmez), vitrin biraz daralır */
.fx-stage { display: flex; align-items: center; gap: 14px; }
.fx-stage .fx-grid { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.fx-stage .fx-nav { position: static; transform: none; flex: 0 0 auto; width: 40px; height: 40px; background: rgb(255 255 255 / .06); border-color: var(--border-strong); backdrop-filter: none; }
.fx-stage .fx-nav:hover { background: rgb(255 255 255 / .14); transform: scale(1.08); }
@media (max-width: 700px) {
    .fx-stage { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
    .fx-stage .fx-grid { flex: 1 1 100%; order: 1; }
    .fx-stage .fx-nav { order: 2; }
}
.fx-grid > .fx-hero { will-change: transform; }

/* profil menüsü v3 */
.user-menu-dropdown { width: 316px; min-width: 316px; padding: 0; overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #15161d, #0e0f14); border: 1px solid rgb(255 255 255 / .09); box-shadow: 0 44px 90px -22px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .03); }
.um-hero { position: relative; padding: 24px 18px 18px; text-align: center; border-bottom: 1px solid rgb(255 255 255 / .06);
    background: radial-gradient(120% 95% at 50% -10%, rgb(var(--pg-brand-rgb) / .42), transparent 72%), linear-gradient(180deg, rgb(255 255 255 / .04), transparent); }
.um-hero.is-prem { background: radial-gradient(120% 95% at 50% -10%, rgb(245 197 66 / .34), transparent 72%), linear-gradient(180deg, rgb(255 255 255 / .04), transparent); }
.user-menu-dropdown a.um-hero-link { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 0; background: none; border-radius: 16px; color: #fff; }
.user-menu-dropdown a.um-hero-link:hover { background: none; color: #fff; }
.um-avatar { position: relative; width: 78px; height: 78px; border-radius: 50%; }
.um-avatar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--pg-brand-bright, #c8123d), #ff8fa6, var(--pg-brand-bright, #c8123d) 45%, #5a0a1e, var(--pg-brand-bright, #c8123d)); box-shadow: 0 0 26px -4px rgb(var(--pg-brand-rgb) / .8); animation: umRing 8s linear infinite; }
.um-hero.is-prem .um-avatar::before { background: conic-gradient(from 0deg, #f5c542, #fff4c8, #f5c542 40%, #a87411, #f5c542); box-shadow: 0 0 28px -3px rgb(245 197 66 / .75); }
.um-avatar img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; border: 3px solid #14151c; }
@keyframes umRing { to { transform: rotate(360deg); } }
.um-hero-name { display: block; max-width: 250px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-hero-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: rgb(255 255 255 / .5); transition: color .2s; }
.um-hero-sub svg { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.um-hero-link:hover .um-hero-sub { color: #fff; }
.um-hero-link:hover .um-hero-sub svg { transform: translateX(3px); }
.um-badges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 8px 16px; border-radius: 999px; background: rgb(0 0 0 / .3); border: 1px solid rgb(255 255 255 / .07); }
.um-badges > * { display: inline-flex; align-items: center; }
.um-body { padding: 12px; }
.um-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .06); }
.user-menu-dropdown a.um-premium > svg:last-child { margin-left: auto; opacity: .7; }
.user-menu-dropdown a.um-premium { margin-bottom: 0; }
.user-menu-dropdown a.um-logout { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .um-avatar::before { animation: none; } }
@media (max-width: 520px) { .user-menu-dropdown { width: min(316px, calc(100vw - 24px)); min-width: 0; } }

/* ---------- doksan üçüncü tur: geniş menü + popüler hub satırları, akıcı daralma/genişleme, sağ çubuk düzeni, Müsabakalar köprüsü ---------- */
@media (min-width: 901px) {
    /* içerik kenar boşluğu (--rail-cw) menü genişliğini (--rail-w) izler: menü/çerçeve animasyonla kayarken ortadaki ana ekran da aynı eğriyle daralır/genişler
       (2026-09-27: eskiden ANİ geçiyordu, çerçeve kayarken içerik yerinde sıçrıyordu). `.page-main`'e transform/will-change KOYMA (dev katman takılma yapar); geçişte arka plan animasyonları durur (html.sb-anim) */
    body.has-rail { --rail-w: 236px; }
    html.sb-collapsed body.is-auth.has-rail { --rail-w: 71px; }
    body.has-rail .page-main, body.has-rail footer { margin-left: var(--rail-w); }
    /* Menü açıkken içerik YENİDEN DÜZENLENMEZ: yerleşim hep menü kapalıyken olduğu genişlikte kalır, sayfa yalnızca ölçeklenip (zoom) çerçeveye sığar (FACEIT gibi: ortası sabit, azıcık ufalır).
       --zs = çerçeve genişliği / kapalı-menü çerçeve genişliği (js/core/sidebar-mode.js + header.php erken betiği); kenar boşlukları ölçeğe bölünür ki görsel konum menü genişliğini izlesin */
    html:not(.mr-embed):not(.es-embed-prev):not(.spt-embed) body.has-rail.is-auth .page-main, html:not(.mr-embed):not(.es-embed-prev):not(.spt-embed) body.has-rail.is-auth footer { zoom: var(--zs, 1); margin-left: calc(var(--rail-w) / var(--zs, 1)); margin-right: calc(var(--rail-r) / var(--zs, 1)); }
    /* içerik geçişte kaymaz/katman oluşturmaz (dev sayfa katmanı takılma yapıyordu): yeni yerine bir kez oturur, yalnızca menü + çerçeve kenarı animasyonla ilerler */
    html.sb-anim .ambient-bg * { animation-play-state: paused !important; }

    /* popüler hublar / oyunlar: simge + ad + üye sayısı satırları (kutusuz) */
    .rail-scroll { padding: 12px 0 4px; }
    .rail-scroll .rail-title { display: flex; align-items: center; gap: 7px; padding: 4px 8px 8px; }
    .rail-group { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 3px; padding: 0 0 4px; }
    .rail-group[data-section="popular_hubs"] .rail-title::before { content: '★'; font-size: 12px; letter-spacing: 0; color: #f5c542; text-shadow: 0 0 10px rgb(245 197 66 / .6); }
    .side-rail .rail-item { width: 100%; height: 48px; padding: 0 0 0 6px; gap: 11px; justify-content: flex-start; border-radius: 14px; background: none; transition: background .2s; }
    .side-rail .rail-item:hover { background: rgb(255 255 255 / .06); }
    .side-rail .rail-item.is-active { background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)); box-shadow: none; }
    .side-rail .rail-item img, .side-rail .rail-item .rail-tile { width: 34px; height: 34px; border-radius: 10px; }
    .side-rail .rail-item:hover img, .side-rail .rail-item:hover .rail-tile { filter: none; }
    .side-rail .rail-text { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; max-width: 200px; overflow: hidden; opacity: 1; transition: max-width .4s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
    .side-rail .rail-name { display: block; max-width: none; font-size: 13.5px; line-height: 1.25; }
    .rail-sub { font-size: 11px; line-height: 1.2; color: rgb(255 255 255 / .42); white-space: nowrap; }
    html.sb-collapsed body.is-auth .side-rail .rail-text { max-width: 0; opacity: 0; }
    .side-rail .verified-badge.rail-pop { left: 26px; right: auto; bottom: 6px; }
}
.rail-text { min-width: 0; }

/* ---------- sağ çubuk düzeni ---------- */
.rb-link { display: none; }
@media (min-width: 901px) {
    header .rb-dock { flex: 1; }
    header .rb-dock .rail-text { display: none; }
    header .rb-link { border: 0; background: none; cursor: pointer; font: inherit; padding: 0; }
    header .rb-set { margin-top: 0; }
    header .rb-support { margin-top: auto; }
    header .rb-dock ~ .rb-support { margin-top: 0; }
    .nav-matches[aria-expanded="true"] { background: rgb(255 255 255 / .1); box-shadow: 0 0 0 1px rgb(var(--pg-brand-rgb) / .7); }
}

/* Müsabakalar paneli ↔ düğme köprüsü: ince bir çizgi panelin kenarını düğmeye bağlar */
.mx-bridge { position: fixed; z-index: 1499; pointer-events: none; border-radius: 2px; opacity: 0; transition: opacity .18s ease; background: linear-gradient(90deg, var(--border-strong), var(--pg-brand-bright, #c8123d)); box-shadow: 0 0 10px rgb(var(--pg-brand-rgb) / .55); }
.mx-bridge.is-vert { background: linear-gradient(180deg, var(--pg-brand-bright, #c8123d), var(--border-strong)); }
.mx-bridge.is-open { opacity: 1; }
.mx-bridge[hidden] { display: none; }

/* ---------- doksan dördüncü tur: sağ çubuk Arkadaşlar/Takımlarım panelleri + kalın köprü ---------- */
.mx-bridge { border-radius: 3px; }
.rp-panel { width: 340px; }
.rp-count { font-size: 12px; font-weight: 700; color: var(--gray); }
.rp-body { gap: 2px; padding: 8px; }
.rp-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; color: var(--white); text-decoration: none; transition: background .15s ease; }
.rp-row:hover, .rp-row:focus-visible { background: rgb(var(--ink-rgb) / .08); }
.rp-av { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--ink-rgb) / .1); font-weight: 800; font-size: 15px; }
.rp-av.is-team { border-radius: 11px; }
.rp-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rp-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #64748b; border: 2px solid var(--panel-solid); }
.rp-dot.is-online { background: #3ddc84; }
.rp-dot.is-away { background: #f5c542; }
.rp-tx { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rp-tx b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tx small { font-size: 11.5px; color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header .rb-link[aria-expanded="true"] { background: rgb(255 255 255 / .1); color: #fff; box-shadow: 0 0 0 1px rgb(var(--pg-brand-rgb) / .7); }

/* ---------- doksan beşinci tur: arkadaş bul, öneriler ---------- */
.rp-title { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.rp-find-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: rgb(var(--ink-rgb) / .05); color: var(--gray); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rp-find-btn[hidden] { display: none; }
.rp-find-btn:hover, .rp-find-btn.is-on { background: rgb(var(--ink-rgb) / .12); color: var(--white); border-color: var(--border-strong); }
.rp-search { padding: 10px 12px 0; }
.rp-search[hidden] { display: none; }
.rp-search input { width: 100%; height: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--border-strong); background: rgb(var(--ink-rgb) / .06); color: var(--white); font: inherit; font-size: 13.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.rp-search input:focus { border-color: rgb(var(--pg-brand-rgb) / .8); box-shadow: 0 0 0 3px rgb(var(--pg-brand-rgb) / .2); }
.rp-sec { margin: 12px 4px 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gray); }
.rp-suggest { display: flex; flex-direction: column; gap: 2px; }
.rp-row .rp-tx { flex: 1; }
.rp-add { flex: none; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--white); color: var(--on-accent, #000); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .15s ease, opacity .15s; }
.rp-add:hover { transform: translateY(-1px); }
.rp-add:disabled { opacity: .5; cursor: default; transform: none; }
.rp-rel { flex: none; font-size: 11.5px; font-weight: 700; color: var(--gray); }

.tp-chip-pop { color: #ffe08a; border-color: rgb(245 197 66 / .55); background: rgb(245 197 66 / .16); }
.tp-chip-pop .verified-badge { width: 15px; height: 15px; box-shadow: none; }
.hub-card-popular-tag { display: inline-flex; align-items: center; gap: 5px; }
.hub-card-popular-tag .verified-badge { width: 14px; height: 14px; box-shadow: none; }

/* ---------- sol menü logosu: P işareti SABİT, "PAF.GG" yazısı yanına animasyonla açılır/kapanır ---------- */
@media (min-width: 901px) {
    html body.has-rail .sb-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; }
    html body.has-rail .sb-logo .sb-logo-mark { position: static; display: block; flex: none; width: 37px; height: 38px; opacity: 1; transform: none; transition: none; }
    html body.has-rail .sb-logo-word { display: block; flex: none; overflow: hidden; max-width: 112px; margin-left: 6px; opacity: 1; transition: max-width .4s cubic-bezier(.22, 1, .36, 1), margin-left .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
    html body.has-rail .sb-logo-word img { display: block; height: 38px; width: auto; max-width: none; }
    html.sb-collapsed body.is-auth .sb-logo-word { max-width: 0; margin-left: 0; opacity: 0; }
}
@media (max-width: 900px) { .sb-logo-word { display: none; } }

/* ---------- profil menüsü: kısayollar (2×2 geniş kartlar), Yükselt, Destek Talebi ---------- */
.um-body .um-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.user-menu-dropdown .um-grid a { flex-direction: row; justify-content: flex-start; gap: 11px; padding: 10px 12px; text-align: left; font-size: 13.5px; font-weight: 700; border-radius: 16px; }
.um-grid a i { --c: 255 255 255; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; background: rgb(var(--c) / .14); color: rgb(var(--c)); transition: background .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.um-grid a:nth-child(1) i { --c: 96 165 250; }
.um-grid a:nth-child(2) i { --c: 245 197 66; }
.um-grid a:nth-child(3) i { --c: 74 222 128; }
.um-grid a:nth-child(4) i { --c: 167 139 250; }
.um-grid a svg { width: 18px; height: 18px; color: inherit; }
.user-menu-dropdown .um-grid a:hover i { background: rgb(var(--c) / .3); transform: scale(1.06) rotate(-4deg); }
.user-menu-dropdown .um-grid a:hover svg { transform: none; }
.user-menu-dropdown .um-row, .user-menu-dropdown button.um-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--white); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.user-menu-dropdown button.um-row:hover { background: rgb(var(--accent-rgb) / .08); color: var(--gold); }
.user-menu-dropdown button.um-row svg { flex-shrink: 0; color: var(--gray); }
.user-menu-dropdown button.um-row:hover svg { color: currentColor; }

/* ---------- doksan altıncı tur: mesaj penceresi (Mac düğmeleri, alta indir, büyüt) ---------- */
.dm-widget { transition: transform .3s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }
.dm-widget.open.is-min { transform: translateY(calc(100% - 50px)); box-shadow: 0 -6px 26px rgb(var(--shadow-rgb) / .45); }
.dm-widget.is-min .dm-widget-header { cursor: pointer; }
.dm-lights { display: inline-flex; align-items: center; gap: 8px; margin-right: 2px; }
.dm-widget-header .dm-light { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 0; font-size: 0; color: transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); transition: filter .15s, transform .15s; }
.dm-widget-header .dm-light.is-red { background: #ff5f57; }
.dm-widget-header .dm-light.is-yellow { background: #febc2e; }
.dm-widget-header .dm-light.is-green { background: #28c840; }
.dm-widget-header .dm-light svg { opacity: 0; transition: opacity .15s; }
.dm-lights:hover .dm-light svg, .dm-light:focus-visible svg { opacity: 1; }
.dm-widget-header .dm-light:hover { background-color: inherit; filter: brightness(1.08); transform: scale(1.1); }
.dm-widget-header .dm-light.is-red:hover { background: #ff5f57; } .dm-widget-header .dm-light.is-yellow:hover { background: #febc2e; } .dm-widget-header .dm-light.is-green:hover { background: #28c840; }
.dm-widget-header .dm-light svg { color: rgb(0 0 0 / .6); }
.dm-side { display: contents; }
.dm-side-title { display: none; }
.dm-max-empty { display: none; }

/* büyütülmüş: solda arkadaşlar + son mesajlar, sağda sohbet */
.dm-widget.is-max { width: min(1000px, calc(100vw - var(--rail-r, 66px) - var(--rail-w, 71px) - 44px)); height: min(760px, 88vh); max-height: 88vh; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.dm-widget.is-max .dm-widget-header { grid-column: 1 / -1; }
.dm-widget.is-max .dm-side { display: flex; flex-direction: column; grid-column: 1; grid-row: 2; min-height: 0; border-right: 1px solid var(--border); }
.dm-widget.is-max .dm-side-title { display: block; padding: 14px 16px 6px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gray); }
.dm-widget.is-max .dm-suggest[hidden] { display: none; }
.dm-suggest-row { display: flex; gap: 10px; padding: 4px 14px 10px; overflow-x: auto; scrollbar-width: none; }
.dm-suggest-row::-webkit-scrollbar { display: none; }
.dm-suggest-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; padding: 0; border: 0; background: none; color: var(--white); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.dm-suggest-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-strong); transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .2s; }
.dm-suggest-item:hover img { transform: translateY(-2px) scale(1.05); border-color: var(--pg-brand-bright, #c8123d); }
.dm-suggest-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-widget.is-max .dm-widget-list { display: block !important; flex: 1; min-height: 0; }
.dm-widget.is-max .dm-widget-newchat, .dm-widget.is-max .dm-widget-thread { grid-column: 2; grid-row: 2; min-height: 0; }
.dm-widget.is-max #dmBackBtn { display: none; }
.dm-widget.is-max[data-panel="list"] .dm-max-empty { display: flex; grid-column: 2; grid-row: 2; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gray); text-align: center; padding: 20px; font-size: 13.5px; }
.dm-widget.is-max[data-panel="list"] .dm-max-empty p { margin: 0; max-width: 260px; }
@media (max-width: 900px) { .dm-widget.is-max { width: calc(100vw - 20px); grid-template-columns: 1fr; } .dm-widget.is-max .dm-side { border-right: 0; } .dm-widget.is-max[data-panel="thread"] .dm-side { display: none; } .dm-widget.is-max .dm-widget-thread, .dm-widget.is-max .dm-widget-newchat, .dm-widget.is-max[data-panel="list"] .dm-max-empty { grid-column: 1; } .dm-widget.is-max[data-panel="list"] .dm-max-empty { display: none; } .dm-widget.is-max #dmBackBtn { display: inline-flex; } }

/* ---------- doksan altıncı tur: orta çerçeve köşesi/halka + çerçevenin sağında kaydırma göstergesi ---------- */
@media (min-width: 901px) {
    .shell-frame { z-index: 89; border-radius: 24px; box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 0 0 100vmax var(--shell-bg); }
    html.es-sb, html.es-sb body { scrollbar-width: none; }
    html.es-sb::-webkit-scrollbar, html.es-sb body::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .es-scroll { position: fixed; z-index: 91; top: 34px; bottom: 34px; right: calc(var(--rail-r, 66px) + 6px); width: 10px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
    .es-scroll.is-on { opacity: 1; pointer-events: auto; }
    .es-scroll i { position: absolute; top: 0; right: 0; width: 5px; border-radius: 5px; background: rgb(255 255 255 / .34); cursor: default; transition: width .15s ease, background .15s ease; will-change: transform; }
    .es-scroll:hover i, .es-scroll.is-drag i { width: 8px; background: rgb(255 255 255 / .55); }
}
@media (max-width: 900px) { .es-scroll { display: none; } }

/* Takımlarım (takımlar sayfası): en çok 5 kart, hep ortalı; kenarlarda bulanıklaştırma/kaydırma yok */
.mt-carousel { overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 6px 0 12px; margin: 0; }
.mt-track { flex-wrap: wrap; justify-content: center; width: auto; }
.mt-carousel-item { flex: 0 1 300px; }
@media (max-width: 520px) { .mt-carousel-item { flex-basis: 100%; } }
.pf-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.pf-pager-info { font-size: 13px; font-weight: 700; color: var(--gray); }

/* ---------- sağ/sol çubuk hover kartı (oyun / hub / takım): premium görünüm ---------- */
.rail-fly { width: 232px; padding: 0 16px 16px; gap: 0; border-radius: 22px; border-color: rgb(255 255 255 / .12); background: linear-gradient(180deg, #17181f, #101116); box-shadow: 0 30px 70px -18px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .03); }
.rail-fly.rail-fly-mini { padding: 8px 13px; width: auto; }
.rail-fly-cover { position: relative; align-self: stretch; height: 70px; margin: 0 -16px; overflow: hidden; border-radius: 21px 21px 0 0; background: linear-gradient(135deg, rgb(var(--pg-brand-rgb) / .55), rgb(60 40 140 / .5)); }
.rail-fly-cover i { position: absolute; inset: -20px; background: center / cover no-repeat; filter: blur(16px) saturate(1.5) brightness(.85); transform: scale(1.25); }
.rail-fly-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 30%, #17181f 100%); }
.rail-fly .rail-fly-icon { position: relative; z-index: 1; width: 68px; height: 68px; margin-top: -36px; border-radius: 20px; border: 3px solid #17181f; box-shadow: 0 10px 26px -6px rgb(0 0 0 / .7); background: #17181f; }
.rail-fly strong { margin-top: 10px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.rail-fly .rail-fly-sub { margin-top: 3px; font-size: .76rem; }
.rail-fly-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 4px 11px 4px 9px; border-radius: 999px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); font-size: 11.5px; font-weight: 700; color: var(--gray); }
.rail-fly-pill i { width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.rail-fly-pill.is-on { background: rgb(74 222 128 / .12); border-color: rgb(74 222 128 / .35); color: #86efac; }
.rail-fly-pill.is-on i { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.rail-fly .rail-fly-account { margin-top: 7px; max-width: 190px; font-size: 12.5px; font-weight: 700; color: var(--white); }
.rail-fly .rail-fly-btn { width: 100%; margin-top: 14px; padding: 9px 16px; border-radius: 12px; border: 0; background: var(--white); color: #0b0d12; font-size: .82rem; font-weight: 800; }
.rail-fly .rail-fly-btn:hover { background: #e8eaf2; color: #0b0d12; transform: translateY(-1px); }
.rail-fly .rail-fly-btn.is-linked { background: rgb(255 255 255 / .08); color: var(--white); border: 1px solid rgb(255 255 255 / .16); }
.rail-fly .rail-fly-btn.is-linked:hover { background: rgb(255 255 255 / .16); color: #fff; }
.rail-fly::before { z-index: 2; }

/* çevrimiçi arkadaş sayısı: Arkadaşlar simgesinin sağ üstünde yeşil kare rozet */
.rb-count { position: absolute; top: 1px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px; background: #3ddc84; color: #04210f; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--shell-bg, #0c0d12); pointer-events: auto; }

/* ---------- doksan yedinci tur: düz (kutusuz) mesajlaşma görünümü ---------- */
.dm-thread-messages { gap: 0; padding: 10px 12px 8px; }
.dm-thread-messages .dm-date-sep { align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; padding: 0; border: 0; background: none; border-radius: 0; font-size: 11px; font-weight: 700; color: var(--gray); }
.dm-thread-messages .dm-date-sep::before, .dm-thread-messages .dm-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.dm-msg-row, .dm-msg-row.mine { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; justify-content: stretch; position: relative; margin: 0 -8px; padding: 2px 8px; border-radius: 10px; transition: background .12s ease; }
.dm-msg-row.is-first { margin-top: 12px; padding-top: 4px; }
.dm-msg-row:hover { background: rgb(var(--ink-rgb) / .045); }
.dm-msg-gutter { display: flex; justify-content: center; padding-top: 2px; min-width: 0; }
.dm-msg-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.dm-gtime { align-self: center; font-size: 10px; color: var(--gray); opacity: 0; transition: opacity .12s; white-space: nowrap; }
.dm-msg-row:hover .dm-gtime { opacity: 1; }
.dm-msg-main { min-width: 0; }
.dm-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.dm-msg-name { font-size: 13.5px; font-weight: 800; color: var(--white); }
.dm-msg-name.is-me { color: var(--pg-brand-bright, #ff5a7a); }
.dm-msg-htime { font-size: 11px; color: var(--gray); }
.dm-msg-row .dm-msg-bubble, .dm-msg-row .dm-msg-bubble.mine { align-self: auto; max-width: none; display: block; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 14px; line-height: 1.5; color: rgb(var(--ink-rgb) / .92); }
.dm-msg-row .dm-msg-bubble.is-deleted { background: none; border: 0; }
.dm-msg-row .dm-msg-text { display: inline; }
.dm-msg-row .dm-msg-meta { display: inline; margin-left: 6px; }
.dm-msg-row .dm-msg-meta .dm-msg-time { display: none; }
.dm-msg-row .dm-msg-image-link { margin: 4px 0 2px; }
.dm-msg-row .dm-msg-image { max-width: min(340px, 100%); max-height: 260px; border-radius: 12px; }
.dm-msg-row .dm-msg-actions { top: -14px; right: 8px; }
.dm-msg-row:hover .dm-msg-actions, .dm-msg-row .dm-msg-actions:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.dm-msg-row .es-react-chips, .dm-msg-row .es-reactions { margin-top: 4px; }

/* ---------- doksan sekizinci tur: WhatsApp tarzı balonlar, sağ çubuk ad kutusu düzeltmesi, sade profil kısayolları ---------- */
/* mesajlar: benimkiler sağda, karşı tarafınkiler solda; grubun ilk balonunda küçük kuyruk */
.dm-thread-messages { gap: 2px; padding: 12px 14px 10px; }
.dm-msg-row, .dm-msg-row.mine { display: flex; justify-content: flex-start; margin: 0; padding: 0; border-radius: 0; background: none !important; }
.dm-msg-row.mine { justify-content: flex-end; }
.dm-msg-row.is-first { margin-top: 10px; padding-top: 0; }
.dm-msg-row:first-child.is-first, .dm-date-sep + .dm-msg-row.is-first { margin-top: 4px; }
.dm-msg-gutter, .dm-msg-head { display: none; }
.dm-msg-main { flex: 0 1 auto; max-width: 78%; min-width: 0; position: relative; }
.dm-msg-row .dm-msg-bubble, .dm-msg-row .dm-msg-bubble.mine { position: relative; display: block; padding: 7px 11px 6px; border-radius: 16px; font-size: 14px; line-height: 1.42; word-break: break-word; box-shadow: 0 1px 2px rgb(0 0 0 / .25); color: rgb(255 255 255 / .94); background: #22242d; }
.dm-msg-row .dm-msg-bubble.mine { background: #a3102f; color: #fff; }
.dm-msg-row.is-first .dm-msg-bubble { border-top-left-radius: 4px; }
.dm-msg-row.mine.is-first .dm-msg-bubble { border-top-left-radius: 16px; border-top-right-radius: 4px; }
.dm-msg-row.is-first .dm-msg-bubble::before { content: ''; position: absolute; top: 0; left: -7px; width: 9px; height: 13px; background: #22242d; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.dm-msg-row.mine.is-first .dm-msg-bubble::before { left: auto; right: -7px; background: #a3102f; clip-path: polygon(0 0, 100% 0, 0 100%); }
.dm-msg-row .dm-msg-bubble.is-deleted, .dm-msg-row .dm-msg-bubble.mine.is-deleted { background: transparent; border: 1px dashed var(--border-strong); box-shadow: none; }
.dm-msg-row .dm-msg-bubble.is-deleted::before { display: none; }
.dm-msg-row .dm-msg-meta { display: block; float: right; margin: 7px 0 -3px 12px; font-size: 10.5px; line-height: 1; color: rgb(255 255 255 / .5); }
.dm-msg-row .dm-msg-bubble.mine .dm-msg-meta { color: rgb(255 255 255 / .72); }
.dm-msg-row .dm-msg-meta .dm-msg-time { display: inline; margin: 0; font-size: 10.5px; color: inherit; }
.dm-msg-row .dm-edited { color: inherit; opacity: .8; margin-right: 4px; }
.dm-msg-row .dm-msg-bubble::after { content: ''; display: block; clear: both; }
.dm-msg-row .dm-msg-actions { top: -15px; right: auto; left: 6px; }
.dm-msg-row.mine .dm-msg-actions { left: auto; right: 6px; }
.dm-msg-row .dm-msg-image-link { margin: 0 0 4px; }
.dm-msg-row .dm-msg-image { max-width: min(300px, 100%); border-radius: 10px; }
.dm-msg-row .es-reacts { clear: both; margin-top: 4px; }
.dm-msg-row .es-reacts.es-reacts-in { animation: esReactIn .16s ease both; }
.dm-msg-row.mine .es-reacts { justify-content: flex-end; }

/* sağ çubuk ad kutusu (Müsabakalar/Bildirimler/Mesajlar/Arkadaşlar…): tek satırlık küçük kutu */
.rail-fly.rail-fly-mini { display: block; width: auto; min-width: 0; padding: 8px 13px; border-radius: 11px; background: #1a1b22; }
.rail-fly.rail-fly-mini strong { display: block; margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.rail-fly.rail-fly-mini::before { background: #1a1b22; }

/* profil menüsü kısayolları: sade, tek renkli */
.um-grid a i, .um-grid a:nth-child(n) i { --c: 255 255 255; width: auto; height: auto; background: none; border-radius: 0; color: rgb(255 255 255 / .62); }
.user-menu-dropdown .um-grid a { padding: 12px 14px; gap: 10px; border-radius: 14px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .08); color: rgb(255 255 255 / .88); font-weight: 600; }
.user-menu-dropdown .um-grid a:hover { background: rgb(245 197 66 / .07); border-color: rgb(245 197 66 / .35); color: #fff; transform: none; }
.user-menu-dropdown .um-grid a:hover i { background: none; transform: none; color: #f5c542; }
.dm-widget-header .dm-new-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0; line-height: 0; }

/* oyunlar carousel'i: yalnızca içeriğin devam ettiği kenarda yumuşak geçiş (js/features/slider.js --fade-l/--fade-r) */
@property --fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.games-track {
    --fade-l: 0px; --fade-r: 0px; transition: --fade-l .3s ease, --fade-r .3s ease;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.rp-tx small.rp-games { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.rp-games img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.hub-more-grid { margin-top: 18px; }
.hub-more-grid[hidden] { display: none; }
@keyframes toastBump { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.toast.toast-bump { animation: toastBump .3s ease; }
/* bildirimlerde adı geçen kişi/takım/turnuva/hub: tıklanabilir, bordo */
.notif-item-text a.notif-link, .notif-item-text a.notif-link strong { color: var(--pg-brand-bright, #c8123d); font-weight: 700; text-decoration: none; }
.notif-item-text a.notif-link:hover, .notif-item-text a.notif-link:hover strong { color: #ff4d73; text-decoration: underline; }

/* profil kartı durum düğmesi (sağ üst) */
.um-status { position: absolute; top: 12px; right: 12px; z-index: 3; }
.um-status-btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 9px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(0 0 0 / .32); color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s; }
.um-status-btn:hover { background: rgb(0 0 0 / .5); border-color: rgb(255 255 255 / .28); }
.um-status i, .um-status-opt i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px rgb(61 220 132 / .7); flex: none; }
.um-status[data-mode="away"] > .um-status-btn i, .um-status-opt[data-mode="away"] i { background: #f5c542; box-shadow: 0 0 8px rgb(245 197 66 / .7); }
.um-status[data-mode="invisible"] > .um-status-btn i, .um-status-opt[data-mode="invisible"] i { background: #64748b; box-shadow: none; }
.um-status-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 190px; padding: 6px; border-radius: 14px; background: #1a1b22; border: 1px solid var(--border-strong); box-shadow: 0 18px 40px -10px rgb(0 0 0 / .8); }
.um-status-menu[hidden] { display: none; }
.um-status-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: rgb(255 255 255 / .85); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.um-status-opt:hover, .um-status-opt.is-on { background: rgb(255 255 255 / .08); color: #fff; }
.um-status-menu small { display: block; margin: 4px 6px 2px; font-size: 10.5px; line-height: 1.35; color: var(--gray); }
/* sağ çubuktaki profil noktası: durumu yansıtır */
.user-menu[data-presence="away"] .user-menu-trigger::after { background: #f5c542; }
.user-menu[data-presence="invisible"] .user-menu-trigger::after { background: #64748b; }

/* turnuva sayfası başlığındaki düzenleyen hub: büyük hap */
.tb-hub { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 20px 8px 8px; border-radius: 16px; background: rgb(0 0 0 / .42); border: 1px solid rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.tb-hub:hover { background: rgb(0 0 0 / .6); border-color: rgb(255 255 255 / .3); transform: translateY(-1px); }
.tb-hub img, .tb-hub-fb { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.tb-hub-fb { display: inline-flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .12); }
.tb-hub-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

/* manuel fikstür: basılı tutup yer değiştirme */
.seed-bracket .bpx-team.is-team[data-seed] { cursor: grab; user-select: none; -webkit-user-select: none; }
.seed-bracket.is-swapping, .seed-bracket.is-swapping .bpx-team { cursor: grabbing; }
.seed-bracket .bpx-team.is-drag-src { background: rgb(var(--pg-brand-rgb) / .28); opacity: .6; }
.seed-bracket .bpx-team.is-swap-target { background: rgb(245 197 66 / .1); box-shadow: inset 0 0 0 1px rgb(245 197 66 / .6); animation: seedTarget 1s ease-in-out infinite; }
.seed-bracket .bpx-team.is-swap-hover { background: rgb(245 197 66 / .3); box-shadow: inset 0 0 0 2px #f5c542; animation: none; }
@keyframes seedTarget { 0%, 100% { box-shadow: inset 0 0 0 1px rgb(245 197 66 / .35); } 50% { box-shadow: inset 0 0 0 1px rgb(245 197 66 / .9); } }
.seed-bracket .bpx-team.is-swapped { animation: seedSwapped 1s ease; }
@keyframes seedSwapped { 0% { background: rgb(74 222 128 / .45); } 100% { background: transparent; } }
.seed-ghost { position: fixed; left: 0; top: 0; z-index: 9999; display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 7px 12px; border-radius: 10px; background: #1a1b22; border: 1px solid #f5c542; box-shadow: 0 14px 30px -8px rgb(0 0 0 / .8); color: #fff; font-size: 12.5px; font-weight: 700; pointer-events: none; will-change: transform; }
.seed-ghost b { color: #f5c542; font-size: 11px; }
.seed-ghost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seed-swap-hint { margin: 0 0 10px; }
.btn[hidden] { display: none !important; }

/* ---------- hub sayfası: banner sol üstte sosyal bağlantılar + sürüklenebilir turnuva penceresi ---------- */
.hub-banner-wrap .hub-banner-socials { position: absolute; top: 16px; left: 16px; z-index: 3; }
.hub-banner-socials .profile-social-row { flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.hub-banner-socials .profile-social-icon { width: 38px; height: 38px; border-radius: 12px; background: rgb(0 0 0 / .42); border: 1px solid rgb(255 255 255 / .22); color: #f3f4f6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hub-banner-socials .profile-social-icon:hover { border-color: rgb(255 255 255 / .6); color: #fff; }
.hub-banner-socials .profile-social-icon svg { width: 17px; height: 17px; }

.htm { position: fixed; z-index: 1600; width: min(980px, 92vw); height: min(680px, 84vh); min-width: 420px; min-height: 340px; max-width: 100vw; max-height: 100vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, #15161d, #0f1015); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 90px -20px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .03); opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1); }
.htm[hidden] { display: none; }
.htm.is-open { opacity: 1; transform: none; }
.htm.is-dragging { transition: none; box-shadow: 0 50px 110px -20px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .12); user-select: none; }
.htm-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / .07); background: rgb(255 255 255 / .03); cursor: grab; touch-action: none; flex: none; }
.htm.is-dragging .htm-head { cursor: grabbing; }
.htm-grip { color: var(--gray); display: inline-flex; }
.htm-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.htm-titles strong { font-size: 16px; font-weight: 800; }
.htm-titles small { font-size: 12px; color: var(--gray); }
.htm-close { width: 32px; height: 32px; border-radius: 10px; border: 0; background: rgb(255 255 255 / .06); color: var(--white); font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s; }
.htm-close:hover { background: rgb(255 255 255 / .14); }
.htm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / .06); flex: none; }
.htm-search { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 11px; background: rgb(255 255 255 / .05); border: 1px solid var(--border-strong); color: var(--gray); }
.htm-search:focus-within { border-color: rgb(var(--pg-brand-rgb) / .8); }
.htm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--white); font: inherit; font-size: 13.5px; }
.htm-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.htm-chip { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: none; color: var(--gray); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.htm-chip:hover { color: var(--white); }
.htm-chip.is-on { background: var(--white); color: #0b0d12; border-color: var(--white); }
.htm-sort { height: 38px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--border-strong); background: rgb(255 255 255 / .05); color: var(--white); font: inherit; font-size: 12.5px; }
.htm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent; }
.htm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; transition: opacity .2s; }
.htm-grid.is-loading { opacity: .4; }
.htm-empty { text-align: center; color: var(--gray); font-size: 13.5px; padding: 30px 10px; margin: 0; }
.htm-more { display: block; margin: 18px auto 4px; }
.htm-more[hidden], .htm-empty[hidden] { display: none; }
@media (max-width: 700px) { .htm { inset: 0 !important; width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; resize: none; min-width: 0; } .htm-head { cursor: default; } .hub-banner-wrap .hub-banner-socials { top: 12px; left: 12px; } }

/* turnuva penceresi: kenar/köşe tutamaçları + akıcı kaydırma (cam bulanıklığı ve ağır hover efektleri pencere içinde kapalı) */
.htm-h { position: absolute; z-index: 5; }
.htm-h[data-dir="n"], .htm-h[data-dir="s"] { left: 14px; right: 14px; height: 8px; cursor: ns-resize; }
.htm-h[data-dir="e"], .htm-h[data-dir="w"] { top: 14px; bottom: 14px; width: 8px; cursor: ew-resize; }
.htm-h[data-dir="n"] { top: 0; } .htm-h[data-dir="s"] { bottom: 0; } .htm-h[data-dir="e"] { right: 0; } .htm-h[data-dir="w"] { left: 0; }
.htm-h[data-dir="ne"], .htm-h[data-dir="nw"], .htm-h[data-dir="se"], .htm-h[data-dir="sw"] { width: 16px; height: 16px; }
.htm-h[data-dir="ne"] { top: 0; right: 0; cursor: nesw-resize; } .htm-h[data-dir="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
.htm-h[data-dir="nw"] { top: 0; left: 0; cursor: nwse-resize; } .htm-h[data-dir="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
.htm-h[data-dir="se"]::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-right: 2px solid rgb(255 255 255 / .28); border-bottom: 2px solid rgb(255 255 255 / .28); border-radius: 0 0 4px 0; }
.htm { will-change: transform; contain: layout paint; }
.htm-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.htm-grid .mini-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .04); content-visibility: auto; contain-intrinsic-size: auto 270px; transition: border-color .2s ease; }
.htm-grid .mini-card:hover { transform: none; box-shadow: none; border-color: var(--gold); }
.htm.is-dragging .htm-grid { pointer-events: none; }
html.htm-open .ambient-bg * { animation-play-state: paused !important; }

/* --- Girişsiz ziyaretçi: Giriş Yap / Kayıt Ol masaüstünde içerik penceresinin sağ üstünde (sol menünün altından taşındı) --- */
.guest-auth { display: none; }
@media (min-width: 901px) {
    body.has-rail:not(.is-auth) .guest-auth { position: fixed; top: 20px; right: 24px; z-index: 100; display: flex; align-items: center; gap: 8px; }
    body.has-rail:not(.is-auth) .guest-auth .btn { margin: 0; white-space: nowrap; }
    body.has-rail:not(.is-auth) .guest-auth .btn-outline { background: rgb(16 18 26 / .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
html.mr-embed .guest-auth, html.es-embed-prev .guest-auth { display: none !important; }

/* --- Yükleniyor göstergesi (esBusy.overlay / go / reload): metin kutusu yok, ekranın ortasında dönen PAF.GG logosu --- */
.busy-overlay { background: rgb(0 0 0 / .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.busy-box.busy-logo { min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; gap: 0; }
.busy-logo .busy-msg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- Hub turnuva penceresi: kapat düğmesi (SVG çarpı, tam ortada; üzerine gelince kırmızı) + site tasarımlı sıralama listesi --- */
.htm-close { display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0; line-height: 0; flex: none; }
.htm-close svg { display: block; }
.htm-close:hover, .htm-close:focus-visible { background: #dc3545; color: #fff; outline: 0; }
.htm-sort { flex: none; }
.htm-sort .custom-select { min-width: 168px; }
.htm-sort .custom-select-trigger { height: 38px; padding: 0 12px; border-width: 1px; border-color: var(--border-strong); border-radius: 11px; background: rgb(255 255 255 / .05); font-size: 12.5px; }
.htm-sort .custom-select-options { right: 0; left: auto; min-width: 100%; }
.htm-sort .custom-select-option { padding: 8px 12px; font-size: 12.5px; }

/* --- Hub üyeler penceresi (binlerce üye): yoğun oyuncu ızgarası, süzgeçler, numaralı sayfalama --- */
.team-modal-box.hmm-box { max-width: min(1120px, 96vw); width: 100%; height: min(820px, 92vh); display: flex; flex-direction: column; }
.hmm-box .team-modal-header { flex: none; }
.hmm-box .team-modal-close:hover { background: #dc3545; border-color: #dc3545; color: #fff; }
.hmm-toolbar { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 1.6rem 10px; border-bottom: 1px solid var(--border); position: relative; z-index: 3; }
.hmm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hmm-row .hmm-search { flex: 1 1 260px; }
.hmm-row .members-datefilter { margin-left: auto; }
.hmm-sort { flex: none; }
.hmm-sort .custom-select { min-width: 190px; }
.hmm-sort .custom-select-trigger { padding: .68rem .9rem; border-width: 1px; border-color: var(--border-strong); border-radius: 12px; font-size: 13.5px; }
.hmm-sort .custom-select-options { left: auto; right: 0; min-width: 100%; }
.hmm-letters { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.hmm-letters::-webkit-scrollbar { display: none; }
.hmm-letter { flex: none; min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: 8px; background: rgb(255 255 255 / .04); color: var(--gray); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hmm-letter.is-all { padding: 0 11px; }
.hmm-letter:hover { color: var(--white); background: rgb(255 255 255 / .09); }
.hmm-letter.is-on { background: var(--white); color: #0b0d12; }
.hmm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 1.4rem; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .2) transparent; overscroll-behavior: contain; }
.hmm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 8px; align-content: start; }
.hmm-card { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 14px; background: rgb(255 255 255 / .03); color: var(--white); text-decoration: none; animation: esFadeInUp .35s cubic-bezier(.22, 1, .36, 1) both; transition: background .18s ease, border-color .18s ease; }
a.hmm-card:hover { background: rgb(255 255 255 / .07); border-color: var(--border-strong); }
.hmm-card.is-mgr { border-color: rgb(var(--pg-brand-rgb) / .55); background: rgb(var(--pg-brand-rgb) / .08); }
.hmm-card .av-wrap { width: 38px; height: 38px; flex: none; }
.hmm-card .av-wrap img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.hmm-card .av-wrap .pres-dot { width: 10px; height: 10px; border-width: 2px; }
.hmm-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.hmm-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hmm-top .member-name { font-size: .9rem; }
.hmm-top .bdg-inline, .hmm-top .prem-badge { flex: none; }
.hmm-meta small { color: var(--gray); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmm-mgr { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: rgb(var(--pg-brand-rgb) / .25); color: var(--white); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.hmm-card .hub-kick { margin-left: 0; }
.hmm-card.is-skeleton { animation: none; pointer-events: none; }
.hmm-empty { grid-column: 1 / -1; padding: 60px 10px; }
.hmm-pager { flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 1.4rem 14px; border-top: 1px solid var(--border); }
.hmm-range { color: var(--gray); font-size: 12.5px; white-space: nowrap; min-width: 130px; }
.hmm-pages { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.hmm-pg { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: rgb(255 255 255 / .04); color: var(--gray); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.hmm-pg:hover:not(:disabled) { background: rgb(255 255 255 / .1); color: var(--white); }
.hmm-pg.is-on { background: var(--white); color: #0b0d12; }
.hmm-pg:disabled { opacity: .35; cursor: default; }
.hmm-dots { color: var(--gray); padding: 0 2px; }
.hmm-jump { display: flex; align-items: center; gap: 6px; margin: 0; }
.hmm-jump label { color: var(--gray); font-size: 12px; }
.hmm-jump input { width: 58px; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 9px; background: rgb(255 255 255 / .05); color: var(--white); font: inherit; font-size: 13px; text-align: center; outline: 0; }
.hmm-jump input:focus { border-color: rgb(var(--pg-brand-rgb) / .8); }
@media (max-width: 700px) {
    .team-modal-box.hmm-box { height: 94vh; }
    .hmm-toolbar { padding: 10px 12px 8px; } .hmm-body { padding: 10px 12px; }
    .hmm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .hmm-row .members-datefilter { margin-left: 0; }
    .hmm-pager { padding: 8px 12px 12px; } .hmm-range { display: none; } .hmm-jump label { display: none; }
}

/* --- Hareketler (takım/profil): tıklanabilir öğeler (takım, üye, turnuva) PAF rengi --- */
.activity-log a.al-link { color: var(--pg-brand-bright, #c8123d); font-weight: 700; text-decoration: none; transition: color .2s ease; }
.activity-log a.al-link:hover { color: #ff4d73; text-decoration: underline; }

/* --- Premium simgesi: hiçbir yerde çerçeve/yuvarlak/arka plan almaz (genel `img` avatar kuralları — .my-team-member img, .member-row img… — simgeyi yuvarlak çerçeveye alıyordu) --- */
html body .prem-badge img { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; object-fit: contain; }

/* --- Sağ çubuk "Arkadaş bul" arama kutusu: animasyonla açılır/kapanır (yükseklik + saydamlık + hafif kayma) --- */
.rp-search { display: block; overflow: hidden; max-height: 0; padding: 0 12px; opacity: 0; transform: translateY(-8px); transition: max-height .34s cubic-bezier(.22, 1, .36, 1), padding .34s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .34s cubic-bezier(.22, 1, .36, 1); }
.rp-search.is-open { max-height: 64px; padding: 10px 12px 4px; opacity: 1; transform: none; }

/* --- Profil: Arkadaşlar sekmesi + sekme sayaçları --- */
.tabs .tab .tab-count { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--gray); font-size: 11px; font-weight: 700; vertical-align: 1px; transition: background .2s, color .2s; }
.tabs .tab.active .tab-count, .tabs .tab:hover .tab-count { background: rgb(var(--pg-brand-rgb) / .35); color: var(--white); }
.pfr-tools { margin-bottom: 14px; }
.pfr .hmm-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pfr .hmm-card { padding: 9px 8px 9px 10px; }
.pfr .hmm-card:hover { background: rgb(255 255 255 / .07); border-color: var(--border-strong); transform: translateY(-2px); }
.pfr-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.pfr .hmm-card .gear { flex: none; }
.pfr .hmm-pager { padding: 16px 0 0; margin-top: 16px; }

/* --- Profil Genel Bakış / Takımlar / Hublar: vitrin kartları (kapak + öne taşan logo + üye yığını) --- */
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px; }
.pv-card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--panel); color: var(--white); text-decoration: none;
    animation: esFadeInUp .55s cubic-bezier(.22, 1, .36, 1) both; transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .35s ease; }
.pv-card:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: 0 22px 44px -22px rgb(0 0 0 / .85), 0 0 0 1px rgb(var(--pg-brand-rgb) / .35); }
.pv-cover { display: block; height: 78px; background-size: cover; background-position: center; position: relative; overflow: hidden; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pv-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05), rgb(15 16 22 / .82)); }
.pv-card:hover .pv-cover { transform: scale(1.08); }
.pv-game { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 10px; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.pv-game img { width: 20px; height: 20px; object-fit: contain; }
.pv-game.pv-role { width: auto; height: 24px; padding: 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--white); background: rgb(var(--pg-brand-rgb) / .55); }
.pv-logo { position: absolute; top: 46px; left: 16px; width: 60px; height: 60px; border-radius: 18px; overflow: hidden; z-index: 2; display: inline-flex; align-items: center; justify-content: center; background: var(--chip-blue, #2c3350); border: 3px solid var(--panel-solid, #15161d); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .8); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.pv-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-logo b { color: #fff; font-size: 19px; font-weight: 800; }
.pv-card:hover .pv-logo { transform: scale(1.08) rotate(-3deg); }
.pv-body { display: flex; flex-direction: column; gap: 8px; padding: 34px 16px 15px; min-width: 0; }
.pv-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pv-name { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pv-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-chip { padding: 2px 9px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid var(--border); font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--white); }
.pv-chip.is-brand { background: rgb(var(--pg-brand-rgb) / .3); border-color: rgb(var(--pg-brand-rgb) / .6); }
.pv-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--gray); }
.pv-stack { display: flex; align-items: center; margin-top: 2px; }
.pv-stack img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--panel-solid, #15161d); margin-left: -8px; transition: margin .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1); }
.pv-stack img:first-child { margin-left: 0; }
.pv-stack i { margin-left: -8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: rgb(255 255 255 / .12); border: 2px solid var(--panel-solid, #15161d); color: var(--white); font-style: normal; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pv-card:hover .pv-stack img { margin-left: -3px; }
.pv-card:hover .pv-stack img:first-child { margin-left: 0; }
.pv-hub .pv-body { padding-bottom: 17px; }
@media (max-width: 520px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pv-card, .pv-cover, .pv-logo { transition: none; animation: none; } }

/* --- Hesap/oyun bağlantı kartı: hover'da çıkan "bağlantıya git" oku, yanında Steam/Tracker düğmesi varken gösterilmez (üst üste iki simge çıkıyordu) --- */
.gacc-tile:has(.gacc-btn) .gacc-go { display: none; }

/* --- Yazı kutuları: tarayıcının kendi sağ alt boyutlandırma tutamacı YOK; kutu yazdıkça yumuşakça uzar (js/core/autogrow.js) --- */
textarea { resize: none !important; overflow-y: auto; scrollbar-width: thin; transition: height .18s cubic-bezier(.22, 1, .36, 1), border-color .2s ease, box-shadow .2s ease; }

/* --- Animasyon denetimi (2026-09-27): aniden belirip kaybolan yerler --- */
@keyframes esAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* display:none → görünür olduğunda oynar (fill-mode backwards: bitince dönüşüm katmanı kalmaz) */
#dmConversationList, #dmNewChatPanel, #dmThreadPanel, [id^="modalView-"], #twofaSetup, #twofaRecovery, .empty-state-box, .members-empty, .htm-empty,
.tl-attach-preview:not([hidden]), .seed-swap-hint, #seedReset:not([hidden]), .privacy-notice { animation: esAppear .32s cubic-bezier(.22, 1, .36, 1) backwards; }
/* kullanıcı işlemiyle yüklenen listeler: kartlar kademeli girer */
.htm-grid > * { animation: esFadeInUp .45s cubic-bezier(.22, 1, .36, 1) backwards; }
.htm-grid > *:nth-child(2) { animation-delay: .04s; } .htm-grid > *:nth-child(3) { animation-delay: .08s; } .htm-grid > *:nth-child(4) { animation-delay: .12s; }
.htm-grid > *:nth-child(5) { animation-delay: .16s; } .htm-grid > *:nth-child(6) { animation-delay: .2s; } .htm-grid > *:nth-child(n+7) { animation-delay: .24s; }
.spotlight-box .spotlight-results > *, #spotlightResults > * { animation: esAppear .28s cubic-bezier(.22, 1, .36, 1) backwards; }
.is-leaving { will-change: height, opacity; }
@media (prefers-reduced-motion: reduce) { #dmConversationList, #dmNewChatPanel, #dmThreadPanel, [id^="modalView-"], #twofaSetup, #twofaRecovery, .empty-state-box, .members-empty, .htm-empty, .htm-grid > *, .privacy-notice { animation: none; } }

/* --- Performans (2026-09-27): neredeyse opak (%94) panellerde arka plan bulanıklığı görünmez ama her karede yeniden hesaplanıyordu (arkada animasyonlu ortam var) → kapatıldı; mesaj penceresi açıkken ortam animasyonları durur --- */
.search-panel, .notif-panel, .spotlight-box, .user-menu-dropdown, .modal-box, .crop-modal-box, .dm-widget, .team-modal-box, .dt-picker-panel, .mx-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.dm-open .ambient-bg * { animation-play-state: paused !important; }
.spotlight-item-avatar.is-hub { border-radius: 8px; }

/* --- Ana sayfa: hub kurma talebi afişi (sahne: arkada iki yöne akan eğik oyun şeritleri, ortada başlık; koyu cam, ince çerçeve, tek bordo vurgu) --- */
.hubcta { position: relative; overflow: hidden; isolation: isolate; margin: 8px 0 38px; min-height: 380px; display: flex; align-items: center; justify-content: center; border-radius: 28px; border: 1px solid rgb(255 255 255 / .09); background: #0a0a0e;
    box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06); animation: esFadeInUp .7s cubic-bezier(.22, 1, .36, 1) both; }
.hubcta-rows { position: absolute; inset: -34% -12%; z-index: -2; display: flex; flex-direction: column; justify-content: center; gap: 20px; transform: rotate(-7deg); }
.hubcta-row { display: flex; gap: 16px; width: max-content; animation: hubctaSlide 46s linear infinite; }
.hubcta-row.is-rev { animation-direction: reverse; animation-duration: 58s; }
.hubcta-row:nth-child(3) { animation-duration: 52s; }
.hubcta-chip { flex: none; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 26px 0 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .08); background: rgb(255 255 255 / .04); }
.hubcta-chip img { width: 40px; height: 40px; padding: 6px; border-radius: 50%; object-fit: contain; background: rgb(255 255 255 / .07); }
.hubcta-chip b { font-size: 15px; font-weight: 600; letter-spacing: .01em; color: rgb(255 255 255 / .5); white-space: nowrap; }
.hubcta-veil { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(58% 90% at 50% 52%, rgb(9 9 13 / .98) 0%, rgb(9 9 13 / .93) 50%, rgb(9 9 13 / .3) 100%),
    radial-gradient(45% 55% at 50% 118%, rgb(var(--pg-brand-rgb) / .5), transparent 70%); }
.hubcta::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--pg-brand-rgb) / .9), transparent); }
.hubcta-body { position: relative; z-index: 1; max-width: 640px; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.hubcta-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: rgb(255 255 255 / .55); }
.hubcta-eyebrow i { width: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55)); } .hubcta-eyebrow i.r { transform: scaleX(-1); }
.hubcta h2 { margin: 0; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.hubcta h2 em { position: relative; font-style: normal; background: linear-gradient(90deg, #fff 20%, rgb(255 255 255 / .5)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hubcta-body p { margin: 0; max-width: 500px; font-size: 15.5px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.hubcta-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.hubcta-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; overflow: hidden; background: #fff; color: #0b0d12; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 12px 34px -12px rgb(255 255 255 / .4); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.hubcta-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(0 0 0 / .1), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.hubcta-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgb(255 255 255 / .55); }
.hubcta-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.hubcta-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.hubcta-btn:hover svg { transform: translateX(4px); }
.hubcta-link { position: relative; color: rgb(255 255 255 / .72); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.hubcta-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.hubcta-link:hover { color: #fff; } .hubcta-link:hover::after { transform: scaleX(1); }
@keyframes hubctaSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) { .hubcta { min-height: 340px; } .hubcta-body { padding: 44px 18px; } .hubcta-chip { height: 50px; } .hubcta-chip img { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .hubcta, .hubcta-row { animation: none; } }

/* --- Ana sayfa: Popüler Hub'lar (5 EŞİT poster kart; sıra numarası yok, hepsi aynı boyut; her hub'a kimliğinden türeyen ince bir renk tonu) --- */
.phub-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.phub-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; min-width: 0; min-height: 330px; padding: 34px 18px 20px; overflow: hidden; isolation: isolate; border-radius: 24px; border: 1px solid rgb(255 255 255 / .09); color: var(--white); text-decoration: none;
    background: linear-gradient(180deg, hsl(var(--hue) 45% 16% / .9) 0%, #0d0d12 62%);
    opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, box-shadow .4s ease; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
.phub-card.is-in { opacity: 1; transform: none; }
.phub-card.is-in:hover { transform: translateY(-6px); transition-delay: 0s; border-color: hsl(var(--hue) 60% 60% / .55); box-shadow: 0 30px 54px -26px rgb(0 0 0 / .9), 0 0 40px -12px hsl(var(--hue) 70% 55% / .5); }
.phub-cover { position: absolute; inset: 0; z-index: -2; background: radial-gradient(90% 55% at 50% 0%, hsl(var(--hue) 70% 55% / .38), transparent 72%) center / cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.phub-cover[style] { opacity: .5; }
.phub-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgb(13 13 18 / .94) 68%); }
.phub-card:hover .phub-cover { transform: scale(1.08); }
.phub-logo { flex: none; width: 92px; height: 92px; border-radius: 28px; overflow: hidden; background: #1b1b24; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 16px 34px -12px rgb(0 0 0 / .9), 0 0 0 6px rgb(255 255 255 / .04); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.phub-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phub-card:hover .phub-logo { transform: scale(1.08) rotate(-3deg); }
.phub-name-row { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; margin-top: 8px; }
.phub-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phub-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: rgb(255 255 255 / .6); }
.phub-meta .pm-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .phub-meta svg { opacity: .8; }
.phub-live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgb(239 68 68 / .18); border: 1px solid rgb(239 68 68 / .3); color: #fca5a5; font-size: 11px; font-weight: 700; }
.phub-live b { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: hotPing 1.8s ease-out infinite; }
.phub-stack { display: inline-flex; align-items: center; margin-top: auto; padding-top: 6px; }
.phub-stack img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #0d0d12; margin-left: -9px; transition: margin .35s cubic-bezier(.22, 1, .36, 1); }
.phub-stack img:first-child { margin-left: 0; }
.phub-card:hover .phub-stack img { margin-left: -3px; } .phub-card:hover .phub-stack img:first-child { margin-left: 0; }
.phub-go { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; margin-top: 4px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); color: #fff; font-size: 13px; font-weight: 700; transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.phub-go em { font-style: normal; } .phub-go svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.phub-card:hover .phub-go { background: #fff; color: #0b0d12; } .phub-card:hover .phub-go svg { transform: translateX(3px); }
@media (max-width: 1250px) { .phub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .phub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .phub-card { min-height: 300px; padding: 30px 12px 16px; } .phub-logo { width: 76px; height: 76px; border-radius: 23px; } }
@media (prefers-reduced-motion: reduce) { .phub-card { opacity: 1; transform: none; transition: none; } .phub-live b { animation: none; } }

/* --- Ana sayfa: turnuva talebi afişi (hub afişinden farklı: sıcak altın vurgu, canlı çizilen turnuva ağacı) --- */
.tcta { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 36px; margin: 8px 0 40px; padding: 52px 56px; overflow: hidden; isolation: isolate; border-radius: 28px;
    border: 1px solid rgb(245 197 66 / .16); background: radial-gradient(60% 90% at 88% 50%, rgb(245 197 66 / .1), transparent 70%), linear-gradient(135deg, #12110d 0%, #0a0a0c 60%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(245 197 66 / .1); }
.tcta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, transparent, #f5c542, transparent); opacity: .7; }
.tcta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tcta-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgb(245 197 66 / .3); background: rgb(245 197 66 / .07); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: #f5c542; }
.tcta h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.tcta h2 em { font-style: normal; background: linear-gradient(90deg, #ffe08a, #f5c542 60%, #d99a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcta-copy p { margin: 0; max-width: 500px; font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.tcta-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.tcta-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #ffe08a, #f5c542 55%, #d99a1c); color: #1a1405; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 34px -14px rgb(245 197 66 / .7); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.tcta-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.tcta-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -14px rgb(245 197 66 / .85); } .tcta-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.tcta-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .tcta-btn:hover svg { transform: translateX(4px); }
.tcta-link { position: relative; color: rgb(255 255 255 / .72); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.tcta-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.tcta-link:hover { color: #fff; } .tcta-link:hover::after { transform: scaleX(1); }
.tcta-visual { min-width: 0; }
.tcta-bracket { display: block; width: 100%; height: auto; overflow: visible; }
.tcta-bracket .tp { fill: none; stroke: rgb(255 255 255 / .16); stroke-width: 1.5; stroke-linejoin: round; }
.tcta-bracket .tp.route { stroke: #f5c542; stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgb(245 197 66 / .7)); animation: tctaDraw 5.5s cubic-bezier(.45, 0, .2, 1) infinite; }
.tcta-bracket .tb { fill: rgb(255 255 255 / .035); stroke: rgb(255 255 255 / .12); }
.tcta-bracket .tb.on { fill: rgb(245 197 66 / .08); stroke: rgb(245 197 66 / .55); animation: tctaPulse 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.tcta-bracket .tl { fill: rgb(255 255 255 / .22); }
.tcta-bracket .tcup-c { fill: rgb(245 197 66 / .1); stroke: #f5c542; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: tctaCup 5.5s ease-in-out infinite; filter: drop-shadow(0 0 10px rgb(245 197 66 / .6)); }
.tcta-bracket .tcup-i { fill: none; stroke: #f5c542; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tctaDraw { 0% { stroke-dashoffset: 1; } 55%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes tctaPulse { 0%, 25% { opacity: .45; } 55%, 88% { opacity: 1; } 100% { opacity: .45; } }
@keyframes tctaCup { 0%, 50% { transform: scale(1); } 62% { transform: scale(1.18); } 80%, 100% { transform: scale(1); } }
@media (max-width: 900px) { .tcta { grid-template-columns: minmax(0, 1fr); padding: 38px 26px; } .tcta-visual { display: none; } }
@media (prefers-reduced-motion: reduce) { .tcta-bracket .tp.route { animation: none; stroke-dashoffset: 0; } .tcta-bracket .tb.on, .tcta-bracket .tcup-c { animation: none; } }
.phub-name-row { min-height: 44px; }

/* --- Ana sayfa bölümleri birbirine yakın: her bölüm konteynerinin kendi üst/alt boşluğu (60px) kaldırıldı, bölümler arası tek tutarlı aralık --- */
.container.home-sec { padding-top: 0; padding-bottom: 0; }
.container.home-sec.is-first { margin-top: 26px; }
.home-sec ~ .home-sec { margin-top: 40px; }
.home-sec .hubcta, .home-sec .tcta { margin: 0; }
.home-sec:last-of-type { padding-bottom: 60px; }
@media (max-width: 700px) { .home-sec ~ .home-sec { margin-top: 30px; } }

/* --- Ana sayfa: turnuva talebi afişi v2 (güncel; v1 = .tcta yedek). Sinematik arka plan turnuva ağacı: rota soldan sağa ilerler, kutular ve adımlar sırayla yanar, kupada biter --- */
.tcta2 { position: relative; overflow: hidden; isolation: isolate; min-height: 400px; display: flex; align-items: center; border-radius: 28px; border: 1px solid rgb(56 189 248 / .16); background: #06080c; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(56 189 248 / .1); }
.tcta2-bg { position: absolute; top: 0; right: 0; bottom: 0; z-index: -2; width: 64%; height: 100%; }
.tcta2-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 8 12 / .96) 0%, rgb(6 8 12 / .82) 30%, rgb(6 8 12 / 0) 46%), radial-gradient(50% 80% at 100% 50%, rgb(56 189 248 / .13), transparent 70%); }
.tcta2-body { position: relative; z-index: 1; max-width: 640px; padding: 54px 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tcta2-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #7dd3fc; }
.tcta2-eyebrow i { width: 30px; height: 1px; background: linear-gradient(90deg, #38bdf8, transparent); }
.tcta2 h2 { margin: 0; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.tcta2 h2 em { font-style: normal; background: linear-gradient(90deg, #bae6fd, #38bdf8 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcta2-body > p { margin: 0; max-width: 500px; font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.tcta2-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; }
.tcta2-steps li { padding: 6px 13px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: rgb(255 255 255 / .45); }
.tcta2-steps li.is-final { color: #7dd3fc; }
.tcta2-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.tcta2-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; overflow: hidden; background: #38bdf8; color: #04121c; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 36px -12px rgb(56 189 248 / .7); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.tcta2-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.tcta2-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgb(56 189 248 / .85); } .tcta2-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.tcta2-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .tcta2-btn:hover svg { transform: translateX(4px); }
.tcta2-link { position: relative; color: rgb(255 255 255 / .72); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.tcta2-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.tcta2-link:hover { color: #fff; } .tcta2-link:hover::after { transform: scaleX(1); }
/* ağaç */
.tcta2-bg .tp { fill: none; stroke: rgb(255 255 255 / .13); stroke-width: 1.6; stroke-linejoin: round; }
.tcta2-bg .tb { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .1); }
.tcta2-bg .tl { fill: rgb(255 255 255 / .18); }
.tcta2-bg .tb.on { animation: tcta2Box 6s ease-in-out infinite; animation-delay: var(--t, 0s); }
.tcta2-bg .tl.on { animation: tcta2Line 6s ease-in-out infinite; animation-delay: var(--t, 0s); }
.tcta2-bg .tp.route { stroke: #38bdf8; stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgb(56 189 248 / .8)); animation: tcta2Draw 6s cubic-bezier(.4, 0, .25, 1) infinite; }
.tcta2-bg .tspark { fill: #e0f2fe; filter: drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 16px #38bdf8); }
.tcta2-bg .tcup-c { fill: rgb(56 189 248 / .08); stroke: rgb(56 189 248 / .4); stroke-width: 1.6; }
.tcta2-bg .tcup-r { fill: none; stroke: #38bdf8; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: tcta2Ring 6s ease-out infinite; }
.tcta2-bg .tcup-i { fill: none; stroke: #7dd3fc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgb(56 189 248 / .7)); }
@keyframes tcta2Draw { 0% { stroke-dashoffset: 1; } 86%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes tcta2Box { 0%, 6% { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .1); } 14%, 92% { fill: rgb(56 189 248 / .14); stroke: rgb(56 189 248 / .8); } 100% { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .1); } }
@keyframes tcta2Line { 0%, 6% { fill: rgb(255 255 255 / .18); } 14%, 92% { fill: #7dd3fc; } 100% { fill: rgb(255 255 255 / .18); } }
@keyframes tcta2Ring { 0%, 80% { transform: scale(1); opacity: 0; } 86% { opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes tcta2Step { 0%, 4% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } 10%, 76% { color: #04121c; border-color: #38bdf8; background: #38bdf8; } 90%, 100% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } }
@media (max-width: 900px) { .tcta2 { min-height: 0; } .tcta2-body { padding: 38px 24px; } .tcta2-veil { background: linear-gradient(180deg, rgb(6 8 12 / .93), rgb(6 8 12 / .82)); } }
@media (prefers-reduced-motion: reduce) { .tcta2-bg .tp.route { animation: none; stroke-dashoffset: 0; } .tcta2-bg .tb.on, .tcta2-bg .tl.on, .tcta2-steps li, .tcta2-bg .tcup-r { animation: none; } .tcta2-bg .tspark { display: none; } }

.tcta2-steps li:nth-child(1) { animation: tcta2S1 6s ease-in-out infinite; } .tcta2-steps li:nth-child(2) { animation: tcta2S2 6s ease-in-out infinite; }
.tcta2-steps li:nth-child(3) { animation: tcta2S3 6s ease-in-out infinite; } .tcta2-steps li:nth-child(4) { animation: tcta2S4 6s ease-in-out infinite; } .tcta2-steps li:nth-child(5) { animation: tcta2S5 6s ease-in-out infinite; }
@keyframes tcta2S1 { 0%, 5% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } 10%, 92% { color: #04121c; border-color: #38bdf8; background: #38bdf8; } 100% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } }
@keyframes tcta2S2 { 0%, 25% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } 30%, 92% { color: #04121c; border-color: #38bdf8; background: #38bdf8; } 100% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } }
@keyframes tcta2S3 { 0%, 37% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } 42%, 92% { color: #04121c; border-color: #38bdf8; background: #38bdf8; } 100% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } }
@keyframes tcta2S4 { 0%, 63% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } 68%, 92% { color: #04121c; border-color: #38bdf8; background: #38bdf8; } 100% { color: rgb(255 255 255 / .45); border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .03); } }
@keyframes tcta2S5 { 0%, 83% { color: #7dd3fc; border-color: rgb(56 189 248 / .4); background: rgb(255 255 255 / .03); } 88%, 92% { color: #04121c; border-color: #bae6fd; background: #bae6fd; box-shadow: 0 0 22px rgb(56 189 248 / .8); } 100% { color: #7dd3fc; border-color: rgb(56 189 248 / .4); background: rgb(255 255 255 / .03); } }

/* --- Ana sayfa: turnuva talebi afişi v3 (güncel; v1 = .tcta, v2 = .tcta2 yedek). Canlı maç odası sahnesi: hazır → harita eleme → canlı skor → sonuç (9 sn döngü) --- */
@property --tsa { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --tsb { syntax: '<integer>'; inherits: false; initial-value: 0; }
.tcta3 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 40px; padding: 52px 56px; overflow: hidden; isolation: isolate; border-radius: 28px; border: 1px solid rgb(74 222 128 / .16); background: linear-gradient(135deg, #0a0d0b 0%, #070808 70%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(74 222 128 / .1); }
.tcta3::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: linear-gradient(rgb(255 255 255 / .03) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .03) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask: radial-gradient(60% 90% at 75% 50%, #000, transparent 80%); mask: radial-gradient(60% 90% at 75% 50%, #000, transparent 80%); }
.tcta3-glow { position: absolute; z-index: -1; right: -6%; top: -20%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(74 222 128 / .22), transparent 72%); animation: hubctaDrift 14s ease-in-out infinite alternate; }
.tcta3-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tcta3-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #86efac; }
.tcta3-eyebrow b { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgb(74 222 128 / .6); animation: tcta3Ping 1.9s ease-out infinite; }
.tcta3 h2 { margin: 0; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.tcta3 h2 em { font-style: normal; background: linear-gradient(90deg, #dcfce7, #4ade80 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcta3-copy > p { margin: 0; max-width: 500px; font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.tcta3-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 2px 0 0; padding: 0; }
.tcta3-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .72); } .tcta3-points li svg { color: #4ade80; }
.tcta3-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.tcta3-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 12px; overflow: hidden; background: #4ade80; color: #04140a; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 36px -12px rgb(74 222 128 / .6); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.tcta3-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.tcta3-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgb(74 222 128 / .8); } .tcta3-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.tcta3-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .tcta3-btn:hover svg { transform: translateX(4px); }
.tcta3-link { position: relative; color: rgb(255 255 255 / .72); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.tcta3-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.tcta3-link:hover { color: #fff; } .tcta3-link:hover::after { transform: scaleX(1); }
/* maç odası kartı */
.tcta3-stage { display: flex; justify-content: center; min-width: 0; perspective: 1200px; }
.mr { width: min(440px, 100%); border-radius: 22px; border: 1px solid rgb(255 255 255 / .12); background: linear-gradient(180deg, #131714, #0b0d0c); box-shadow: 0 36px 70px -28px rgb(0 0 0 / .95), 0 0 0 1px rgb(74 222 128 / .12), 0 0 60px -20px rgb(74 222 128 / .35); transform: rotateY(-7deg) rotateX(2deg); animation: hubctaFloat 8s ease-in-out infinite alternate; }
.mr-in { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 16px; animation: tcta3Fade 9s ease-in-out infinite; }
.mr-head { display: flex; align-items: center; gap: 10px; }
.mr-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgb(239 68 68 / .16); border: 1px solid rgb(239 68 68 / .3); color: #fca5a5; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.mr-live b { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: hotPing 1.8s ease-out infinite; }
.mr-title { font-size: 13px; font-weight: 700; color: rgb(255 255 255 / .85); } .mr-bo { margin-left: auto; font-size: 11px; font-weight: 700; color: rgb(255 255 255 / .45); }
.mr-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mr-team { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 0; }
.mr-team strong { font-size: 13px; font-weight: 700; color: #fff; }
.mr-logo { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; border: 1px solid rgb(255 255 255 / .16); }
.mr-team.is-a .mr-logo { background: linear-gradient(135deg, #38bdf8, #2563eb); } .mr-team.is-b .mr-logo { background: linear-gradient(135deg, #fb923c, #dc2626); }
.mr-ready { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: rgb(255 255 255 / .4); border: 1px solid rgb(255 255 255 / .12); animation: tcta3Ready 9s ease-in-out infinite; }
.mr-ready.is-b { animation-name: tcta3ReadyB; }
.mr-score { display: inline-flex; align-items: center; gap: 8px; font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.mr-score i { font-style: normal; color: rgb(255 255 255 / .3); }
.mr-n { min-width: 1.1ch; text-align: center; counter-reset: n var(--tsa); animation: tcta3SA 9s linear infinite; } .mr-n::after { content: counter(n); }
.mr-n.is-b { counter-reset: n var(--tsb); animation-name: tcta3SB; }
.mr-veto { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .08); }
.mr-veto small { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: rgb(255 255 255 / .4); }
.mr-maps { display: flex; flex-wrap: wrap; gap: 7px; }
.mr-map { position: relative; padding: 6px 12px; border-radius: 9px; border: 1px solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .04); font-size: 12px; font-weight: 700; color: rgb(255 255 255 / .8); }
.mr-map.is-b0 { animation: tcta3B0 9s ease-in-out infinite; } .mr-map.is-b1 { animation: tcta3B1 9s ease-in-out infinite; } .mr-map.is-b2 { animation: tcta3B2 9s ease-in-out infinite; }
.mr-map.is-b3 { animation: tcta3B3 9s ease-in-out infinite; } .mr-map.is-b4 { animation: tcta3B4 9s ease-in-out infinite; } .mr-map.is-b5 { animation: tcta3B5 9s ease-in-out infinite; }
.mr-map.is-pick { animation: tcta3Pick 9s ease-in-out infinite; }
.mr-foot { position: relative; min-height: 22px; font-size: 12.5px; }
.mr-play, .mr-done { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; color: rgb(255 255 255 / .6); opacity: 0; } .mr-play b { color: #4ade80; }
.mr-play { animation: tcta3Play 9s ease-in-out infinite; } .mr-done { color: #86efac; font-weight: 700; animation: tcta3Done 9s ease-in-out infinite; }
@keyframes tcta3Fade { 0% { opacity: 0; transform: translateY(8px); } 4%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes tcta3Ready { 0%, 5% { color: rgb(255 255 255 / .4); border-color: rgb(255 255 255 / .12); background: none; } 9%, 100% { color: #04140a; border-color: #4ade80; background: #4ade80; } }
@keyframes tcta3ReadyB { 0%, 8% { color: rgb(255 255 255 / .4); border-color: rgb(255 255 255 / .12); background: none; } 12%, 100% { color: #04140a; border-color: #4ade80; background: #4ade80; } }
@keyframes tcta3SA { 0%, 62% { --tsa: 0; } 92%, 100% { --tsa: 13; } }
@keyframes tcta3SB { 0%, 62% { --tsb: 0; } 92%, 100% { --tsb: 9; } }
@keyframes tcta3B0 { 0%, 15% { opacity: 1; } 19%, 100% { opacity: .28; text-decoration: line-through; border-color: rgb(56 189 248 / .5); color: rgb(255 255 255 / .35); } }
@keyframes tcta3B1 { 0%, 22% { opacity: 1; } 26%, 100% { opacity: .28; text-decoration: line-through; border-color: rgb(251 146 60 / .5); color: rgb(255 255 255 / .35); } }
@keyframes tcta3B2 { 0%, 29% { opacity: 1; } 33%, 100% { opacity: .28; text-decoration: line-through; border-color: rgb(56 189 248 / .5); color: rgb(255 255 255 / .35); } }
@keyframes tcta3B3 { 0%, 36% { opacity: 1; } 40%, 100% { opacity: .28; text-decoration: line-through; border-color: rgb(251 146 60 / .5); color: rgb(255 255 255 / .35); } }
@keyframes tcta3B4 { 0%, 43% { opacity: 1; } 47%, 100% { opacity: .28; text-decoration: line-through; border-color: rgb(56 189 248 / .5); color: rgb(255 255 255 / .35); } }
@keyframes tcta3B5 { 0%, 50% { opacity: 1; } 54%, 100% { opacity: .28; text-decoration: line-through; border-color: rgb(251 146 60 / .5); color: rgb(255 255 255 / .35); } }
@keyframes tcta3Pick { 0%, 56% { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .04); color: rgb(255 255 255 / .8); transform: none; } 62%, 100% { border-color: #4ade80; background: rgb(74 222 128 / .16); color: #dcfce7; box-shadow: 0 0 22px -4px rgb(74 222 128 / .7); transform: scale(1.06); } }
@keyframes tcta3Play { 0%, 58% { opacity: 0; transform: translateY(4px); } 63%, 90% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; } }
@keyframes tcta3Done { 0%, 92% { opacity: 0; transform: translateY(4px); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes tcta3Ping { 0% { box-shadow: 0 0 0 0 rgb(74 222 128 / .6); } 100% { box-shadow: 0 0 0 10px rgb(74 222 128 / 0); } }
@media (max-width: 900px) { .tcta3 { grid-template-columns: minmax(0, 1fr); padding: 38px 24px; } .tcta3-stage { display: none; } }
@media (prefers-reduced-motion: reduce) { .mr, .mr-in, .mr-ready, .mr-n, .mr-map, .tcta3-glow, .tcta3-eyebrow b { animation: none; } .mr-n.is-a::after { content: '13'; } .mr-n.is-b::after { content: '9'; } .mr-play { opacity: 1; } }

/* --- Ana sayfa: turnuva talebi afişi v4 (güncel; v1 .tcta · v2 .tcta2 · v3 .tcta3 yedek). Oyun-bağımsız yörünge: ortada kupa, etrafında dönen oyun simgeleri --- */
.tcta4 { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 30px; padding: 46px 56px 46px 30px; overflow: hidden; isolation: isolate; border-radius: 28px; border: 1px solid rgb(167 139 250 / .18); background: radial-gradient(48% 90% at 18% 50%, rgb(139 92 246 / .2), transparent 72%), radial-gradient(40% 70% at 100% 100%, rgb(236 72 153 / .09), transparent 70%), linear-gradient(135deg, #0d0b14, #08070c 70%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(167 139 250 / .12); }
.tcta4-stage { display: flex; align-items: center; justify-content: center; min-width: 0; }
.orb { position: relative; width: 420px; height: 420px; flex: none; max-width: 100%; }
.orb-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgb(167 139 250 / .28); transform: translate(-50%, -50%); }
.orb-ring.r-out { width: 356px; height: 356px; } .orb-ring.r-in { width: 224px; height: 224px; border-color: rgb(167 139 250 / .2); }
.orb-pulse { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; border: 1.5px solid rgb(167 139 250 / .5); opacity: 0; animation: tcta4Pulse 5.4s ease-out infinite; }
.orb-pulse.p2 { animation-delay: 1.8s; } .orb-pulse.p3 { animation-delay: 3.6s; }
.orb-spin { position: absolute; inset: 0; animation: tcta4Spin var(--spd, 40s) linear infinite; animation-direction: var(--dir, normal); }
.orb-item { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.orb-item > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: #15121f; border: 1.5px solid rgb(167 139 250 / .45); box-shadow: 0 10px 26px -10px rgb(0 0 0 / .9), 0 0 22px -6px rgb(139 92 246 / .6); animation: tcta4Spin var(--spd, 40s) linear infinite; animation-direction: var(--dir-rev, reverse); }
.orb-spin.is-in { --dir-rev: normal; }
.orb-item img { width: 60%; height: 60%; object-fit: contain; }
.orb-spin.is-in .orb-item { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.orb-core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ddd6fe; background: radial-gradient(closest-side, rgb(139 92 246 / .35), rgb(20 16 32 / .95) 78%); border: 1.5px solid rgb(167 139 250 / .6); box-shadow: 0 0 60px -6px rgb(139 92 246 / .75), inset 0 0 26px rgb(139 92 246 / .35); animation: tcta4Breathe 4.4s ease-in-out infinite; }
.orb-core svg { filter: drop-shadow(0 0 10px rgb(196 181 253 / .8)); }
.orb-chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgb(21 18 31 / .92); border: 1px solid rgb(167 139 250 / .35); font-size: 12px; font-weight: 700; color: #ede9fe; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .9); animation: hubctaFloat 6s ease-in-out infinite alternate; }
.orb-chip svg { color: #a78bfa; }
.orb-chip.c1 { left: -8%; top: 10%; } .orb-chip.c2 { right: -22%; bottom: 4%; animation-delay: -3s; }
.orb-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 10px #a78bfa; animation: tcta4Twinkle 3.4s ease-in-out infinite; }
.orb-dot.d1 { left: 12%; top: 62%; } .orb-dot.d2 { right: 10%; top: 24%; animation-delay: -1.2s; } .orb-dot.d3 { left: 46%; top: 2%; animation-delay: -2.1s; } .orb-dot.d4 { right: 26%; bottom: 3%; animation-delay: -.6s; }
.tcta4-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tcta4-eyebrow { display: inline-flex; padding: 6px 14px; border-radius: 999px; border: 1px solid rgb(167 139 250 / .35); background: rgb(139 92 246 / .1); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: #c4b5fd; }
.tcta4 h2 { margin: 0; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.tcta4 h2 em { font-style: normal; background: linear-gradient(90deg, #ddd6fe, #a78bfa 55%, #f0abfc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcta4-copy > p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.tcta4-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 2px 0 0; padding: 0; }
.tcta4-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .72); } .tcta4-points li svg { color: #a78bfa; }
.tcta4-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.tcta4-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; overflow: hidden; background: linear-gradient(120deg, #7c3aed, #a855f7 60%, #d946ef); color: #fff; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 36px -12px rgb(168 85 247 / .75), inset 0 1px 0 rgb(255 255 255 / .3); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.tcta4-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.tcta4-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgb(217 70 239 / .8), inset 0 1px 0 rgb(255 255 255 / .35); } .tcta4-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.tcta4-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .tcta4-btn:hover svg { transform: translateX(4px); }
.tcta4-link { position: relative; color: rgb(255 255 255 / .72); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.tcta4-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.tcta4-link:hover { color: #fff; } .tcta4-link:hover::after { transform: scaleX(1); }
@keyframes tcta4Spin { to { transform: rotate(360deg); } }
@keyframes tcta4Pulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes tcta4Breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes tcta4Twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
@media (max-width: 1000px) { .tcta4 { grid-template-columns: minmax(0, 1fr); padding: 38px 24px; } .tcta4-stage { display: none; } }
@media (prefers-reduced-motion: reduce) { .orb-spin, .orb-item > span, .orb-core, .orb-pulse, .orb-chip, .orb-dot { animation: none; } .orb-pulse { display: none; } }

/* --- Ana sayfa: turnuva talebi afişi v5 (güncel; v1 .tcta · v2 .tcta2 · v3 .tcta3 · v4 .tcta4 yedek). Turnuva kartı destesi: kartlar sırayla öne gelir, kayıt dolar --- */
.tcta5 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: 40px; padding: 54px 56px; overflow: hidden; isolation: isolate; border-radius: 28px; border: 1px solid rgb(251 113 133 / .18); background: linear-gradient(135deg, #140b0d 0%, #0a0708 70%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(251 113 133 / .12); }
.tcta5-glow { position: absolute; z-index: -1; right: -4%; top: -25%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(249 115 22 / .22), rgb(251 113 133 / .1) 55%, transparent 72%); animation: hubctaDrift 14s ease-in-out infinite alternate; }
.tcta5-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tcta5-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #fda4af; }
.tcta5-eyebrow i { width: 28px; height: 1px; background: linear-gradient(90deg, #fb7185, transparent); }
.tcta5 h2 { margin: 0; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: #fff; }
.tcta5 h2 em { font-style: normal; background: linear-gradient(90deg, #fecdd3, #fb7185 55%, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcta5-copy > p { margin: 0; max-width: 500px; font-size: 15px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.tcta5-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 2px 0 0; padding: 0; }
.tcta5-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .72); } .tcta5-points li svg { color: #fb7185; }
.tcta5-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.tcta5-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, #fb7185, #f97316); color: #1a0708; font-weight: 800; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 36px -12px rgb(249 115 22 / .65), inset 0 1px 0 rgb(255 255 255 / .35); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.tcta5-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .5), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.tcta5-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -12px rgb(249 115 22 / .85), inset 0 1px 0 rgb(255 255 255 / .4); } .tcta5-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.tcta5-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .tcta5-btn:hover svg { transform: translateX(4px); }
.tcta5-link { position: relative; color: rgb(255 255 255 / .72); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.tcta5-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.tcta5-link:hover { color: #fff; } .tcta5-link:hover::after { transform: scaleX(1); }
/* deste */
.tcta5-stage { display: flex; justify-content: center; min-width: 0; }
.deck { position: relative; width: 340px; height: 290px; max-width: 100%; margin-right: 50px; }
.dk-card { position: absolute; left: 0; top: 40px; width: 100%; opacity: 0; overflow: hidden; border-radius: 22px; border: 1px solid rgb(255 255 255 / .12); background: #15100f; box-shadow: 0 30px 60px -26px rgb(0 0 0 / .95); transform-origin: 20% 90%; animation: dkCycle 9s cubic-bezier(.45, 0, .2, 1) infinite; will-change: transform; }
.dk-cover { position: relative; display: flex; align-items: flex-end; height: 112px; padding: 12px 16px; overflow: hidden; }
.dk-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(21 16 15 / .9)); }
.dk-cover .dk-bg { position: absolute; right: -14px; top: -18px; width: 130px; height: 130px; object-fit: contain; opacity: .22; transform: rotate(12deg); }
.dk-cover b { position: relative; z-index: 1; font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .6); }
.dk-game { position: absolute; left: 14px; top: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dk-game img { width: 20px; height: 20px; object-fit: contain; }
.dk-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.dk-body strong { font-size: 15.5px; color: #fff; } .dk-body small { font-size: 12px; color: rgb(255 255 255 / .5); }
.dk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.dk-cap { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: rgb(255 255 255 / .8); } .dk-cap svg { color: #fb7185; }
.dk-state { position: relative; display: inline-flex; min-width: 122px; justify-content: flex-end; height: 22px; }
.dk-state em { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; white-space: nowrap; }
.dk-state .is-open { background: rgb(74 222 128 / .14); color: #86efac; border: 1px solid rgb(74 222 128 / .3); animation: dkOpen 9s linear infinite; }
.dk-state .is-open i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; }
.dk-state .is-full { background: rgb(251 113 133 / .16); color: #fda4af; border: 1px solid rgb(251 113 133 / .35); opacity: 0; animation: dkFull 9s linear infinite; }
.dk-bar { display: block; height: 5px; margin-top: 4px; border-radius: 999px; background: rgb(255 255 255 / .09); overflow: hidden; }
.dk-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb7185, #f97316); transform-origin: left; transform: scaleX(0); animation: dkFill 9s linear infinite; }
.dk-shadow { position: absolute; left: 6%; right: 6%; bottom: -16px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgb(249 115 22 / .3), transparent); filter: blur(6px); }
@keyframes dkCycle {
  0%, 27% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 3; }
  33% { transform: translate(-80px, 26px) scale(.98) rotate(-9deg); opacity: 0; z-index: 3; }
  34% { transform: translate(60px, -46px) scale(.86) rotate(8deg); opacity: 0; z-index: 1; }
  41%, 60% { transform: translate(60px, -46px) scale(.86) rotate(8deg); opacity: .5; z-index: 1; }
  68%, 94% { transform: translate(30px, -22px) scale(.93) rotate(4deg); opacity: .8; z-index: 2; }
  100% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; z-index: 3; }
}
@keyframes dkFill { 0%, 3% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }
@keyframes dkOpen { 0%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes dkFull { 0%, 23% { opacity: 0; transform: scale(.85); } 27%, 100% { opacity: 1; transform: none; } }
@media (max-width: 900px) { .tcta5 { grid-template-columns: minmax(0, 1fr); padding: 38px 24px; } .tcta5-stage { display: none; } }
@media (prefers-reduced-motion: reduce) { .dk-card, .dk-bar i, .dk-state em, .tcta5-glow { animation: none; } .dk-card:nth-child(2) { transform: translate(30px, -22px) scale(.93) rotate(4deg); opacity: .8; } .dk-card:nth-child(3) { transform: translate(60px, -46px) scale(.86) rotate(8deg); opacity: .5; } .dk-bar i { transform: none; } .dk-state .is-full { opacity: 1; } .dk-state .is-open { opacity: 0; } }

/* --- Hublar sayfası "marka hub'ı" afişi (yörünge; .orb bileşenleri ana yörünge stilinden, renkler bordo/gül) --- */
.hcta { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 30px; padding: 44px 30px 44px 56px; margin-bottom: 8px; overflow: hidden; isolation: isolate; border-radius: 28px; border: 1px solid rgb(251 113 133 / .2); background: radial-gradient(48% 90% at 84% 50%, rgb(var(--pg-brand-rgb) / .3), transparent 72%), linear-gradient(135deg, #12090c, #08070a 70%); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 1px 0 rgb(251 113 133 / .12); }
.hcta-glow { position: absolute; z-index: -1; left: -6%; top: -30%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(251 113 133 / .12), transparent 72%); animation: hubctaDrift 14s ease-in-out infinite alternate; }
.hcta-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.hcta-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: rgb(255 255 255 / .55); } .hcta-eyebrow i { width: 30px; height: 1px; background: linear-gradient(90deg, #fb7185, transparent); }
.hcta h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: #fff; } .hcta h2 em { font-style: normal; background: linear-gradient(90deg, #fff 20%, #fda4af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hcta-copy > p { margin: 0; max-width: 500px; font-size: 15.5px; line-height: 1.7; color: rgb(255 255 255 / .62); }
.hcta-actions { margin-top: 8px; }
.hcta-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; overflow: hidden; background: #fff; color: #0b0d12; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 12px 34px -12px rgb(255 255 255 / .4); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; }
.hcta-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(0 0 0 / .1), transparent); transform: translateX(-140%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.hcta-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgb(255 255 255 / .55); } .hcta-btn:hover::after { transform: translateX(330%) skewX(-18deg); }
.hcta-btn svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .hcta-btn:hover svg { transform: translateX(4px); }
.hcta-stage { display: flex; align-items: center; justify-content: center; min-width: 0; }
.hcta .orb-ring { border-color: rgb(251 113 133 / .3); } .hcta .orb-ring.r-in { border-color: rgb(251 113 133 / .2); }
.hcta .orb-pulse { border-color: rgb(251 113 133 / .5); }
.hcta .orb-item > span { background: #17100f; border-color: rgb(251 113 133 / .5); box-shadow: 0 10px 26px -10px rgb(0 0 0 / .9), 0 0 22px -6px rgb(var(--pg-brand-rgb) / .7); overflow: hidden; }
.hcta .orb-spin.is-out .orb-item img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hcta .orb-core { background: radial-gradient(closest-side, rgb(var(--pg-brand-rgb) / .5), rgb(20 10 12 / .96) 78%); border-color: rgb(251 113 133 / .65); box-shadow: 0 0 60px -6px rgb(var(--pg-brand-rgb) / .8), inset 0 0 26px rgb(var(--pg-brand-rgb) / .35); color: #fecdd3; }
.hcta .orb-chip { border-color: rgb(251 113 133 / .38); } .hcta .orb-chip svg { color: #fb7185; } .hcta .orb-dot { background: #fda4af; box-shadow: 0 0 10px #fb7185; }
@media (max-width: 1000px) { .hcta { grid-template-columns: minmax(0, 1fr); padding: 38px 24px; } .hcta-stage { display: none; } }
.hcta .orb-chip.c2 { right: 2%; bottom: -1%; } .hcta .orb-chip.c1 { left: 0; top: 6%; }

/* --- Liste sayfaları: hero ile afiş arası daha yakın; afişler için alt yuva; hub afişi (yörünge) küçültüldü --- */
.page-hero.is-compact { padding-bottom: 4px; }
.page-hero.is-plain p { margin-bottom: 0; }
.page-hero.is-compact + .container { padding-top: 14px !important; }
.cta-slot { margin-top: 40px; }
.hcta { padding: 26px 20px 26px 44px; gap: 10px; }
.hcta h2 { font-size: clamp(26px, 2.9vw, 38px); }
.hcta-copy > p { font-size: 14.5px; max-width: 470px; }
.hcta-copy { gap: 13px; }
.hcta .orb { transform: scale(.72); margin: -58px -50px; }
.cta-slot { margin-top: 24px; }
/* Turnuvalar: arama + süzgeçler afişin altında (hero'daki animasyon/ortalama burada da geçerli) */
.list-filters { margin: 26px 0 4px; text-align: center; }
.list-filters .search-bar, .list-filters .status-filter-row { animation: esFadeInUp .6s ease-out both; }
.list-filters .search-bar { margin-left: auto; margin-right: auto; }
.list-filters + [data-live-region] .section-header, .list-filters ~ [data-live-region="results"] .section-header { margin-top: 26px !important; }

/* --- Turnuva sayfası: "Düzenleyen hub" rozeti (yuvarlak logo halkası, küçük etiket + ad, üzerine gelince ok kayar) --- */
.tb-hub { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 0; padding: 6px 8px 6px 6px; border-radius: 999px; overflow: hidden; background: linear-gradient(120deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05)); border: 1px solid rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -14px rgb(0 0 0 / .8); animation: esFadeInUp .6s cubic-bezier(.22, 1, .36, 1) both; transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .35s ease; }
.tb-hub::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .22), transparent); transform: translateX(-160%) skewX(-18deg); transition: transform .8s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.tb-hub:hover { transform: translateY(-2px); border-color: rgb(255 255 255 / .5); box-shadow: 0 16px 36px -14px rgb(0 0 0 / .9); background: linear-gradient(120deg, rgb(255 255 255 / .2), rgb(255 255 255 / .07)); }
.tb-hub:hover::after { transform: translateX(340%) skewX(-18deg); }
.tb-hub-logo { flex: none; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, rgb(255 255 255 / .7), rgb(255 255 255 / .12)); }
.tb-hub-logo img, .tb-hub-logo .tb-hub-fb { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #15161d; }
.tb-hub-fb { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tb-hub-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-hub-tx small { font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.tb-hub-name { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.tb-hub-go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.tb-hub:hover .tb-hub-go { background: #fff; color: #0b0d12; transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .tb-hub { animation: none; } }
/* Talep pencereleri: kapak görseli daha alçak (pencere kısalır) */
#createHubModal .team-modal-banner img, #tournamentRequestModal .team-modal-banner img { height: 84px; object-fit: cover; }

/* --- Afişler sayfa açılırken animasyonla gelir (yukarı kayarak belirme; içerik kademeli); fill-mode backwards: bitince dönüşüm katmanı kalmaz --- */
.tcta, .tcta2, .tcta3, .tcta4, .tcta5, .hcta { animation: bnrIn .8s cubic-bezier(.22, 1, .36, 1) backwards; }
.hubcta { animation: bnrIn .8s cubic-bezier(.22, 1, .36, 1) backwards; }
.tcta2-body, .tcta3-copy, .tcta4-copy, .tcta5-copy, .hcta-copy, .tcta-copy { animation: bnrCopy .8s cubic-bezier(.22, 1, .36, 1) .12s backwards; }
.tcta3-stage, .tcta4-stage, .tcta5-stage, .hcta-stage, .tcta-visual { animation: bnrCopy .9s cubic-bezier(.22, 1, .36, 1) .22s backwards; }
@keyframes bnrIn { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bnrCopy { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tcta, .tcta2, .tcta3, .tcta4, .tcta5, .hcta, .hubcta, .tcta2-body, .tcta3-copy, .tcta4-copy, .tcta5-copy, .hcta-copy, .tcta-copy, .tcta3-stage, .tcta4-stage, .tcta5-stage, .hcta-stage, .tcta-visual { animation: none; } }

/* ================================ WEBSITE PANEL — yeniden tasarım (gruplu/rozetli nav, log görünümü, mini istatistik) ================================ */
.admin-back-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--gray); margin-bottom: 10px; transition: color .2s ease; }
.admin-back-link:hover { color: var(--white); }
.admin-shell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.admin-nav { display: flex; flex-direction: column; gap: 16px; }
.admin-nav-group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-group-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); padding: 0 10px 6px; }
.admin-nav-link { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--white); transition: background .2s ease, color .2s ease; }
.admin-nav-link:hover { background: var(--hover-bg); }
.admin-nav-link.active { background: rgb(var(--pg-brand-rgb) / .22); color: var(--white); font-weight: 700; box-shadow: inset 3px 0 0 var(--pg-brand-bright); }
.admin-nav-link.active .admin-nav-icon { color: var(--pg-brand-bright); }
.admin-nav-icon { display: inline-flex; flex-shrink: 0; color: var(--gray); }
.admin-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc3545; color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.admin-mini-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-mini-stats span { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: var(--hover-bg); border: 1px solid var(--border); color: var(--gray); }
.admin-log-view { max-height: 360px; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.6; color: var(--gray); background: var(--hover-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; word-break: break-all; margin: 0; }
@media (max-width: 900px) { .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 10px; } .admin-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; } .admin-nav-group-label { display: none; } }

/* Sekme içerikleri (tablolar/kartlar) — aynı özellikler, daha oturmuş görünüm */
.admin-content table thead th { background: var(--hover-bg); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.admin-content table tbody tr { transition: background .15s ease; }
.admin-content table tbody tr:hover { background: rgb(var(--pg-brand-rgb) / .05); }
.admin-content table th.th-sort.is-sorted a { color: var(--white); }
.admin-cell-actions { text-align: right; }
.admin-content .settings-card { position: relative; }
.admin-content .settings-card::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--pg-brand-rgb) / .5), transparent); opacity: 0; transition: opacity .3s ease; }
.admin-content .settings-card:hover::before { opacity: 1; }
.stat-box { position: relative; overflow: hidden; }
.stat-box::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 60px at 100% 0%, rgb(var(--pg-brand-rgb) / .12), transparent 70%); pointer-events: none; }

/* --- Takım sayfası: bekleyen katılma istekleri (bkz. ajax/team-join.php, team-accept/reject-join-request.php) --- */
.tp-join-reqs { margin-bottom: 22px; }
.tp-join-reqs h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-light); }
.tp-members-pending .tp-member.is-pending { animation: esFadeInUp .45s cubic-bezier(.22, 1, .36, 1) backwards; border-color: rgb(var(--pg-brand-rgb) / .35); background: linear-gradient(160deg, rgb(var(--pg-brand-rgb) / .1), rgb(var(--ink-rgb) / .02)); }
.tp-member.is-pending::before { background: var(--pg-brand-bright); }
.tp-role.is-pending { background: rgb(var(--pg-brand-rgb) / .18); color: #ff8fa3; box-shadow: inset 0 0 0 1px rgb(var(--pg-brand-rgb) / .4); }
.tp-pending-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pg-brand-bright); box-shadow: 0 0 0 0 rgb(var(--pg-brand-rgb) / .6); animation: tpPendingPulse 1.6s ease-in-out infinite; }
@keyframes tpPendingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--pg-brand-rgb) / .55); } 50% { box-shadow: 0 0 0 5px rgb(var(--pg-brand-rgb) / 0); } }
.tp-pending-btn { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .tp-members-pending .tp-member.is-pending { animation: none; } .tp-pending-dot { animation: none; } }

/* --- Turnuva Ayarları > Görünürlük: takım davet arama sonucu (kadro önizlemeli) --- */
.ts-team-invite-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(var(--ink-rgb) / .03); animation: esFadeInUp .3s cubic-bezier(.22, 1, .36, 1) both; }
.ts-team-invite-row + .ts-team-invite-row { margin-top: 6px; }
.ts-team-invite-top { display: flex; align-items: center; gap: 10px; }
.ts-team-invite-top img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ts-team-invite-roster { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 4px; }
.ts-roster-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: rgb(var(--ink-rgb) / .06); border: 1px solid var(--border); }
.ts-roster-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ts-roster-chip small { font-size: 11px; color: var(--gray); }
@media (prefers-reduced-motion: reduce) { .ts-team-invite-row { animation: none; } }

/* --- Destek Talebi sistemi (/support) — premium yeniden tasarım (2026-10-02, dördüncü tur): sohbet balonu
   metaforu tamamen kaldırıldı (akış/zaman çizelgesi), kart/çip yoğunluğu azaltıldı, marka rengi yalnızca
   birincil eylem ve durum noktalarında kullanılıyor. DOM/PHP/JS AYNI — sınıf adları korunur, yalnızca görsel. */

/* ---------- Kabuk ---------- */
.spt-page { container-name: sptpage; container-type: inline-size; }
.spt-cols { display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; gap: 32px; align-items: start; }
.spt-side-left, .spt-side-right { position: sticky; top: calc(var(--header-vis, var(--header-h, 64px)) + 16px); max-height: calc(100vh - var(--header-vis, var(--header-h, 64px)) - 32px); overflow-y: auto; scrollbar-width: none; }
.spt-side-left::-webkit-scrollbar, .spt-side-right::-webkit-scrollbar { display: none; }
.spt-side-right { display: flex; flex-direction: column; gap: 24px; }
.spt-main { min-width: 0; }
@container sptpage (max-width: 900px) {
    .spt-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .spt-main { grid-column: 1 / -1; order: -1; }
    .spt-side-left, .spt-side-right { position: static; max-height: none; }
}
@container sptpage (max-width: 600px) { .spt-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Başlık / "+" tetikleyici ---------- */
.spt-title-trigger { cursor: pointer; transition: opacity .2s ease; display: inline-flex; align-items: center; gap: 8px; }
.spt-title-trigger:hover { opacity: .8; }
.spt-title-trigger.is-used { cursor: default; opacity: .55; pointer-events: none; }
.spt-title-plus { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 1px solid var(--border-strong); color: var(--white); flex: none; transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .2s ease; }
.spt-title-trigger:hover .spt-title-plus { transform: rotate(90deg); border-color: var(--pg-brand-bright); }
.spt-title-trigger.is-used .spt-title-plus { transform: rotate(45deg); }

/* ---------- Yeni talep + filtreler: düz liste, kart/çip değil ---------- */
.spt-new-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; margin-bottom: 20px; border-radius: 9px; border: 1px solid var(--pg-brand-bright); background: transparent; color: var(--white); font-size: 13px; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: background .2s ease, color .2s ease; }
.spt-new-btn:hover { background: var(--pg-brand-bright); }
.spt-filter-chips { display: flex; flex-direction: column; gap: 1px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.spt-f { display: flex; align-items: center; gap: 9px; height: 31px; padding: 0 8px; border-radius: 7px; border: 0; background: transparent; color: var(--gray); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.spt-f::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.spt-f:hover { color: var(--white); background: rgb(var(--ink-rgb) / .05); }
.spt-f.is-on { color: var(--white); background: rgb(var(--ink-rgb) / .07); font-weight: 800; }
.spt-f-open.is-on { color: #4ade80; }
.spt-f-mine.is-on, .spt-f-unclaimed.is-on { color: var(--pg-brand-bright); }
.spt-f-closed.is-on { color: var(--gray); }
.spt-f-archived { position: relative; margin-top: 15px; color: var(--gray); }
.spt-f-archived::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: -8px; width: auto; height: 0; border-radius: 0; background: none; border-top: 1px dashed var(--border); }
.spt-f-archived.is-on { color: var(--white); background: transparent; font-weight: 700; }
.spt-f-archived svg { opacity: .7; }
.spt-quick-list h5 { margin: 0 0 10px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }

/* ---------- Ticket açıkken solda kalan dar liste (hızlı geçiş) ---------- */
.spt-list { display: flex; flex-direction: column; }
.spt-list-divider { margin: 16px 2px 8px; color: var(--gray); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.spt-list-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; border-left: 2px solid transparent; text-decoration: none; color: var(--white); transition: background .15s ease, border-color .15s ease; }
.spt-list-row:hover { background: rgb(var(--ink-rgb) / .05); }
.spt-list-row.is-active { background: rgb(var(--ink-rgb) / .07); border-left-color: var(--pg-brand-bright); }
.spt-list-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.spt-list-dot.is-open { background: #4ade80; box-shadow: 0 0 6px rgb(74 222 128 / .55); }
.spt-list-dot.is-claimed { background: var(--pg-brand-bright); box-shadow: 0 0 6px rgb(var(--pg-brand-rgb) / .6); }
.spt-list-dot.is-closed { background: var(--gray); box-shadow: none; }
.spt-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.spt-list-main strong { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--gray); }
.spt-list-main span { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-list-main small { color: var(--gray); font-size: 10.5px; }

/* ---------- Boş durum ---------- */
.spt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 120px 20px; color: var(--gray); font-size: 13.5px; text-align: center; }
.spt-empty-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--border); }
.spt-empty-icon svg { opacity: .5; }

/* ---------- Yeni talep formu (settings-card tabanlı, sitenin genel form kartı) ---------- */
.spt-new-form { border-radius: 16px; opacity: 0; transform: translateY(-8px); transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1); }
.spt-new-form.is-open { opacity: 1; transform: none; }
.spt-attach-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.spt-file-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; cursor: pointer; }
/* Asıl kırpıcı: "Dosya Ekle" <label> elemanı aynı zamanda .form-group içinde olduğu için site-geneli ".form-group
   label" kuralı (display:block, farklı font-size) ".spt-file-btn"den daha ÖZGÜL olduğu için üstüne yazıyordu —
   yalnızca <label> olan "Dosya Ekle" etkileniyor, <a> olan "prnt.sc" etkilenmiyordu (iki buton bu yüzden
   hizasızdı). Burada ebeveyn sınıfıyla özgüllüğü geri kazanıp sıfırlıyoruz. */
.spt-attach-group .spt-file-btn { display: inline-flex; font-size: .85rem; margin-bottom: 0; color: var(--white); font-weight: 600; height: 38px; }
.spt-file-hint { color: var(--gray); font-size: 11px; margin-left: 4px; }

/* ---------- Inbox ızgarası: ticket seçili değilken TÜM talepler büyük, sade kartlarla ---------- */
.spt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.spt-grid-divider { grid-column: 1 / -1; margin: 6px 2px 0; color: var(--gray); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.spt-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 13px; border: 1px solid var(--border); background: transparent; text-decoration: none; color: var(--white); transition: border-color .2s ease, background .2s ease; }
.spt-card:hover { border-color: var(--border-strong); background: rgb(var(--ink-rgb) / .03); }
.spt-card.is-archived { opacity: .6; }
.spt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spt-card-ref { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: var(--gray); }
.spt-card-ref::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.spt-card.is-open .spt-card-ref::before { background: #4ade80; box-shadow: 0 0 6px rgb(74 222 128 / .55); }
.spt-card.is-claimed .spt-card-ref::before { background: var(--pg-brand-bright); box-shadow: 0 0 6px rgb(var(--pg-brand-rgb) / .6); }
.spt-card.is-closed .spt-card-ref::before, .spt-card.is-archived .spt-card-ref::before { background: var(--gray); box-shadow: none; }
.spt-badge-unclaimed { background: transparent; border-color: rgb(var(--pg-brand-rgb) / .45); color: var(--pg-brand-bright); }
.spt-card-subject { font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-card-preview { margin: 0; min-height: 36px; font-size: 12.5px; line-height: 1.5; color: var(--gray); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spt-card-preview strong { color: var(--gold-light); font-weight: 700; }
.spt-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--gray); }
.spt-card[hidden] { display: none !important; }
@container sptpage (max-width: 480px) { .spt-grid { grid-template-columns: minmax(0, 1fr); } }

/* Arşiv ızgarası arama kutusu: kullanıcı adı/ticket no ile anlık istemci-taraflı filtre */
.spt-archive-search { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 0 14px; height: 42px; border-radius: 11px; border: 1px solid var(--border); background: var(--field-bg); color: var(--gray); }
.spt-archive-search svg { flex: none; opacity: .6; }
.spt-archive-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--white); font: inherit; font-size: 13.5px; }
.spt-archive-search input:focus { outline: none; }
.spt-archive-search input::placeholder { color: var(--gray); }
.spt-archive-search:focus-within { border-color: var(--border-strong); }
.spt-archive-empty { padding: 8px 2px; }

/* ---------- Ticket başlığı: kart değil, ince ayraçlı üst şerit ---------- */
.spt-ticket-head { margin-bottom: 20px; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.spt-ticket-head .spt-status-badge { background: transparent; border: 0; padding: 0; margin: 0; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.spt-ticket-head .spt-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.spt-ticket-head .spt-status-badge.is-open { color: #4ade80; }
.spt-ticket-head .spt-status-badge.is-closed { color: var(--gray); }

/* ---------- Yönetici eylem çubuğu: ikon+metin "hayalet" düğmeler, pil/kutu yok ---------- */
.spt-admin-bar { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.spt-admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -8px; }
.spt-action-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 7px; border: 0; background: transparent; color: var(--gray); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.spt-action-btn:hover { background: rgb(var(--ink-rgb) / .07); color: var(--white); }
.spt-action-btn.is-accent { color: var(--pg-brand-bright); }
.spt-action-btn.is-accent:hover { background: rgb(var(--pg-brand-rgb) / .14); }
.spt-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.spt-search-reveal { margin-top: 2px; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.spt-search-reveal.is-open { opacity: 1; transform: none; }
.spt-search-reveal input[type="text"] { width: 100%; padding: .6rem .85rem; background: var(--field-bg); border: 1px solid var(--input-border); border-radius: .75rem; color: var(--white); font-size: .88rem; box-sizing: border-box; transition: border-color .2s ease; }
.spt-search-reveal input[type="text"]::placeholder { color: var(--gray); opacity: .8; }
.spt-search-reveal input[type="text"]:hover { border-color: var(--border-strong); }
.spt-search-reveal input[type="text"]:focus { outline: none; border-color: var(--gold); }
.spt-search-reveal .ban-results { max-height: 220px; overflow-y: auto; margin-top: 8px; }

/* ---------- Mesaj akışı: balon YOK — her mesaj tam genişlik bir satır, aralarında ince ayraç ---------- */
.spt-thread { display: flex; flex-direction: column; margin: 0 0 18px; padding: 0; border: 0; background: transparent; min-height: 160px; }
.spt-msg { position: relative; display: flex; gap: 12px; align-items: flex-start; max-width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); animation: esFadeInUp .3s cubic-bezier(.22, 1, .36, 1) both; }
.spt-msg:last-child { border-bottom: 0; }
.spt-msg.is-mentioned { box-shadow: inset 2px 0 0 var(--pg-brand-bright); padding-left: 10px; }
.spt-msg-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.spt-msg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spt-msg-col .es-reacts { margin-top: 6px; }
.spt-msg-col .es-reacts.es-reacts-in { animation: esReactIn .16s ease both; }
.es-react.is-new { animation: esReactIn .16s ease both; }
@keyframes esReactIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.spt-msg-main { position: relative; min-width: 0; max-width: 100%; padding: 0; border-radius: 0; background: transparent; border: 0; }
.spt-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 13.5px; }
.spt-msg-head time { color: var(--gray); font-size: 11.5px; margin-left: auto; }
.spt-msg.is-staff .spt-msg-head strong { color: var(--pg-brand-bright); }
.spt-msg.is-staff .spt-msg-head strong::after, .spt-msg.is-mine .spt-msg-head strong::after { margin-left: 7px; padding: 2px 7px; border-radius: 5px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.spt-msg.is-staff .spt-msg-head strong::after { content: 'Destek'; background: rgb(var(--pg-brand-rgb) / .14); color: var(--pg-brand-bright); }
.spt-msg.is-mine .spt-msg-head strong::after { content: 'Sen'; background: rgb(var(--ink-rgb) / .08); color: var(--gray); }
.spt-msg-deleted { font-style: italic; color: var(--gray); }
.spt-msg-body { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.spt-msg-att-img { display: inline-block; margin-top: 8px; }
.spt-msg-att-img img { max-width: 280px; max-height: 200px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; }
.spt-msg-att-file { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--gold-light); }
.rc-edited { color: var(--gray); font-style: italic; }
.rc-edit textarea { margin-top: 6px; }

/* Düzenle/Sil/Tepki Ekle: satırın sağ üstünde, yalnızca satır hover/odaklanınca belirir */
.spt-msg-actions { position: absolute; top: 12px; right: 0; z-index: 2; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--panel-solid); box-shadow: 0 8px 20px -10px rgb(var(--shadow-rgb) / .75); opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.spt-msg:hover .spt-msg-actions, .spt-msg-actions:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.spt-msg-act { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 6px; border: 0; background: transparent; color: var(--gray); cursor: pointer; transition: background .2s ease, color .2s ease; }
.spt-msg-act:hover { background: rgb(var(--ink-rgb) / .12); color: var(--white); }
.spt-msg-act.is-danger:hover { background: rgb(220 53 69 / .18); color: #ff8a93; }
.spt-msg-actions .es-react-add { width: 24px; height: 24px; }
.spt-react-add-slot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: transparent; border: 0; color: var(--gray); cursor: pointer; }

/* Sistem log satırı (sahiplen/kapat/arşivle vb.) — küçük, çerçeveli, ortalanmış */
.spt-log { display: flex; align-items: center; justify-content: center; gap: 6px; align-self: center; margin: 6px auto; padding: 5px 14px; border-radius: 999px; background: transparent; border: 1px dashed var(--border-strong); color: var(--gray); font-size: 11px; font-weight: 600; text-align: center; animation: esFadeInUp .3s cubic-bezier(.22, 1, .36, 1) both; }
.spt-log-time { color: var(--gray); opacity: .7; }

/* ---------- Yazı kutusu: düz kart, kenarlıksız textarea ---------- */
.spt-reply-form { border-radius: 14px; background: var(--field-bg); border: 1px solid var(--border); padding: 14px 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.spt-compose-wrap { position: relative; }
.spt-compose-wrap .settings-textarea { background: transparent; border-color: transparent; padding: 3px 1px; }
.spt-compose-wrap .settings-textarea:hover, .spt-compose-wrap .settings-textarea:focus { border-color: transparent; background: transparent; }
.spt-reply-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); gap: 10px; }
.spt-reply-foot-left { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.spt-gif { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); padding: 10px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--option-bg); box-shadow: 0 16px 40px rgb(var(--shadow-rgb) / .6); z-index: 5; animation: esFadeInUp .25s ease both; }
.spt-emoji-panel { z-index: 5; }

/* ---------- Sağ sütun: Yetkililer / Çağrılar / Üyeler — kart değil, ince üst ayraçla bölünmüş düz liste ---------- */
.spt-staff-panel, .spt-members-panel, .spt-calls-panel { padding: 0; border: 0; background: transparent; margin-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.spt-staff-panel h5, .spt-members-panel h5, .spt-calls-panel h5 { margin: 0 0 12px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); }
.spt-staff-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.spt-staff-panel .my-team-members { flex: 1; overflow-y: auto; scrollbar-width: none; }
.spt-staff-panel .my-team-members::-webkit-scrollbar { display: none; }
.spt-members-panel, .spt-calls-panel { flex: none; padding-top: 20px; border-top: 1px solid var(--border); }
.spt-add-member-slot { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px dashed var(--border-strong); border-radius: 10px; background: transparent; color: var(--gray); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, color .2s ease; margin-top: 6px; }
.spt-add-member-slot:hover { border-color: var(--gold); color: var(--white); }
.spt-calls-panel { display: flex; flex-direction: column; }
.spt-call-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 9px; text-decoration: none; color: var(--white); transition: background .15s ease; }
.spt-call-row:hover { background: rgb(var(--ink-rgb) / .05); }
.spt-call-row + .spt-call-row { margin-top: 2px; }
.spt-call-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gray); }
.spt-call-dot.is-open { background: #ff8a93; box-shadow: 0 0 6px rgb(220 53 69 / .5); }
.spt-call-dot.is-handling { background: #f1c40f; box-shadow: 0 0 6px rgb(241 196 15 / .5); }
.spt-call-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.spt-call-main strong { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spt-call-main small { color: var(--gray); font-size: 11px; }

/* ---------- Website Panel > Destek gömülü görünümü (?embed=panel) ---------- */
html.spt-embed header, html.spt-embed .side-rail, html.spt-embed footer, html.spt-embed #toast-container ~ .rail-fly { display: none !important; }
html.spt-embed body.has-rail .page-main, html.spt-embed body.has-rail footer { margin-left: 0 !important; }
html.spt-embed, html.spt-embed body { background: var(--panel-solid, #10131c) !important; }
html.spt-embed body::before, html.spt-embed body::after, html.spt-embed .bg-particles, html.spt-embed canvas { display: none !important; }
html.spt-embed .spt-page { padding: 10px !important; }

@media (prefers-reduced-motion: reduce) { .spt-msg, .spt-log, .spt-new-form, .spt-search-reveal, .spt-title-trigger, .spt-title-plus, .es-reacts { animation: none; transition: none; } }

/* ---------- Kayıt 3/3: iki sütunlu geniş kutu + şifre gücü çubuğu ---------- */
.auth-wrapper.auth-wrapper-reg { padding: 22px 20px; }
.auth-box.auth-box-wide { max-width: 660px; padding: 28px 34px 24px; }
.auth-box.auth-box-wide h2 { font-size: 22px; }
.auth-box.auth-box-wide .sub { margin-bottom: 18px; }
.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.reg-grid .form-group { margin-bottom: 14px; min-width: 0; }
.reg-grid .reg-full { grid-column: 1 / -1; }
.reg-grid .form-group:has(.phone-input) { grid-column: auto; }   /* telefon bileşeni genelde tam satır ister; kayıtta yarım sütun yeter */
.auth-box.auth-box-wide .btn { margin-top: 2px; }
@media (max-width: 640px) {
    .auth-box.auth-box-wide { padding: 24px 20px; }
    .reg-grid { grid-template-columns: 1fr; }
}
.pw-meter { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22,1,.36,1), opacity .25s ease, margin-top .3s ease; margin-top: 0; }
.pw-meter.is-open { max-height: 70px; opacity: 1; margin-top: 8px; }
.pw-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pw-bars i { display: block; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .10); transition: background .3s ease; }
.pw-meter[data-level="0"] .pw-bars i:nth-child(1) { background: #dc3545; }
.pw-meter[data-level="1"] .pw-bars i:nth-child(-n+2) { background: #f5a623; }
.pw-meter[data-level="2"] .pw-bars i { background: #22c55e; }
.pw-info { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--gray); }
.pw-info b { font-weight: 700; white-space: nowrap; }
.pw-meter[data-level="0"] .pw-info b { color: #ff6b78; }
.pw-meter[data-level="1"] .pw-info b { color: #f5a623; }
.pw-meter[data-level="2"] .pw-info b { color: #34d399; }
@media (prefers-reduced-motion: reduce) { .pw-meter, .pw-bars i { transition: none; } }

/* ---------- Destek mesajı: işlem düğmeleri sağ üstte, gönderim tarihi sağ altta; yerinde düzenleme; Sistem mesajı ---------- */
.spt-msg-actions { top: -4px; }
.spt-msg-time { display: block; margin-top: 5px; text-align: right; color: var(--gray); font-size: 11.5px; }
.spt-msg.is-system .spt-msg-av { object-fit: contain; padding: 6px; background: rgb(var(--ink-rgb) / .06); }
.spt-msg.is-system .spt-msg-head strong { color: var(--gray); }
.spt-msg.is-editing .spt-msg-actions { display: none; }
.spt-msg.is-editing .spt-msg-body { white-space: pre-wrap; outline: none; border-radius: 4px; background: rgb(var(--ink-rgb) / .05); box-shadow: 0 0 0 5px rgb(var(--ink-rgb) / .05); caret-color: var(--white); }
.spt-edit-hint { margin-top: 8px; color: var(--gray); font-size: 11px; }
.rc-edited[data-tip] { cursor: help; }

/* Sol çubuk "Ara" kutusundaki "/" ipucu: kutu da, içindeki işaret de tam ortalı (işaret font metriği yüzünden ~1px aşağıdaydı) */
.sb-search kbd { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 20px; min-width: 22px; padding: 0 6px 2px; line-height: 1; }

/* ---------- Destek sohbeti: yazı kutusu sabit, mesajlar kendi içinde kayar, üst kenar bulanık geçişli; mesajlar içeriğine göre kompakt ---------- */
.spt-conv { display: flex; flex-direction: column; gap: 12px; height: 560px; min-height: 380px; }   /* gerçek yükseklik JS ile ekrana uydurulur (fitConv) */
.spt-thread-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.spt-thread-wrap .spt-thread { height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 6px 0 0; min-height: 0; scrollbar-width: thin; scrollbar-color: rgb(var(--ink-rgb) / .18) transparent; }
.spt-thread-wrap .spt-thread > :first-child { margin-top: auto; }   /* az mesaj varsa alta yaslı (sohbet gibi), çoksa normal kayar */
.spt-thread-wrap::before { content: ''; position: absolute; left: 0; right: 8px; top: 0; height: 54px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .25s ease;
    background: linear-gradient(to bottom, rgb(var(--solid-rgb) / .78), rgb(var(--solid-rgb) / 0));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent); mask-image: linear-gradient(to bottom, #000 25%, transparent); }
.spt-thread-wrap.is-scrolled::before { opacity: 1; }
.spt-conv > .spt-reply-form { flex: none; margin: 0; }
html.spt-embed .spt-conv { min-height: 300px; }

.spt-msg { padding: 10px 0; }
.spt-msg-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: end; }
.spt-msg-head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px; }
.spt-msg-body { grid-column: 1; grid-row: 2; line-height: 1.5; }
.spt-msg-att-img, .spt-msg-att-file { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 6px; }
.spt-msg-time { grid-column: 2; grid-row: 2; margin: 0; white-space: nowrap; line-height: 1.5; }
.spt-edit-hint { grid-column: 1 / -1; grid-row: 4; }
.spt-msg-actions { grid-column: auto; }