/* GENEL TABLO STİLİ */
.rank-table {
    width: 100%;
    border-collapse: collapse;
    background: #0b0b0b;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    margin-left: 0; /* Sola hizala */
}

/* BAŞLIK STİLİ */
.rank-table thead {
    background: #161616;
}

.rank-table thead th {
    padding: 12px;
    color: #eee;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 2px solid #333;
    text-transform: uppercase;
}

/* GÖVDE STİLİ */
.rank-table tbody td {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
    font-size: 13px;
    color: #bbb;
}

/* RANKING SİSTEMİ */
.ranking {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.row-ranking {
    display: flex;
}

.row-ranking:not(:last-child) {
    margin-bottom: 10px;
}

.row-ranking.header {
    background-color: #000;
    font-weight: 800;
}

.cell-ranking a {
    color: #fff !important;
}

.cell-ranking a:hover {
    color: #ba6356 !important;
}

.cell-ranking {
    flex: 1;
    padding: 15px;
}

/* 1. Kolon (Sıralama) */
.cell-ranking:nth-child(1) {
    color: #fff;
    flex: 0 0 60px; /* Kolon genişliğini arttır */
    background: linear-gradient(135deg, #ba6356 85%, #0f1116 50%);
    font-weight: 700;
    text-align: left; /* Sol hizalama */
}

/* 2. Kolon (İsim) */
.cell-ranking:nth-child(2) {
    color: #fff;
    background-color: #0f1116;
    font-size: 14px;
    font-weight: 800;
    padding-right: 5px;
    flex: 2.1; /* Daha fazla genişlik */
    padding-left: 50px; /* Sol boşluk */
    text-align: left; /* Sol hizalama */
}

/* 3. Kolon (Level, Puan vs.) */
.cell-ranking:nth-child(3),
.cell-ranking:nth-child(4),
.cell-ranking:nth-child(5),
.cell-ranking:nth-child(6) {
    color: #fff;
    background-color: #0f1116;
    text-align: right;
    padding-right: 25px; /* Sağ boşluk arttırıldı */
    max-width: 200px; /* Kolon genişliğini arttır */
    padding-left: 20px; /* Sol boşluk eklendi */
}

/* 4. Kolon (Tarih ve Saat) */
.cell-ranking:nth-child(5) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left; /* Sol hizalama */
    padding-left: 10px; /* Sol boşluk */
    padding-right: 0;
}

.cell-ranking .date-time {
    display: flex;
    justify-content: flex-start;
    gap: 5px; /* Tarih ve saatin arasındaki boşluk */
    font-size: 12px;
}

/* Hover Efekti */
.row-ranking:hover {
    filter: brightness(120%);
}

/* İlk 3 Sıra */
.rank-1 {
    background: linear-gradient(to right, #ffd700, #ffce00);
    color: #111;
    font-weight: bold;
}

.rank-2 {
    background: linear-gradient(to right, #c0c0c0, #b0b0b0);
    color: #111;
    font-weight: bold;
}

.rank-3 {
    background: linear-gradient(to right, #cd7f32, #b87333);
    color: #111;
    font-weight: bold;
}

/* Mobil Uyumluluk */
@media(max-width: 768px) {
    #rank-menu {
        flex-direction: column;
        gap: 10px;
    }

    .rank-table thead th,
    .rank-table tbody td {
        padding: 8px;
        font-size: 12px;
    }

    .cell-ranking {
        padding: 8px;
    }
}

/* Butonları sola kaydır ve küçült */
#rank-menu-seruven {
    display: flex;
    justify-content: flex-start; /* Butonları sola hizala */
    gap: 10px; /* Butonlar arasındaki boşluğu ayarlayın */
    flex-wrap: nowrap; /* Butonlar tek satırda kalacak */
}

/* Buton stilleri */
#rank-menu-seruven a {
    padding: 8px 10px; /* Butonun boyutlarını küçült */
    background-color: #333;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-decoration: none;
    font-size: 13px; /* Yazı boyutunu küçült */
}

#rank-menu a.active {
    background-color: #f39c12;
}

/* Rank Tablosunu ortala ve büyüt */
.ranking-mini {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.rank-table {
    width: 100%;
    max-width: 1200px; /* Tabloyu büyütmek için genişliği ayarlayın */
    border-collapse: collapse;
    background: #0b0b0b;
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.rank-table thead {
    background: #161616;
}

.rank-table thead th {
    padding: 12px;
    color: #eee;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #333;
    text-transform: uppercase;
}

.rank-table tbody td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
    font-size: 14px;
    color: #bbb;
}

/* Hover Efekti */
.rank-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

/* İlk 3 Sıra */
.rank-1 {
    background: linear-gradient(to right, #ffd700, #ffce00);
    color: #111;
    font-weight: bold;
}

.rank-2 {
    background: linear-gradient(to right, #c0c0c0, #b0b0b0);
    color: #111;
    font-weight: bold;
}

.rank-3 {
    background: linear-gradient(to right, #cd7f32


.button-container {
    display: flex;
    justify-content: center; /* Butonları yatayda hizalar */
    gap: 10px; /* Butonlar arasında boşluk bırakır */
    flex-wrap: wrap; /* Ekran daraldığında butonlar alt satıra geçer */
}

.vs-btn {
    white-space: nowrap; /* Buton içeriğinin taşmasını önler */
}