:root {
  --rk-bg: #0f1318;
  --rk-panel: #141a20;
  --rk-panel-2: #0e141a;
  --rk-border: #1f2a33;
  --rk-text: #e6e3dc;
  --rk-text-2: #aeb6bf;
  --rk-accent: #2bd1ff;
  --rk-gold: #d4a94e;
  --rk-success: #67f0a6;
}

.rk-shell {
  padding: 30px 0;
  color: var(--rk-text)
}

/* Sadece Genel sayfada (users.php) uygulanan yukarı çekme */
.rk-shell--pullup {
  padding-top: 10px
}

.rk-shell--pullup .rk-inner {
  margin-top: -30px
}

@media (min-width: 992px) {
  .rk-shell--pullup .rk-inner {
    margin-top: -80px
  }
}

.rk-inner.container {
  max-width: 1200px
}

/* Glass arka plan */
.rk-inner {
  position: relative
}

.rk-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(10, 14, 20, .35);
  border: 1px solid rgba(31, 42, 51, .5);
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, .22), 0 2px 10px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.rk-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  position: relative;
  z-index: 1;
  padding: 16px
}

/* Sidebar */
.rk-sidebar {
  background: var(--rk-panel);
  border: 1px solid var(--rk-border);
  border-radius: 12px;
  padding: 16px
}

.rk-note {
  font-size: 13px;
  color: var(--rk-text-2);
  background: var(--rk-panel-2);
  border: 1px dashed var(--rk-border);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px
}

.rk-nav {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.rk-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--rk-panel-2);
  border: 1px solid var(--rk-border);
  color: var(--rk-text);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700
}

.rk-nav-item:hover {
  background: #111922
}

.rk-nav-item.active {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(212, 169, 78, .25) inset;
  border-color: #3a2e19
}

/* Üst nav ile filtre nav arasında boşluk */
.rk-nav--filters {
  margin-top: 10px
}

/* Nav içi ikon boyutları */
.rk-ico--nav {
  width: 30px;
  height: 30px;
  object-fit: contain
}

/* Content */
.rk-content {
  background: var(--rk-panel);
  border: 1px solid var(--rk-border);
  border-radius: 12px;
  padding: 16px
}

.rk-header {
  border-bottom: 1px solid var(--rk-border);
  padding-bottom: 10px;
  margin-bottom: 10px
}

.rk-header h1 {
  font-size: 22px;
  margin: 0 0 10px 0;
  font-weight: 800
}

.rk-cols {
  display: grid;
  grid-template-columns: 50px 1fr 200px 180px;
  gap: 4px;
  font-size: 13px;
  color: var(--rk-text-2);
  text-transform: uppercase;
  font-weight: 800
}

/* List */
.rk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.rk-row {
  display: grid;
  grid-template-columns: 50px 1fr 200px 180px;
  gap: 4px;
  align-items: center;
  background: linear-gradient(180deg, #0f141a, #0d1217);
  border: 1px solid var(--rk-border);
  border-radius: 12px;
  padding: 10px 12px
}

/* Rank column tighten */
.c.c-rank {
  display: flex;
  justify-content: flex-end
}

/* Rank badge */
.rk-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1b2530;
  border: 1px solid var(--rk-border);
  font-weight: 900
}

.rk-rank.r1 {
  background: linear-gradient(180deg, #ffdf7e, #e1b13a);
  color: #000
}

.rk-rank.r2 {
  background: linear-gradient(180deg, #e7edf3, #9aa3ad);
  color: #000
}

.rk-rank.r3 {
  background: linear-gradient(180deg, #ffd7b0, #c27d41);
  color: #000
}

/* Player */
.c.c-player {
  display: flex;
  align-items: center;
  gap: 10px
}

.rk-icons {
  display: inline-flex;
  gap: 4px
}

/* Eski sprite referansı (artık img kullanılıyor ama geriye dönük kalsın) */
.rk-icons .nation,
.rk-icons .class {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../images/icon/icon.bmp');
  background-repeat: no-repeat
}

/* Yeni img ikonları */
.rk-icons .rk-ico {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain
}

@media (min-width: 992px) {
  .rk-icons .rk-ico {
    width: 30px;
    height: 30px
  }
}

/* nation */
.rk-icons .nation.karus {
  background-position: 0 -32px
}

.rk-icons .nation.elmo {
  background-position: -16px -32px
}

/* class shortcuts (borrowed approximate positions) */
.rk-icons .class.c101,
.rk-icons .class.c105,
.rk-icons .class.c106 {
  background-position: -32px -32px
}

.rk-icons .class.c102,
.rk-icons .class.c107,
.rk-icons .class.c108 {
  background-position: -48px -32px
}

.rk-icons .class.c103,
.rk-icons .class.c109,
.rk-icons .class.c110 {
  background-position: -64px -32px
}

.rk-icons .class.c201,
.rk-icons .class.c205,
.rk-icons .class.c206 {
  background-position: -96px -32px
}

.rk-icons .class.c202,
.rk-icons .class.c207,
.rk-icons .class.c208 {
  background-position: -112px -32px
}

.rk-player {
  display: flex;
  flex-direction: column
}

.rk-name {
  color: #fff;
  font-weight: 400;
  text-decoration: none
}

.rk-name:hover {
  text-decoration: underline
}

.rk-name,
.rk-player,
.rk-content,
.rk-row,
.rk-meta,
.rk-clan-link {
  text-shadow: none !important;
}

.rk-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.rk-tier {
  width: 16px;
  height: 16px;
  display: inline-block
}

.rk-meta {
  display: flex;
  gap: 10px;
  color: var(--rk-text-2);
  font-size: 12px
}

/* Clan profil sayfası için ikon ayarları */
.rk-row--clan .rk-icons {
  gap: 6px
}

.rk-row--clan .rk-ico {
  width: 24px;
  height: 24px
}

/* Scores */
.c.c-score,
.c.c-month {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px
}

.rk-badge {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  background: #1b2530;
  border: 1px solid var(--rk-border)
}

/* Responsive */
@media (max-width: 1024px) {
  .rk-layout {
    grid-template-columns: 1fr
  }

  .rk-sidebar {
    order: 2
  }

  .rk-content {
    order: 1
  }

  .rk-cols,
  .rk-row {
    grid-template-columns: 60px 1fr 160px 140px
  }
}

@media (max-width: 768px) {

  /* Daha compact layout */
  .rk-cols,
  .rk-row {
    grid-template-columns: 45px 1fr 100px 90px
  }

  /* Icon boyutlarını küçült */
  .rk-icons .rk-ico {
    width: 22px !important;
    height: 22px !important
  }

  .rk-ico--nav {
    width: 24px !important;
    height: 24px !important
  }

  /* Clan mark icon küçült */
  .rk-ico.rk-clan {
    width: 28px !important;
    height: 28px !important
  }

  /* Rank badge küçült */
  .rk-rank {
    width: 28px;
    height: 28px;
    font-size: 13px
  }

  /* Font boyutlarını küçült */
  .rk-name {
    font-size: 14px
  }

  .rk-level {
    font-size: 11px
  }

  .rk-clan-link {
    font-size: 11px
  }

  .c.c-score,
  .c.c-month {
    font-size: 13px
  }

  /* Padding küçült */
  .rk-row {
    padding: 8px 6px;
    gap: 3px
  }

  .rk-content {
    padding: 12px
  }

  .rk-sidebar {
    padding: 12px
  }

  /* Tier icon küçült */
  .rk-tier {
    width: 14px;
    height: 14px
  }

  /* Badge küçült */
  .rk-badge {
    width: 18px;
    height: 18px;
    font-size: 12px
  }

  /* Header küçült */
  .rk-header h1 {
    font-size: 18px
  }

  .rk-cols {
    font-size: 11px
  }

  /* Meta gizle */
  .rk-meta {
    display: none
  }

  /* Lider sütununu gizle (clan sıralaması için) */
  .c.c-score {
    display: none !important
  }

  .rk-cols,
  .rk-row {
    grid-template-columns: 45px 1fr 90px
  }
}

@media (max-width: 640px) {

  /* Çok küçük ekranlar için daha da compact */
  .rk-cols,
  .rk-row {
    grid-template-columns: 40px 1fr 75px
  }

  /* Clan mark icon daha küçük */
  .rk-ico.rk-clan {
    width: 24px !important;
    height: 24px !important
  }

  /* Lider sütununu gizle */
  .c.c-score {
    display: none !important
  }

  /* Icon daha da küçült */
  .rk-icons .rk-ico {
    width: 20px !important;
    height: 20px !important
  }

  .rk-ico--nav {
    width: 20px !important;
    height: 20px !important
  }

  /* Rank badge daha küçük */
  .rk-rank {
    width: 26px;
    height: 26px;
    font-size: 12px
  }

  /* Font daha küçük */
  .rk-name {
    font-size: 13px
  }

  .c.c-score,
  .c.c-month {
    font-size: 12px
  }

  /* Padding minimal */
  .rk-row {
    padding: 6px 4px;
    gap: 2px
  }

  .rk-content {
    padding: 10px
  }

  .rk-sidebar {
    padding: 10px
  }

  /* Tier ve badge minimal */
  .rk-tier {
    width: 12px;
    height: 12px
  }

  .rk-badge {
    width: 16px;
    height: 16px;
    font-size: 11px
  }

  /* Header minimal */
  .rk-header h1 {
    font-size: 16px
  }

  .rk-cols {
    font-size: 10px;
    gap: 2px
  }

  /* Icon gap küçült */
  .rk-icons {
    gap: 2px
  }

  .rk-name-row {
    gap: 4px
  }

  /* Nav item compact */
  .rk-nav-item {
    padding: 8px 10px;
    font-size: 13px;
    gap: 6px
  }
}

@media (max-width: 480px) {

  /* Çok küçük mobil cihazlar */
  .rk-cols,
  .rk-row {
    grid-template-columns: 35px 1fr 65px
  }

  /* Clan mark icon minimal */
  .rk-ico.rk-clan {
    width: 20px !important;
    height: 20px !important
  }

  /* Lider sütununu gizle */
  .c.c-score {
    display: none !important
  }

  /* Icon minimal */
  .rk-icons .rk-ico {
    width: 18px !important;
    height: 18px !important
  }

  /* Rank minimal */
  .rk-rank {
    width: 24px;
    height: 24px;
    font-size: 11px
  }

  /* Font minimal */
  .rk-name {
    font-size: 12px
  }

  .c.c-score,
  .c.c-month {
    font-size: 11px
  }

  /* Padding çok küçük */
  .rk-row {
    padding: 5px 3px
  }

  .rk-content {
    padding: 8px
  }

  /* Badge minimal */
  .rk-badge {
    width: 14px;
    height: 14px;
    font-size: 10px
  }

  /* Tier gizle */
  .rk-tier {
    display: none
  }
}