/* ==========================================================================
   SEARCH LAYOUT (PLAYERS / TEAMS / LEAGUES)
   ========================================================================== */
.search-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1.8rem;
    align-items: start;
    min-height: 600px;
}

.search-panel {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    height: 100%;
}

.search-bar-wrapper {
    position: relative;
    width: 100%;
}

.search-bar-wrapper input {
    width: 100%;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: var(--transition);
}

.search-bar-wrapper input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.search-bar-wrapper .search-bar-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    max-height: 480px;
    padding-right: 0.3rem;
}

.result-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.result-card:hover {
    background-color: var(--bg-glass-hover);
    border-color: var(--color-primary);
}

.result-card.active,
.result-card.kbd-active {
    background-color: var(--bg-glass-hover);
    border: 1px solid var(--color-primary);
}

.result-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-secondary);
}

.result-card-info {
    display: flex;
    flex-direction: column;
}

.result-card-name {
    font-size: 0.88rem;
    font-weight: 600;
}

.result-card-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ==========================================================================
   PAGE SEARCH (üstte kompakt arama + öneri dropdown'ı)
   ========================================================================== */
.page-search-row {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.page-search-box {
    position: relative;
    width: 100%;
    max-width: 640px;
}

.page-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal);
    max-height: 420px;
    overflow-y: auto;
    padding: 0.4rem;
}

.page-search-dropdown:empty {
    display: none;
}

.page-search-dropdown .result-card {
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
}

.page-search-dropdown .result-card:hover {
    background-color: var(--bg-glass-hover);
}

.page-search-dropdown .result-card.active,
.page-search-dropdown .result-card.kbd-active {
    background-color: var(--bg-glass-hover);
    border: 1px solid var(--color-primary);
}

/* Detail Panel Container */
.detail-panel {
    min-height: 500px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 2rem;
    background: var(--bg-glass);
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}

.empty-state i {
    font-size: 4rem;
    color: rgba(0, 108, 75, 0.25);
    margin-bottom: 1.5rem;
}

.empty-state p {
    font-size: 1.05rem;
    max-width: 400px;
}

/* ==========================================================================
   DETAIL CARDS (PLAYER CARD / CLUB CARD / LEAGUE CARD)
   ========================================================================== */
/* Oyuncu/kulüp/lig profili: artık .glass-container DEĞİL — sayfaya gömülü,
   ortalanmış bir içerik sütunu. Eskiden kart olduğu için (a) 1280px'e kadar
   geriliyor, oyun ekranlarının 720px'inden sonra ekran genişliği zıplıyordu,
   (b) içine yine kartlar basıldığından çift çerçeve/çift padding oluşuyordu. */
.profile-card {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    width: 100%;
    max-width: var(--content-wide);
    margin-inline: auto;
}

.profile-header-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    align-items: center;
}

/* Kulüp arması çerçevesiz/zemin­siz (kullanıcı tercihi, 2026-07-27): logo
   doğrudan sayfada durur. `contain` şart — `cover` kare olmayan armayı kırpar,
   kutu kalkınca bu hemen göze batıyor. */
.profile-header-grid img {
    width: 130px;
    height: 130px;
    border-radius: 0;
    object-fit: contain;
    border: none;
    background-color: transparent;
}

.profile-title-box h3 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}

.profile-title-box .subtitle {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.8rem;
}

/* Club detail header: title left, borderless value stat right — fills the
   wide empty space a single-column header leaves, without boxed pills */
.club-header-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

/* Kulüp başlığındaki lig rozeti. Eskiden 16px'lik bir <img> + "Lig:" metni idi:
   logolar 12px'lik içerik kutusuna sıkışıyor, çoğu kaynak PNG siyah çizim olduğu
   için koyu temada da kayboluyordu. Artık logo sabit açık bir çip üstünde
   (--logo-chip-bg) 34px ve tıklanabilir pill'in içinde — "Lig:" etiketine gerek
   yok, logo + ad zaten ne olduğunu söylüyor. */
.club-league-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* Lig bilgisi çerçevesiz (kullanıcı tercihi, 2026-07-27) — bkz. .hero-chip */
    padding: 0.3rem 0 0.3rem 0;
    margin-bottom: 0.8rem;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.club-league-chip:hover {
    filter: brightness(1.15);
}

/* .profile-header-grid img 130px'lik kulüp armasını hedefliyor; çipin logosunu
   ondan açıkça kurtar (daha yüksek özgüllük, sıralamadan bağımsız). */
.profile-header-grid .club-league-chip img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    /* Açık zemin (--logo-chip-bg) KALIR: lig PNG'lerinin çoğu koyu/şeffaf, koyu
       temada kayboluyor. Çerçeve ise kaldırıldı (2026-07-27 kullanıcı tercihi). */
    background: var(--logo-chip-bg);
    border: none;
    /* 50% DEĞİL: border-radius <img> içeriğini kırpar, dairesel yarıçap kare
       olmayan her logoyu kırpılmış ovale çevirir (bkz. base.css'teki aynı not). */
    border-radius: 9px;
    padding: 3px;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .club-header-info-row {
        align-items: flex-start;
    }
    .club-header-info-row .player-hero-value {
        align-items: flex-start;
        text-align: left;
    }
}

.badge-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Rozet tek satırlıktır: dar bir tablo hücresinde metni sarınca ("2 terk")
   hap biçimi bozulup iki satırlık bir oval hâline geliyordu. */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.pill-badge.market-value {
    background-color: #94f6c8;
    border-color: transparent;
    color: #005138;
}

/* Durum rozetlerinin renk çeşitleri — eskiden her çağrı yerinde satır içi
   style ile veriliyordu (bkz. admin.js:adminUserStatusBadges). */
.pill-badge.is-danger {
    background-color: var(--color-danger);
    border-color: transparent;
    color: #fff;
}

.pill-badge.is-warning {
    background-color: var(--color-warning, #b8860b);
    border-color: transparent;
    color: #fff;
}

/* ==========================================================================
   PLAYER PROFILE — yan panel (kimlik/değer/KPI) + ana içerik (sekmeler) grid'i
   ========================================================================== */
.player-profile-grid {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.player-side-rail {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: sticky;
    top: 1.5rem;
}

/* Kimlik bloğu: foto + isim/rozetler. Masaüstünde dikey (ortalı), mobilde yatay */
.player-side-id {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.player-side-rail .player-hero-photo {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background-color: var(--bg-secondary);
}

.player-side-heading {
    text-align: center;
}

.player-side-heading h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.6rem;
    word-break: break-word;
}

.player-side-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.player-side-rail .player-hero-facts {
    text-align: center;
    margin-bottom: 0;
}

.player-side-rail .player-hero-chips {
    justify-content: center;
}

.player-side-rail .player-hero-value {
    width: 100%;
    align-items: center;
    text-align: center;
}

.player-main-col {
    min-width: 0;
}

@media (max-width: 900px) {
    .player-profile-grid {
        grid-template-columns: 1fr;
    }

    .player-side-rail {
        position: static;
        max-width: 460px;
        margin: 0 auto;
    }

    /* Mobilde dev kare foto yerine kompakt yatay başlık: foto solda, isim sağda */
    .player-side-id {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        text-align: left;
    }

    .player-side-rail .player-hero-photo {
        width: 92px;
        max-width: 92px;
        flex-shrink: 0;
    }

    .player-side-id .player-side-heading {
        text-align: left;
        flex: 1;
        min-width: 0;
    }

    .player-side-id .player-side-badges {
        justify-content: flex-start;
    }
}

.pos-badge {
    background-color: var(--border-ink);
    color: var(--on-ink);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.pos-badge.sub {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
}

.player-hero-facts {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.player-hero-chips {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Takım / lig / uyruk bilgisi ÇERÇEVESİZ (kullanıcı tercihi, 2026-07-27):
   logo + metin doğrudan sayfanın üstünde durur. Kutu/pill kaplaması hiçbir
   zaman uygulanmayacak — bkz. base.css'teki "sayfaya gömülü sayfalar" kuralı;
   çerçeve yalnızca gerçekten tıklanan nesnelerin (kart/buton) hakkı. */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.15rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    max-width: 100%;
}

.hero-chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 3px;
}

.hero-chip.clickable {
    cursor: pointer;
    transition: var(--transition);
}

/* Tıklanabilir olanın (takım/lig) geri bildirimi artık kutu değil, renk. */
.hero-chip.clickable:hover {
    color: var(--color-primary);
}

.player-hero-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.15rem;
    padding: 0;
    background: none;
    border: none;
    align-self: start;
}

.phv-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.phv-amount {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--color-primary);
    white-space: nowrap;
}

.phv-peak {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Kariyer KPI şeridi — kart değil: tek çerçeveli şerit, öğeler arası ince
   ayraç çizgisiyle bölünür (details-meta-grid'in bordersız dilinden ilham) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1.3rem 0;
    padding: 1.1rem 0;
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
}

.kpi-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 1.2rem;
    border-left: 1px solid var(--border-glass);
}

.kpi-tile:first-child {
    padding-left: 0;
    border-left: none;
}

.kpi-value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kpi-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Grid satır kırılınca yeni satırın ilk öğesinde de ayraç yok */
@media(max-width: 640px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-tile:nth-child(2n+1) {
        padding-left: 0;
        border-left: none;
    }

    .kpi-tile:nth-child(-n+2) {
        padding-top: 0;
    }

    .kpi-tile:nth-child(n+3) {
        padding-top: 0.9rem;
        border-top: 1px solid var(--border-glass);
    }
}

/* Yan panelin dar genişliğine uyan 2 sütunlu kompakt KPI varyantı */
.kpi-grid-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 0;
}

.kpi-grid-compact .kpi-tile {
    align-items: center;
    text-align: center;
}

.kpi-grid-compact .kpi-tile:nth-child(2n+1) {
    padding-left: 0;
    border-left: none;
}

.kpi-grid-compact .kpi-tile:nth-child(2n) {
    padding-left: 1.2rem;
    border-left: 1px solid var(--border-glass);
}

.kpi-grid-compact .kpi-tile:nth-child(-n+2) {
    padding-top: 0;
}

.kpi-grid-compact .kpi-tile:nth-child(n+3) {
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-glass);
}

/* Profil sekmeleri */
.profile-tabs {
    display: flex;
    gap: 0.3rem;
    border-bottom: 1px solid var(--border-glass);
    flex-wrap: wrap;
}

.profile-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.profile-tab:hover {
    color: var(--text-primary);
}

.profile-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--color-primary);
}

.profile-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.tab-count {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
}

.profile-tab.active .tab-count {
    background-color: var(--color-primary-glow);
    color: var(--color-primary);
}

.profile-tab-panel {
    animation: fadeIn 0.25s ease;
}

.transfer-arrow {
    color: var(--color-primary);
    text-align: center;
}

.stats-total-row td {
    font-weight: 800;
    border-top: 1px solid var(--border-glass);
    background-color: var(--bg-secondary);
}


/* Details grid list */
.details-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
}

.meta-item {
    display: flex;
    flex-direction: column;
}

.meta-item-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.meta-item-value {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Detail Tabs & Subtables */
.card-details-section {
    margin-top: 1.5rem;
}

.card-details-section h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    border-left: 3px solid var(--color-primary);
    padding-left: 0.6rem;
}

/* Standard Tables style */
.data-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.data-table th {
    background-color: var(--border-ink);
    color: var(--on-ink);
    font-weight: 700;
    padding: 0.6rem 0.8rem;
    border-bottom: 2px solid var(--border-ink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    /* Başlık iki satıra kırılınca ("KAYIT TARİHİ") şerit yükselip altındaki
       sütun genişliklerini de bozuyordu; başlıklar hep tek satır. */
    white-space: nowrap;
    vertical-align: middle;
}

.data-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-primary);
    /* Hücrelerin biri sarınca (rozet/buton) diğerleri taban çizgisine
       yapışıp satır içinde kayıyordu. */
    vertical-align: middle;
}

.data-table tr:hover {
    background-color: var(--bg-glass-hover);
}

/* --- Hücre yardımcı sınıfları -------------------------------------------
   Tablolarda tekrar eden üç sorun: sayı sütunları orantısız rakamlarla
   titriyor, tarih/kısa değerler ortasından kırılıyor, uzun serbest metin
   (e-posta) komşu sütunların genişliğini yiyor. Satır içi style yerine bu
   üç sınıf kullanılır. */
.data-table td.dt-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table td.dt-nowrap {
    white-space: nowrap;
}

.data-table td.dt-ellipsis {
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Boş değer göstergesi — veriymiş gibi okunmasın diye soluk. */
.dt-empty {
    color: var(--text-muted);
}

/* ==========================================================================
   VARLIK LİSTESİ (.entity-list) — kadro oyuncuları + lig kulüpleri
   Kart değil, sayfaya gömülü kayıtlar: iki satırlık düzen (üstte görsel + ad,
   altta ayraçlı meta bilgiler), kayıtlar arasında tek ince çizgi.
   Lig kulüpleri eskiden kendi kart-satırlı tablosuydu (satır aralığı + yarıçap
   + gölge + hover'da yükselme); kadro listesiyle aynı sayfada iki farklı liste
   dili oluşuyordu. İkisi de artık bu tek bileşeni kullanır.
   ========================================================================== */
.entity-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.entity-row {
    background: none;
    border: none;
    border-bottom: 1px solid var(--surface-divider);
    border-radius: 0;
    padding: 0.65rem 0.4rem;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.entity-list .entity-row:last-child {
    border-bottom: none;
}

.entity-row:hover {
    background: var(--bg-glass);
}

.entity-row-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.entity-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border-glass);
    flex-shrink: 0;
}

/* Kulüp arması: daire içine kırpılmaz, kutuya sığdırılır */
.entity-row-avatar.is-logo {
    border-radius: var(--radius-sm);
    object-fit: contain;
    border: none;
    padding: 1px;
}

.entity-row-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Değeri META satırı yerine AD satırının sağ ucunda taşıyan varyant.
   Meta satırı (mevki • kulüp • yaş) dar ekranda sarıyor ve sona konan değer
   ya kulüp adının dibine sıkışıyor ya da tek başına üçüncü bir satıra
   düşüyordu; ad satırının sağ ucu her zaman boş ve her satırda aynı hizada.
   Uzun ad değeri ekran dışına itmesin diye ad kırpılır. */
.entity-row-top.has-value {
    width: 100%;
}

.entity-row-top.has-value .entity-row-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-row-top.has-value .entity-row-val {
    flex-shrink: 0;
    white-space: nowrap;
}

.entity-row-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    padding-top: 0.1rem;
}

.entity-row-strong {
    font-weight: 600;
    color: var(--text-primary);
}

.entity-row-sep {
    opacity: 0.4;
    font-size: 0.7rem;
}

.entity-row-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* Satırın sağ ucundaki değer (piyasa değeri / kadro değeri) */
.entity-row-val {
    margin-left: auto;
    font-weight: 700;
}

/* Lig kulüpleri: en değerli kulübe göre oran çubuğu — satırın altında ince bir
   şerit, kutu izlenimi vermeden karşılaştırmayı korur. */
.entity-row-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--surface-divider);
    overflow: hidden;
}

.entity-row-bar > span {
    display: block;
    height: 100%;
    background: var(--color-primary);
    border-radius: 2px;
}

/* ==========================================================================
   MARKET VALUE LINE CHART (SVG alan/çizgi grafiği)
   ========================================================================== */
.value-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.value-chart-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    background-color: var(--bg-secondary);
}

.value-chart-delta.positive {
    color: var(--color-primary);
}

.value-chart-delta.negative {
    color: var(--color-danger);
}

.value-chart-wrapper {
    /* Güvenlik ağı: kenar sınıflaması kaçıran uç durumlarda bile tooltip
       sayfa genişliğini zorlamasın (dikey taşma etkilenmez) */
    overflow-x: clip;
}

/* Grafik alanı: SVG + nokta overlay'i burada birebir aynı yükseklikte
   konumlanır. Etiket satırı BİLEREK bunun dışında, normal akışta —
   önceki sürümde .value-chart-points, altındaki etiket boşluğu (padding-bottom)
   dahil tüm wrapper yüksekliğine göre yüzdeleniyordu; bu da noktaları
   SVG çizgisinin gerçek konumundan aşağı kaydırıyordu (düşük değerli
   noktalarda ~20px'e varan sapma). Artık plot'un yüksekliği tamamen
   SVG'den geliyor, yüzde hesapları birebir örtüşüyor. */
.value-chart-plot {
    position: relative;
}

.value-chart-svg {
    display: block;
    width: 100%;
    height: 220px;
    overflow: visible;
}

.value-chart-grid {
    stroke: var(--border-glass);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.value-chart-area {
    fill: url(#valueChartFill);
    stroke: none;
}

.value-chart-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.value-chart-stop-start {
    stop-color: var(--color-primary);
    stop-opacity: 0.32;
}

.value-chart-stop-end {
    stop-color: var(--color-primary);
    stop-opacity: 0;
}

/* Nokta işaretçileri + hover hit-alanı: SVG üstüne mutlak konumlanan HTML
   katmanı — yüzde koordinatları grafikle birebir eşleşir */
.value-chart-points {
    position: absolute;
    inset: 0;
}

/* Hit-alanı HER ZAMAN veri noktasında merkezlenir (kenar noktalarda da).
   Önceki kenar-kaydırma hilesi görünen dot'u çizgiden ±11px kaydırıyordu;
   iç boşluk (padX) sayesinde kenar noktalar zaten kırpılmadan sığar, tooltip
   ise ayrıca kenara hizalanır. */
.value-chart-point {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

/* Ara noktalar: ince, sade işaretçi — çizgiyi kalabalıklaştırmaz */
.value-chart-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1.5px solid var(--color-primary);
    opacity: 0.55;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.value-chart-point:hover .value-chart-dot,
.value-chart-point:focus-visible .value-chart-dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.6);
}

/* Zirve (en yüksek değer): vurgulu dolu işaretçi */
.value-chart-dot.is-peak {
    width: 9px;
    height: 9px;
    opacity: 1;
    border-width: 2px;
    background-color: var(--color-primary);
}

/* Son nokta (güncel değer): en belirgin, nabız halkalı */
.value-chart-dot.is-last {
    width: 11px;
    height: 11px;
    opacity: 1;
    border-width: 2px;
    background-color: var(--color-primary);
}

.value-chart-dot.is-last::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
    .value-chart-dot.is-last::after {
        animation: valueChartPulse 2.2s ease-out infinite;
    }
}

@keyframes valueChartPulse {
    0% { transform: scale(0.6); opacity: 0.55; }
    100% { transform: scale(2); opacity: 0; }
}

.value-chart-tooltip {
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: var(--border-ink);
    color: var(--on-ink);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.value-chart-point:hover .value-chart-tooltip,
.value-chart-point:focus-visible .value-chart-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Uç noktaların tooltip'i de kutuyla birlikte kenara hizalanır */
.value-chart-point.edge-start .value-chart-tooltip {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.value-chart-point.edge-end .value-chart-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.value-chart-point.edge-start:hover .value-chart-tooltip,
.value-chart-point.edge-start:focus-visible .value-chart-tooltip,
.value-chart-point.edge-end:hover .value-chart-tooltip,
.value-chart-point.edge-end:focus-visible .value-chart-tooltip {
    transform: translateX(0) translateY(0);
}

.value-chart-labels {
    position: relative;
    height: 1.4rem;
    margin-top: 0.5rem;
}

.value-chart-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.value-chart-label.edge-start {
    transform: translateX(0);
}

.value-chart-label.edge-end {
    transform: translateX(-100%);
}

/* Mobilde grafik biraz daha kısa dursun ki sayfaya orantılı otursun */
@media (max-width: 640px) {
    .value-chart-svg {
        height: 175px;
    }
}

/* ==========================================================================
   AUTH PAGES (GİRİŞ YAP / ÜYE OL)
   ========================================================================== */
.auth-layout {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.auth-card {
    width: 100%;
    max-width: 460px;
}

.auth-title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.auth-title i {
    color: var(--color-primary);
    font-size: 1.4rem;
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.6rem;
}

.auth-field {
    margin-bottom: 1.1rem;
}

.auth-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.auth-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* Alanın ALTINDA duran açıklama (ör. "şehir sonradan değiştirilemez").
   Etiketin içine sıkıştırılmıyor: etiket büyük harf + harf aralıklı, uzun
   cümle orada okunmuyor. */
.auth-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.auth-hint:empty { display: none; }

/* Kilitli alan: tıklanamaz olduğu görünmeli ama "hata" gibi de durmamalı. */
.auth-field select:disabled,
.auth-field input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.auth-field input,
.auth-field select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.92rem;
    transition: var(--transition);
}

.auth-field input:focus,
.auth-field select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* Layout-shift kuralı: geri bildirim sabit yükseklikli satırda yaşar,
   buton aşağı itilmez */
.auth-feedback {
    min-height: 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.auth-feedback.error {
    color: var(--color-danger);
}

.auth-feedback.success {
    color: var(--color-primary);
}

.auth-submit {
    width: 100%;
    justify-content: center;
}

.auth-alt {
    margin-top: 1.4rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.auth-alt a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--color-primary);
}

.auth-alt a:hover {
    color: var(--color-primary-hover);
}

/* Hesap silme kutusu (#/settings) — admin-field-row-loss ile aynı kırmızı ton dili */
.danger-zone {
    background-color: rgba(239, 68, 68, 0.07);
    border: 2px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-md);
    padding: 1.3rem 1.5rem;
}

.danger-zone h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-danger);
    margin-bottom: 0.5rem;
}

.danger-zone p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
}

.danger-zone .auth-field {
    max-width: 320px;
}

.danger-btn {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.danger-btn:hover {
    background-color: var(--color-danger);
    color: #fff;
}

/* ==========================================================================
   SETTINGS SHELL (#/settings) — sticky sidebar (profil özeti + dikey sekme
   nav'ı) + sağda kart içinde bölümlenmiş form. .profile-tab/.profile-tab-panel
   sınıfları JS uyumluluğu için korunur (switchSettingsTab bunlara bakar);
   görsel geçersiz kılmalar burada .settings-shell altında kapsanır ki admin
   panelinin yatay .profile-tabs sekmelerini etkilemesin.
   ========================================================================== */
.settings-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 0 3rem;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
}

.settings-sidebar {
    position: sticky;
    top: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-profile-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.settings-profile-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.settings-avatar {
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 14px;
    background-color: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.settings-profile-copy {
    min-width: 0;
}

.settings-profile-kicker,
.settings-panel-kicker {
    display: block;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.settings-profile-name {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-profile-username {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-profile-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.35rem;
    margin-top: 0.85rem;
}

.settings-profile-joined {
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-glass);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.settings-shell .settings-tabs-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.2rem;
    border-bottom: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.settings-shell .settings-tabs-nav .profile-tab {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 0;
    padding: 0.7rem 0.8rem;
    border-bottom: none;
    border-radius: 9px;
    color: var(--text-secondary);
}

.settings-shell .settings-tabs-nav .profile-tab:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.settings-shell .settings-tabs-nav .profile-tab.active {
    background-color: rgba(29, 185, 143, 0.12);
    color: var(--color-primary);
}

.settings-shell .settings-tabs-nav .profile-tab.settings-nav-danger {
    color: var(--color-danger);
}

.settings-shell .settings-tabs-nav .profile-tab.settings-nav-danger:hover {
    background-color: rgba(186, 26, 26, 0.08);
}

.settings-shell .settings-tabs-nav .profile-tab.settings-nav-danger.active {
    background-color: var(--color-danger);
    color: #fff;
}

.settings-content {
    min-width: 0;
}

.settings-panel {
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.settings-panel .danger-zone {
    background-color: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-radius: 12px;
    padding: 1.35rem;
}

.settings-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.35rem;
    border-bottom: 1px solid var(--border-glass);
}

.settings-panel-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background-color: rgba(29, 185, 143, 0.12);
    color: var(--color-primary);
}

.settings-panel-header h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0.12rem 0 0;
}

.settings-panel-header p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;
    max-width: 56ch;
}

.settings-field-section {
    margin-bottom: 1.8rem;
}

.settings-field-section:last-of-type {
    margin-bottom: 1.2rem;
}

.settings-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

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

.settings-form-narrow {
    max-width: 440px;
}

.settings-panel .auth-field {
    margin-bottom: 1rem;
}

.settings-panel .auth-field label {
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--text-secondary);
}

.settings-panel .auth-field input,
.settings-panel .auth-field select {
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border-radius: 9px;
    font-size: 0.94rem;
}

.settings-panel .settings-form-narrow .auth-submit {
    width: auto;
    padding-inline: 1rem;
}

.settings-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-glass);
}

.settings-form-actions .auth-feedback {
    margin: 0;
}

.settings-form-actions .auth-submit {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 1rem;
}

@media (max-width: 860px) {
    /* minmax(0,1fr): düz "1fr" izi (min-width:auto) içerik min-genişliğine
       göre büyüyüp shell'i viewport dışına taşırıyordu; 0 tabanı bunu keser. */
    .settings-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.1rem;
        padding: 1rem 0 2rem;
    }

    .settings-sidebar {
        position: static;
        min-width: 0;
    }

    .settings-content {
        min-width: 0;
    }

    .settings-shell .settings-tabs-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .settings-shell .settings-tabs-nav .profile-tab {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 0.6rem 0.3rem;
        font-size: 0.76rem;
        font-weight: 700;
        gap: 0.35rem;
        border-radius: var(--radius-sm);
        box-sizing: border-box;
    }

    .settings-shell .settings-tabs-nav .profile-tab span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .settings-profile-card {
        padding: 0.9rem;
    }
    .settings-avatar {
        width: 46px;
        height: 46px;
    }
    .settings-profile-meta {
        margin-top: 0.75rem;
        justify-content: flex-start;
    }
    .settings-profile-joined {
        display: none;
    }
    .settings-shell .settings-tabs-nav .profile-tab {
        font-size: 0.68rem;
        padding: 0.55rem 0.1rem;
        flex-direction: column;
        gap: 0.2rem;
    }
    .settings-shell .settings-tabs-nav .profile-tab i {
        font-size: 0.85rem;
    }

    .settings-shell .settings-tabs-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-shell .settings-tabs-nav .profile-tab span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.15;
    }

    .settings-panel {
        padding: 1.15rem;
        border-radius: 13px;
    }

    .settings-panel-header {
        gap: 0.7rem;
        margin-bottom: 1.3rem;
        padding-bottom: 1rem;
    }

    .settings-panel-icon {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        font-size: 0.9rem;
    }

    .settings-panel-header h3 {
        font-size: 1.12rem;
    }

    .settings-panel-header p {
        font-size: 0.82rem;
    }

    .settings-field-section {
        margin-bottom: 1.45rem;
    }

    .settings-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-form-actions .auth-submit {
        width: 100%;
    }

    .settings-panel .settings-form-narrow .auth-submit {
        width: 100%;
    }
}

/* ==========================================================================
   ADMIN PANEL (#/admin)
   ========================================================================== */
/* Admin shell: sticky sidebar navigation on the left, content panels on the
   right — mirrors the settings-shell pattern for a consistent "app" feel. */
/* KAYDIRMA: 2026-08-07'den beri SAYFANIN KENDİSİ kayar (kullanıcı kararı).
   Öncesinde `body.admin-active` ile oyun arenasındaki tek-ekran kilidi vardı:
   sayfa sabitleniyor, kaydırma yalnız `.admin-content` içinde oluyordu. Bunun
   iki bedeli vardı — site footer'ı admin'de hiç görünmüyordu ve panel içi
   kaydırma çubuğu sayfanınkinden ayrı çalışıp "sayfa kaymıyor" hissi
   veriyordu. Kilit kaldırıldı; kenar çubuğunu yerinde tutan tek mekanizma
   artık aşağıdaki sticky. Kilidin var oluş gerekçesi olan "kart footer'ın
   yanında sıkışıp kırpılıyor" sorunu iki değişiklikle çözüldü: footer
   301px'ten ~160px'e indi ve kart `max-height` + `overflow-y` ile kendi
   içinde kayabiliyor, yani pencere ne kadar kısa olursa olsun üstü kırpılmaz. */
.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 1.5rem 0;
    align-items: start;
    min-height: calc(100vh - 124px);
}

/* Sticky eşiği kartın DOĞAL konumuna eşit olmalı: 68px sticky başlık + 32px
   .main-content üst dolgusu + 24px .admin-shell üst dolgusu = 124px. Eşik daha
   yukarıdaydı (90px), yani kart kilitlenmeden önce 34px sürükleniyor; kısa
   sekmelerde (Genel Bakış, Oyuncular) sayfa o eşiğe hiç ulaşmadığı için kart
   içerikle birlikte tamamen kayıp gidiyordu — sekmeye göre "bazen sabit, bazen
   değil" görüntüsü buradan geliyordu. Eşit olunca kart hiçbir sekmede
   kıpırdamıyor. 900px altında zaten static (aşağıdaki media query). */
/* max-height + overflow: pencere kartı sığdıramayacak kadar kısaysa (124px
   ofset + 440px kart = 564px) kartın alt ucu erişilemez kalıyordu; artık kart
   kendi içinde kayar. Normal pencerede sınır devreye girmez. */
.admin-sidebar {
    position: sticky;
    top: 124px;
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 0.9rem;
}

/* `body.admin-active` tek-ekran kilidi 2026-08-07'de KALDIRILDI (yukarıdaki
   .admin-shell notuna bakın). Sınıf router.js'te de artık eklenmiyor; yeni
   kural yazarken ona dayanmayın — admin sayfası da her sayfa gibi kayar ve
   site footer'ı görünür. */

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.2rem 0.4rem 1rem;
    border-bottom: 1px solid var(--border-glass);
    margin-bottom: 0.9rem;
}

.admin-sidebar-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: var(--on-ink, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.admin-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-sidebar-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.admin-sidebar-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.admin-nav-item i {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
}

.admin-nav-item:hover {
    background: var(--bg-glass-hover);
    color: var(--text-primary);
}

.admin-nav-item.active {
    background: var(--color-primary);
    color: var(--on-ink, #fff);
}

.admin-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-panel {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    animation: fadeIn 0.25s ease;
}

.admin-panel.hidden {
    display: none;
}

/* Panel header: title/description left, optional action button right */
.admin-panel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-glass);
}

.admin-panel-header h2 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
}

.admin-panel-header p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-top: 0.25rem;
    max-width: 640px;
}

/* Kullanıcılar sekmesi — arama + durum filtresi araç çubuğu */
.admin-users-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.9rem 0;
}

.admin-users-search {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.admin-users-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.admin-users-search input {
    width: 100%;
    padding: 0.55rem 0.8rem 0.55rem 2.3rem;
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    background: var(--bg-glass);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.admin-users-search input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.admin-users-count {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-left: auto;
    /* Sayı + "arama yap" ipucu uzun: sığmazsa kırpılmak yerine alt satıra insin
       (araç çubuğu zaten flex-wrap). */
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}

.admin-users-count b { color: var(--text-primary); }

/* "en yeni kayıtlar — diğerleri için arama yap" ipucu: dar ekranda sayıyı
   itmesin diye sarabilir. */
.admin-users-hint {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* Kullanıcı tablosunun aksiyon sütunu: yetki + silme butonu yan yana, dar
   ekranda alt alta. Buton boyutları eskiden satır içi style ile veriliyordu.
   `flex-wrap: wrap` masaüstünde de devredeydi: sütun dar kalınca iki buton
   alt alta düşüp satır yüksekliğini iki katına çıkarıyor, üstelik farklı
   metin uzunlukları yüzünden iki farklı genişlikte görünüyorlardı. Artık
   masaüstünde tek satır + eşit genişlik, sarma yalnızca mobilde. */
.admin-row-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.admin-row-actions .secondary-btn {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    white-space: nowrap;
    flex: 0 0 auto;
    justify-content: center;
}

/* Yalnız-ikon buton: kare kutu, metin yokken yatay dolgu hâlâ dikdörtgen
   bırakıyordu. `min-width` yerine sabit ölçü — iki buton her satırda aynı. */
.admin-row-actions .secondary-btn.is-icon-only {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    font-size: 0.9rem;
}

.admin-row-actions .secondary-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Durum hücresi: rozet + "kaldır" düğmesi çiftleri. Düz metin araları yerine
   flex boşluğu — rozetler sarınca da dikey aralık korunur. */
.admin-status-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Rozetin yanındaki erken-kaldırma düğmesi: rozetle aynı yükseklikte, kare. */
.pill-badge-action {
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.2;
}

.admin-section-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.admin-section-title i {
    color: var(--color-primary);
}

.admin-block-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

/* --- Oyuncu yönetimi (saygı sınıfı) --- */
.admin-player-search-box {
    position: relative;
    max-width: 480px;
}

.admin-player-search-box > i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.admin-player-search-box input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.4rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-player-search-box input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.admin-player-search-box .search-dropdown-menu {
    width: 100%;
    margin-top: 4px;
}

/* Seçilen oyuncunun düzenleme kartı */
.admin-player-editor-card {
    margin-top: 1.1rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    background: var(--bg-secondary);
}

.admin-player-editor-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.admin-player-editor-head img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-glass);
}

.admin-player-editor-head h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.admin-player-editor-head p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.admin-player-editor-fields {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.admin-player-editor-fields .admin-field {
    flex: 1 1 160px;
}

.admin-player-editor-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-player-editor-actions button {
    font-size: 0.82rem;
    padding: 0.5rem 0.9rem;
}

/* Saygı sınıfı listesi */
.admin-memorial-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.4rem;
    border-bottom: 1px solid var(--border-glass);
}

.admin-memorial-row:last-child {
    border-bottom: none;
}

.admin-memorial-row img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-glass);
    filter: grayscale(1);
}

.admin-memorial-row-info {
    flex: 1;
    min-width: 0;
}

.admin-memorial-row-info h4 {
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
}

.admin-memorial-row-info p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-memorial-row .memorial-chip {
    flex-shrink: 0;
}

.memorial-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #111827;
    color: #e5e7eb;
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Saygı sınıfı (memorial) oyuncu profili ---
   Admin panelinden "memorial" durumuna alınan oyuncuların kartı: koyu anma
   şeridi, gri tonlamalı fotoğraf ve isteğe bağlı anma notu. */
.profile-card.memorial {
    border-color: #111827;
}

.memorial-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: #111827;
    color: #e5e7eb;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}

.memorial-banner i {
    color: #9ca3af;
}

.memorial-years {
    font-family: var(--font-heading);
    font-weight: 800;
    color: #d1d5db;
}

.memorial-note {
    font-size: 0.83rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
    margin: -0.3rem 0 0.6rem;
    line-height: 1.5;
}

.profile-card.memorial .player-hero-photo {
    filter: grayscale(1);
    border-color: #374151;
}

.profile-card.memorial .player-hero-value .phv-amount {
    color: var(--text-muted);
}

@media (max-width: 900px) {
    /* Kenar çubuğu burada sticky değil, yatay bir sekme şeridi: sticky için
       ayrılan alt boşluk ve kart-içi kaydırma sınırı geri alınır (yoksa kısa
       telefonlarda menü kendi içinde kayıp yarısı gizli kalır). */
    .admin-shell {
        grid-template-columns: 1fr;
        padding-bottom: 1.5rem;
        min-height: 0;
    }

    .admin-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .admin-nav-item {
        width: auto;
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* One full-width horizontal card per game, stacked in a single column —
   replaces the old auto-fill card grid (tall narrow cards, wrapped fields)
   so each game's gain/loss fields read left-to-right in one glance. */
.admin-game-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

/* --------------------------------------------------------------------------
   PUANLAMA SEKMESİ — arama satırı + hızlı geçiş çipleri (2026-08-07)
   Sekmede 15 kart / ~5000px var; bir oyunun ayarına ulaşmak kaydırma
   gerektiriyordu. Arama satırı kartların ÜSTÜNDE ve YAPIŞIK: filtre yazarken
   sonuç aşağıda değişirken kutu ekrandan çıkmasın (panelin kendi kaydırması
   var, bkz. body.admin-active).
   -------------------------------------------------------------------------- */
.admin-scoring-toolbar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    padding: 0.8rem 1rem;
}

/* Yapışkanlık YALNIZ masaüstünde. Eşik `top: 68px` — yapışkan site navbar'ının
   yüksekliği; tek-ekran kilidi kalktıktan sonra kaydıran kap PENCERE, yani
   `top: 0` kutuyu navbar'ın ALTINA sürüyordu. Mobilde kapatıldı: orada navbar
   daha kısa (48px) ve iki yapışkan katman dar ekranda üst üste binip içeriğe
   yer bırakmıyor. */
@media (min-width: 901px) {
    .admin-scoring-toolbar {
        position: sticky;
        top: 68px;
        z-index: 5;
    }
    /* Altındaki `margin-bottom` boşluğu ŞEFFAF: kaydırırken çipler tam o
       14px'lik aralıktan geçip yapışkan kutunun altından sırıtıyordu. Boşluk
       sayfanın zeminiyle boyanır (kap saydam, gerçek zemin body'de). */
    .admin-scoring-toolbar::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 0.9rem;
        background: var(--bg-primary);
    }
}

/* Oyun seçici: açılır menü + etiketi. Ana giriş yolu bu, o yüzden aramadan
   daha geniş. */
.admin-scoring-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 300px;
    min-width: 0;
}

.admin-scoring-picker label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-scoring-picker .premium-select {
    flex: 1 1 auto;
    min-width: 0;
}

/* Arama KÜÇÜK (kullanıcı isteği): tam genişlikteyken satırın tamamını yiyip
   asıl giriş yolu gibi görünüyordu. Asıl yol menü; arama ikincil ("ipucu",
   "seri" gibi ayar adıyla kart bulmak için). */
.admin-scoring-search-box {
    flex: 0 1 220px;
    min-width: 150px;
}

.admin-scoring-search-box .premium-search-input {
    padding: 0.45rem 0.7rem 0.45rem 2.1rem;
    font-size: 0.82rem;
}

.admin-scoring-search-box .search-icon {
    font-size: 0.8rem;
}

.admin-scoring-count {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   BİLDİRİM METİNLERİ (Duyuru sekmesi, 2026-08-07)
   -------------------------------------------------------------------------- */
.admin-templates-toolbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
}

.admin-templates-only {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

.admin-templates-only input { width: auto; margin: 0; cursor: pointer; }

#admin-templates-list {
    display: grid;
    gap: 1rem;
}

.admin-tpl-card { padding: 1.1rem 1.2rem; }

.admin-tpl-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

/* Açıklama başlığa yapışıyordu (.admin-card-hint'in üst boşluğu yok). */
.admin-tpl-card .admin-card-hint { margin-top: 0; margin-bottom: 0.9rem; }

.admin-tpl-head h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-primary);
}

.admin-tpl-head i { color: var(--color-primary); }

.admin-tpl-badge {
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Yer tutucu rozetleri: tıklanınca metne eklenir, o yüzden buton görünümlü. */
.admin-tpl-vars {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.admin-tpl-var {
    padding: 0.2rem 0.5rem;
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    color: var(--color-primary);
    font-family: var(--font-heading), monospace;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.admin-tpl-var:hover {
    border-style: solid;
    border-color: var(--color-primary);
}

/* Önizleme SUNUCUDAN gelir; kullanıcının gördüğü bildirim satırının birebir
   bileşeni (notifications.js:renderNotificationList ile aynı sınıflar). */
.admin-tpl-preview {
    margin-bottom: 0.9rem;
}

.admin-tpl-preview-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.admin-tpl-preview .notif-item { cursor: default; }

.admin-tpl-dirty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--color-warning);
}

.admin-game-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-game-card-title i {
    color: var(--color-primary);
}

/* Each row groups one category (gain or loss) of fields, label on the left,
   inputs flowing horizontally to the right — keeps kazanç/kayıp values from
   being visually mixed together. */
.admin-field-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.7rem;
}

.admin-field-row-gain {
    background-color: rgba(16, 185, 129, 0.07);
    border: 2px solid rgba(16, 185, 129, 0.35);
}

.admin-field-row-loss {
    background-color: rgba(239, 68, 68, 0.07);
    border: 2px solid rgba(239, 68, 68, 0.35);
}

.admin-field-row-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    min-width: 100px;
}

.admin-field-row-gain .admin-field-row-label {
    color: var(--color-success, #10b981);
}

.admin-field-row-loss .admin-field-row-label {
    color: var(--color-danger, #ef4444);
}

.admin-field-row-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    flex: 1 1 auto;
}

.admin-field {
    display: flex;
    flex-direction: column;
    min-width: 110px;
}

.admin-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.admin-field input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
}

.admin-field input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* ==========================================================================
   DUYURU (admin → tüm kullanıcılara bildirim)
   Solda form, sağda CANLI ÖNİZLEME: duyuru geri alınamadığı için yönetici
   metni kullanıcının göreceği bileşenin aynısında görmeli. Önizleme
   `.notif-item`in kendisi (layout.css) — ayrı bir kopya stil YAZILMAZ, yoksa
   bildirim kutusu değişince önizleme sessizce yalan söyler.
   ========================================================================== */
.admin-broadcast {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
    margin-top: 1rem;
}

.admin-broadcast-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Serbest metin alanları sayısal ayar kutularından farklı: kalın/ortalı değil,
   normal ağırlıkta ve okunur satır yüksekliğinde. */
.admin-broadcast-form textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
}

.admin-broadcast-form textarea:focus,
.admin-broadcast-form select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.admin-broadcast-form input[type="text"] {
    font-weight: 600;
}

.admin-broadcast-form select {
    width: 100%;
    padding: 0.5rem 0.7rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.admin-field-hint {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    align-self: flex-end;
    font-variant-numeric: tabular-nums;
}

.admin-broadcast-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.admin-broadcast-audience {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.admin-broadcast-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-sunken, rgba(127, 127, 127, 0.07));
}

.admin-broadcast-preview-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* Önizleme satırı tıklanabilir değil (gerçek bildirimden tek farkı). */
.admin-broadcast-preview .notif-item {
    cursor: default;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    border-bottom: none;
}

.admin-broadcast-preview .notif-item.is-placeholder {
    opacity: 0.55;
}

@media (max-width: 900px) {
    .admin-broadcast {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-card-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.admin-card-actions button {
    font-size: 0.82rem;
    padding: 0.5rem 0.9rem;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.admin-stat-tile {
    text-align: center;
    padding: 1.4rem 1rem;
}

.admin-stat-tile i {
    font-size: 1.6rem;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

.admin-stat-value {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 900;
}

.admin-stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
}

#admin-tab-users {
    margin-top: 1rem;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
/* Footer SAYFAYA GÖMÜLÜDÜR: kendi zemini yok, sayfanınkinin üzerinde durur ve
   ayrımı yalnız üstteki saç teli çizgi yapar (.page-section / .load-more-row
   ile aynı dil). Eskiden `background: var(--bg-secondary)` vardı; o değer
   --surface-sunken'in ta kendisi olduğu için footer "sayfanın sonu" gibi değil
   "sıradan bir gömülü panel" gibi duruyordu, üstelik açık temadaki mavi tenti
   (#eef4ff) markanın koyu yeşil vurgusuyla uyuşmuyordu. */
.footer-layout {
    border-top: 1px solid var(--border-glass);
    padding: 1.4rem 2rem;
    margin-top: auto;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* "Hesap" sütunu kaldırıldı (2026-07-28) — aynı bağlantılar header'daki
   kullanıcı menüsünde zaten var. Kalan üç sütun + telif marka sütununa taşındı,
   böylece footer alttaki ayrı şeridi kaybedip bir satır kısaldı.
   `align-items: start` (2026-08-07): grid varsayılanı stretch olduğu için üç
   sütun da en uzunun boyuna geriliyordu — yükseklik ölçüsü artık gerçekten en
   uzun sütunun içeriği. */
.footer-grid {
    display: grid;
    /* Marka sütunu geniş tutulur ki veri-kaynağı rozeti + telif tek satırda
       kalsın (480px istiyorlar); bağlantı sütunları çok sütunlu olduktan sonra
       zaten daha az yere ihtiyaç duyuyor. */
    grid-template-columns: 1.7fr 1fr 1.3fr;
    gap: 1.6rem 2rem;
    align-items: start;
}

.footer-col-brand {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-right: 1rem;
}

.footer-brand-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.footer-brand-name i {
    color: var(--color-primary);
}

.footer-brand-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    /* 320px'te metin 4 satıra çıkıyor ve marka sütunu footer'ın boyunu tek
       başına belirliyordu; sütun zaten daha geniş. */
    max-width: 460px;
}

/* Marka sütununun alt satırı. Veri kaynağı rozeti (.footer-data-credit)
   2026-08-08'de kaldırıldı, satırda şimdilik yalnız telif var — sarmalayıcı
   yerinde bırakıldı ki buraya ikinci bir öğe eklendiğinde düzen hazır olsun. */
.footer-brand-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
}

.footer-col-title {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

/* Bağlantılar tek sütun yerine ÇOK SÜTUNA dizilir (2026-08-07 kullanıcı
   isteği: "footer fazla büyük, kolon sayısını artırarak küçült"). Altı maddelik
   bir liste altı satır yerine üç satır tutuyor, footer 301px → ~170px.
   `grid-auto-flow: column` + sabit 3 satır okuma sırasını DİKEY tutar (satır
   akışı olsaydı göz soldan sağa zıplardı) ve madde sayısı artarsa sütun
   kendiliğinden eklenir; `Sıralamalar` misafirde `display:none` olduğu için
   ızgaradan tamamen çıkar, boşluk bırakmaz. */
.footer-nav-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: max-content;
    gap: 0.45rem 1.6rem;
    align-content: start;
}

.footer-nav-list + .footer-nav-list {
    margin-top: 0.65rem;
}

.footer-nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.86rem;
    transition: var(--transition);
    width: fit-content;
}

.footer-nav-list a i {
    font-size: 0.78rem;
    color: var(--text-muted);
    width: 1em;
    transition: var(--transition);
}

.footer-nav-list a:hover {
    color: var(--color-primary);
}

.footer-nav-list a:hover i {
    color: var(--color-primary);
}

/* Telif artık marka sütununun son satırı — veri kaynağı rozetiyle aynı hizada
   (bkz. .footer-brand-meta), o yüzden kendi üst boşluğu yok. */
.footer-copyright {
    font-size: 0.78rem;
    color: var(--text-muted);
}

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

    .footer-col-brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
}

/* Responsive adjustments */
@media(max-width: 768px) {
    .navbar-container {
        flex-direction: column;
        padding: 1rem;
    }

    .nav-links {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-right {
        width: 100%;
        justify-content: center;
    }

    .global-search-container {
        width: 100%;
    }

    .main-content {
        padding: 1rem;
    }

    .search-layout {
        grid-template-columns: 1fr;
    }

    .hero-section {
        padding: 2rem 1.5rem;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .game-compare-arena {
        flex-direction: column;
    }

    .compare-card {
        width: 100%;
    }

    .vs-circle {
        margin: 0.5rem 0;
    }

    .options-btn-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PLAYERS / TEAMS VIEW - MINIMAL SEARCH
   Her iki view de aynı arama+detay kabuğunu paylaşır; tek fark aranan
   varlık (oyuncu/kulüp). Navbar'da tek "Futbolcular" sekmesi altında
   birleştirildiler — .directory-switch bu iki route arasında geçiş sağlar.
   ========================================================================== */
#view-players,
#view-teams {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 3rem;
}

.directory-switch-row {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.directory-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    padding: 0.25rem;
}

.directory-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.directory-switch-btn:hover {
    color: var(--text-primary);
}

.directory-switch-btn.active {
    background-color: var(--color-primary);
    color: #fff;
}

.players-minimal-search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 640px;
    margin: 0.5rem auto 1.5rem;
    position: relative;
    z-index: 10;
}

/* Futbolcu dizini: sonuç alanını iten büyük, yuvarlak arama kutusu yerine
   Takımlar araç çubuğuyla aynı yoğunlukta yalın bir arama şeridi. */
.player-directory-toolbar {
    max-width: 820px;
    margin: 0.25rem auto 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-glass);
}

.player-toolbar-search {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.player-toolbar-search:focus-within {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
}

.player-toolbar-search i {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.player-toolbar-search:focus-within i { color: var(--color-primary); }

.player-toolbar-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
}

.player-toolbar-search input::placeholder { color: var(--text-muted); }

/* Lig araması da futbolcu aramasıyla aynı kısa hiyerarşiyi kullanır. */
.league-directory-toolbar {
    max-width: 820px;
    margin: 0.25rem auto 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-glass);
}

.league-toolbar-search {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.league-toolbar-search:focus-within {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
}

.league-toolbar-search i {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.league-toolbar-search:focus-within i { color: var(--color-primary); }

.league-toolbar-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
}

.league-toolbar-search input::placeholder { color: var(--text-muted); }

.premium-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    padding: 0.6rem 0.8rem;
    transition: var(--transition);
    box-shadow: var(--shadow-brutal);
}

.premium-search-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-glow), var(--shadow-brutal);
    background: var(--bg-glass-hover);
}

.premium-search-wrapper .search-icon {
    margin-left: 1rem;
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: var(--transition);
}

.premium-search-wrapper:focus-within .search-icon {
    color: var(--color-primary);
}

.premium-search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-family: var(--font-body);
}

.premium-search-input:focus {
    outline: none;
}

.premium-search-input::placeholder {
    color: var(--text-muted);
}

.premium-search-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 60;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal);
    max-height: 420px;
    overflow-y: auto;
    padding: 0.5rem;
    text-align: left;
    transition: var(--transition);
}

.premium-search-dropdown:empty {
    display: none;
}

.premium-search-dropdown .result-card {
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
}

.premium-search-dropdown .result-card:hover,
.premium-search-dropdown .result-card.active,
.premium-search-dropdown .result-card.kbd-active {
    background-color: var(--bg-glass-hover);
}

/* Detail Arena */
.players-detail-arena {
    min-height: 400px;
    animation: fadeIn 0.5s ease;
}

@media (max-width: 768px) {
    .directory-switch-row {
        margin-top: 1.5rem;
    }
    .players-minimal-search-container {
        margin: 1rem auto 1.25rem;
        padding: 0 1rem;
    }

    .player-directory-toolbar {
        margin: 0.15rem auto 0.55rem;
        padding: 0.2rem 1rem 0.5rem;
    }

    .player-toolbar-search { height: 40px; }

    .league-directory-toolbar {
        margin: 0.15rem auto 0.55rem;
        padding: 0.2rem 1rem 0.5rem;
    }

    .league-toolbar-search { height: 40px; }
    /* Arama çubuğu mobilde ~66px'ti (sarmalayıcı 0.6rem + input 0.8rem dolgu),
       artı ikon ~29px'lik ölü alan bırakıyordu. Dolguları kısarak ~44px'e iner.
       FONT-SIZE'A DOKUNULMAZ: responsive.css'teki `input { font-size:16px }`
       iOS'un odaklanınca sayfayı zoom'lamasını engelliyor. */
    .premium-search-wrapper {
        border-radius: var(--radius-md);
        padding: 0.2rem 0.5rem;
    }
    .premium-search-input {
        padding: 0.5rem 0.6rem;
    }
    .premium-search-wrapper .search-icon {
        font-size: 1rem;
        margin-left: 0.4rem;
    }
}

/* ==========================================================================
   RANKINGS VIEW - PREMIUM LEADERBOARD STYLE
   ========================================================================== */
#view-rankings {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 4rem;
}

.text-gold { color: var(--color-warning); }
/* Sabit #3b82f6 idi: koyu temada kulüp adı sütunu (Takımlar > tablo görünümü)
   koyu zeminde kontrastı düşük kalıyordu. --color-info temaya göre koyulaşır/açılır. */
.text-blue { color: var(--color-info); }
.text-green { color: var(--color-primary); }

/* Tek panelli liderlik tablosu: ortalanmış dar sütun — oyun panelleriyle aynı
   basamak (--content-md), sekmeler arası geçişte genişlik değişmesin. */
.rankings-shell {
    max-width: var(--content-md);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.rankings-hero {
    text-align: center;
}

.rankings-hero h2 {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.4rem;
}

.rankings-hero h2 i { color: var(--color-primary); }

.rankings-hero p {
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Kapsam seçici — segment kontrol */
.rankings-tabs {
    display: flex;
    gap: 0.3rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.rankings-tabs::-webkit-scrollbar { display: none; }

.rankings-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.rankings-tab:hover { color: var(--text-primary); }

.rankings-tab.active {
    background: var(--color-primary);
    color: #fff;
}

.rankings-tab.active i { color: #fff; }

/* Sıralama paneli */
.rankings-board {
    padding: 1.5rem;
}

.rankings-board-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1.1rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-glass);
}

.rankings-board-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--color-primary-glow);
    color: var(--color-primary);
}

.rankings-board-heading h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.rankings-board-heading p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.15rem 0 0;
}

.rankings-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rank-row {
    display: grid;
    grid-template-columns: 34px 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background-color 0.15s ease;
}

.rank-row:hover { background: var(--bg-secondary); }

.rank-pos {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* İlk üç: madalya renkli konum rozeti */
.rank-row.medal-1 .rank-pos,
.rank-row.medal-2 .rank-pos,
.rank-row.medal-3 .rank-pos {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
}
.rank-row.medal-1 .rank-pos { background: #e0a92e; }
.rank-row.medal-2 .rank-pos { background: #94a3b8; }
.rank-row.medal-3 .rank-pos { background: #b9743f; }

.rank-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
}

.rank-row.medal-1 .rank-avatar { border-color: #e0a92e; color: #e0a92e; }

.rank-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    max-width: 100%;
}

.rank-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.rank-name-text {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-you {
    flex-shrink: 0;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
}

.rank-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.rank-score strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.rank-score span {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Kullanıcının kendi satırı */
.rank-row.is-you {
    background: var(--color-primary-glow);
    border-color: var(--color-primary);
}

.rankings-gap {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.1rem 0;
    opacity: 0.6;
}

/* Durum mesajları */
.rankings-loader,
.rankings-no-data {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.rankings-loader i { color: var(--color-primary); margin-right: 0.4rem; }
.rankings-no-data.error { color: var(--color-danger); }

.rankings-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: 0.9rem;
}

.rankings-empty-state i {
    font-size: 2rem;
    color: var(--text-muted);
    opacity: 0.55;
}

.rankings-empty-state p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    max-width: 320px;
}

@media (max-width: 640px) {
    .rankings-hero h2 { font-size: 1.5rem; }
    .rankings-board { padding: 1.1rem; }
    .rankings-tabs { gap: 0.2rem; padding: 0.3rem; }
    .rankings-tab {
        min-width: 0;
        gap: 0.35rem;
        padding: 0.55rem 0.4rem;
        font-size: 0.82rem;
    }
    .rank-row {
        gap: 0.55rem;
        grid-template-columns: 26px 34px minmax(0, 1fr) auto;
        padding: 0.55rem 0.35rem;
    }
}

/* ==========================================================================
   REDESIGNED LEAGUES (LİGLER) PORTAL STYLES
   ========================================================================== */

/* Leagues Header container styling */
/* İki sütun: SOLDA başlık, SAĞDA açıklama (kullanıcı kararı, 2026-07-31).
   Önceden tek sütun ortalıydı (.section-header'ın text-align: center'ı) —
   sağ yarı bomboş duruyor, üç satırlık blok da header'ı gereksiz uzatıyordu.
   Açıklama sağ sütuna geçince yükseklik ~%35 azalıyor. */
.leagues-header-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    text-align: left;              /* .section-header ortalıyor, burada iptal */
    background: linear-gradient(135deg, #004d34 0%, #002216 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.9rem 2.2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: var(--shadow-brutal);
}

html[data-theme="dark"] .leagues-header-container {
    background: linear-gradient(135deg, #022c22 0%, #0f1410 100%);
    border-color: rgba(255, 255, 255, 0.04);
}

.leagues-header-main {
    z-index: 1;
    min-width: 0;
}

.leagues-header-tagline {
    font-size: 0.75rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.leagues-header-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0;              /* açıklama artık sağ sütunda */
    letter-spacing: -0.5px;
    white-space: nowrap;           /* "Ligleri Keşfet" iki satıra bölünmesin */
}

.leagues-header-title em {
    font-style: normal;
    color: #34d399;
}

/* İki class'lı seçici bilerek: .section-header p (layout.css) tek class'lı
   .leagues-header-desc'i açık temada eziyor, bkz. games-arena.css .games-header-desc */
.leagues-header-container .leagues-header-desc {
    z-index: 1;
    /* .section-header p'nin `margin: 0 auto`sı sağ sütunu ortalıyordu */
    margin: 0;
    flex: 0 1 390px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 390px;
    font-weight: 400;
    line-height: 1.5;
}

/* Popular leagues section grid */
.popular-leagues-section {
    margin-top: 1rem;
}

.section-title-premium {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.popular-leagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    padding: 0.5rem 0 2rem;
}

.league-card {
    position: relative;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    animation: fadeInUp 0.4s ease both;
    animation-delay: calc(var(--card-index) * 0.04s);
}

.league-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--color-primary);
    box-shadow: 0 12px 30px rgba(0, 108, 75, 0.15);
}

.league-card-bg-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 108, 75, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

.league-card:hover .league-card-bg-glow {
    opacity: 1;
}

.league-card-logo-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    background: var(--logo-chip-bg);
    border-radius: 50%;
    padding: 0.85rem;
    border: none;   /* çerçevesiz (2026-07-27); açık zemin lig logosu için kalır */
    transition: transform 0.3s ease;
    z-index: 1;
}

.league-card:hover .league-card-logo-container {
    transform: scale(1.1);
}

.league-card-logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Container is already the chip: cancel base.css's per-img chip so the
       logo isn't clipped or double-boxed */
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.league-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.league-card-badge {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    margin-bottom: 0.6rem;
    letter-spacing: 0.5px;
}

.league-card-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.league-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* League profile page logo image box */
.league-profile-logo-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--logo-chip-bg);
    border-radius: var(--radius-lg);
    border: none;   /* çerçevesiz (2026-07-27); açık zemin lig logosu için kalır */
    padding: 2.2rem;
}

.league-profile-logo-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Wrapper is already the chip: cancel base.css's per-img chip */
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Statistics dashboard card grid */
.league-stats-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
}

/* İstatistik döşemesi — tıklanabilir değil, o yüzden yükseltilmiş kart değil
   çukur (gömülü) yüzey. Kart görünümü artık yalnızca tıklanan nesnelerde. */
.dashboard-stat-card-premium {
    background: var(--surface-sunken);
    border: 1px solid var(--surface-divider);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.dashboard-stat-card-premium:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.stat-icon-wrapper.icon-green {
    background-color: rgba(52, 211, 153, 0.12);
    color: #34d399;
}

.stat-icon-wrapper.icon-blue {
    background-color: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}

.stat-icon-wrapper.icon-purple {
    background-color: rgba(192, 132, 252, 0.12);
    color: #c084fc;
}

.stat-icon-wrapper.icon-gold {
    background-color: rgba(251, 191, 36, 0.12);
    color: var(--color-warning);
}

.stat-icon-wrapper.icon-red {
    background-color: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

.stat-icon-wrapper.icon-orange {
    background-color: rgba(251, 146, 60, 0.12);
    color: #fb923c;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.stat-content .stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}

.stat-content .stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stat-content .stat-value.clickable {
    cursor: pointer;
}

.stat-content .stat-value.clickable:hover {
    text-decoration: underline;
}

.stat-content .stat-subtext {
    font-size: 0.72rem;
    color: var(--text-muted);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   TEAMS DIRECTORY DASHBOARD REDESIGN
   ========================================================================== */
.team-directory-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 3rem;
}

.teams-header-container {
    background: linear-gradient(135deg, #004d34 0%, #002216 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    color: #ffffff;
    box-shadow: var(--shadow-brutal);
}

html[data-theme="dark"] .teams-header-container {
    background: linear-gradient(135deg, #022c22 0%, #0f1410 100%);
    border-color: rgba(255, 255, 255, 0.04);
}

.teams-header-main {
    z-index: 1;
}

.teams-header-tagline {
    font-size: 0.75rem;
    font-weight: 700;
    color: #34d399;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.teams-header-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.teams-header-title em {
    font-style: normal;
    color: #34d399;
}

.teams-header-container .teams-header-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    font-weight: 400;
    line-height: 1.5;
}

/* Yüzey/çerçeve `.page-sunken`dan gelir (layout.css) — burada yalnız yerleşim.
   Eskiden kendi kart görünümünü kuruyordu (bg-secondary + border + radius) ve
   sayfaya gömülü tasarım kalıbının dışında kalıyordu. */
.team-directory-filters {
    display: flex;
    align-items: flex-end;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.team-directory-filters .premium-search-wrapper {
    flex: 2;
    min-width: 240px;
}

/* Ülkeler dizini, Takımlar diziniyle aynı yoğunlukta: arama + sıralama +
   yalnız gerektiğinde görünen temizleme eylemi + görünüm düğmeleri. */
.country-directory-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.7fr) minmax(200px, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-glass);
}

.country-toolbar-search,
.country-toolbar-select,
.country-toolbar-views {
    height: 40px;
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
}

.country-toolbar-search {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: var(--radius-sm);
    padding: 0 0.7rem;
    gap: 0.55rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.country-toolbar-search:focus-within {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
}

.country-toolbar-search i,
.country-toolbar-select > i {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.country-toolbar-search:focus-within i { color: var(--color-primary); }

.country-toolbar-search input,
.country-toolbar-select select {
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
}

.country-toolbar-search input::placeholder { color: var(--text-muted); }

.country-toolbar-select {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-left: 0.7rem;
    gap: 0.45rem;
    transition: border-color 0.15s ease;
}

.country-toolbar-select:focus-within { border-color: var(--color-primary); }

.country-toolbar-select select {
    appearance: none;
    cursor: pointer;
    padding: 0 1.7rem 0 0;
}

.country-toolbar-select::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0.7rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    pointer-events: none;
}

.country-directory-toolbar .filter-reset-btn { height: 40px; }

.country-toolbar-views {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem;
    gap: 0.1rem;
    border-radius: var(--radius-sm);
}

.country-toolbar-views .toggle-view-btn {
    width: 32px;
    height: 32px;
}

@media (max-width: 760px) {
    .country-directory-toolbar {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 0.4rem;
        padding: 0.15rem 0 0.5rem;
    }

    .country-toolbar-search { grid-column: 1 / -1; }
    .country-toolbar-select { min-width: 0; }
    .country-toolbar-select select { font-size: 0.8rem; }
    .country-directory-toolbar .filter-reset-btn {
        width: 40px;
        padding: 0;
        font-size: 0;
        display: inline-grid;
        place-items: center;
    }

    .country-directory-toolbar .filter-reset-btn i {
        font-size: 0.9rem;
    }
}

/* Takımlar dizini: filtreler artık büyük bir form bloğu değil, sonuçların
   üzerinde tek satırlık araç çubuğu. Arama ilk sırada, iki seçici ve görünüm
   düğmesi aynı 40px yüksekliği paylaşır. */
.team-directory-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.7fr) minmax(150px, 0.8fr) minmax(190px, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-glass);
}

.team-toolbar-search,
.team-toolbar-select,
.team-toolbar-views {
    height: 40px;
    border: 1px solid var(--border-glass);
    background: var(--bg-glass);
}

.team-toolbar-search {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: var(--radius-sm);
    padding: 0 0.7rem;
    gap: 0.55rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.team-toolbar-search:focus-within {
    border-color: var(--color-primary);
    background: var(--bg-glass-hover);
}

.team-toolbar-search i,
.team-toolbar-select > i {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.team-toolbar-search:focus-within i { color: var(--color-primary); }

.team-toolbar-search input,
.team-toolbar-select select {
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
}

.team-toolbar-search input::placeholder { color: var(--text-muted); }

.team-toolbar-select {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding-left: 0.7rem;
    gap: 0.45rem;
    transition: border-color 0.15s ease;
}

.team-toolbar-select:focus-within { border-color: var(--color-primary); }

.team-toolbar-select select {
    appearance: none;
    cursor: pointer;
    padding: 0 1.7rem 0 0;
}

.team-toolbar-select::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0.7rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    pointer-events: none;
}

.team-toolbar-views {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem;
    gap: 0.1rem;
    border-radius: var(--radius-sm);
}

.team-toolbar-views .toggle-view-btn {
    width: 32px;
    height: 32px;
}

@media (max-width: 760px) {
    .team-directory-layout { gap: 0.9rem; }

    .team-directory-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        gap: 0.4rem;
        padding: 0.15rem 0 0.5rem;
    }

    .team-toolbar-search { grid-column: 1 / -1; }
    .team-toolbar-select { min-width: 0; }
    .team-toolbar-select select { font-size: 0.8rem; }
}

.filter-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 180px;
}

.filter-select-wrapper label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.premium-select {
    width: 100%;
    background-color: var(--bg-glass);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    font-size: 0.88rem;
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.premium-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.view-toggle-container {
    display: flex;
    gap: 0.25rem;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 0.25rem;
}

/* Filtre temizleme butonu (Ülkeler dizini + ülke sayfası, 2026-08-07).
   İkincil ve YIKICI OLMAYAN bir eylem: dolu/vurgulu değil, soluk çerçeveli
   duruyor; yanındaki arama ve sıralama kutularıyla aynı 38px yüksekliği
   paylaşıyor (filtre satırı `align-items: flex-end`, farklı yükseklik
   satırı kaydırırdı). Yalnız aktif filtre varken görünür — bkz.
   countries.js:updateCountryFilterReset. */
.filter-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.9rem;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
}

.filter-reset-btn:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Ülke sayfasındaki filtre satırı daha küçük kontroller kullanıyor
   (0.45rem dolgu / 0.8rem yazı) — buton orada da onlarla aynı boyda dursun. */
#country-players-reset {
    height: auto;
    padding: 0.45rem 0.7rem;
}

.toggle-view-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
}

.toggle-view-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}

.toggle-view-btn.active {
    background-color: var(--color-primary);
    color: var(--on-ink);
}

/* Club Cards Grid */
.club-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.club-premium-card {
    background-color: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    transition: var(--transition);
    overflow: hidden;
}

.club-premium-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brutal-hover);
}

.club-card-bg-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* --color-primary-glow zaten rgba(); rgba() içine sarmak geçersiz bir değer
       üretiyordu ve gradient hiç uygulanmıyordu. */
    background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: var(--transition);
}

.club-premium-card:hover .club-card-bg-glow {
    opacity: 1;
}

.club-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Kulüp logosu ÇERÇEVESİZ (kullanıcı tercihi, 2026-07-27): kutu/arka plan yok,
   yalnızca hizalama için sabit ölçü. Kartın kendi çerçevesi zaten var. */
.club-card-logo-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    flex-shrink: 0;
}

/* max-width DEĞİL width: kaynak PNG'ler 40px'ten 512px'e kadar değişiyor;
   max-* küçük dosyayı BÜYÜTMEDİĞİ için bazı armalar kutunun ortasında minicik
   kalıyordu. width/height + contain her armayı kutuya sığdırıp ölçeği eşitler
   (oran korunur, kırpma olmaz). */
.club-card-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   TAKIM DİZİNİ — ortak logo ölçekleri (2026-07-27)
   Boyutlar JS'te inline style olarak dağınıktı (24px/16px/18px) ve kaynak
   dosyalar farklı oranlarda olduğu için bazı armalar küçük/sıkışık duruyordu.
   Tek yerden: kare kutu + `contain` + kutuyu dolduran genişlik.
   -------------------------------------------------------------------------- */
.dir-club-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.dir-league-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Kulüp profili başlığındaki arma: kutu ölçüsü sabit, arma onu doldurur. */
.club-profile-crest {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.club-card-title-box {
    min-width: 0;
}

.club-card-title-box h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-card-league-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-primary);
}

.club-card-league-badge img {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.club-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-glass);
    padding-top: 0.8rem;
}

.club-card-details-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.club-card-details-item span:first-child {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
}

.club-card-details-item span:last-child {
    font-weight: 600;
    color: var(--text-primary);
}

.club-card-value-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-secondary);
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-top: auto;
}

.club-card-value-amount {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-success);
}

/* Flags cache styles in lists */
.flag-icon {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.flag-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Responsive directory table styles */
.premium-dir-table {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-glass);
}

.premium-dir-table th {
    background-color: var(--border-ink) !important;
    color: var(--on-ink) !important;
    padding: 0.8rem 1rem !important;
}

.premium-dir-table td {
    padding: 0.8rem 1rem !important;
    vertical-align: middle;
}


/* ==========================================================================
   ARKADAŞLAR (#/friends) + HERKESE AÇIK PROFİL (#/profile) — 2026-07-26
   Liste iskeleti kadro/kulüp listeleriyle AYNI bileşen (.entity-list /
   .entity-row); buradaki sınıflar yalnız arkadaşa özgü parçaları ekler
   (baş harf avatarı, çevrimiçi noktası, satır içi aksiyon butonu).
   ========================================================================== */
.friends-shell {
    max-width: var(--content-md);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.friends-hero {
    text-align: center;
}

.friends-hero h2 {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.friends-hero h2 i { color: var(--color-primary); }

.friends-hero p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.friends-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.friends-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.friends-search i {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.friends-search input {
    width: 100%;
    padding: 0.55rem 0.7rem 0.55rem 2.1rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
}

.friends-search input:focus {
    border-color: var(--color-primary);
}

.friends-invite-btn {
    padding: 0.55rem 0.8rem;
    font-size: 0.82rem;
    white-space: nowrap;
}

.friends-section-label {
    display: block;
    margin: 0.6rem 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.friends-section-label b { color: var(--color-primary); }

.friends-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.6rem 0;
}

.friends-search-loading {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--text-muted);
}

/* Baş harf avatarı — profil fotoğrafı yok, olmayan bir alanı taklit etmiyoruz */
.friend-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-glass);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.friend-avatar.is-online {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.friend-avatar.is-big {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.friend-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.friend-status i { font-size: 0.5rem; }

.friend-status.is-online { color: var(--color-primary); }

.friend-row .entity-row-top { gap: 0.6rem; }

.friend-row-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
}

.friend-added-flag {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Gelen istek satırı: Kabul + Reddet yan yana, satırın sağ ucunda */
.friend-request-actions {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.friend-request-actions .friend-row-btn { margin-left: 0; }

.friends-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.2rem 1rem;
    color: var(--text-muted);
}

.friends-empty > i { font-size: 2rem; }

.friends-empty h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin: 0;
}

.friends-empty p {
    margin: 0;
    font-size: 0.85rem;
    max-width: 380px;
    line-height: 1.5;
}

.friends-empty-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.6rem;
}

/* ==========================================================================
   PROFİL SAYFASI (#/profile?u=ad) — .up-* bileşenleri
   "Sayfaya gömülü" düzen: kart kabuğu yok. Bilgi sırası kimlik → sayılar →
   sıralamalar → eylem; her katman kendi ağırlığını yazı boyu ve zeminden
   alır, çerçeveden değil. Rozet adın YANINDA durur (eskiden alt satırda tek
   başına asılı kalıyordu ve başlıkla sayılar arasında boşluk açıyordu).
   ========================================================================== */
.up-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--surface-divider);
}

/* Avatar: tier rengiyle çevrelenir — rozetin rengini baş harfte tekrar eder. */
.up-avatar {
    --tier-ring: var(--border-glass);
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--tier-ring);
    background: var(--surface-sunken);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tier-ring);
    text-transform: uppercase;
}

.up-avatar.tier-bronz  { --tier-ring: #9a6a3c; }
.up-avatar.tier-gumus  { --tier-ring: #64748b; }
.up-avatar.tier-altin  { --tier-ring: #a16207; }
.up-avatar.tier-platin { --tier-ring: #0f766e; }
.up-avatar.tier-elmas  { --tier-ring: #0e7490; }
.up-avatar.tier-efsane { --tier-ring: #b91c1c; }

/* Çevrimiçi noktası avatarın üstünde: durum metniyle birlikte iki kanal. */
.up-presence {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--text-muted);
    border: 3px solid var(--bg-primary);
}

.up-presence.is-online { background: var(--color-primary); }

.up-identity {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
}

.up-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.up-name-row h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.up-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.up-meta i { font-size: 0.75rem; }

.up-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.up-presence-text { font-weight: 600; }
.up-presence-text.is-online { color: var(--color-primary); }

/* Sayı şeridi: üç ayrı beyaz kart yerine tek gömülü yüzey + ince ayırıcılar.
   Değer önce, etiket altında — göz sayıyı tarar, etiketi sonra okur. */
.up-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--surface-sunken);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.up-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.9rem 0.5rem;
    text-align: center;
}

.up-stat + .up-stat { border-left: 1px solid var(--surface-divider); }

.up-stat-value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.up-stat-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.up-stat-label i { font-size: 0.7rem; opacity: 0.7; }

/* Sıralamalar: derece önde bir hap, etiket arkasında — dört satır 2x2 olarak
   nefes alır (tek satıra sıkışan eski düzende etiketler kırpılıyordu). */
/* Sabit iki sütun: auto-fit 720px'te üç sütun açıp dördüncü satırı yalnız
   bırakıyordu (3+1). Dört sıralama her zaman 2x2 durur. */
.up-rank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.5rem;
}

.up-rank {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.1rem;
    border-bottom: 1px solid var(--surface-divider);
}

.up-rank-pos {
    flex-shrink: 0;
    min-width: 2.35rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.up-rank-label {
    font-size: 0.88rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* İlk üç derece madalya tonu alır; sıralaması olmayan satır geri çekilir. */
.up-rank.is-gold   .up-rank-pos { background: #a16207; color: #fff; }
.up-rank.is-silver .up-rank-pos { background: #64748b; color: #fff; }
.up-rank.is-bronze .up-rank-pos { background: #9a6a3c; color: #fff; }
.up-rank.is-empty .up-rank-pos { color: var(--text-muted); }
.up-rank.is-empty .up-rank-label { opacity: 0.65; }

/* Eylemler kimlik satırının SAĞ UCUNDA durur (ad/foto ile aynı hizada), ayrı
   bir alt satırda değil: sayfanın dibindeki tam genişlik butonlar kişi kartını
   ikiye bölüyordu. */
.up-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* Kimlik satırındaki buton gövde butonlarından küçük: burada ikincil bir
   eylem, sayfanın ana çağrısı değil. */
.up-actions .primary-btn,
.up-actions .secondary-btn {
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    justify-content: center;
    white-space: nowrap;
}

/* Şikayet yalnız bayrak: kare, kutusuz, hover'da kırmızı. Erişilebilir adı
   aria-label/title taşıyor (friends.js). */
.up-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.up-report-btn:hover {
    color: var(--color-danger);
    background: var(--color-danger-glow);
}

@media (max-width: 560px) {
    .friends-hero h2 { font-size: 1.35rem; }
    .friends-hero p { font-size: 0.82rem; }

    /* Arama kutusu tam satır, davet bağlantısı altında tam genişlik */
    .friends-toolbar { flex-wrap: wrap; }
    .friends-search { flex: 1 1 100%; }
    .friends-invite-btn { flex: 1 1 100%; justify-content: center; }

    /* Mobilde kimlik bloğu ortalanır: 76px avatar + uzun kullanıcı adı yan yana
       kaldığında ad iki satıra kırılıp rozeti aşağı itiyordu. */
    .up-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.7rem;
    }
    .up-name-row,
    .up-meta { justify-content: center; }
    .up-name-row h2 { font-size: 1.5rem; }
    .up-avatar { width: 68px; height: 68px; font-size: 1.75rem; }

    .up-stat { padding: 0.75rem 0.35rem; }
    .up-stat-value { font-size: 1.3rem; }
    .up-stat-label { font-size: 0.62rem; letter-spacing: 0.4px; }
    .up-stat-label i { display: none; }

    .up-rank-grid { grid-template-columns: 1fr; }

    /* Kimlik bloğu ortalandığı için eylemler de ortalanır (sağa dayamak
       sütun düzeninde anlamsız). */
    .up-actions {
        margin-left: 0;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   ADMIN — Soru raporu anlık görüntüsü (Şikayetler sekmesi)
   Ham JSON dökümü yerine etiket/değer satırları: yönetici "hangi soruda sorun
   var" sorusunu okuyarak cevaplayabilsin. Ham JSON katlanmış blokta durur —
   kanıt kaybolmaz, ekranı da doldurmaz.
   -------------------------------------------------------------------------- */
.report-snapshot {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

.report-user-note {
    margin: 0 0 0.6rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--color-primary);
    color: var(--text-primary);
    font-style: italic;
}

.report-user-note i { color: var(--text-muted); margin-right: 0.2rem; }

.report-snap-row {
    display: grid;
    grid-template-columns: minmax(120px, 190px) 1fr;
    gap: 0.5rem 0.9rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--surface-divider);
}

.report-snap-row:last-of-type { border-bottom: none; }

.report-snap-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Değer sarabilir: uzun zincir ("A → B → C → D") tek satıra sığmaz ve
   kırpılmamalı. */
.report-snap-value {
    color: var(--text-primary);
    word-break: break-word;
}

.report-snap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.6rem;
}

.report-snap-chip {
    padding: 0.15rem 0.45rem;
    border-radius: 20px;
    background: var(--bg-glass);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.report-snap-chip b { color: var(--text-primary); font-weight: 700; }

.report-snapshot-warn {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--color-warning);
}

.report-snapshot details { margin-top: 0.6rem; }

.report-snapshot summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.report-snapshot pre {
    margin-top: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-glass);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.72rem;
    max-height: 220px;
    overflow: auto;
}

@media (max-width: 560px) {
    .report-snap-row { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ==========================================================================
   ADMIN — OYUN ANALİZİ (#/admin › Oyun Analizi)
   Grafikler düz HTML/CSS (SVG yok, kütüphane yok). Kurallar:
   · TEK renk (marka yeşili) — seriler kimlik taşımıyor, uzunluk taşıyor;
     çubuğu "büyükse koyu" boyamak veri kanalını boşa harcar.
   · İnce işaretler: sütun en fazla 24px, tepesi 4px yuvarlak, tabanı düz.
   · Izgara/eksen: bir ton fark, 1px, DÜZ (kesikli çizgi "eşik" gibi okunur).
   · Sayı her sütunun üstüne yazılmaz — yalnız en yükseğine; kalanı eksen,
     ipucu ve döküm tablosu taşır.
   ========================================================================== */
.analytics-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 1rem 0 0.25rem;
    padding: 0.85rem 1rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-lg);
}

.analytics-filter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.analytics-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.analytics-filter select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
}

.analytics-segment {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
}

/* Panel içi alt sekmeler (ör. Terk & Ceza → sicil / olaylar). Analiz
   sekmelerindeki segment bileşeninin aynısı; tek farkı liste başlığı olarak
   biraz daha büyük durması ve dar ekranda sarabilmesi. */
.admin-subtabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0.4rem 0 1rem;
}

.admin-subtabs .analytics-seg-btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.analytics-seg-btn {
    padding: 0.35rem 0.7rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.analytics-seg-btn:hover { color: var(--text-primary); }

.analytics-seg-btn.active {
    background: var(--color-primary);
    color: #fff;
}

.analytics-loading { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }

/* Yeniden yüklerken önceki render solar; iskelet/yükseklik zıplaması yok. */
#admin-analytics-body.is-reloading { opacity: 0.5; pointer-events: none; }
#admin-analytics-body { transition: opacity 0.15s ease; }

.analytics-kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* En çok oynanan oyunun ADI bir sayı kadar büyük olamaz — sığmıyor. */
.analytics-top-game { font-size: 1.15rem; line-height: 1.25; }

.analytics-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

.analytics-delta.is-up { color: var(--color-success); }
.analytics-delta.is-down { color: var(--color-danger); }

.analytics-section { margin-top: 1.5rem; }

.analytics-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.analytics-hint { font-size: 0.78rem; color: var(--text-muted); }

/* Pencere aralığı başlığın yanında ince bir alt bilgi olarak durur (KPI
   etiketine sığmıyordu, iki satıra kırılıyordu). */
.analytics-section-range {
    margin-left: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.analytics-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.analytics-clear:hover { color: var(--color-primary); border-color: var(--color-primary); }

.analytics-note {
    margin-top: 0.7rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.analytics-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.analytics-empty i { font-size: 2rem; color: var(--text-muted); opacity: 0.5; }
.analytics-empty h3 { margin: 0.7rem 0 0.3rem; font-family: var(--font-heading); color: var(--text-primary); }
.analytics-empty p { font-size: 0.85rem; }

/* --- Sütun grafiği (dönem trendi) --- */
/* Kap yüksekliği x ekseni ŞERİDİNİ de içerir: yalnız çizim alanına göre
   sabitlenirse eksen etiketleri kartın içinde ayrı bir kaydırma açıyor. */
/* minmax(0, 1fr) ŞART: düz `1fr` sütunun alt sınırını min-content yapıyor,
   x ekseninin 12 nowrap etiketi de grafiği 600px'e şişirip mobilde sayfayı
   yatay kaydırıyordu. */
.chart-frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 200px auto;
    gap: 0.35rem 0.5rem;
    margin-top: 1rem;
}

.chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    /* Etiketler çizgilerin ÜSTÜNE değil ortasına hizalanır. */
    transform: translateY(-0.35em);
}

.chart-plot { position: relative; }

.chart-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chart-grid i {
    height: 1px;
    background: var(--surface-divider);
    opacity: 0.7;
}

/* justify-content + dilim üst sınırı: kayıt başlangıcına kırpılmış pencerede
   (ör. yalnız 3 hafta) sütunlar 300px'lik bantların ortasına dağılıp grafiği
   dağınık gösteriyordu. Dilim en fazla 120px olur ve grup ortalanır; 12+
   dönemde bantlar zaten daha darken bu sınır devreye girmez.
   .chart-x-axis AYNI iki kuralı taşımak zorunda, yoksa etiketler sütunlardan
   kayar. */
.chart-cols {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;                 /* yüzey boşluğu: komşu sütunları çizgi değil boşluk ayırır */
}

.chart-col {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 120px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: default;
    border-radius: var(--radius-sm);
}

/* Vurgulanan sütun tepki verdiğini göstersin (hit alanı sütunun tamamı —
   boyanmış piksellerden büyük). */
.chart-col:hover, .chart-col:focus-visible {
    background: var(--color-primary-glow);
    outline: none;
}

/* min-height YOK: sıfır olan dönemde 2px'lik bir kütük bırakmak "az da olsa
   oynanmış" gibi okunuyordu. Sıfır = hiç mürekkep; küçük ama sıfır olmayan
   değerin görünürlüğünü JS'teki %1.5 tabanı sağlıyor. */
.chart-col-fill {
    width: 100%;
    max-width: 24px;
    background: var(--color-primary);
    border-radius: 4px 4px 0 0;   /* veri ucu yuvarlak, taban düz */
    transition: height 0.25s ease;
}

/* İçinde bulunduğumuz dönem tamamlanmadı: aynı renk, açık bir adım. */
.chart-col.is-partial .chart-col-fill { opacity: 0.42; }

.chart-col-value {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0.35rem);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}

/* min-height: etiketler akış dışı olduğu için şeridin yüksekliğini kendileri
   üretmiyor (kap yüksekliği x eksenini de içermek zorunda). */
.chart-x-axis {
    grid-column: 2;
    display: flex;
    justify-content: center;   /* .chart-cols ile birebir aynı olmalı */
    gap: 2px;
    min-height: 1.1rem;
    border-top: 1px solid var(--surface-divider);
    padding-top: 0.3rem;
}

.chart-x-tick {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    max-width: 120px;          /* .chart-col ile birebir aynı olmalı */
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* Etiket AKIŞ DIŞI (position:absolute) duruyor. Sebep: bir dönem dilimi
   ~26px, "Tem 2026" ise ~52px — akış içinde `text-align` işe yaramıyor
   (hizalama yalnız ARTAN boşluğu dağıtır, taşan satır her zaman sağa taşar) ve
   son etiketin yazısı sayfaya yatay kaydırma ekliyordu. Kırpmak seçenek değil:
   yarısı kesilmiş bir eksen etiketi hiç olmamasından kötü. */
.chart-x-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Uçtaki etiketler kendi diliminin kenarına yapışır → ekseni asla aşmaz. */
.chart-x-tick.is-first .chart-x-label { left: 0; transform: none; }
.chart-x-tick.is-last .chart-x-label { left: auto; right: 0; transform: none; }

.chart-tooltip {
    position: absolute;
    bottom: 100%;
    transform: translate(-50%, -0.4rem);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    white-space: nowrap;
    z-index: 3;
}

/* display:flex, [hidden]'ı ezer — ipucu kapalıyken boş bir kutu olarak
   grafiğin köşesinde duruyordu. */
.chart-tooltip[hidden] { display: none; }

/* İpucunda DEĞER önde, etiket ikincil (gösterge hiyerarşisinin tersi). */
.chart-tooltip strong {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.chart-tooltip span { font-size: 0.72rem; color: var(--text-muted); }

/* --- Sıralama çubukları (yatay: oyun adları uzun) --- */
.rank-bars {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.8rem;
}

.rank-bar {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.rank-bar:hover { background: var(--bg-glass-hover); }

.rank-bar.is-selected { background: var(--color-primary-glow); }

.rank-bar-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-bar-name i { font-size: 0.7rem; color: var(--text-muted); }

.rank-bar-track {
    height: 10px;
    border-radius: 5px;
    background: var(--surface-sunken);
    overflow: hidden;
}

.rank-bar-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.rank-bar.is-selected .rank-bar-track { background: var(--bg-glass); }

.rank-bar-value {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.rank-bar-value small { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }

/* --- Döküm tablosu (grafiğin tablo ikizi) --- */
/* 36 dönemde tablo geniş: KENDİ içinde yatay kayar, sayfa gövdesi kaymaz. */
.analytics-matrix-scroll {
    margin-top: 0.8rem;
    overflow-x: auto;
    border: 1px solid var(--surface-divider);
    border-radius: var(--radius-md);
}

.analytics-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.analytics-matrix th,
.analytics-matrix td {
    padding: 0.45rem 0.6rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--surface-divider);
}

.analytics-matrix thead th {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-sunken);
}

/* Oyun adı sütunu kaydırırken yerinde kalır — yoksa sağa kayınca hangi
   satıra baktığın kaybolur. */
.analytics-matrix th[scope="row"],
.analytics-matrix thead th:first-child {
    position: sticky;
    left: 0;
    text-align: left;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-glass);
    z-index: 1;
}

.analytics-matrix thead th:first-child { background: var(--surface-sunken); }

.analytics-matrix td.is-zero { color: var(--text-muted); opacity: 0.45; }
.analytics-matrix td.is-total { font-weight: 800; color: var(--text-primary); }

.analytics-matrix tfoot td,
.analytics-matrix tfoot th {
    background: var(--surface-sunken);
    font-weight: 700;
    border-bottom: none;
}

.analytics-matrix tbody tr:hover td,
.analytics-matrix tbody tr:hover th[scope="row"] { background: var(--bg-glass-hover); }

@media (max-width: 720px) {
    .analytics-filters { gap: 0.6rem 0.9rem; padding: 0.7rem; }
    .analytics-filter { flex: 1 1 100%; }
    .analytics-segment { width: 100%; }
    .analytics-seg-btn { flex: 1 1 0; padding: 0.4rem 0.3rem; }
    .analytics-filter select { width: 100%; }

    .chart-frame { grid-template-rows: 160px auto; }
    /* Mobilde her dönem etiketi sığmaz: eksen yazısı küçültülmez (iOS zoom
       kuralı yazıyı değil boşluğu kısar), etiketler JS'te seyreltilir. */
    .chart-x-tick { font-size: 0.62rem; }

    .rank-bar { grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; }
    .rank-bar-track { grid-column: 1 / -1; }
}

/* ==========================================================================
   KARİYER (#/career) — düello özeti + oynanan maçların tam geçmişi
   Kart kabuğu yok: "sayfaya gömülü" düzen (.page-section/.page-sunken) ile
   arkadaşlar/profil sayfalarıyla aynı ritimde durur.
   ========================================================================== */
.career-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.75rem;
}

.career-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.career-stat-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.career-stat-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--text-primary);
}

.career-stat-extra {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Not: eski `.career-game-list` / `.career-game-row` ("Oyun Bazlı Rating"
   listesi) 2026-08-07'de silindi — yerini oyun başına maç/G-M-B/kazanma oranı
   da taşıyan `.data-table` tabanlı "Düello Karnesi" aldı. */
.career-list {
    display: flex;
    flex-direction: column;
}

.career-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-glass);
}
.career-list .career-row:last-child { border-bottom: none; }

/* --- Son form şeridi ------------------------------------------------------ */
.career-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    margin-top: 0.9rem;
}

.career-form-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.career-form-strip {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* Harf + renk birlikte: salt renkle ayrılsa renk körlüğünde okunmazdı. */
.career-form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--bg-glass);
    color: var(--text-muted);
}

.career-form-dot.is-win {
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
    color: var(--color-success);
}
.career-form-dot.is-loss {
    background: color-mix(in srgb, var(--color-danger) 18%, transparent);
    color: var(--color-danger);
}
.career-form-dot.is-draw {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
    color: var(--color-warning);
}

/* --- Karne tabloları ------------------------------------------------------ */
.career-cell-game {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: var(--text-primary);
}

.career-cell-game i { color: var(--color-primary); }

.career-cell-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* G/M/B tek hücrede: ayraçlar soluk, sayılar sonuç rengiyle. */
.career-wld { white-space: nowrap; font-variant-numeric: tabular-nums; }
.career-wld i { font-style: normal; color: var(--text-muted); margin: 0 0.15rem; }
.career-w { color: var(--color-success); font-weight: 700; }
.career-l { color: var(--color-danger); font-weight: 700; }
.career-d { color: var(--text-muted); font-weight: 700; }

.career-tier-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Tablonun altındaki sınır/açıklama notu — grafik dipnotlarıyla aynı ton. */
.career-note {
    margin-top: 0.7rem;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.career-note i { margin-right: 0.3rem; }

.career-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-glass);
    color: var(--color-primary);
    font-size: 0.85rem;
}

.career-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.career-row-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}

.career-row-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
}
.career-row-sub a { color: var(--color-primary); font-weight: 600; }

.career-count {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
}


/* Lobideki "Son Maçlar" altındaki kariyer bağlantısı */
.duel-career-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 560px) {
    .career-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .career-stat-value { font-size: 1.25rem; }
    .career-row-sub { font-size: 0.72rem; }
}

/* ==========================================================================
   ADMIN — DÜELLO LİGİ SEKMESİ
   Rating/lig ayar kartlarının açıklama satırı + "tehlikeli işlem" bölümü.
   Sezon sıfırlama geri alınamaz olduğu için kart değil, gömülü ve kırmızı
   çerçeveli bir bölüm (.page-section kalıbı üzerine).
   ========================================================================== */
.admin-card-hint {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: -0.5rem 0 0.9rem;
}

.admin-danger-zone {
    margin-top: 1.5rem;
    border-top: 2px solid var(--color-danger);
    padding-top: 1rem;
}

.admin-danger-note {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
    max-width: 68ch;
}

.admin-danger-btn {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.admin-danger-btn:hover {
    background: var(--color-danger);
    color: #fff;
}

.admin-danger-result {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    min-height: 1.2rem;
}

/* --- Oyun karnesi + sezon panosu ------------------------------------------
   Grafik kuralları burada da geçerli (bkz. CLAUDE.md "Grafikler"): tek renk,
   kütüphane/SVG yok, ölçüyü uzunluk taşır. Zorluk dağılımı KATEGORİ olduğu
   için çubukla değil çiple verilir — üç kademeyi farklı renklere boyamak
   "zor = kötü" gibi olmayan bir anlam üretirdi. */
.analytics-scorecard td,
.analytics-scorecard th[scope="row"] { vertical-align: middle; }

/* Kazanma oranı: çubuk + sayı aynı hücrede, sayı sabit genişlikte kalır ki
   satırlar arasında çubuk başlangıçları hizalansın. */
.analytics-rate-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 130px;
}

.analytics-rate-track {
    flex: 1;
    min-width: 48px;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-sunken);
    overflow: hidden;
}

.analytics-rate-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--color-primary);
}

.analytics-rate-value {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}

.analytics-diff-cell {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
    white-space: normal;
}

.analytics-diff-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-sunken);
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.analytics-diff-chip b { color: var(--text-primary); font-weight: 800; }
.analytics-diff-chip.is-empty { opacity: 0.5; }

/* Sezon panosu: lig dağılımı ve rating tepesi yan yana, dar ekranda alt alta. */
.season-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.4rem;
    margin-top: 1.2rem;
}

.season-block { min-width: 0; }

.season-block-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 1.4rem 0 0.6rem;
}

.season-split .season-block-title { margin-top: 0; }

.season-tiers { display: flex; flex-direction: column; }

.season-tier-row {
    display: grid;
    grid-template-columns: minmax(96px, 130px) 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0;
}

.season-tier-name {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.season-tier-name i { color: var(--color-primary); font-size: 0.75rem; }
.season-tier-name small { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); }

.season-tier-value {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 54px;
    justify-content: flex-end;
}

.season-top-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.season-top-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-glass);
    font-size: 0.85rem;
}
.season-top-list li:last-child { border-bottom: none; }
.season-top-list li.is-zero { color: var(--text-muted); }

.season-top-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-glass);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
}

.season-top-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.season-top-rating {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.season-top-rating small { font-weight: 600; color: var(--text-muted); }

@media (max-width: 720px) {
    .season-tier-row { grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; }
    .season-tier-row .rank-bar-track { grid-column: 1 / -1; }
    .analytics-rate-cell { min-width: 96px; }
}

/* ==========================================================================
   HAKKIMIZDA (#/about) — şirket tanıtım sayfası (templates/index.html:
   #view-about). Navbar sekmesi yalnız misafirde görünür.
   "Sayfaya gömülü bölümler" sistemine bağlıdır: burada kart çerçevesi YOK,
   yalnız düz bölümler + .page-sunken çukur yüzeyler. Renk tek tonda
   (--color-primary) kalır; vurgu tipografiyle verilir.
   ========================================================================== */
.about-page {
    padding-block: 0.5rem 1rem;
}

/* --- Giriş bloğu --- */
.about-hero {
    text-align: center;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.about-brand {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 7vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0.5rem 0 0;
    color: var(--text-primary);
}

.about-brand-accent {
    color: var(--color-primary);
}

/* İnce ayraç: marka ile slogan arasında, çizgi kartı taklit etmesin diye kısa */
.about-tagline {
    position: relative;
    margin: 1rem auto 0;
    padding-top: 1rem;
    max-width: 44ch;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
}

.about-tagline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: var(--color-primary);
}

.about-lead {
    max-width: 68ch;
    margin: 1rem auto 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-muted);
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.5rem;
}

.about-actions a {
    text-decoration: none;
}

/* --- Ne yapıyoruz ızgarası --- */
/* minmax(0, 1fr): uzun başlıklar sütunun taban genişliğini şişirip mobilde
   yatay kaydırma açmasın (grafik ızgarasında da aynı tuzak yaşandı). */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0.9rem;
}

.about-tile {
    padding: 1.1rem 1.15rem;
}

.about-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0.7rem;
}

.about-tile h4 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: var(--text-primary);
}

.about-tile p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- Rakamlar --- */
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 0.9rem;
}

.about-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 0.4rem 0.9rem 0.9rem;
    border-left: 2px solid var(--color-primary);
}

.about-stat-value {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.about-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.about-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.9rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.about-note i {
    color: var(--color-primary);
}

/* --- Değerler listesi --- */
.about-values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.about-values li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.about-values li i {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    color: var(--color-primary);
    text-align: center;
}

.about-values strong {
    color: var(--text-primary);
}

/* --- İletişim --- */
.about-contact-text {
    max-width: 62ch;
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.about-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.about-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--border-glass);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.about-contact-link i {
    color: var(--color-primary);
}

/* Tıklanabilir olan renkle kendini belli eder; statik bilgi hapı solgun kalır */
a.about-contact-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.about-contact-link.is-static {
    color: var(--text-muted);
    cursor: default;
}

.about-copyright {
    margin: 1.2rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .about-actions a {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   ÜLKELER SEKMESİ (#/leagues?tab=countries) — views/countries.js
   Dizin ve sayfa, Takımlar dizininin bileşenlerini olduğu gibi kullanır
   (.club-premium-card / .data-table / .entity-list); burada YALNIZCA bayrak
   ölçüleri var. Bayrak kutulanmaz, çerçevelenmez (proje kuralı) — armadan
   farkı 4:3 oranı ve düz kenarı, o yüzden `contain` + hafif köşe yumuşatma.
   ========================================================================== */
.country-card-flag {
    width: 60px;
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

.dir-country-flag {
    width: 26px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 2px;
}

/* Seçici ÇİFT sınıflı olmak zorunda: `.profile-header-grid img` (0,1,1) kulüp
   arması için 130x130 dayatıyor ve tek sınıflı bir kural onu yenemiyor —
   bayrak 75px'lik kutusunu taşıp mobilde ekranın soluna sarkıyordu. */
.profile-header-grid .country-profile-flag {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Oyun Analizi görünüm sekmeleri (Trend / Sıralama / Karne / Döküm).
   Filtre satırıyla AYNI bileşen ama farklı iş yapıyor — biri veriyi süzer,
   bu gezinir. Ayrımı üstündeki ayırıcı çizgi ve nefes payı taşır; iki özdeş
   segment satırı üst üste gelince hangisinin ne yaptığı okunmuyordu. */
.analytics-view-tabs {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-glass);
    border-radius: 0;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

/* Gezinme sekmesi olduğu için seçili olan dolu zemin yerine ALTI ÇİZİLİ
   durur (segment kontrolünün "iki durumdan biri" hissinden ayrışsın). */
.analytics-view-tabs .analytics-seg-btn {
    border-radius: 0;
    background: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 700;
}

.analytics-view-tabs .analytics-seg-btn:hover {
    color: var(--text-primary);
    background: none;
}

.analytics-view-tabs .analytics-seg-btn.active {
    background: none;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

@media (max-width: 640px) {
    .analytics-view-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .analytics-view-tabs .analytics-seg-btn { white-space: nowrap; }
}

/* ===========================================================================
   HAKKIMIZDA 2026 — Cihantech ana marka / FootKnowledge ürün kimliği
   ========================================================================== */
.about-page { padding-block: clamp(.5rem, 2vw, 1.5rem) 1.8rem; }
.about-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.24fr) minmax(260px,.76fr); align-items:center; gap:clamp(2rem,6vw,5rem); min-height:440px; padding:clamp(2rem,5vw,4.5rem); overflow:hidden; color:#f5fbf8; background:#082f27; border-radius:18px; }
.about-hero::before { content:""; position:absolute; width:480px; height:480px; right:-215px; top:-285px; border:1px solid rgba(206,250,228,.2); border-radius:50%; box-shadow:0 0 0 55px rgba(206,250,228,.04),0 0 0 110px rgba(206,250,228,.035); }
.about-hero-copy,.about-hero-mark { position:relative; z-index:1; }
.about-kicker,.about-section-label,.about-overline { margin:0; font-family:var(--font-heading); font-size:.69rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.about-kicker { display:inline-flex; align-items:center; gap:.5rem; color:#a7e7ca; }.about-kicker span { width:7px; height:7px; border-radius:50%; background:#8cf0b9; box-shadow:0 0 0 5px rgba(140,240,185,.15); }.about-overline { margin-top:2.3rem; color:rgba(245,251,248,.6); }
.about-hero h2 { max-width:10ch; margin:.5rem 0 0; font-family:var(--font-heading); font-size:clamp(2.35rem,5vw,4.35rem); font-weight:700; line-height:.98; letter-spacing:-.06em; }.about-hero h2 em { color:#a7e7ca; font-style:normal; }.about-intro { max-width:54ch; margin:1.35rem 0 0; font-size:.96rem; line-height:1.75; color:rgba(245,251,248,.75); }
.about-actions { justify-content:flex-start; align-items:center; gap:1rem 1.4rem; margin-top:1.8rem; }.about-actions .primary-btn { border-color:#a7e7ca; background:#a7e7ca; color:#082f27; text-decoration:none; }.about-actions .primary-btn:hover { border-color:#fff; background:#fff; color:#082f27; }.about-text-action { color:#f5fbf8; font-size:.82rem; font-weight:700; text-decoration:none; }.about-text-action i { margin-left:.3rem; font-size:.72rem; }
.about-hero-mark { display:grid; place-items:center; min-height:280px; }.about-monogram { display:grid; place-items:center; width:clamp(145px,18vw,190px); aspect-ratio:1; border:1px solid rgba(225,255,239,.65); border-radius:50%; font-family:var(--font-heading); font-size:clamp(2.8rem,5vw,4.2rem); font-weight:700; letter-spacing:-.12em; color:#e7fff0; }.about-orbit { position:absolute; border:1px solid rgba(167,231,202,.35); border-radius:50%; }.about-orbit-one { width:245px; height:245px; }.about-orbit-two { width:315px; height:150px; transform:rotate(-35deg); }.about-mark-label { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:max-content; padding-top:.7rem; border-top:1px solid rgba(225,255,239,.35); font-size:.7rem; font-weight:700; letter-spacing:.14em; line-height:1.5; text-align:center; color:#e7fff0; }.about-mark-label b { color:#a7e7ca; font-size:.59rem; }
.about-statement { display:grid; grid-template-columns:minmax(140px,.35fr) minmax(0,1fr); gap:2rem; padding:clamp(3rem,7vw,6rem) clamp(.3rem,2vw,1.5rem); }.about-section-label { color:var(--color-primary); }.about-statement h3,.about-closing h3 { margin:0; font-family:var(--font-heading); font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.12; letter-spacing:-.045em; color:var(--text-primary); }.about-statement p:not(.about-section-label) { max-width:65ch; margin:1rem 0 0; font-size:.98rem; line-height:1.8; color:var(--text-muted); }
.about-principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass); }.about-principles article { min-height:235px; padding:1.7rem; border-right:1px solid var(--border-glass); }.about-principles article:last-child { border-right:0; }.about-principles span { color:var(--text-muted); font-size:.7rem; font-weight:700; letter-spacing:.1em; }.about-principles i { display:block; margin-top:2.1rem; color:var(--color-primary); font-size:1.3rem; }.about-principles h4 { margin:.75rem 0 0; font-family:var(--font-heading); font-size:1.1rem; letter-spacing:-.02em; color:var(--text-primary); }.about-principles p { margin:.45rem 0 0; font-size:.84rem; line-height:1.65; color:var(--text-muted); }
.about-product { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem); margin-top:clamp(3.5rem,8vw,7rem); padding:clamp(2rem,5vw,4rem); background:var(--bg-secondary); border-radius:16px; }.about-product-badge { display:inline-flex; align-items:center; gap:.45rem; margin-top:2rem; color:var(--color-primary); font-size:.73rem; font-weight:800; }.about-product-brand h3 { margin:.4rem 0 0; font-family:var(--font-heading); font-size:clamp(2.15rem,4vw,3.5rem); letter-spacing:-.07em; color:var(--text-primary); }.about-product-brand h3 span { color:var(--color-primary); }.about-product-brand>p:last-child { max-width:30ch; margin:.65rem 0 0; font-size:.94rem; line-height:1.65; color:var(--text-muted); }
.about-product-copy { display:flex; flex-direction:column; justify-content:center; }.about-product-lead { max-width:34ch; margin:0; font-family:var(--font-heading); font-size:clamp(1.25rem,2.5vw,1.65rem); font-weight:600; line-height:1.35; letter-spacing:-.03em; color:var(--text-primary); }.about-product-features { display:grid; gap:.75rem; margin-top:1.6rem; }.about-product-features div { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:start; gap:.7rem; font-size:.86rem; line-height:1.55; color:var(--text-muted); }.about-product-features i { margin-top:.1rem; color:var(--color-primary); }.about-product-features strong { color:var(--text-primary); }.about-product-link { align-self:flex-start; margin-top:1.65rem; padding-bottom:.25rem; border-bottom:1px solid currentColor; color:var(--color-primary); font-size:.82rem; font-weight:800; text-decoration:none; }.about-product-link i { margin-left:.45rem; transition:transform .2s ease; }.about-product-link:hover i { transform:translateX(4px); }
.about-numbers { display:grid; grid-template-columns:repeat(4,1fr); margin:1.2rem 0 clamp(3.5rem,8vw,7rem); background:var(--text-primary); border-radius:12px; overflow:hidden; }.about-numbers div { padding:1.5rem; border-right:1px solid rgba(255,255,255,.18); }.about-numbers div:last-child { border-right:0; }.about-numbers strong { display:block; font-family:var(--font-heading); font-size:clamp(1.65rem,3vw,2.4rem); line-height:1; letter-spacing:-.05em; color:var(--color-primary); }.about-numbers span { display:block; margin-top:.38rem; color:rgba(255,255,255,.72); font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.about-closing { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.58fr); gap:clamp(2rem,7vw,6rem); padding:0 clamp(.3rem,2vw,1.5rem) clamp(3.3rem,6vw,5.5rem); }.about-closing h3 { margin-top:1rem; }.about-closing-side { align-self:end; }.about-closing-side p { margin:0; font-size:.9rem; line-height:1.7; color:var(--text-muted); }.about-closing-side a { display:inline-flex; align-items:center; gap:.6rem; margin-top:1.25rem; color:var(--color-primary); font-size:.88rem; font-weight:800; text-decoration:none; }.about-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; padding-top:1.2rem; border-top:1px solid var(--border-glass); color:var(--text-muted); font-size:.7rem; line-height:1.5; }.about-footer i { color:var(--color-primary); }
@media (max-width:720px) { .about-hero{grid-template-columns:1fr;min-height:0}.about-hero-mark{min-height:220px;order:-1}.about-monogram{width:142px}.about-orbit-one{width:215px;height:215px}.about-orbit-two{width:275px;height:128px}.about-mark-label{bottom:0}.about-statement,.about-product,.about-closing{grid-template-columns:1fr}.about-statement{gap:1rem}.about-principles{grid-template-columns:1fr}.about-principles article{min-height:0;border-right:0;border-bottom:1px solid var(--border-glass)}.about-principles article:last-child{border-bottom:0}.about-principles i{margin-top:1.2rem}.about-numbers{grid-template-columns:repeat(2,1fr)}.about-numbers div:nth-child(2){border-right:0}.about-numbers div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)} }
@media (max-width:460px) { .about-hero{padding:1.6rem;border-radius:12px}.about-hero h2{font-size:2.2rem}.about-actions .primary-btn{width:100%;justify-content:center}.about-product{padding:1.6rem;border-radius:12px}.about-numbers div{padding:1.2rem}.about-footer{flex-direction:column} }

/* `--text-primary` koyu temada açık renktir; istatistik şeridinin zemininde
   kullanılması paneli beyaza çevirip etiket kontrastını yok ediyordu. */
html[data-theme="dark"] .about-numbers {
    background: #082a24;
    border: 1px solid rgba(167, 231, 202, 0.18);
}

html[data-theme="dark"] .about-numbers div {
    border-color: rgba(167, 231, 202, 0.18);
}

html[data-theme="dark"] .about-numbers span {
    color: rgba(232, 237, 245, 0.76);
}