/*
 * Bridge Solutions arayuzu (ui-) - ortak tasarim dosyasi.
 *
 * Neden: layouts.app Bootstrap'i dort kez (iki CDN, Metronic paketi, Vite paketi) ust uste
 * yukluyor; Bootstrap/Metronic siniflariyla yazilan sayfa bozuk gorunuyor. Yeni sayfalar
 * layouts.site'i kullanir: o layout Bootstrap/Metronic yuklemez, yalniz bu dosyayi yukler.
 *
 * Tasarim dili public kayit ekranlarindan (kayit.css, kp-) gelir: koyu zeminde beyaz
 * kartlar, kulup gradyani yalniz kulup seridinde ve ana dugmede, bric renkleri dokusu.
 *
 * Dosya bolumleri: degiskenler, sayfa tabani (yalniz layouts.site), ust bar, bilesenler
 * (sayfa, kart, kulup seridi, baslik, rozet, uyari, dugme, arama, sonuc tablosu).
 * Bilesenler kendi ozelliklerini tam tanimlar; gerekirse eski layout icinde de calisir.
 */

:root {
    --ui-ink: #14172b;
    --ui-text: #3f4254;
    --ui-muted: #6c7086;
    --ui-faint: #a1a5b7;
    --ui-line: #eceef3;
    --ui-edge: #e1e4ec;
    --ui-soft: #f6f7fa;
    --ui-zebra: #fafbfd;
    --ui-hover: #eef4ff;
    --ui-focus: #1b84ff;
    --ui-gold: #e8a600;
    --ui-gold-soft: #fff8e1;
    --ui-ring: 0 0 0 4px rgba(27, 132, 255, 0.16);
    --ui-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.16);
    --ui-shadow-pop: 0 12px 32px rgba(20, 23, 43, 0.18), 0 2px 6px rgba(20, 23, 43, 0.08);
    --ui-radius: 16px;
    --ui-radius-sm: 10px;
    --ui-fallback-grad: linear-gradient(135deg, #0b3d91 0%, #1d7fa8 100%);
    --ui-bg: #161623;
    --ui-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-suits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%23ffffff' font-family='serif' font-size='34'%3E%3Ctext x='10' y='50'%3E%E2%99%A0%3C/text%3E%3Ctext x='84' y='50'%3E%E2%99%A5%3C/text%3E%3Ctext x='10' y='126'%3E%E2%99%A6%3C/text%3E%3Ctext x='84' y='126'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* --- Sayfa tabani (layouts.site) ------------------------------------------- */

.ui-body,
.ui-body *,
.ui-body *::before,
.ui-body *::after {
    box-sizing: border-box;
}

.ui-body {
    min-height: 100vh;
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

/* Sitenin imzasi: koyu zeminde iki renk lekesi (layouts.app ile ayni). */
.ui-body::before,
.ui-body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.ui-body::before {
    background: linear-gradient(#f00, #f0f);
    clip-path: circle(30% at right 70%);
}

.ui-body::after {
    background: linear-gradient(#2196f3, #e91e63);
    clip-path: circle(20% at 10% 10%);
}

.ui-body a { color: var(--ui-focus); text-decoration: none; }
.ui-body img { max-width: 100%; }
.ui-body h1, .ui-body h2, .ui-body h3, .ui-body p { margin: 0; }
.ui-body [hidden] { display: none !important; }

.ui-body :focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

.ui-main {
    padding: 1.5rem 0 3rem;
}

.ui-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Ust bar ve menu cekmecesi --------------------------------------------- */
/* Her layout'ta (eski layouts.app dahil) ayni gorunsun diye px ile ve renkler !important ile
   yazildi: Metronic kok yazi boyutunu ekrana gore 12-13px yapiyor ve baglanti renklerini eziyor. */

.ui-header {
    position: relative;
    z-index: 50;
    background: #fff;
    box-shadow: 0 1px 0 rgba(20, 23, 43, 0.06), 0 6px 18px rgba(0, 0, 0, 0.12);
    font-family: var(--ui-font);
    font-size: 15px;
    line-height: 1.4;
}

.ui-header__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1280px;
    min-height: 64px;
    margin: 0 auto;
    padding: 0 16px;
}

.ui-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    margin-right: 16px;
    color: var(--ui-focus) !important;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none !important;
}

.ui-brand img { width: 30px; height: 30px; }

.ui-header__nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.ui-header__end {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ui-header__link,
.ui-header__user,
.ui-header__menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-text) !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ui-header__link:hover,
.ui-header__user:hover {
    background: var(--ui-soft);
    color: var(--ui-ink) !important;
}

.ui-header__user { padding-left: 4px; }

.ui-header__user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ui-edge);
}

/* Menu tek giris noktasi: dolu ve belirgin. */
.ui-header__menu {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--ui-ink);
    color: #fff !important;
    font-weight: 800;
}

.ui-header__menu:hover { background: #2a2f4e; }

@media (max-width: 767.98px) {
    .ui-header__bar { padding: 0 12px; }
    .ui-brand { margin-right: auto; font-size: 17px; }
    .ui-header__nav,
    .ui-header__user span { display: none; }
    .ui-header__user { padding: 0 4px; }
}

/* Cekmece: sagdan kayar, arka plan karartilir; acikken sayfa kaymaz. */
.ui-drawer-lock,
.ui-drawer-lock body { overflow: hidden; }

.ui-drawer {
    position: fixed;
    inset: 0;
    z-index: 1060;
    font-family: var(--ui-font);
    font-size: 15px;
    line-height: 1.4;
}

.ui-drawer[hidden] { display: none; }

.ui-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 24, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ui-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(360px, 88vw);
    background: #fff;
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.ui-drawer.is-open .ui-drawer__overlay { opacity: 1; }
.ui-drawer.is-open .ui-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ui-drawer__overlay,
    .ui-drawer__panel { transition: none; }
}

.ui-drawer__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--ui-line);
}

.ui-drawer__title {
    color: var(--ui-ink);
    font-size: 18px;
    font-weight: 800;
}

.ui-drawer__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ui-muted);
    font-size: 19px;
    cursor: pointer;
}

.ui-drawer__close:hover { background: var(--ui-soft); color: var(--ui-ink); }

.ui-drawer__body {
    flex: 1 1 auto;
    padding: 8px 12px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ui-drawer__section { padding: 10px 0; }
.ui-drawer__section + .ui-drawer__section { border-top: 1px solid var(--ui-line); }

.ui-drawer__label {
    padding: 4px 8px 8px;
    color: var(--ui-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-drawer__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--ui-text) !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

.ui-drawer__item:hover { background: var(--ui-soft); color: var(--ui-ink) !important; }

/* Eski layout'ta Font Awesome betigi <i>'yi <svg>'ye cevirir; ikisi de hedeflenir. */
.ui-drawer__item > i,
.ui-drawer__item > svg {
    flex: 0 0 20px;
    color: var(--ui-faint);
    font-size: 15px;
    text-align: center;
}

.ui-drawer__item:hover > i,
.ui-drawer__item:hover > svg { color: var(--ui-focus); }
.ui-drawer__item--quiet { color: var(--ui-muted) !important; }
/* Kulup yetkilisinin en sik isi (hizli turnuva yukle) one cikar. */
.ui-drawer__item--accent { background: #eef5ff; color: var(--ui-ink) !important; font-weight: 800; }
.ui-drawer__item--accent > i,
.ui-drawer__item--accent > svg { color: var(--ui-focus); }

/* Iki satirli oge (son baktiklarin): baslik + kulup adi. */
.ui-drawer__item--two { min-height: 54px; }
.ui-drawer__item--two > span { min-width: 0; }

.ui-drawer__item--two strong,
.ui-drawer__item--two small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-drawer__item--two strong { color: var(--ui-ink); font-weight: 800; }
.ui-drawer__item--two small { color: var(--ui-muted); font-size: 13px; font-weight: 600; }

/* Ana isler: buyuk, ikonlu ve ne ise yaradigini anlatan alt satirla. */
.ui-drawer__main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--ui-ink) !important;
    text-decoration: none !important;
}

.ui-drawer__main:hover { background: var(--ui-soft); }

.ui-drawer__icon {
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf3ff;
    color: var(--ui-focus);
    font-size: 19px;
}

.ui-drawer__main strong { display: block; font-size: 16px; font-weight: 800; }
.ui-drawer__main small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 13px; font-weight: 600; }

/* Misafir icin hesap kutusu: girisin yalniz yonetici/hakem icin oldugunu soyler. */
.ui-drawer__staff {
    padding: 14px;
    border-radius: 12px;
    background: var(--ui-soft);
}

.ui-drawer__staff strong { display: block; color: var(--ui-ink); font-size: 14px; font-weight: 800; }
.ui-drawer__staff p { margin: 4px 0 12px; color: var(--ui-muted); font-size: 13px; font-weight: 600; }

.ui-drawer__staff-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.ui-drawer__btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--ui-ink);
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
}

.ui-drawer__btn:hover { background: #2a2f4e; }

.ui-drawer__textlink {
    color: var(--ui-focus) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.ui-drawer__textlink:hover { text-decoration: underline !important; }

/* One cikanlar: yonetimden eklenen baglantilar karo olarak; sayi artsa da ust bar degismez. */
.ui-drawer__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ui-drawer__tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-soft);
    color: var(--ui-ink) !important;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ui-drawer__tile > i,
.ui-drawer__tile > svg { align-self: flex-start; color: var(--ui-focus); font-size: 17px; }
.ui-drawer__tile:hover { border-color: #cfe3ff; background: #f1f7ff; }
.ui-drawer__tile:active { transform: scale(0.98); }

.ui-drawer__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px 10px;
}

.ui-drawer__user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--ui-edge);
}

.ui-drawer__user span { min-width: 0; }
.ui-drawer__user strong { display: block; color: var(--ui-ink); font-size: 15px; font-weight: 800; }
.ui-drawer__user small { display: block; overflow: hidden; color: var(--ui-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.ui-drawer__langs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 6px 0;
    padding: 4px;
    border-radius: 12px;
    background: var(--ui-soft);
}

.ui-drawer__lang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 9px;
    color: var(--ui-muted) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.ui-drawer__lang img { width: 18px; height: 18px; border-radius: 3px; }
.ui-drawer__lang:hover { color: var(--ui-ink) !important; }

.ui-drawer__lang.is-active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 23, 43, 0.12);
    color: var(--ui-ink) !important;
}

/* --- Sayfa ve kart ---------------------------------------------------------- */

.ui-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--ui-text);
}

.ui-page--mid { max-width: 880px; }
/* Genis tablolar (tur sayfasi): kenarlardaki bosluk da kullanilir. */
.ui-page--wide { max-width: 1720px; }
.ui-page--round { max-width: 1240px; }
.ui-page--narrow { max-width: 680px; }

.ui-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ui-card {
    position: relative;
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow);
}

/* clip: yuvarlak koseleri keser ama kaydirma kutusu olusturmaz, tablo basligi yapisik kalir. */
.ui-card--clip { overflow: hidden; }
@supports (overflow: clip) { .ui-card--clip { overflow: clip; } }

.ui-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ui-line);
}

.ui-card__title {
    color: var(--ui-ink);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ui-card__body { padding: 1.25rem; }

/* --- Kulup seridi ----------------------------------------------------------- */

.ui-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    overflow: hidden;
    background: var(--club-grad, var(--ui-fallback-grad));
    color: var(--club-text, #fff) !important;
}

.ui-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ui-suits);
    background-size: 150px 150px;
    opacity: 0.1;
    pointer-events: none;
}

.ui-strip > * { position: relative; z-index: 1; }

.ui-strip__logo {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    color: var(--ui-ink);
    font-weight: 800;
}

.ui-strip__logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

.ui-strip__name { display: block; font-size: 0.98rem; font-weight: 700; line-height: 1.2; }
.ui-strip__city { display: block; font-size: 0.78rem; opacity: 0.85; }
a.ui-strip:hover .ui-strip__name { text-decoration: underline; text-underline-offset: 3px; }

.ui-strip__aside {
    margin-left: auto;
    padding: 0.28rem 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Sayfa basligi ---------------------------------------------------------- */

.ui-hero { padding: 1.1rem 1.5rem 1.5rem; }

.ui-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.ui-crumbs li { display: inline-flex; align-items: center; min-width: 0; }

.ui-crumbs li + li::before {
    content: '';
    width: 0.38em;
    height: 0.38em;
    margin: 0 0.6rem 0 0.5rem;
    border-top: 1.5px solid var(--ui-faint);
    border-right: 1.5px solid var(--ui-faint);
    transform: rotate(45deg);
}

.ui-crumbs a { color: var(--ui-muted) !important; }
.ui-crumbs a:hover { color: var(--ui-focus) !important; }

.ui-kicker {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ui-title {
    display: block;
    margin: 0;
    color: var(--ui-ink);
    font-size: clamp(22px, 1rem + 1.9vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
}

.ui-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

/* Sade sayfa basligi: breadcrumb, baslik ve yaninda arama. */
.ui-head { padding: 1rem 1.25rem 1.1rem; }
.ui-head .ui-crumbs { margin-bottom: 0.45rem; }

.ui-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.ui-head .ui-title {
    flex: 1 1 280px;
    min-width: 0;
    font-size: clamp(20px, 0.9rem + 1vw, 28px);
}

.ui-head__search { flex: 0 1 360px; width: 100%; }
.ui-head .ui-search__input { min-height: 44px; }

@media (max-width: 719.98px) {
    .ui-head { padding: 0.9rem 1rem 1rem; }
    .ui-head__search { flex-basis: 100%; }
}

/* --- Rozet ------------------------------------------------------------------ */

.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background: var(--ui-soft);
    color: var(--ui-ink);
    font-size: 0.76rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    white-space: nowrap;
}

.ui-pill > i,
.ui-pill > svg { color: var(--ui-faint); font-size: 0.85em; }

/* --- Uyari ------------------------------------------------------------------ */

.ui-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.ui-note > i,
.ui-note > svg { flex: 0 0 auto; margin-top: 0.2rem; }
.ui-note a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; }

.ui-note--info { border-color: #cfe3ff; background: #f1f7ff; color: #174a8c; }
.ui-note--warn { border-color: #f5d67a; background: #fff7df; color: #6f4a00; }
.ui-note--ok { border-color: #a9e4c4; background: #e9f9f0; color: #0f6a40; }
.ui-note--danger { border-color: #f6b3c4; background: #fff0f3; color: #9d1234; }

/* --- Dugme ------------------------------------------------------------------ */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.15rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    background: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ui-btn--club {
    background: var(--club-grad, var(--ui-fallback-grad));
    color: var(--club-text, #fff) !important;
    box-shadow: 0 6px 16px rgba(20, 23, 43, 0.18);
}

.ui-btn--club:hover { filter: brightness(1.07); }

.ui-btn--ghost { border-color: var(--ui-edge); color: var(--ui-text) !important; }
.ui-btn--ghost:hover { border-color: #cfd4df; background: var(--ui-soft); color: var(--ui-ink) !important; }

.ui-btn--quiet {
    min-height: 36px;
    padding: 0.4rem 0.7rem;
    color: var(--ui-muted) !important;
    font-size: 0.85rem;
}

.ui-btn--quiet:hover { background: var(--ui-soft); color: var(--ui-ink) !important; }

/* --- Arama ------------------------------------------------------------------ */

.ui-search {
    position: relative;
    display: flex;
    align-items: center;
}

.ui-search__icon {
    position: absolute;
    left: 1rem;
    color: var(--ui-faint);
    pointer-events: none;
}

/* 16px: iOS Safari daha kucuk yazili alana odaklaninca sayfayi buyutuyor. */
.ui-search__input {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 6rem 0.7rem 2.75rem;
    border: 1.5px solid var(--ui-edge);
    border-radius: 12px;
    background: #fff;
    color: var(--ui-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ui-search__input::placeholder { color: var(--ui-faint); font-weight: 500; }
.ui-search__input::-webkit-search-cancel-button { display: none; }

.ui-search__input:focus {
    border-color: var(--ui-focus);
    outline: none;
    box-shadow: var(--ui-ring);
}

.ui-search .ui-btn { position: absolute; right: 0.4rem; }

/* --- Sonuc tablosu ---------------------------------------------------------- */

.ui-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ui-text);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.ui-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--ui-edge);
    background: #fff;
    color: var(--ui-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--ui-line);
    vertical-align: middle;
}

.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:nth-child(even) { background: var(--ui-zebra); }

.ui-table .is-num { text-align: right; }
.ui-table .is-center { text-align: center; }

/* Satirin tamami cift ozetine gider; gercek baglanti isimlerdedir (klavye, yeni sekme). */
.ui-table tr.is-link { cursor: pointer; }
.ui-table tbody tr.is-link:hover { background: var(--ui-hover); }
.ui-table tbody tr.is-link:hover td:first-child { box-shadow: inset 3px 0 0 var(--ui-focus); }

.ui-table .ui-col-rank,
.ui-rank {
    width: 3.5rem;
}

.ui-rank {
    color: var(--ui-ink);
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
}

.ui-pair__link {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 1.25rem;
    color: var(--ui-ink) !important;
    font-weight: 700;
}

.ui-pair__link:hover .ui-player__name { text-decoration: underline; text-underline-offset: 3px; }

.ui-player {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.ui-player__flag {
    flex: 0 0 20px;
    width: 20px;
    height: 15px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(20, 23, 43, 0.1);
}

/* Tek satir: uzun isim betikle kisaltilir (soyadi tam), yine sigmazsa "…". */
.ui-player__name {
    min-width: 0;
    overflow: hidden;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-table .ui-col-pct,
.ui-pct {
    width: 6rem;
}

.ui-pct {
    color: var(--ui-ink);
    font-size: 1.02rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.ui-cat-col { width: 9.5rem; white-space: nowrap; }

.ui-narrow { display: none; }

/* Kategori dar ekranda yuzdenin altina iner (genis ekranda kendi sutunu var). */
.ui-pct__cat {
    display: none;
    margin-top: 0.15rem;
    color: var(--ui-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

/* Kulubun boyadigi satirlar (ilk N, odul): yazi rengi satirdan gelir. */
.ui-table tr.is-marked td,
.ui-table tr.is-marked .ui-rank,
.ui-table tr.is-marked .ui-pct,
.ui-table tr.is-marked .ui-pair__link { color: inherit !important; font-weight: 800; }

.ui-table tr.is-marked .ui-pill { background: rgba(255, 255, 255, 0.28); color: inherit; }
.ui-table tr.is-marked .ui-pct__cat { color: inherit; opacity: 0.85; }
.ui-table tr.is-marked .ui-player__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.ui-table tr.is-cut td { border-bottom: 3px solid var(--ui-ink); }

/* Cift takibi: yildiz sutunu betikle eklenir; takip edilen satir altin cerceveyle ayrilir. */
.ui-table .ui-follow { width: 2.75rem; padding: 0 0 0 0.5rem; }

.ui-star {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-faint);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ui-star:hover { background: rgba(20, 23, 43, 0.06); color: var(--ui-gold); }
.ui-star:active { transform: scale(0.9); }
.ui-star[aria-pressed="true"] { color: var(--ui-gold); }

.ui-table tr.is-marked .ui-star { color: inherit; opacity: 0.75; }
.ui-table tr.is-marked .ui-star[aria-pressed="true"] { opacity: 1; }

.ui-table tbody tr.is-followed { background: var(--ui-gold-soft); }
.ui-table tr.is-followed td { box-shadow: inset 0 2px 0 var(--ui-gold), inset 0 -2px 0 var(--ui-gold); }
.ui-table tr.is-followed td:first-child { box-shadow: inset 2px 2px 0 var(--ui-gold), inset 0 -2px 0 var(--ui-gold); }
.ui-table tr.is-followed td:last-child { box-shadow: inset -2px 2px 0 var(--ui-gold), inset 0 -2px 0 var(--ui-gold); }

.ui-followed { border: 2px solid var(--ui-gold); }

.ui-followed__label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem 0.15rem;
    color: var(--ui-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-followed__label i,
.ui-followed__label svg { color: var(--ui-gold); }

.ui-followed__group {
    padding: 0.5rem 0.85rem 0;
    color: var(--ui-ink);
    font-size: 0.72rem;
    font-weight: 800;
}

.ui-followed .ui-table + .ui-followed__group { border-top: 1px solid var(--ui-line); }
.ui-followed .ui-table tbody tr { background: transparent; }

.ui-empty {
    padding: 2rem 1.25rem;
    color: var(--ui-muted);
    font-weight: 700;
    text-align: center;
}

/* Telefon: isimlere yer acmak icin yildiz ve sira dar, Turk bayragi gizli, kategori yuzdenin altinda. */
@media (max-width: 719.98px) {
    .ui-hero { padding: 1rem 1.1rem 1.25rem; }
    .ui-strip { padding: 0.8rem 1.1rem; }
    .ui-card__head { padding: 0.85rem 1rem; }
    .ui-page { padding: 0 10px; }
    .ui-wide { display: none; }
    .ui-narrow { display: inline; }
    .ui-table { font-size: 0.88rem; }
    .ui-table th, .ui-table td { padding: 0.55rem 0.3rem; }
    .ui-table th:first-child, .ui-table td:first-child { padding-left: 0.6rem; }
    .ui-table th:last-child, .ui-table td:last-child { padding-right: 0.75rem; }
    .ui-table th.ui-follow, .ui-table td.ui-follow { width: 2.1rem; padding: 0 0 0 0.25rem; }
    .ui-star { width: 30px; height: 40px; font-size: 0.92rem; }
    .ui-table .ui-col-rank, .ui-rank { width: 2rem; }
    .ui-rank { font-size: 0.9rem; }
    .ui-table .ui-col-pct, .ui-pct { width: 4.6rem; }
    .ui-pct { font-size: 0.95rem; line-height: 1.2; }
    /* Iki kelimelik kategori ("Senyor Karisik") iki satira inse de satir isimlerden pek uzamasin. */
    .ui-pct__cat { display: block; margin-top: 0.1rem; line-height: 1.1; white-space: normal; }
    .ui-pair__link { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .ui-player { gap: 0.4rem; }
    .ui-player__flag { flex-basis: 16px; width: 16px; height: 12px; }
    .ui-player__flag.is-tr { display: none; }
    .ui-cat-col { display: none; }
    .ui-followed__label { padding: 0.55rem 0.7rem 0.1rem; }
}

/* --- Ana sayfa (A · Tek yuzey) ----------------------------------------------- */
/* Her sey tek beyaz yuzeyde; bolumler kart degil, ince cizgilerle ayrilir. Genis ekranda
   solda son turnuvalar, sagda gri sutun (canli, son baktiklarin, kayitlar); dar ekranda
   sag sutun karsilamanin hemen altina iner. */

.ui-sheet {
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ui-shadow);
}

.ui-home-hero { padding: 2.5rem 2.5rem 2rem; }

.ui-home-hero .ui-title { font-size: clamp(26px, 1rem + 2vw, 40px); }

.ui-home-lead {
    max-width: 62ch;
    margin-top: 0.6rem !important;
    color: var(--ui-muted);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Buyuk, aciklamali eylem dugmeleri: oyuncu ne yapacagini okuyarak secsin. */
.ui-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ui-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 80px;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--ui-edge);
    border-radius: 14px;
    background: #fff;
    color: var(--ui-ink) !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.ui-action:hover { border-color: #b9d6ff; background: #f5f9ff; }
.ui-action:active { transform: scale(0.99); }

.ui-action__icon {
    display: grid;
    flex: 0 0 46px;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eaf3ff;
    color: var(--ui-focus);
    font-size: 1.2rem;
}

.ui-action strong { display: block; font-size: 1.06rem; font-weight: 800; line-height: 1.25; }
.ui-action small { display: block; margin-top: 0.15rem; color: var(--ui-muted); font-size: 0.82rem; font-weight: 600; line-height: 1.3; }

.ui-action--primary { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff !important; }
.ui-action--primary:hover { border-color: #2a2f4e; background: #2a2f4e; }
.ui-action--primary .ui-action__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.ui-action--primary small { color: rgba(255, 255, 255, 0.75); }

.ui-home-body {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--ui-line);
}

.ui-home-main { flex: 999 1 560px; order: 0; min-width: 0; }

.ui-home-main__head,
.ui-side__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ui-home-main__head { padding: 1.4rem 2.5rem 0.9rem; }

.ui-home-main__head h2,
.ui-side__head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ui-ink);
    font-weight: 800;
}

.ui-home-main__head h2 { font-size: 1.25rem; }
.ui-side__head h2 { font-size: 1.06rem; }

.ui-home-side {
    flex: 1 1 340px;
    order: 1;
    min-width: 0;
    padding: 0.4rem 0 1.25rem;
    border-left: 1px solid var(--ui-line);
    background: var(--ui-soft);
}

.ui-side__head { padding: 1.25rem 1.75rem 0.5rem; }

/* Liste satirlari: logo, iki satir yazi, sagda durum. */
.ui-list { display: flex; flex-direction: column; }

.ui-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 66px;
    padding: 0.65rem 2.5rem;
    border-bottom: 1px solid var(--ui-line);
    color: var(--ui-ink) !important;
    transition: background-color 0.15s ease;
}

.ui-list > .ui-row:last-child { border-bottom: 0; }
.ui-row:hover { background: var(--ui-hover); }

/* Sag sutunda canli yayin ve kayit: gri zeminde beyaz satir. */
.ui-row--card {
    min-height: 0;
    margin: 0 1rem 0.5rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 23, 43, 0.08);
}

.ui-recent .ui-row {
    min-height: 0;
    padding: 0.6rem 1.75rem;
    border: 0;
}

.ui-row__logo {
    position: relative;
    display: grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--ui-edge);
    color: var(--ui-ink);
    font-weight: 800;
}

/* Logo yoksa ya da yuklenemezse kulup renginde bas harf. */
.ui-row__logo[data-initial] { background: var(--club-grad, var(--ui-fallback-grad)); box-shadow: none; color: var(--club-text, #fff); }
.ui-row__logo[data-initial]::before { content: attr(data-initial); }

.ui-row__logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 3px;
    background: #fff;
    object-fit: contain;
}

.ui-row__logo--icon { background: #fff; box-shadow: 0 0 0 1px var(--ui-edge); color: var(--ui-muted); }

/* Beyaz (saydam zeminli, acik renkli) logo koyu zeminde (betik isaretler: partials/light-logo). */
.ui-row__logo.is-light-logo,
.ui-row__logo.is-light-logo img { background: #14172b; }

.ui-row__text { flex: 1 1 auto; min-width: 0; }

.ui-row__text strong,
.ui-row__text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-row__text strong { font-size: 1rem; font-weight: 800; line-height: 1.3; }
.ui-row__text small { margin-top: 0.1rem; color: var(--ui-muted); font-size: 0.82rem; font-weight: 600; }

.ui-row__end { flex-shrink: 0; color: var(--ui-faint); font-size: 0.85rem; }

.ui-row__cta {
    flex-shrink: 0;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: var(--ui-ink);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.ui-list__day {
    padding: 0.5rem 2.5rem;
    border-top: 1px solid var(--ui-line);
    border-bottom: 1px solid var(--ui-line);
    background: var(--ui-soft);
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-card__link { color: var(--ui-focus) !important; font-size: 0.88rem; font-weight: 800; white-space: nowrap; }
.ui-card__link:hover { text-decoration: underline; }
.ui-card__title { display: flex; align-items: center; gap: 0.5rem; }

.ui-live {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #fdecea;
    color: #b3261e;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.ui-live::before,
.ui-live-dot {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9342b;
    animation: uiPulse 2s ease-in-out infinite;
}

.ui-live-dot { width: 10px; height: 10px; }

@keyframes uiPulse { 50% { opacity: 0.35; } }

.ui-home-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.3rem 2.5rem 1.5rem;
    border-top: 1px solid var(--ui-line);
}

.ui-home-foot__text { flex: 1 1 420px; max-width: 620px; }

.ui-help summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    color: var(--ui-focus);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.ui-help summary::-webkit-details-marker { display: none; }

.ui-help summary::before {
    content: '';
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.ui-help[open] summary::before { transform: rotate(45deg); }

.ui-help ol {
    display: grid;
    gap: 0.6rem;
    margin: 0.3rem 0 0.6rem;
    padding-left: 1.4rem;
    color: var(--ui-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.ui-help strong { color: var(--ui-ink); }

.ui-home-text {
    color: var(--ui-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.ui-home-apps { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ui-home-apps img { display: block; width: auto; height: 42px; }

/* Iki sutun sigmayinca: sag sutun karsilamanin altina, beyaz zeminde. */
@media (max-width: 959.98px) {
    .ui-home-side {
        flex-basis: 100%;
        order: -1;
        padding: 0;
        border-left: 0;
        background: #fff;
    }

    .ui-side__section + .ui-side__section,
    .ui-home-side:not([hidden]) ~ .ui-home-main { border-top: 1px solid var(--ui-line); }

    .ui-side__head { padding: 1rem 1.5rem 0.25rem; }

    .ui-row--card {
        margin: 0;
        padding: 0.65rem 1.5rem;
        border-radius: 0;
        box-shadow: none;
    }

    .ui-row--card + .ui-row--card { border-top: 1px solid var(--ui-line); }
    .ui-side__section > .ui-row--card:last-child { padding-bottom: 1rem; }

    /* Son baktiklarin: yan yana kaydirilan kisa kartlar. */
    .ui-recent {
        display: flex;
        gap: 0.5rem;
        padding: 0.4rem 1.5rem 1rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ui-recent::-webkit-scrollbar { display: none; }

    .ui-recent .ui-row {
        flex: 0 0 auto;
        max-width: 240px;
        padding: 0.6rem 0.8rem;
        border-radius: 12px;
        background: var(--ui-soft);
    }

    .ui-recent .ui-row__logo { display: none; }
}

@media (max-width: 719.98px) {
    .ui-page { padding: 0 10px; }
    .ui-sheet { border-radius: 18px; }
    .ui-home-hero { padding: 1.4rem 1.15rem 1.25rem; }
    .ui-home-lead { font-size: 0.98rem; }

    /* Ana is tam genislikte; digerleri altinda yan yana, simge ustte. */
    .ui-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.15rem; }
    .ui-action--primary { grid-column: 1 / -1; min-height: 72px; }
    .ui-action:not(.ui-action--primary) { flex-direction: column; align-items: flex-start; gap: 0.6rem; min-height: 0; }
    .ui-action:not(.ui-action--primary) .ui-action__icon { flex-basis: auto; width: 38px; height: 38px; font-size: 1.05rem; }

    .ui-side__head { padding: 1rem 1.15rem 0.25rem; }
    .ui-row--card { padding: 0.65rem 1.15rem; }
    .ui-recent { padding: 0.4rem 1.15rem 1rem; }
    .ui-home-main__head { padding: 1rem 1.15rem 0.65rem; }
    .ui-home-main__head h2 { font-size: 1.06rem; }
    .ui-row { min-height: 62px; padding: 0.55rem 1.15rem; }
    .ui-list__day { padding: 0.45rem 1.15rem; }
    .ui-home-foot { padding: 1rem 1.15rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-live::before,
    .ui-live-dot { animation: none; }
}

/* --- Takim turnuvasi (etap, tur, mac) -------------------------------------- */
/* Ana sayfa gibi tek yuzey: ust bolum (breadcrumb, baslik, baglantilar), altinda icerik. */

.ui-sheet__head {
    padding: 1.4rem 2.5rem 1.25rem;
    border-bottom: 1px solid var(--ui-line);
}

.ui-sheet__head .ui-crumbs { margin-bottom: 0.45rem; }
.ui-sheet__head .ui-title { font-size: clamp(22px, 0.9rem + 1.4vw, 32px); }

.ui-sheet__sub {
    margin-top: 0.3rem !important;
    color: var(--ui-muted);
    font-size: 0.95rem;
    font-weight: 700;
}

/* Kucuk baglanti haplari: Capraz Tablo, Butler, etaplar arasi gecis. */
.ui-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}

.ui-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.85rem;
    border: 1px solid var(--ui-edge);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-ink) !important;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ui-link-pill:hover { border-color: #b9d6ff; background: #f5f9ff; }
.ui-link-pill > i { color: var(--ui-focus); }

.ui-link-pill.is-active {
    border-color: var(--ui-ink);
    background: var(--ui-ink);
    color: #fff !important;
}

.ui-link-pill.is-active > i { color: #fff; }

.ui-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.2rem 2.5rem 0.6rem;
}

.ui-section-head h2 {
    margin: 0;
    color: var(--ui-ink);
    font-size: 1.15rem;
    font-weight: 800;
}

/* Liste satiri numara rozetiyle (etap sirasi). */
.ui-row__logo--num { background: var(--ui-soft); box-shadow: none; color: var(--ui-ink); font-size: 0.95rem; }

/* Tur satiri: ana baglanti + yaninda ayri Butler baglantisi (ic ice <a> olmaz). */
.ui-row--split { gap: 0.6rem; padding-top: 0; padding-bottom: 0; }
.ui-row--split:hover { background: transparent; }

.ui-row__main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    min-height: 66px;
    color: var(--ui-ink) !important;
}

.ui-row--split .ui-row__main:hover .ui-row__text strong { color: var(--ui-focus); }

.ui-status {
    flex-shrink: 0;
    color: var(--ui-muted);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.ui-status--ok { color: #0f6a40; }



@media (max-width: 719.98px) {
    .ui-sheet__head { padding: 1.1rem 1.15rem 1.1rem; }
    .ui-section-head { padding: 1rem 1.15rem 0.5rem; }
    .ui-row--split { padding-right: 1.15rem; padding-left: 1.15rem; }
    .ui-status { max-width: 7.5rem; white-space: normal; text-align: right; }
}

/* --- Tur sayfasi (D · eski duzen, yeni gorunum) ---------------------------- */
/* Eski sayfanin duzeni: ortada tur secimi ve baglantilar, iki sutun mac tablosu, yanda siralama.
   Butun hucreler ayni boyda; takim adi tek satir (sigmayan ad betikle kuculur, sonra "…"). */

.ui-crumbbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--ui-line);
}

.ui-crumbbar .ui-crumbs { margin: 0; }
.ui-crumbbar h1 { margin: 0; color: var(--ui-ink); font-size: 0.95rem; font-weight: 800; }

.ui-round-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--ui-line);
}

.ui-select {
    min-height: 44px;
    padding: 0 2.25rem 0 0.9rem;
    border: 1.5px solid var(--ui-edge);
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c7086' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
    color: var(--ui-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    -webkit-appearance: none;
    appearance: none;
}

.ui-select:focus { border-color: var(--ui-focus); outline: none; box-shadow: var(--ui-ring); }

.ui-round-controls .ui-select { width: min(340px, 100%); text-align: center; text-align-last: center; }

.ui-round-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 800;
}

.ui-round-links a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; }

.ui-round-search { padding: 1rem 1.5rem 0; }
.ui-round-search .ui-search__input { min-height: 44px; padding-right: 1rem; }
.ui-round-search .ui-note { margin-top: 0.75rem; }

.ui-round-status {
    margin-top: 0.6rem !important;
    color: var(--ui-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.ui-round-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0.9rem 1.5rem 1.75rem;
}

.ui-round-matches { flex: 999 1 600px; min-width: 0; }

.ui-scores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

/* 30 takimdan kalabalik turlar: genis ekranda uc sutun. */
.ui-scores--dense { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }

/* Mac tablosu: | masa | takim | VP | Bord / bord sayisi |, iki satir, hucreler esit. */
.ui-score {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 60px 50px;
    grid-template-rows: 40px 40px;
    overflow: hidden;
    border: 1px solid #dfe3eb;
    border-radius: 10px;
    background: #fff;
    color: var(--ui-ink) !important;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-score:hover { border-color: #b9d6ff; box-shadow: 0 4px 14px rgba(27, 132, 255, 0.12); }

.ui-score > :nth-child(2),
.ui-score > :nth-child(3),
.ui-score > :nth-child(4) { border-bottom: 1px solid #e6e9ef; }

.ui-score__no {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    border-right: 1px solid #e6e9ef;
    background: var(--ui-soft);
    color: var(--ui-muted);
    font-weight: 800;
}

.ui-score__name {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.5rem;
    border-right: 1px solid #e6e9ef;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-score__vp {
    display: grid;
    place-items: center;
    border-right: 1px solid #e6e9ef;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ui-score__label { display: grid; place-items: center; color: var(--ui-muted); font-size: 0.72rem; font-weight: 800; }
.ui-score__boards { display: grid; place-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.ui-score .is-win { color: #0f7a43; }
.ui-score .is-lose { color: #c0173f; }
.ui-score .is-draw { color: #1d5fae; }

/* Grup siralamasi: cizgili tablo, satirlar esit. */
.ui-round-standings {
    display: flex;
    flex: 0 0 380px;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.ui-standing {
    overflow: hidden;
    border: 1px solid #dfe3eb;
    border-radius: 10px;
    background: #fff;
}

.ui-standing__title {
    margin: 0;
    padding: 0.6rem;
    border-bottom: 1px solid #e6e9ef;
    background: var(--ui-soft);
    color: var(--ui-ink);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
}

.ui-standing__row {
    display: grid;
    grid-template-columns: 36px 34px minmax(0, 1fr) 70px;
    height: 40px;
    border-bottom: 1px solid #e6e9ef;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.ui-standing__row:last-child { border-bottom: 0; }
.ui-standing__row:nth-child(odd) { background: var(--ui-zebra); }

.ui-standing__row > * {
    display: grid;
    place-items: center;
    border-right: 1px solid #e6e9ef;
}

.ui-standing__row > :last-child { border-right: 0; }

.ui-standing__row > a {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.5rem;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Takim takibi: siralamada yildiz, takip edilen takimin satiri ve maci altin. */
.ui-standing__row .ui-star { width: 30px; height: 34px; font-size: 0.9rem; }
.ui-standing__row.is-followed { background: var(--ui-gold-soft) !important; }
.ui-standing__row.is-followed > a { font-weight: 800; }

.ui-score.is-followed { border-color: var(--ui-gold); box-shadow: 0 0 0 1px var(--ui-gold); }
.ui-score__name.is-followed-team { background: var(--ui-gold-soft); font-weight: 800; }

.ui-followed-teams {
    margin-bottom: 0.9rem;
    padding: 0.6rem;
    border: 2px solid var(--ui-gold);
    border-radius: 12px;
    background: #fffdf5;
}

.ui-followed-teams .ui-followed__label { padding: 0 0.25rem 0.5rem; }

.ui-follow-hint {
    margin-top: 0.45rem !important;
    color: var(--ui-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.ui-follow-hint i { color: var(--ui-gold); }

.ui-standing__row--head { height: 34px; background: #fff !important; color: var(--ui-muted); font-size: 0.75rem; font-weight: 800; }
.ui-standing__rank,
.ui-standing__score { color: var(--ui-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Sonuclar / Siralama sekmeleri yalniz dar ekranda; genis ekranda ikisi yan yana. */
.ui-round-tabs { display: none; }

@media (max-width: 959.98px) {
    .ui-round-standings { flex: 1 1 100%; }

    .ui-round-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-bottom: 1px solid var(--ui-line);
    }

    .ui-round-tabs button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 50px;
        border: 0;
        border-bottom: 3px solid transparent;
        background: transparent;
        color: var(--ui-muted);
        font: inherit;
        font-size: 0.95rem;
        font-weight: 800;
        cursor: pointer;
    }

    .ui-round-tabs button[aria-selected="true"] { border-bottom-color: var(--ui-ink); color: var(--ui-ink); }

    .ui-round[data-tab="matches"] .ui-round-standings,
    .ui-round[data-tab="standings"] .ui-round-matches,
    .ui-round[data-tab="standings"] .ui-round-search .ui-search { display: none; }
}

@media (max-width: 719.98px) {
    .ui-crumbbar { padding: 0.75rem 1rem; }
    .ui-round-controls { padding: 1rem 1rem 0.85rem; }
    .ui-round-search { padding: 0.85rem 0.75rem 0; }
    .ui-round-body { padding: 0.75rem 0.75rem 1.25rem; }
    .ui-score { grid-template-columns: 32px minmax(0, 1fr) 56px 44px; }
    .ui-scores,
    .ui-scores--dense { grid-template-columns: minmax(0, 1fr); }
}

/* --- Kulup sayfasi (takvim) ------------------------------------------------- */
/* Eski duzen tek yuzeyde: canli, acik kayitlar, takvim / liste. */

.ui-crumbs__club { gap: 0.5rem; }
.ui-crumbs__club h1 { margin: 0; color: var(--ui-ink); font-size: 0.95rem; font-weight: 800; }

.ui-crumbs__club .ui-row__logo {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 0.75rem;
}

.ui-club-section { border-bottom: 1px solid var(--ui-line); }
.ui-club-section:last-child { border-bottom: 0; }
.ui-club-section > .ui-list { padding-bottom: 0.5rem; }

.ui-section-head h2 { display: flex; align-items: center; gap: 0.5rem; }

/* Acik kayit biletleri kayit sayfalarindaki tasarimiyla; yuzeyde ayri kart gibi durmaz. */
.ui-club-section--tickets .kayit-ui .kp-block { margin: 0; border-radius: 0; box-shadow: none; }
.ui-club-section--tickets .kayit-ui .kp-block__head,
.ui-club-section--tickets .kayit-ui .kp-block__body { padding-right: 2.5rem; padding-left: 2.5rem; }

/* Takvim / Liste anahtari. */
.ui-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--ui-soft);
}

.ui-segmented button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ui-muted);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

.ui-segmented button[aria-pressed="true"] {
    background: #fff;
    box-shadow: 0 1px 3px rgba(20, 23, 43, 0.12);
    color: var(--ui-ink);
}

[data-club-cal][data-view="list"] [data-view-pane="calendar"],
[data-club-cal][data-view="calendar"] [data-view-pane="list"] { display: none; }

.ui-cal-pane { padding-bottom: 0.5rem; }

.ui-cal-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 2.5rem 0.75rem;
}

.ui-cal-tools .ui-select { min-width: 140px; }

/* Satir basindaki tarih rozeti. */
.ui-date {
    display: flex;
    flex: 0 0 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ui-soft);
    line-height: 1.05;
}

.ui-date strong { color: var(--ui-ink); font-size: 1.05rem; font-weight: 800; }
.ui-date small { color: var(--ui-muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* FullCalendar yeni gorunumde: degiskenlerle renk, kulup renginde etkinlik. */
.ui-calendar {
    --fc-border-color: var(--ui-line);
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: var(--ui-soft);
    --fc-today-bg-color: #f1f7ff;
    --fc-button-bg-color: #fff;
    --fc-button-border-color: var(--ui-edge);
    --fc-button-text-color: var(--ui-ink);
    --fc-button-hover-bg-color: var(--ui-soft);
    --fc-button-hover-border-color: #cfd4df;
    --fc-button-active-bg-color: var(--ui-ink);
    --fc-button-active-border-color: var(--ui-ink);
    padding: 0 2.5rem 1.25rem;
    font-size: 0.9rem;
}

.ui-calendar.fc .fc-toolbar-title { color: var(--ui-ink); font-size: 1.25rem; font-weight: 800; }
.ui-calendar.fc .fc-button { border-radius: 10px; box-shadow: none !important; font-weight: 800; text-transform: none; }
.ui-calendar.fc .fc-button-primary:not(:disabled):active,
.ui-calendar.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.ui-calendar.fc a { color: inherit; text-decoration: none; }
.ui-calendar.fc .fc-col-header-cell-cushion { padding: 8px 4px; color: var(--ui-muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.ui-calendar.fc .fc-daygrid-day-number { color: var(--ui-muted); font-weight: 700; }
.ui-calendar.fc .fc-daygrid-day-frame { min-height: 96px; }

.ui-calendar.fc .event-bg {
    margin: 1px 3px 2px;
    padding: 3px 6px;
    border: 0;
    border-radius: 6px;
    background: var(--club-grad, var(--ui-fallback-grad));
    color: var(--club-text, #fff);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.ui-calendar.fc .event-bg .fc-event-main { color: inherit; }
.ui-calendar.fc .event-bg .fc-event-title { white-space: normal; }
.ui-calendar.fc .event-bg:hover { filter: brightness(1.08); }

@media (max-width: 719.98px) {
    .ui-club-section--tickets .kayit-ui .kp-block__head,
    .ui-club-section--tickets .kayit-ui .kp-block__body { padding-right: 1.15rem; padding-left: 1.15rem; }
    .ui-cal-tools { padding: 0 1.15rem 0.75rem; }
    .ui-cal-tools .ui-select { flex: 1 1 0; min-width: 0; }
    .ui-calendar { padding: 0 0.5rem 1rem; font-size: 0.78rem; }
    .ui-calendar.fc .fc-daygrid-day-frame { min-height: 64px; }
    .ui-calendar.fc .fc-toolbar { flex-wrap: wrap; gap: 0.5rem; }
    .ui-calendar.fc .fc-toolbar-title { font-size: 1.05rem; }
    .ui-section-head { flex-wrap: wrap; }
    /* Canli satiri: baslik tam genislik, "Canli siralama" altta; TV dugmesi yalniz simge. */
    .ui-row--live .ui-row__main { flex-wrap: wrap; row-gap: 0.55rem; padding: 0.85rem 0; }
    .ui-row--live .ui-row__text { flex-basis: 100%; }
    .ui-row--live .ui-row__text strong { white-space: normal; }
    .ui-row--live .ui-link-pill { align-self: flex-start; margin-top: 0.85rem; }
    .ui-row--live .ui-link-pill > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* --- Cok seansli ikili (seans listesi) ------------------------------------- */
/* Eski duzen: gun basligi, altinda saat | seans. Bugun isaretlenir, sonucu olmayan seans soluk. */

.ui-date--time { flex-basis: 58px; width: 58px; }
.ui-date--time strong { font-size: 0.98rem; font-variant-numeric: tabular-nums; }

.ui-list__day.is-today { background: #eef5ff; color: var(--ui-ink); }

.ui-list__today {
    margin-left: 0.5rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--ui-focus);
    color: #fff;
    letter-spacing: 0.04em;
}

.ui-row.is-pending .ui-date { background: transparent; box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-row.is-pending .ui-date strong,
.ui-row.is-pending .ui-row__text strong { color: var(--ui-muted); }

/* --- Cift karti ve board (MP / IMP ikili) ----------------------------------- */
/* Eski duzen: ustte cift ve ozet, altinda board board sonuc tablosu. Telefonda da butun
   sutunlar: dar sutun basliklari dikey yazilir, tablo sayfaya sigacak kadar kuculur
   (data-fit-table, betik). Ince sutun cizgileri tabloyu eski sayfadaki gibi okutur. */

.ui-pair-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.6rem; }
.ui-pair-title__player { display: inline-flex; align-items: center; gap: 0.5rem; }
.ui-pair-title__player img { flex: 0 0 auto; width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(20, 23, 43, 0.1); }
.ui-pair-title__sep { color: var(--ui-faint); font-weight: 600; }

.ui-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }

.ui-stat {
    min-width: 7.5rem;
    padding: 0.5rem 0.85rem 0.55rem;
    border-radius: 12px;
    background: var(--ui-soft);
}

.ui-stat dt { margin: 0; color: var(--ui-muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ui-stat dd { margin: 0.1rem 0 0; color: var(--ui-ink); font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }

.ui-res-hint {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.75rem 2.5rem;
    border-bottom: 1px solid var(--ui-line);
    background: #f8fbff;
    color: var(--ui-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
}

.ui-res-hint > i,
.ui-res-hint > svg { flex: 0 0 auto; color: var(--ui-focus); }

.ui-res-wrap { overflow-x: auto; }

.ui-res {
    width: 100%;
    border-collapse: collapse;
    color: var(--ui-text);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.ui-res th {
    padding: 0.65rem 0.6rem;
    border-bottom: 1px solid var(--ui-edge);
    color: var(--ui-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-res td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--ui-line);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.ui-res th:first-child,
.ui-res td:first-child { padding-left: 2.5rem; }
.ui-res th:last-child,
.ui-res td:last-child { padding-right: 2.5rem; }
.ui-res th + th,
.ui-res td + td { border-left: 1px solid var(--ui-line); }
.ui-res tbody tr:last-child td { border-bottom: 0; }
.ui-res tbody tr:nth-child(even) { background: var(--ui-zebra); }
.ui-res tbody tr:hover { background: var(--ui-hover); }
.ui-res .is-num { text-align: right; }

.ui-res__board { width: 3.5rem; }
.ui-res__board a { color: var(--ui-focus) !important; font-size: 1rem; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(27, 132, 255, 0.35); text-underline-offset: 3px; }
.ui-res__board a:hover { text-decoration-color: currentColor; }
.ui-res td.ui-res__board { color: var(--ui-ink); font-weight: 800; }
.ui-res__dir { color: var(--ui-muted); font-size: 0.8rem; }

/* Cift adlari iki satir, her biri tek satira sigdirilir (betik kisaltir, sonra "…"). */
.ui-res__pair { max-width: 15rem; text-align: left !important; }
.ui-res__pair a { display: block; color: var(--ui-ink) !important; }
.ui-res__pair a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ui-res__pair a span { display: block; overflow: hidden; font-size: 0.86rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.ui-hand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 32px;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--ui-edge);
    border-radius: 8px;
    background: #fff;
    color: var(--ui-ink);
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-hand-btn:hover { border-color: #b9d6ff; background: #f5f9ff; }
.ui-hand-btn:focus-visible { outline: none; box-shadow: var(--ui-ring); }

/* Kontrat 4♠x, dekleran ve sonuc kendi sutunlarinda (sonuc renkli: + fazla, = tam, - batik). */
.ui-contract { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.ui-contract__bid { color: var(--ui-ink); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; }
.ui-contract__dbl { margin-left: 1px; color: #d12b3a; font-size: 0.78em; font-weight: 800; }
.ui-contract__pass,
.ui-contract__raw { color: var(--ui-muted); font-weight: 800; }

.ui-suit { margin-left: 1px; }
.ui-suit.is-s { color: #1d4ed8; }
.ui-suit.is-h { color: #d12b3a; }
.ui-suit.is-d { color: #e07000; }
.ui-suit.is-c { color: #0f7a45; }
.ui-suit.is-n { margin-left: 2px; font-size: 0.86em; }

.ui-seat { color: var(--ui-ink); font-weight: 800; }

.ui-tricks { font-weight: 800; }
.ui-tricks.is-over { color: #0f8a4f; }
.ui-tricks.is-made { color: #1d4ed8; }
.ui-tricks.is-down { color: #d12b3a; }

.ui-bye {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--ui-soft);
    box-shadow: inset 0 0 0 1px var(--ui-edge);
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Yardimci fonksiyonlarin (lead) Bootstrap renk siniflari; kontrattaki koz renkleriyle ayni. */
.ui-res .text-primary { color: #1d4ed8; }
.ui-res .text-danger { color: #d12b3a; }
.ui-res .text-warning { color: #e07000; }
.ui-res .text-dark { color: #0f7a45; }
.ui-res .text-success { color: #0f8a4f; }

.ui-res__val { color: var(--ui-ink); font-weight: 800; }
.ui-res__mp { color: var(--ui-muted); }
.ui-res__val.is-pos { color: #0f8a4f; }
.ui-res__val.is-neg { color: #d12b3a; }
.ui-res__val.is-zero { color: #a07000; }

/* Yuzde: eski renk basamaklari (25 / 50 / 70), beyazda okunur tonlarda. */
.ui-pct-tier { display: inline-block; min-width: 3.6rem; padding: 0.15rem 0.45rem; border-radius: 6px; text-align: right; }
.ui-pct-tier.is-t1 { background: #fde8ea; color: #b3121f; }
.ui-pct-tier.is-t2 { background: #fff0e0; color: #b35300; }
.ui-pct-tier.is-t3 { background: #fff7d1; color: #7a5a00; }
.ui-pct-tier.is-t4 { background: #e3f7ec; color: #0b6b3c; }

.ui-res tr.is-own,
.ui-res tr.is-own:hover { background: var(--ui-gold-soft); }
.ui-res tr.is-own td { box-shadow: inset 0 2px 0 var(--ui-gold), inset 0 -2px 0 var(--ui-gold); }
.ui-res tr.is-waiting td { color: var(--ui-muted); font-weight: 600; }
.ui-res tr.is-waiting td + td { text-align: left; white-space: normal; }

/* Board sayfasinin en ustunde cift kartina donus. */
.ui-back { margin-bottom: 0.75rem; }

.ui-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.ui-board-nav { display: flex; gap: 0.5rem; }
.ui-board-viewer { padding: 1.25rem 2.5rem; }

/* Sabit boyutlu iframe (el cozucu, BBO) kutunun genisligine olceklenir (betik). */
.ui-frame { position: relative; width: 100%; max-width: 850px; margin: 0 auto; overflow: hidden; }
.ui-frame iframe { display: block; border: 0; transform-origin: top left; }
.ui-frame--native { max-width: none; }

.ui-dialog {
    width: min(900px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-pop);
    color: var(--ui-text);
}

.ui-dialog::backdrop { background: rgba(14, 16, 30, 0.6); }

.ui-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.85rem 0.85rem 1.25rem;
    border-bottom: 1px solid var(--ui-line);
}

.ui-dialog__title { margin: 0; color: var(--ui-ink); font-size: 1.05rem; font-weight: 800; }

.ui-dialog__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--ui-soft);
    color: var(--ui-ink);
    font-size: 1.1rem;
    cursor: pointer;
}

.ui-dialog__close:hover { background: var(--ui-edge); }
.ui-dialog__body { padding: 1rem; }

@media (max-width: 719.98px) {
    .ui-stat { min-width: 0; flex: 1 1 0; padding: 0.45rem 0.65rem 0.5rem; }
    .ui-stat dd { font-size: 1.12rem; }
    .ui-res-hint { padding: 0.65rem 1.15rem; font-size: 0.78rem; }
    /* Eski sayfadaki gibi: dar sutun basliklari dikey, hucreler sik; tablo sonra sayfaya sigdirilir. */
    .ui-res { font-size: 0.84rem; }
    .ui-res th { padding: 0.45rem 0.25rem; font-size: 0.6rem; letter-spacing: 0.03em; vertical-align: bottom; }
    .ui-res td { padding: 0.45rem 0.3rem; }
    .ui-res th:first-child, .ui-res td:first-child { padding-left: 0.6rem; }
    .ui-res th:last-child, .ui-res td:last-child { padding-right: 0.6rem; }
    .ui-vhead { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
    .ui-res__board { width: auto; }
    .ui-res__pair { max-width: 6.5rem; }
    .ui-res__pair a span { font-size: 0.78rem; }
    .ui-hand-btn { min-height: 28px; padding: 0.15rem 0.35rem; font-size: 0.8rem; }
    .ui-contract__bid { font-size: 0.88rem; }
    .ui-pct-tier { min-width: 0; padding: 0.1rem 0.3rem; }
    .ui-board-viewer { padding: 0.85rem 0.6rem; }
    .ui-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
    .ui-dialog__head { padding: 0.5rem 0.5rem 0.5rem 0.9rem; }
    .ui-dialog__body { padding: 0.35rem; }
}

/* --- Takim turnuvasinda oyuncu karti (tasarim Agustos 2026, p-*) -------------- */

.p-govde { padding: 0.25rem 2.5rem 1.75rem; }
.p-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 0.5rem; margin: 1rem 0; }
.p-kutu { padding: 0.65rem 0.5rem; border-radius: 12px; background: var(--ui-soft); text-align: center; }
.p-deger { display: block; color: var(--ui-ink); font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.p-deger i { color: var(--ui-faint); font-size: 0.8rem; font-style: normal; font-weight: 600; }
.p-etiket { display: block; margin-top: 0.3rem; color: var(--ui-muted); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.p-ipucu { display: block; margin-top: 0.1rem; color: var(--ui-faint); font-size: 0.66rem; font-weight: 700; overflow-wrap: anywhere; }
.p-baslik { margin: 1.25rem 0 0.5rem; color: var(--ui-ink); font-size: 1.05rem; font-weight: 800; }
.p-baslikAlt { margin-left: 0.4rem; color: var(--ui-faint); font-size: 0.78rem; font-weight: 700; }
.p-grafikKutu { padding: 0.5rem 0.4rem; border-radius: 12px; background: var(--ui-soft); }
.p-grafik { display: block; width: 100%; height: 92px; }
.g-sifir { stroke: #d5d9e2; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.g-ort { stroke: var(--ui-faint); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.g-poz { fill: #2fb56a; }
.g-neg { fill: #e5484d; }
.p-grafikEt { display: flex; justify-content: space-between; margin-top: 0.25rem; padding: 0 0.2rem; color: var(--ui-faint); font-size: 0.66rem; font-weight: 700; }
.p-ortaklar,
.p-maclar { display: flex; flex-direction: column; border-top: 1px solid var(--ui-line); }
.p-ortak { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--ui-line); }
.p-oAd { flex: 1 1 auto; min-width: 0; color: var(--ui-ink); font-weight: 800; overflow-wrap: anywhere; }
.p-oMac { flex: 0 0 auto; color: var(--ui-muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.p-oOrt { flex: 0 0 auto; min-width: 58px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.p-mac { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--ui-line); color: var(--ui-text) !important; transition: background-color 0.15s ease; }
.p-mac:hover { background: var(--ui-hover); }
.p-mSol { flex: 1 1 auto; min-width: 0; }
.p-mTur { display: block; color: var(--ui-muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.p-mRakip { display: block; margin-top: 1px; color: var(--ui-ink); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.p-mOrtak { display: block; margin-top: 2px; color: var(--ui-text); font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; }
.p-ortakEt { color: var(--ui-faint); font-size: 0.6rem; font-style: normal; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.p-mSag { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.p-mVp { padding: 0.05rem 0.4rem; border-radius: 6px; font-weight: 800; font-variant-numeric: tabular-nums; }
.p-mVp i { margin: 0 0.1rem; color: var(--ui-faint); font-style: normal; }
.p-mBut { font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.p-mBut i { color: var(--ui-faint); font-size: 0.6rem; font-style: normal; text-transform: uppercase; }
.p-mMasa { color: var(--ui-faint); font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.p-kaz { background: #e3f7ec; color: #0b6b3c; }
.p-kay { background: #fde8ea; color: #b3121f; }
.p-ber { background: #eef1f6; color: var(--ui-text); }
.p-poz { color: #0f8a4f; }
.p-neg { color: #d12b3a; }
.p-notr { color: var(--ui-muted); }

@media (max-width: 719.98px) {
    .p-govde { padding: 0.25rem 1.15rem 1.25rem; }
}

/* --- Barometre (genel sayfa) ------------------------------------------------ */

.ui-baro-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.ui-baro-legend__item { padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; }
.ui-baro .ui-baro__players { max-width: 16rem; text-align: left; }
.ui-baro__players span { display: block; overflow: hidden; color: var(--ui-ink); font-weight: 800; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ui-baro__cat { color: var(--ui-muted); font-size: 0.8rem; }
.ui-baro__score { color: var(--ui-ink) !important; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(20, 23, 43, 0.25); text-underline-offset: 3px; }
.ui-baro__score:hover { text-decoration-color: currentColor; }
.ui-baro__total { font-size: 1.02rem; }
/* Boyanan satir (ilk N, kategori birincisi): yazi rengi satirdan gelir. */
.ui-baro tr.is-marked td,
.ui-baro tr.is-marked span,
.ui-baro tr.is-marked .ui-baro__score,
.ui-baro tr.is-marked .ui-res__val { color: inherit !important; }
.ui-baro tr.is-marked td + td { border-left-color: rgba(255, 255, 255, 0.3); }

.ui-baro-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2rem 2.5rem 2.5rem; text-align: center; }
.ui-baro-empty > i,
.ui-baro-empty > svg { color: var(--ui-faint); font-size: 2.5rem; }
.ui-baro-empty h2 { margin: 0; color: var(--ui-ink); font-size: 1.15rem; font-weight: 800; }
.ui-baro-empty p { max-width: 30rem; color: var(--ui-muted); font-weight: 700; }

@media (max-width: 719.98px) {
    .ui-baro .ui-baro__players { max-width: 8rem; }
    .ui-baro__players span { font-size: 0.8rem; }
}

/* --- Form alani -------------------------------------------------------------- */

.ui-field { display: flex; flex-direction: column; gap: 0.35rem; }
.ui-field__label { color: var(--ui-ink); font-size: 0.86rem; font-weight: 800; }

/* 16px: iOS Safari daha kucuk yazili alana odaklaninca sayfayi buyutuyor. */
.ui-input {
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.9rem;
    border: 1.5px solid var(--ui-edge);
    border-radius: 12px;
    background-color: #fff;
    color: var(--ui-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
}

.ui-input:focus { border-color: var(--ui-focus); outline: none; box-shadow: var(--ui-ring); }
select.ui-input { padding-right: 2.25rem; }

/* --- Hizli turnuva ------------------------------------------------------------ */
/* Tek formda turnuva bilgisi + sonuc ve el dosyasi (surukle birak da olur), sonra ozet. */

.ui-quick { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 2.5rem 1.75rem; }
.ui-quick__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: end; }
.ui-quick__type { align-self: flex-start; }
.ui-quick__type label { position: relative; }
.ui-quick__type input { position: absolute; opacity: 0; pointer-events: none; }
.ui-quick__type span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 1rem; border-radius: 9px; color: var(--ui-muted); font-size: 0.9rem; font-weight: 800; cursor: pointer; }
.ui-quick__type input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(20, 23, 43, 0.12); color: var(--ui-ink); }
.ui-quick__type input:focus-visible + span { box-shadow: var(--ui-ring); }
.ui-quick__files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ui-quick__submit { align-self: flex-start; min-width: 180px; }

.ui-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.4rem 1rem;
    border: 2px dashed var(--ui-edge);
    border-radius: 14px;
    background: var(--ui-zebra);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-drop:hover,
.ui-drop.is-over { border-color: var(--ui-focus); background: #f3f8ff; }
.ui-drop:focus-within { box-shadow: var(--ui-ring); }
.ui-drop.is-set { border-style: solid; border-color: #9fd8b8; background: #f2fbf6; }
.ui-drop.is-bad { border-color: #f1a7b3; background: #fff5f6; }
.ui-drop.is-disabled { cursor: default; opacity: 0.6; }
.ui-drop__icon { color: var(--ui-focus); font-size: 1.6rem; }
.ui-drop__title { color: var(--ui-ink); font-weight: 800; }
.ui-drop__title em { margin-left: 0.25rem; color: var(--ui-muted); font-size: 0.78rem; font-style: normal; font-weight: 700; }
.ui-drop__hint { color: var(--ui-muted); font-size: 0.8rem; font-weight: 700; }
.ui-drop__file { max-width: 100%; overflow: hidden; color: var(--ui-ink); font-size: 0.82rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.ui-check { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ui-ink); font-weight: 700; cursor: pointer; }
.ui-check input { width: 18px; height: 18px; accent-color: var(--ui-focus); }

.ui-quick-done { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 2.5rem 2.25rem; text-align: center; }
.ui-quick-done__icon { color: #0f8a4f; font-size: 2.6rem; }
.ui-quick-done h2 { margin: 0; color: var(--ui-ink); font-size: 1.3rem; font-weight: 800; }
.ui-quick-done p { color: var(--ui-muted); font-weight: 700; }
.ui-quick-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }

@media (max-width: 719.98px) {
    .ui-quick { padding: 1rem 1.15rem 1.25rem; }
    .ui-quick__row,
    .ui-quick__files { grid-template-columns: minmax(0, 1fr); }
    .ui-quick__submit { align-self: stretch; }
    .ui-quick-done { padding: 1.5rem 1.15rem; }
}

/* --- Lineup ------------------------------------------------------------------ */
/* Sifre, takimin lineup sayfasi (girilecek / girilmis maclar), lineup girisi ve gorunumu. */

.ui-lineup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ui-lineup-head .ui-crumbs span { color: var(--ui-muted); }
.ui-lineup-head .ui-link-pill { flex: 0 0 auto; font: inherit; font-size: 0.86rem; font-weight: 800; cursor: pointer; }

.ui-lineup-login { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.25rem 2.5rem 1.75rem; }
.ui-lineup-login__submit,
.ui-lineup-form__submit { align-self: flex-start; min-width: 160px; }
.ui-btn:disabled { cursor: progress; opacity: 0.7; }

.ui-lineup-done { color: #0f8a4f; font-size: 0.85em; }
.ui-lineup-status a,
.ui-lineup-status span { font-weight: 800; white-space: nowrap; }
.ui-lineup-status .text-warning { color: #a06000; }
.ui-res td.ui-lineup-own { color: #1d4ed8; font-weight: 800; }

.ui-lineup-more > summary { list-style: none; cursor: pointer; padding-bottom: 1.2rem; }
.ui-lineup-more > summary::-webkit-details-marker { display: none; }
.ui-lineup-more > summary i,
.ui-lineup-more > summary svg { color: var(--ui-muted); transition: transform 0.2s ease; }
.ui-lineup-more[open] > summary { padding-bottom: 0.6rem; }
.ui-lineup-more[open] > summary i,
.ui-lineup-more[open] > summary svg { transform: rotate(180deg); }
.ui-lineup-more .ui-res-wrap { padding-bottom: 1rem; }

.ui-lineup-match .ui-match__team { cursor: default; }
.ui-lineup-match .ui-match__team.is-own { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ui-lineup-table { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--ui-soft); color: var(--ui-muted); font-size: 0.8rem; font-weight: 800; }
.ui-lineup-table strong { color: #d12b3a; font-size: 1.15rem; }

.ui-lineup-form { padding: 1.25rem 2.5rem 1.75rem; }
.ui-lineup-form .ui-note { margin-bottom: 0.85rem; }
.ui-lineup-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ui-lineup-room { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-zebra); }
.ui-lineup-room legend { padding: 0 0.35rem; color: var(--ui-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ui-lineup-room .ui-select { width: 100%; text-align: left; text-align-last: auto; }

.ui-room__seat .ui-room__name { color: var(--side); font-weight: 800; }

@media (max-width: 719.98px) {
    .ui-lineup-login,
    .ui-lineup-form { padding: 1rem 1.15rem 1.25rem; }
    .ui-lineup-rooms { grid-template-columns: minmax(0, 1fr); }
    .ui-lineup-login__submit,
    .ui-lineup-form__submit { align-self: stretch; }
}

/* --- Lehman ------------------------------------------------------------------ */
/* Siralama + maclar iki sutun (telefonda alt alta); mac, masa ve bord sayfalari takim
   sayfalarinin parcalarini kullanir. Oyuncu karti: SVG grafik, istatistik listeleri. */

.ui-lehman { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.ui-lehman__col { min-width: 0; padding-bottom: 1.25rem; }
.ui-lehman__matches { border-left: 1px solid var(--ui-line); }
.ui-lehman__matches .ui-row { padding-left: 1.5rem; padding-right: 1.5rem; }
.ui-lehman .ui-section-head h2 { display: flex; align-items: center; gap: 0.5rem; }
.ui-lehman .ui-section-head h2 i,
.ui-lehman .ui-section-head h2 svg { color: var(--ui-focus); font-size: 0.9em; }
.ui-lehman-count { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; color: var(--ui-muted); }
.ui-lehman-table .ui-lehman-table__name { text-align: left; }
.ui-lehman-table__name a,
.ui-lehman-pair a { color: var(--ui-ink) !important; font-weight: 800; }
.ui-lehman-table__name a:hover,
.ui-lehman-pair a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-lehman-pair { text-align: left !important; }
.ui-lehman-pair a { display: block; line-height: 1.35; }
.ui-lehman-change { display: block; font-size: 0.72rem; font-weight: 800; }
.ui-lehman-change.is-pos { color: #0f8a4f; }
.ui-lehman-change.is-neg { color: #d12b3a; }
.ui-stat dd.p-poz { color: #0f8a4f; }
.ui-stat dd.p-neg { color: #d12b3a; }

.ui-lehman-chart { display: block; width: 100%; height: auto; }
.ui-lehman-chart .c-axis { fill: var(--ui-faint); font-size: 10px; font-weight: 700; }
.ui-lehman-chart .c-base { stroke: var(--ui-faint); stroke-dasharray: 4 3; stroke-width: 1; }
.ui-lehman-chart .c-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.ui-lehman-chart .c-dot { stroke: #fff; stroke-width: 1.5; cursor: pointer; }
.ui-lehman-chart a:hover .c-dot { stroke: var(--ui-ink); }
.ui-lehman-chart.is-up .c-line { stroke: #198754; }
.ui-lehman-chart.is-up .c-dot { fill: #198754; }
.ui-lehman-chart.is-up .c-area { fill: rgba(25, 135, 84, 0.12); }
.ui-lehman-chart.is-down .c-line { stroke: #dc3545; }
.ui-lehman-chart.is-down .c-dot { fill: #dc3545; }
.ui-lehman-chart.is-down .c-area { fill: rgba(220, 53, 69, 0.12); }

.ui-lehman-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.ui-facts { margin: 0; border-top: 1px solid var(--ui-line); }
.ui-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.15rem; border-bottom: 1px solid var(--ui-line); }
.ui-facts dt { min-width: 0; color: var(--ui-muted); font-size: 0.86rem; font-weight: 700; }
.ui-facts dd { margin: 0; color: var(--ui-ink); font-weight: 800; text-align: right; }
.ui-facts a { color: var(--ui-ink) !important; font-weight: 800; }
.ui-facts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-facts small { color: var(--ui-muted); font-size: 0.76rem; font-weight: 700; }
.ui-facts small.p-poz { color: #0f8a4f; }
.ui-facts small.p-neg { color: #d12b3a; }

.ui-lehman-result { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 6px; color: #fff; font-size: 0.78rem; font-weight: 800; }
.ui-lehman-result.is-win { background: #198754; }
.ui-lehman-result.is-loss { background: #dc3545; }
.ui-lehman-result.is-draw { background: #7a7d8c; }

@media (max-width: 899.98px) {
    .ui-lehman { grid-template-columns: minmax(0, 1fr); }
    .ui-lehman__matches { border-top: 1px solid var(--ui-line); border-left: 0; }
}

@media (max-width: 719.98px) {
    .ui-lehman__matches .ui-row { padding-left: 1.15rem; padding-right: 1.15rem; }
    .ui-lehman-facts { grid-template-columns: minmax(0, 1fr); }
}

/* --- Yuklenmis HTML sonuc ---------------------------------------------------- */
/* Excel ciktisi kendi stilleriyle; ortalanir, sigmazsa betik kucultur (zoom). Yuklenen stiller
   bu kutuya bagli (HtmlResultCss); contain: paint sabit ve mutlak konumlu ogeleri de kutunun
   icinde tutar, ust barin ya da basligin ustune binemezler. */

.ui-html { padding: 1.25rem 1.5rem 1.75rem; overflow-x: auto; color: #000; }
.ui-html__inner { width: max-content; max-width: none; margin: 0 auto; contain: paint; }
.ui-html__inner table { margin: 0 auto; }

@media (max-width: 719.98px) {
    .ui-html { padding: 0.75rem 0.5rem 1rem; }
}

/* --- Kulupler listesi -------------------------------------------------------- */
/* Eski sayfadaki gibi kulup renginde kartlar (iskambil desenli), hepsi ayni boyda: uzun ad en
   cok iki satir, sonra "…". Arama ve sehir secimi. */

.ui-clubs__lead { margin-top: 0.3rem !important; color: var(--ui-muted); font-weight: 700; }
.ui-clubs__tools { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.ui-clubs__tools .ui-search { flex: 1 1 280px; }
.ui-clubs__tools .ui-search__input { min-height: 46px; padding-right: 1rem; }
.ui-clubs__tools .ui-select { flex: 0 1 240px; min-height: 46px; }

.ui-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.65rem; padding: 1.25rem 2.5rem 1.75rem; }

.ui-club-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    height: 84px;
    padding: 0.7rem 1rem;
    overflow: hidden;
    border-radius: 14px;
    background: var(--club-grad, var(--ui-fallback-grad));
    box-shadow: 0 4px 12px rgba(20, 23, 43, 0.12);
    color: var(--club-text, #fff) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ui-club-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--ui-suits);
    background-size: 150px 150px;
    opacity: 0.08;
    pointer-events: none;
}

.ui-club-card > * { position: relative; z-index: 1; }
.ui-club-card:hover { box-shadow: 0 10px 22px rgba(20, 23, 43, 0.22); transform: translateY(-2px); }
.ui-club-card:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.ui-club-card .ui-row__logo { flex-basis: 46px; width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
.ui-club-card__text { flex: 1 1 auto; min-width: 0; }
.ui-club-card__text strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.ui-club-card__text small { display: block; margin-top: 0.1rem; overflow: hidden; font-size: 0.8rem; font-weight: 700; opacity: 0.8; text-overflow: ellipsis; white-space: nowrap; }
.ui-club-card > i { flex: 0 0 auto; opacity: 0.75; }
/* Canli yayini olan kulup: beyaz zeminli rozet her kulup renginde okunur. */
.ui-club-card .ui-live { background: #fff; box-shadow: 0 2px 6px rgba(20, 23, 43, 0.18); }

@media (max-width: 719.98px) {
    .ui-clubs { grid-template-columns: minmax(0, 1fr); padding: 1rem 0.85rem 1.25rem; }
    .ui-clubs__tools .ui-select { flex-basis: 100%; }
}

/* --- Takim alt sayfalari: capraz tablo -------------------------------------- */
/* Takim x takim VP; sutun basliklari hep dikey, takimin kendi hucresi kulup renginde. */

.ui-vhead--always { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
.ui-cross th { vertical-align: bottom; }
.ui-cross .ui-cross__team { max-width: 15rem; overflow: hidden; text-align: left; text-overflow: ellipsis; }
.ui-cross td.ui-cross__team a { color: var(--ui-ink) !important; font-weight: 800; }
.ui-cross td.ui-cross__team a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-cross__col { min-width: 2.6rem; }
/* Son satir kartin yuvarlak kosesine denk gelmesin. */
.ui-res-wrap:has(> .ui-cross) { padding-bottom: 0.75rem; }
.ui-cross__score { color: var(--ui-text); font-size: 0.82rem; line-height: 1.35; }
.ui-cross td.is-self { background: var(--club-grad, var(--ui-fallback-grad)); }

/* --- Takim alt sayfalari: mac (masa) --------------------------------------- */
/* Ev sahibi pembe, misafir mavi (eski sayfanin renkleri): skor, oturma duzeni ve IMP sutunlari. */

.ui-sheet .is-home { --side: #c2185b; }
.ui-sheet .is-visitor { --side: #0b6fc4; }

.ui-match { padding: 1.25rem 2.5rem; border-bottom: 1px solid var(--ui-line); text-align: center; }
.ui-match__teams { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2rem 0.75rem; }
.ui-match__team { color: var(--side) !important; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.45rem); font-weight: 800; line-height: 1.25; }
.ui-match__team:hover { text-decoration: underline; text-underline-offset: 4px; }
.ui-match__vs { color: var(--ui-faint); font-weight: 700; }
.ui-match__scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.85rem 0 0; }
.ui-match__scores > div { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0.9rem; border-radius: 12px; background: var(--ui-soft); }
.ui-match__scores dt { color: var(--ui-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
.ui-match__scores dd { margin: 0; font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ui-match__scores .is-home,
.ui-match__scores .is-visitor { color: var(--side); }
.ui-match__sep { margin: 0 0.3rem; color: var(--ui-faint); }
.ui-match__pen { margin-left: 0.2rem; color: #d12b3a; font-size: 0.72em; font-weight: 800; }
.ui-match__note { margin: 0.9rem 2.5rem; }

.ui-rooms { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ui-line); }
.ui-room { flex: 0 1 380px; min-width: 0; }
.ui-room__title { margin: 0 0 0.5rem; color: var(--ui-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }

/* Masa: ortada yesil kare, dort yanda oyuncular. */
.ui-room__grid {
    display: grid;
    /* Kuzey ve Guney adi bir satirin tamamini kullanir (dar orta sutunda kelime bolunmesin). */
    grid-template-areas: "n n n" "w t e" "s s s";
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    grid-template-rows: auto 72px auto;
    align-items: center;
    gap: 0.35rem 0.6rem;
}

.ui-room__seat { min-width: 0; font-size: 0.86rem; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; }
.ui-room__seat a { color: var(--side) !important; }
.ui-room__seat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-room__seat.is-n { grid-area: n; text-align: center; align-self: end; }
.ui-room__seat.is-s { grid-area: s; text-align: center; align-self: start; }
.ui-room__seat.is-w { grid-area: w; text-align: right; }
.ui-room__seat.is-e { grid-area: e; text-align: left; }

.ui-room__table {
    position: relative;
    grid-area: t;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 40%, #2f8f5b, #1d6b42);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18), 0 6px 14px rgba(20, 23, 43, 0.18);
}

.ui-room__table b { position: absolute; color: rgba(255, 255, 255, 0.85); font-size: 0.66rem; font-weight: 800; }
.ui-room__table .is-n { top: 4px; left: 50%; transform: translateX(-50%); }
.ui-room__table .is-s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.ui-room__table .is-w { top: 50%; left: 6px; transform: translateY(-50%); }
.ui-room__table .is-e { top: 50%; right: 6px; transform: translateY(-50%); }

.ui-match-boards thead tr:first-child th { border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); }
.ui-match-boards th.is-home,
.ui-match-boards th.is-visitor,
.ui-match-boards td.is-home,
.ui-match-boards td.is-visitor { color: var(--side); }
.ui-match-boards tr.is-switched,
.ui-match-boards tr.is-switched:hover { background: #fff7df; }
.ui-switch-icon { margin-left: 0.25rem; color: #d12b3a; font-size: 0.8em; }
.ui-match-boards__total td { border-top: 2px solid var(--ui-edge); color: var(--ui-muted); font-weight: 800; text-align: right; }
.ui-match-boards__total td.ui-res__val { color: var(--side); }

@media (max-width: 719.98px) {
    .ui-match { padding: 1rem 1.15rem; }
    .ui-match__note { margin: 0.75rem 1.15rem; }
    .ui-rooms { gap: 1rem; padding: 1rem 0.75rem; }
    .ui-room { flex-basis: 100%; }
    .ui-room__grid { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); grid-template-rows: auto 60px auto; }
    .ui-room__table { width: 60px; height: 60px; }
    .ui-room__seat { font-size: 0.8rem; }
}

/* --- Takim alt sayfalari: takim --------------------------------------------- */

.ui-team-captain { margin-top: 0.35rem !important; color: var(--ui-muted); font-weight: 700; }
.ui-team-captain strong { color: var(--ui-ink); }
.ui-team-empty { padding: 0 2.5rem 1.2rem; color: var(--ui-muted); font-weight: 700; }

.ui-team-players .ui-team-players__name { text-align: left; }
.ui-team-players__name a,
.ui-team-fixture__team a,
.ui-team-fixture__info a { color: var(--ui-ink) !important; font-weight: 800; }
.ui-team-players__name a:hover,
.ui-team-fixture__team a:hover,
.ui-team-fixture__info a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Ustalik puani: sari, kirmizi, yesil, beyaz ve toplam. */
.ui-mp { display: inline-flex; gap: 3px; }
.ui-mp__chip { display: inline-block; min-width: 2.4rem; padding: 0.15rem 0.4rem; border-radius: 6px; color: #fff; font-weight: 800; text-align: center; }
.ui-mp__chip.is-yellow { background: #e9a53a; }
.ui-mp__chip.is-red { background: #d9534f; }
.ui-mp__chip.is-green { background: #3fa45b; }
.ui-mp__chip.is-white { background: #7a7d8c; }
.ui-mp__chip.is-total { background: var(--ui-soft); box-shadow: inset 0 0 0 1px var(--ui-edge); color: var(--ui-ink); }

/* Fikstur: her mac uc satir (masa ve takimlar, IMP, VP); maclar sirayla golgelenir. */
.ui-team-fixture tbody tr,
.ui-team-fixture tbody tr:nth-child(even) { background: transparent; }
.ui-team-fixture tbody:nth-of-type(even) { background: var(--ui-zebra); }
.ui-team-fixture tbody + tbody tr:first-child td { border-top: 2px solid var(--ui-edge); }
.ui-team-fixture td:first-child { padding-left: 0.6rem; }
.ui-team-fixture td.ui-team-fixture__info { padding-left: 2.5rem; }
.ui-team-fixture__info { text-align: left !important; }
.ui-team-fixture__info a,
.ui-team-fixture__info small { display: block; line-height: 1.35; }
.ui-team-fixture__info small { color: var(--ui-muted); font-weight: 700; }
.ui-team-fixture__label { color: var(--ui-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.ui-team-fixture__team { white-space: normal !important; }
.ui-team-fixture .is-self { color: #6d4bc4; font-weight: 800; }
.ui-team-penalty__desc { max-width: 18rem; text-align: left !important; white-space: normal !important; }

@media (max-width: 719.98px) {
    .ui-team-empty { padding: 0 1.15rem 1rem; }
    .ui-team-fixture td.ui-team-fixture__info { padding-left: 0.6rem; }
}

/* --- Takim alt sayfalari: eleme ---------------------------------------------- */
/* Her masa ayri tablo: segment segment IMP; genis ekranda iki sutun. */

.ui-knockout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 1rem; padding: 1.1rem 1.5rem 1.5rem; }
.ui-knockout .ui-res-wrap { border: 1px solid var(--ui-line); border-radius: 12px; }
.ui-knockout .ui-res th:first-child,
.ui-knockout .ui-res td:first-child { padding-left: 0.6rem; }
.ui-knockout .ui-res th:last-child,
.ui-knockout .ui-res td:last-child { padding-right: 0.6rem; }
.ui-knockout__no { font-size: 1.05rem; }
.ui-knockout__team { text-align: left !important; }
.ui-knockout__team a { font-weight: 800; }
.ui-knockout__team a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-knockout__seg { display: inline-block; min-width: 1.8rem; padding: 0.15rem 0.35rem; border-radius: 6px; background: var(--ui-soft); color: var(--ui-focus) !important; font-size: 0.8rem; }
.ui-knockout__seg:hover { background: var(--ui-hover); }
.ui-knockout__total { font-size: 1.05rem; }
/* Eski sayfadaki gibi: segment sutunu (baslik ve iki skor) turuncuyla boyanir, tiklanabilir. */
.ui-knockout__table [data-seg] { cursor: pointer; transition: background-color 0.12s ease; }
.ui-knockout__table .is-seg-hover,
.ui-knockout__table tr:hover .is-seg-hover { background: #f4a27c; }
.ui-knockout__table th.is-seg-hover .ui-knockout__seg { background: rgba(255, 255, 255, 0.55); color: var(--ui-ink) !important; }
.ui-knockout__played td { color: var(--ui-muted); font-size: 0.7rem; font-weight: 700; }
.ui-knockout__played td:first-child { text-align: left; }

@media (max-width: 719.98px) {
    .ui-knockout { padding: 0.85rem 0.6rem 1rem; }
}

/* --- Takim alt sayfalari: bord ---------------------------------------------- */
/* Her masa iki satir (acik, kapali salon); masalar sirayla golgelenir, bu masa altin cerceveli. */

.ui-team-board tbody tr,
.ui-team-board tbody tr:nth-child(even) { background: transparent; }
.ui-team-board tbody:nth-of-type(even) { background: var(--ui-zebra); }
.ui-team-board tbody + tbody tr:first-child td { border-top: 2px solid var(--ui-edge); }
.ui-team-board tbody.is-own { background: var(--ui-gold-soft); box-shadow: inset 0 0 0 2px var(--ui-gold); }
.ui-team-board td:first-child { padding-left: 0.6rem; }
.ui-team-board td.ui-res__board { padding-left: 2.5rem; }
.ui-team-board td:last-child { padding-right: 0.6rem; }
.ui-team-board td.ui-team-board__last { padding-right: 2.5rem; }
.ui-team-board__team { max-width: 12rem; text-align: left !important; white-space: normal !important; }
.ui-team-board__team a { color: var(--ui-ink) !important; font-weight: 800; }
.ui-team-board__team a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-team-board__room { color: var(--ui-muted); font-size: 0.78rem; }

/* Mac sayfasi: ikinci baslik satirinin ilk hucresi tablonun kenarinda degil. */
.ui-match-boards thead tr + tr th:first-child { padding-left: 0.6rem; }

@media (max-width: 719.98px) {
    .ui-team-board td.ui-res__board { padding-left: 0.6rem; }
    .ui-team-board td.ui-team-board__last { padding-right: 0.6rem; }
    .ui-team-board__team { max-width: 7rem; }
}

/* --- Takim alt sayfalari: Butler -------------------------------------------- */
/* Genis ekranda tablo, telefonda kart (yatay kaydirma yok). Uzun isim sarar, tasmaz. */

.bt-dar { display: none; }
.bt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.bt thead th {
    padding: 0.6rem 0.6rem;
    border-bottom: 1px solid var(--ui-edge);
    color: var(--ui-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.bt tbody td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--ui-line); font-weight: 700; text-align: center; }
.bt th:first-child, .bt td:first-child { padding-left: 2.5rem; }
.bt th:last-child, .bt td:last-child { padding-right: 2.5rem; }
.bt tbody tr:nth-child(even) { background: var(--ui-zebra); }
.bt tbody tr:hover { background: var(--ui-hover); }
.bt tbody tr:last-child td { border-bottom: 0; }

.bt-rk { width: 3.5rem; }
.bt .bt-ad { min-width: 190px; text-align: left; }
.bt-kat { width: 7rem; }
.bt-rozet { display: inline-block; min-width: 1.6rem; color: var(--ui-ink); font-size: 0.95rem; font-weight: 800; text-align: center; }

.bt-isim { display: block; color: var(--ui-ink) !important; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
a.bt-isim:hover { text-decoration: underline; text-underline-offset: 3px; }
.bt-takim { display: block; margin-top: 1px; color: var(--ui-muted); font-size: 0.74rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }

.bt-katSayi { display: block; color: var(--ui-ink); font-size: 0.86rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.bt-katToplam { color: var(--ui-faint); font-size: 0.76rem; font-weight: 600; }
.bt-bar { display: block; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: var(--ui-soft); box-shadow: inset 0 0 0 1px var(--ui-line); }
.bt-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--ui-focus); }

.bt-poz { color: #0f8a4f; font-weight: 800; }
.bt-neg { color: #d12b3a; font-weight: 800; }
.bt-notr { color: var(--ui-muted); }
.bt-yok { color: var(--ui-faint); }
.bt-ort { font-size: 1.02rem; font-weight: 800; }

.bt-kart { padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--ui-line); }
.bt-kart:last-child { border-bottom: 0; }
.bt-kartUst { display: flex; align-items: flex-start; gap: 0.55rem; }
.bt-kartAd { flex: 1 1 auto; min-width: 0; }
.bt-kartOrt { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; }
.bt-ortEtiket,
.bt-miniEtiket { color: var(--ui-faint); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.bt-ortEtiket { margin-top: 3px; }
.bt-kartAlt { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--ui-line); }
.bt-katMobil { flex: 1 1 96px; min-width: 96px; }
.bt-katMobil .bt-bar { margin: 0 0 4px; }
.bt-mini { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }

@media (max-width: 719.98px) {
    .bt-genis { display: none; }
    .bt-dar { display: block; }
}

/* --- Canli Ekran tanitimi (Kulubum > Turnuvalar) ------------------------------ */
/* Eski duzende (Metronic koku kucultur) acildigi icin olculer px. Solda koyu zeminde canli
   siralama akan TV ve telefon cizimi, sagda anlatim. Telefonda cizim ustte, kisa. */

.ui-promo {
    width: min(880px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(8, 10, 24, 0.45), 0 2px 8px rgba(8, 10, 24, 0.2);
    color: #3f4254;
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

.ui-promo[open] { display: grid; grid-template-columns: 360px minmax(0, 1fr); animation: uiPromoIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ui-promo::backdrop { background: rgba(14, 16, 30, 0.62); backdrop-filter: blur(3px); }
@keyframes uiPromoIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.ui-promo__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f3f4f8;
    color: #14172b;
    font-size: 16px;
    cursor: pointer;
}

.ui-promo__close:hover { background: #e6e8ef; }

/* Cizim: site arka plani gibi koyu zemin, pembe ve mavi isik. */
.ui-promo__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 36px 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(64, 120, 255, 0.55), transparent 42%),
        radial-gradient(circle at 92% 88%, rgba(236, 72, 153, 0.55), transparent 45%),
        #161623;
}

.ui-promo__tv { position: relative; width: 268px; }

.ui-promo__screen {
    padding: 12px 12px 10px;
    border: 7px solid #0b0c16;
    border-radius: 14px;
    background: linear-gradient(160deg, #1d2f6b, #102046);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.ui-promo__stand { display: block; width: 70px; height: 14px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #0b0c16; }

.ui-promo__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #dbe6ff; font-size: 11px; font-weight: 800; }

.ui-promo__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e5484d;
    color: #fff;
    font-size: 9px;
    letter-spacing: 0.12em;
}

.ui-promo__live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: uiPulse 1.6s ease-in-out infinite; }
.ui-promo__event { opacity: 0.85; }

.ui-promo__rank { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }

.ui-promo__rank li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
}

.ui-promo__rank b { color: #9db8ff; text-align: center; }
.ui-promo__rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-promo__rank em { color: #b9f5cf; font-style: normal; font-variant-numeric: tabular-nums; }
/* Iki satir sirayla "guncellenir": canli akis hissi. */
.ui-promo__rank li.is-a { animation: uiPromoFlash 3.2s ease-in-out infinite; }
.ui-promo__rank li.is-b { animation: uiPromoFlash 3.2s ease-in-out 1.6s infinite; }
@keyframes uiPromoFlash { 0%, 70%, 100% { background: rgba(255, 255, 255, 0.07); } 80% { background: rgba(255, 214, 0, 0.32); } }

.ui-promo__phone {
    position: absolute;
    right: 26px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 76px;
    padding: 14px 7px 10px;
    border: 4px solid #0b0c16;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    transform: rotate(6deg);
}

.ui-promo__notch { position: absolute; top: 4px; left: 50%; width: 22px; height: 4px; border-radius: 4px; background: #0b0c16; transform: translateX(-50%); }
.ui-promo__mini { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 4px; background: #f3f4f8; font-size: 8px; font-weight: 800; }
.ui-promo__mini i { flex: 1; height: 4px; border-radius: 2px; background: #c9cedd; }
.ui-promo__mini.is-me { background: #fff3c4; box-shadow: inset 0 0 0 1px #e8a600; }
.ui-promo__mini.is-me i { background: #e8a600; }

.ui-promo__body { position: relative; padding: 38px 36px 28px; }
.ui-promo__body:focus { outline: none; }

.ui-promo__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fff0f6;
    color: #c2185b;
    font-size: 12px;
    font-weight: 800;
}

.ui-promo__title { margin: 14px 0 8px; color: #14172b; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.ui-promo__text { margin: 0 0 18px; color: #6c7086; font-size: 15px; font-weight: 600; }

.ui-promo__points { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.ui-promo__points li { display: flex; align-items: flex-start; gap: 12px; color: #6c7086; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ui-promo__points strong { display: block; color: #14172b; font-size: 15px; font-weight: 800; }

.ui-promo__icon {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #1b84ff, #6d4bc4);
    color: #fff;
    font-size: 15px;
}

.ui-promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ui-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1b84ff, #6d4bc4);
    box-shadow: 0 10px 24px rgba(27, 132, 255, 0.35);
    color: #fff !important;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ui-promo__cta:hover { box-shadow: 0 14px 30px rgba(27, 132, 255, 0.45); transform: translateY(-1px); }

.ui-promo__later {
    min-height: 48px;
    padding: 0 18px;
    border: 1.5px solid #e1e4ec;
    border-radius: 12px;
    background: #fff;
    color: #3f4254;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.ui-promo__later:hover { background: #f6f7fa; }

.ui-promo__never {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: #a1a5b7;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ui-promo__never:hover { color: #6c7086; }

/* Telefonda cizim ustte sabit yukseklikte serit: TV ustten baslar (CANLI basligi ve ilk
   siralar gorunur, alti kirpilir), telefon alttan tasar ve kapatma dugmesinden uzak kalir.
   Grid degil blok: grid sigmak icin cizimi eziyordu. Sigmayan kisim pencere icinde kayar. */
@media (max-width: 760px) {
    .ui-promo[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
    .ui-promo__art { height: 168px; min-height: 0; padding: 18px 16px 0; align-items: flex-start; }
    .ui-promo__tv { width: 236px; }
    .ui-promo__phone { right: 22px; bottom: -18px; width: 62px; }
    .ui-promo__body { padding: 18px 20px 18px; }
    .ui-promo__title { margin: 12px 0 6px; font-size: 22px; }
    .ui-promo__text { margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
    .ui-promo__points { gap: 10px; margin-bottom: 16px; }
    .ui-promo__points li { font-size: 13px; }
    .ui-promo__actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .ui-promo__cta { justify-content: center; min-height: 46px; }
    .ui-promo__later { min-height: 42px; }
    .ui-promo__never { margin-top: 10px; }
    .ui-promo__close { background: rgba(255, 255, 255, 0.9); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-promo[open],
    .ui-promo__rank li,
    .ui-promo__live::before { animation: none; }
}

/* --- Hareket ---------------------------------------------------------------- */

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

.ui-rise { animation: uiRise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ui-rise--2 { animation-delay: 0.06s; }
.ui-rise--3 { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .ui-rise { animation: none; }
}