/* === 1. SIRALAMA ANA KONTEYNIR === */
/* === 1. SIRALAMA ANA KONTEYNIR === */
.rank-container {
    border: 1px solid #cc0000 !important;
    background: rgba(10, 10, 10, 0.95) !important;
    /* Üst boşluğu 15'ten 10'a düşürdük */
    padding: 10px 25px 25px 25px; 
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(204, 0, 0, 0.2);
    
    /* Buradaki margin-top'ı 0 yapıyoruz çünkü main etiketi zaten boşluk veriyor */
    margin-top: 0px; 
    margin-bottom: 30px; 
}

.rank-header {
    text-align: center;
    /* Başlığın altındaki boşluğu 30'dan 15'e çektik */
    margin-bottom: 15px; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Başlığın iç boşluğunu 20'den 10'a çektik */
    padding-bottom: 10px; 
}

.rank-header h1 {
    margin: 0;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}

/* === 2. TABLO TASARIMI === */
.rank-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.rank-table th {
    background: linear-gradient(90deg, #800, #cc0000, #800);
    color: #fff;
    padding: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 2px solid #ffcc00;
}

.rank-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #ccc;
    vertical-align: middle;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1em;
    font-weight: 500;
}

/* Satır Üzerine Gelme Efekti */
.rank-table tbody tr:hover {
    background: rgba(255, 204, 0, 0.03);
    transition: 0.2s ease;
}

/* === 3. ÖZEL HÜCRE STİLLERİ === */
.rank-number {
    font-weight: 700;
    color: #888;
    font-style: italic;
    width: 50px;
}

.rank-name {
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.rank-level {
    color: #ffcc00;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.3);
}

.rank-guild {
    color: #5da9ff;
    font-weight: 600;
}

.no-guild {
    color: #ff4444 !important;
    font-style: italic;
    font-size: 0.85em;
    opacity: 0.6;
}

/* === 4. İKON VE GÖRSEL AYARLARI (CRISP RENDERING) === */

/* Rütbe Madalyaları */
.rank-medal {
    width: 22px;
    height: 22px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    filter: brightness(1.1) contrast(1.1);
    vertical-align: middle;
}

/* Karakter İkonları */
.rank-char-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 4px;
    background: #000;
    image-rendering: pixelated;
    filter: brightness(1.05);
    vertical-align: middle;
    transition: transform 0.2s;
}

.rank-char-icon:hover {
    transform: scale(1.1);
    border-color: #ffcc00;
}

/* Bayraklar */
.rank-empire {
    width: 42px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    vertical-align: middle;
}

/* === 5. MOBİL UYUMLULUK (RESPONSIVE) === */

@media (max-width: 768px) {
    .rank-container {
        padding: 15px 10px !important;
    }

    /* Yatay kaydırma göstergesi */
    .rank-container::after {
        content: "← Tabloyu kaydırabilirsiniz →";
        display: block;
        text-align: center;
        font-size: 11px;
        color: #444;
        margin-top: 15px;
        font-family: 'Rajdhani';
    }

    .rank-table {
        min-width: 650px !important; /* Hücrelerin sıkışmaması için */
    }

    .rank-table th, .rank-table td {
        padding: 10px 5px !important;
        font-size: 0.9em !important;
    }

    .rank-empire { width: 32px !important; }
    .rank-char-icon { width: 30px !important; height: 30px !important; }
    .rank-medal { width: 18px !important; height: 18px !important; }
}

@media (max-width: 480px) {
    .rank-header h1 {
        font-size: 1.2rem !important;
    }
    
    .rank-name {
        font-size: 1rem !important;
    }
}