/* ============================================
   ESKİ TIERLIST CLASS'LAR — KORUNDU
   ============================================ */
.tierlist-page { padding-top: 18px; padding-bottom: 16px; }
.tierlist-page__hero { max-width: 1180px; margin: 0 auto; padding: 34px 24px 28px; border-radius: 22px; background: linear-gradient(180deg, rgba(18,28,48,0.92) 0%, rgba(14,22,38,0.96) 100%); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 18px 40px rgba(0,0,0,0.24); text-align: center; }
.tierlist-page__meta { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tierlist-page__pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(45,107,255,0.16); border: 1px solid rgba(88,135,255,0.28); color: #dbe6ff; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tierlist-page__patch { color: #f5f7ff; font-size: 14px; font-weight: 800; }
.tierlist-page__dot { color: rgba(255,255,255,0.45); font-size: 14px; }
.tierlist-page__updated { color: rgba(230,236,255,0.78); font-size: 14px; font-weight: 600; }
.tierlist-page__title { margin: 0 0 10px; color: #f5f7ff; font-size: 38px; line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; }
.tierlist-page__subtitle { margin: 0 auto; max-width: 720px; color: rgba(230,236,255,0.78); font-size: 16px; line-height: 1.6; }
.tierlist-shell { max-width: 1280px; margin: 0 auto; }

.tierlist-rolebar { display: flex; flex-direction: row; align-items: center; gap: 4px; flex-wrap: nowrap; flex-shrink: 0; }

.tierlist-role-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; max-height: 36px; display: flex; flex-direction: row; align-items: center; justify-content: center; background: rgba(12,16,30,0.8); border-radius: 8px; border: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: .15s ease; flex-shrink: 0; }
.tierlist-role-btn:hover, .tierlist-role-btn.is-active { background: rgba(79,124,255,0.1); border-color: rgba(79,124,255,0.3); transform: none; }
.tierlist-role-btn span { color: #d7e1ff; font-size: 11px; font-weight: 700; }
.tierlist-role-btn img { width: 20px; height: 20px; object-fit: contain; display: block; opacity: 0.45; }
.tierlist-role-btn svg { color: #7aaeff; }
.tierlist-role-btn.is-active img { opacity: 1; }

.tierlist-groups { display: flex; flex-direction: column; gap: 6px; }
.tier-row-wrap { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; border: 1px solid rgba(116,152,245,0.08); background: rgba(11,17,34,0.7); }
.tier-label-col { width: 70px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; padding: 14px 0 0; border-right: 1px solid rgba(116,152,245,0.07); }
.tier-label { width: 48px; height: 52px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tier-label__letter { font-size: 22px; font-weight: 900; line-height: 1; }
.tier-label__sub { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; opacity: 0.6; text-transform: uppercase; }
.tier-label--s { background: rgba(255,215,0,0.08); border: 1.5px solid rgba(255,215,0,0.22); }
.tier-label--s .tier-label__letter { color: #ffd700; }
.tier-label--s .tier-label__sub { color: #c8a030; }
.tier-label--a { background: rgba(255,128,64,0.08); border: 1.5px solid rgba(255,128,64,0.2); }
.tier-label--a .tier-label__letter { color: #ff8040; }
.tier-label--a .tier-label__sub { color: #cc6020; }
.tier-label--b { background: rgba(91,143,255,0.08); border: 1.5px solid rgba(91,143,255,0.2); }
.tier-label--b .tier-label__letter { color: #5b8fff; }
.tier-label--b .tier-label__sub { color: #3a70cc; }
.tier-label--c { background: rgba(100,180,100,0.08); border: 1.5px solid rgba(100,180,100,0.18); }
.tier-label--c .tier-label__letter { color: #64b464; }
.tier-label--c .tier-label__sub { color: #3a8a3a; }
.tier-label--d { background: rgba(120,120,120,0.06); border: 1.5px solid rgba(120,120,120,0.16); }
.tier-label--d .tier-label__letter { color: #888; }
.tier-label--d .tier-label__sub { color: #666; }
.tier-champ-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.tier-champ-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(116,152,245,0.06); border-right: 1px solid rgba(116,152,245,0.06); text-decoration: none; color: inherit; transition: background 0.14s; }
.tier-champ-row:hover { background: rgba(90,134,255,0.05); }
.tier-champ-row__img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; display: block; border: 1.5px solid rgba(255,255,255,0.06); }
.tier-row-wrap--s .tier-champ-row__img { border-color: rgba(255,215,0,0.25); }
.tier-row-wrap--a .tier-champ-row__img { border-color: rgba(255,128,64,0.22); }
.tier-row-wrap--b .tier-champ-row__img { border-color: rgba(91,143,255,0.22); }
.tier-row-wrap--c .tier-champ-row__img { border-color: rgba(100,180,100,0.2); }
.tier-row-wrap--d .tier-champ-row__img { border-color: rgba(120,120,120,0.18); }
.tier-champ-row__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tier-champ-row__name { font-size: 13px; font-weight: 700; color: #dde8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-champ-row__wr { font-size: 12px; font-weight: 600; }
.wr-high { color: #4ade80; }
.wr-mid { color: #94a3b8; }
.wr-low { color: #f87171; }
.tier-box__empty { grid-column: 1 / -1; text-align: center; color: rgba(230,236,255,0.68); font-size: 14px; padding: 16px 0; }

/* ============================================
   YENİ HERO + FILTER BAR
   ============================================ */
.tierlist-hero { background: #080d1c; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 18px 0 16px; }
.tierlist-hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: row; align-items: center; gap: 16px; }
.tierlist-hero-icon { width: 52px; height: 52px; min-width: 52px; min-height: 52px; max-width: 52px; max-height: 52px; border-radius: 10px; background: rgba(79,124,255,0.08); border: 1px solid rgba(79,124,255,0.18); display: flex; flex-direction: row; align-items: center; justify-content: center; flex-shrink: 0; }
.tierlist-hero-icon svg { width: 28px; height: 28px; flex-shrink: 0; }
.tierlist-hero-text { flex: 1; min-width: 0; }
.tierlist-hero-title { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 900; color: #eef3ff; margin-bottom: 4px; line-height: 1.3; letter-spacing: 0.3px; }
.tierlist-hero-title span { color: #4f7cff; }
.tierlist-hero-sub { font-size: 11px; color: #3c4a6a; line-height: 1.5; margin: 0; }
.tierlist-hero-sub span { color: #5a7aee; }

/* FILTER WRAP */
.tierlist-filter-wrap { position: relative; background: #07090e; border-bottom: 1px solid rgba(255,255,255,0.05); }

/* FILTER BAR */
.tierlist-filter-bar { background: #07090e; padding: 0 24px; display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; height: 52px; min-height: 52px; max-height: 52px; overflow: visible; border-bottom: none; }

.tierlist-search-wrap { display: flex; flex-direction: row; align-items: center; gap: 8px; background: rgba(10,14,28,0.9); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0 12px; height: 36px; min-height: 36px; max-height: 36px; width: 190px; flex-shrink: 0; }
.tierlist-search-wrap svg { width: 13px; height: 13px; color: #3c4a6a; flex-shrink: 0; }
.tierlist-search-input { flex: 1; background: transparent; border: none; outline: none; font-size: 12px; color: #eef3ff; font-family: inherit; height: 100%; }
.tierlist-search-input::placeholder { color: #2c3a5a; }

/* RANK DROPDOWN BUTONU — position relative, menu buraya göre açılır */
.tierlist-rank-dropdown {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: rgba(12,16,30,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  position: relative;
}

.tierlist-rank-label { font-size: 13px; font-weight: 700; color: #eef3ff; white-space: nowrap; }
.tierlist-rank-arrow { font-size: 9px; color: #4a5a7a; flex-shrink: 0; }

/* RANK MENU — dropdown butonuna göre tam altında */
.tierlist-rank-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #0d1428;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  z-index: 200;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
}

.tierlist-rank-menu.open { display: block; }

.tierlist-rank-item { padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #8090b8; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; }
.tierlist-rank-item:last-child { border: none; }
.tierlist-rank-item:hover { background: rgba(79,124,255,0.08); color: #eef3ff; }
.tierlist-rank-item.active { color: #eef3ff; background: rgba(79,124,255,0.06); }

.tierlist-beta { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #f59e0b; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 3px; letter-spacing: 0.5px; flex-shrink: 0; }

.tierlist-beta-note { display: flex; align-items: center; gap: 8px; padding: 8px 24px; background: rgba(245,158,11,0.06); border-bottom: 1px solid rgba(245,158,11,0.15); font-size: 12px; color: #f59e0b; font-weight: 600; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .tier-champ-grid { grid-template-columns: repeat(3, 1fr); }
  .tierlist-hero-title { font-size: 13px; }
  .tierlist-search-wrap { width: 140px; }
}

@media (max-width: 768px) {
  .tierlist-page { padding-top: 10px; padding-bottom: 10px; }
  .tierlist-page__hero { padding: 22px 14px 18px; border-radius: 18px; }
  .tierlist-page__title { font-size: 24px; }
  .tierlist-page__subtitle { font-size: 13px; }
  .tierlist-hero { padding: 12px 0; }
  .tierlist-hero-inner { padding: 0 14px; }
  .tierlist-filter-bar { padding: 0 14px; gap: 4px; }
  .tierlist-hero-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; }
  .tierlist-hero-icon svg { width: 20px; height: 20px; }
  .tierlist-hero-title { font-size: 12px; }
  .tierlist-role-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; max-height: 32px; }
  .tierlist-role-btn img { width: 16px; height: 16px; }
  .tier-label-col { width: 54px; }
  .tier-label { width: 40px; height: 44px; border-radius: 10px; }
  .tier-label__letter { font-size: 18px; }
  .tier-champ-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-champ-row { padding: 8px 10px; gap: 8px; }
  .tier-champ-row__img { width: 36px; height: 36px; border-radius: 8px; }
  .tier-champ-row__name { font-size: 12px; }
  .tier-champ-row__wr { font-size: 11px; }
}

@media (max-width: 420px) {
  .tier-label-col { width: 46px; }
  .tier-label { width: 36px; height: 40px; }
  .tier-label__letter { font-size: 16px; }
  .tier-label__sub { display: none; }
  .tier-champ-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-champ-row__img { width: 32px; height: 32px; }
  .tierlist-search-wrap { display: none; }
}