/* ---------- BASE ---------- */
:root{
  --bg:#0c0d10;
  --panel:#11141a;
  --glass:rgba(18,20,26,.72);
  --text:#e7ecf3;
  --muted:#9aa7bd;
  --gold:#ffd166;
  --gold-2:#ffec99;
  --line:#202632;
  --ok:#2dd4bf;
  --warn:#f472b6;
  --guild:#b2a1ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 10% -10%, #1a2230 0%, transparent 60%),
    radial-gradient(1000px 600px at 100% 20%, #11192a 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Cinzel',serif;
}

/* ---------- HEADER NAV (mevcutuna dokunmadan uyumlu) ---------- */
.nav-links a.active{color:var(--gold);font-weight:700}

/* ---------- SECTION / CONTAINER ---------- */
.rankings-section{
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px 70px;
}
.rankings-container{
  width:min(1100px,96%);
  margin:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter:saturate(120%) blur(8px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  padding:28px 22px 26px;
}
.rankings-container h2{
  margin:0 0 16px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--gold-2);
  text-shadow:0 2px 12px rgba(255,209,102,.25);
  display:flex;align-items:center;gap:10px;justify-content:center;
}
.rankings-container h2::before{
  content:"🏆";filter:drop-shadow(0 0 10px rgba(255,209,102,.5));
}

/* ---------- TABS ---------- */
.rankings-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 12px}
.tab-btn{
  border:none;cursor:pointer;position:relative;
  padding:10px 18px;border-radius:999px;
  color:var(--text);background:linear-gradient(180deg,#1b2130,#141924);
  border:1px solid rgba(255,255,255,.06);
  transition:.2s transform,.2s background,.2s box-shadow;
}
.tab-btn:hover{transform:translateY(-1px)}
.tab-btn.active{
  background:linear-gradient(180deg,#2a2f41 0%, #1b2130 100%);
  color:#111; font-weight:700;
  box-shadow:0 6px 22px rgba(255,209,102,.25), inset 0 0 0 1px var(--gold);
}

/* ---------- TABLE SHELL ---------- */
.rankings-content>div{display:none}
.rankings-content>div.active{display:block}

table.rankings-table{
  width:100%; border-collapse:separate; border-spacing:0;
  overflow:hidden; border-radius:14px;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
}
.rankings-table thead th{
  position:sticky; top:0; z-index:2;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#1a1400;
  text-align:center; font-weight:800; letter-spacing:.4px;
  padding:12px 10px; border-bottom:1px solid rgba(0,0,0,.2);
}
.rankings-table th:first-child{border-top-left-radius:14px}
.rankings-table th:last-child{border-top-right-radius:14px}

.rankings-table tbody td{
  padding:12px 10px; text-align:center;
  border-bottom:1px solid var(--line);
  color:var(--text);
}
.rankings-table tbody tr{
  background:linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.06));
  transition:background .15s, transform .15s, box-shadow .15s;
}
.rankings-table tbody tr:nth-child(even){
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.08));
}
.rankings-table tbody tr:hover{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.02);
}

/* ---------- RANK BADGE (1-3) ---------- */
td.col-rank{width:60px;font-weight:800}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:28px;padding:0 10px;border-radius:10px;
  background:#0e1118;border:1px solid rgba(255,255,255,.08);
  font-weight:800; letter-spacing:.2px;
}
.badge.gold   {background:linear-gradient(180deg,#ffe39d,#ffcf6b); color:#2a1b00}
.badge.silver {background:linear-gradient(180deg,#e9edf2,#cbd5e1); color:#131a26}
.badge.bronze {background:linear-gradient(180deg,#ffce9a,#e79a61); color:#2a1200}

/* ---------- TAGS ---------- */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.tag-k{background:linear-gradient(180deg,rgba(0,212,255,.20),rgba(0,212,255,.08)); color:#bff4ff}
.tag-m{background:linear-gradient(180deg,rgba(244,114,182,.22),rgba(244,114,182,.1)); color:#ffd1eb}
.tag-g{background:linear-gradient(180deg,rgba(178,161,255,.22),rgba(178,161,255,.1)); color:#e5e0ff}

/* ---------- SMALL CHIPS ---------- */
.chip{
  display:inline-block; padding:6px 10px; border-radius:9px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:var(--muted); font-weight:700;
}

/* ---------- RESPONSIVE: Card görünümü ---------- */
@media (max-width: 820px){
  .rankings-container{padding:18px}
  table.rankings-table{border-radius:14px; overflow:hidden}
  .rankings-table thead{display:none}
  .rankings-table tbody tr{
    display:grid; grid-template-columns: 64px 1fr; grid-row-gap:6px;
    padding:10px 10px; border-bottom:1px solid var(--line);
  }
  .rankings-table tbody td{border:0;text-align:left;padding:4px 8px}
  td.col-rank{grid-row:1 / span 2; align-self:center; justify-self:center}
  td.col-name{font-size:1.05rem; font-weight:800}
  td::before{content:attr(data-label); color:var(--muted); font-weight:700; margin-right:6px}
  td[data-label=""]::before{content:""}
}
.rankings-content > .rankings-view { display:none; }
.rankings-content > .rankings-view.active { display:block; }
.status { display:inline-flex; align-items:center; padding:6px 12px; border-radius:9999px; font-weight:700; font-size:12px; letter-spacing:.6px; text-transform:uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.25); }
.status.online { background: rgba(16,185,129,.14); color:#86f7c2; }
.status.offline { background: rgba(239,68,68,.14); color:#ffb1b1; }
.loading-row td{padding:28px 10px;font-weight:700;color:var(--muted)}
.loader{display:inline-block;width:1em;height:1em;border:2px solid rgba(255,255,255,.3);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin-right:8px;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}