/* =========================================================
   Tüm Serverlar — Derlenmiş CSS
   (filtre chip, arama, tablo, VIP, pagination)
   ========================================================= */

/* = Varsayılan renkler (tema değişkenleri yoksa güvence) = */
:root {
    --red: #FF3B5C;
    --red-dark: #E11D48;
    --text: #F2F5F7;
    --muted: #A7AEBB;
    --bg: #0E1014;
    --surf: #161A21;
    --surf-2: #1D2330;
    --line: #2A2F3A;
}

/* ====== Başlık çizgisi (opsiyonel) ====== */
.section-title {
    font-family: "Cinzel",ui-serif,Georgia,serif;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: var(--text);
}

.section-divider {
    height: 2px;
    background: var(--line);
    border-radius: 999px;
    position: relative;
}

    .section-divider::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        height: 4px;
        width: 140px;
        background: var(--red);
        border-radius: 999px;
    }

/* =================== Table Card =================== */
.table-card {
    background: var(--surf);
    border: 1px solid var(--line);
    border-radius: 18px; /* daha yumuşak */
    overflow: hidden; /* içerik taşmasın */
}

    /* Üst kırmızı şerit */
    .table-card .section-bar {
        background: var(--red);
        color: #fff;
        font-weight: 900;
        letter-spacing: .3px;
        padding: 12px 16px;
        border-radius: 16px 16px 0 0; /* üst köşeler yuvarlak */
        display: flex;
        align-items: center;
        gap: .65rem;
        flex-wrap: wrap;
    }

/* =================== Filtre / Arama =================== */
.chip {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    line-height: 1;
    font-weight: 800;
    color: #fff !important;
    background: #ffffff14 !important; /* cam hissi */
    border: 1px solid #ffffff24 !important;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

    .chip:hover {
        background: #ffffff22 !important;
        border-color: #ffffff36 !important;
    }

    .chip.is-active,
    .chip.active,
    .chip[aria-pressed="true"] {
        background: #ffffff18 !important;
        border-color: #fff !important; /* aktif: beyaz kenarlık */
        box-shadow: 0 0 0 2px #ffffff2a inset;
    }

/* Arama alanı */
.search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .search-wrap input {
        background: #11151B;
        border: 1px solid var(--line);
        color: #fff;
        border-radius: 999px;
        padding: .45rem .75rem;
        width: 280px;
        max-width: 100%;
    }

        .search-wrap input::placeholder {
            color: #7D8696;
        }

    .search-wrap .ico, .search-wrap .ico * { /* büyüteç kesin beyaz */
        fill: #fff !important;
        color: #fff !important;
        opacity: 1 !important;
    }

/* =================== Tablo =================== */
.table-card .table {
    margin: 0;
    width: 100%;
}

    .table-card .table thead th {
        background: var(--surf-2);
        color: var(--muted);
        border-bottom: 1px solid var(--line);
        font-weight: 800;
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .table-card .table tbody td {
        border-color: var(--line);
        vertical-align: middle;
        color: var(--text);
    }

    .table-card .table tbody tr:hover {
        background: #141922;
    }

    /* thead & alt köşe radius (sticky’ken de yumuşak dursun) */
    .table-card .table thead tr:first-child th:first-child {
        border-top-left-radius: 14px;
    }

    .table-card .table thead tr:first-child th:last-child {
        border-top-right-radius: 14px;
    }

    .table-card .table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 14px;
    }

    .table-card .table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 14px;
    }

/* # sütunu */
.rank-cell {
    width: 44px;
    text-align: center;
    color: #bfc6d3;
}

/* “site” bağlantısını gizle (tablodaki küçük link) */
.table-card td .site, .server-name .site {
    display: none !important;
}

/* =================== Derece rozeti =================== */
.degree {
    --difficulty-color: #94a3b8;
    --difficulty-color-bg: rgba(148, 163, 184, .12);
    --difficulty-color-border: rgba(148, 163, 184, .35);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid var(--difficulty-color-border);
    color: var(--difficulty-color);
    background: var(--difficulty-color-bg);
    line-height: 1;
}

.degree__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

    .degree__icon i {
        font-size: .9rem;
        line-height: 1;
    }

.degree__label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* =================== Level göstergesi =================== */
.lvl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .lvl strong {
        font-weight: 900;
    }

.lvl-meter {
    width: 76px;
    height: 6px;
    background: #10151C;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
}

    .lvl-meter span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,#ff7a93,var(--red));
    }

/* =================== Aksiyon Butonları =================== */
.pill {
    padding: .45rem .9rem;
    border-radius: 999px;
    font-weight: 800;
    border: 0;
    line-height: 1;
    text-decoration: none;
}

.pill-red {
    background: var(--red);
    color: #fff;
}

    .pill-red:hover {
        background: var(--red-dark);
        color: #fff;
    }

.pill-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: #fff;
}

    .pill-ghost:hover {
        border-color: var(--red);
        background: rgba(255,59,92,.12);
        color: #fff;
    }

/* =================== VIP satır =================== */
/* Genel VIP görünümü */
.vip-row {
    background: linear-gradient(180deg,rgba(255,59,92,.06),rgba(255,59,92,.02));
    box-shadow: inset 0 0 0 1px rgba(255,59,92,.08);
    position: relative;
    clip-path: inset(0);
    contain: paint;
}
/* TümServerlar sayfası özelinde: shimmer OFF, nazik vurgular */
.table-card.table--allservers .vip-row {
    border-left: 3px solid var(--red);
    box-shadow: inset 0 0 0 1px rgba(255,59,92,.10);
}

    .table-card.table--allservers .vip-row::after {
        content: none !important;
        animation: none !important;
    }
/* VIP etiketi hafif pulse */
.vip-chip {
    font-size: .675rem;
    font-weight: 900;
    letter-spacing: .3px;
    padding: .18rem .45rem;
    border-radius: 999px;
    color: #fff;
    background: var(--red);
    border: 1px solid rgba(255,255,255,.08);
    animation: vipPulse 3s ease-in-out infinite;
}

@keyframes vipPulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(255,59,92,.22)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(255,59,92,.07)
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .25px;
}

.status-badge--online {
    background: linear-gradient(120deg, #16A34A, #22C55E);
    color: #F0FDF4;
}

.status-badge--offline {
    background: linear-gradient(120deg, #B91C1C, #EF4444);
    color: #FEF2F2;
}

.status-badge--degraded {
    background: linear-gradient(120deg, #F59E0B, #FBBF24);
    color: #1F1A09;
}

.status-badge--maintenance {
    background: linear-gradient(120deg, #6366F1, #818CF8);
    color: #EEF2FF;
}

.status-badge--unknown {
    background: linear-gradient(120deg, #4B5563, #6B7280);
    color: #F9FAFB;
}

.srv-name-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.srv-status-badge {
    font-size: .62rem;
    padding: .12rem .42rem;
    box-shadow: none;
}

.srv-status-note {
    font-size: .7rem;
    color: var(--muted);
    margin-top: 2px;
}

/* =================== Pagination =================== */
.pagination .page-link {
    border-radius: 999px !important;
    border: 1px solid var(--line);
    background: #12161E;
    color: #fff;
}

.pagination .page-item.active .page-link {
    background: var(--red);
    border-color: var(--red);
}

/* =================== Ufak rötuşlar =================== */
.table-card .table tbody td .btn,
.table-card .table tbody td a.btn {
    text-decoration: none;
}