/* ============================================================
   Muhabbetci — Yetki sıralaması (rütbe) stilleri
   ============================================================ */

/* ---- rütbe listesi ---- */
.rank-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}

.rank-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  border: 1px solid var(--line);
  transition: background .13s;
}
.rank-row.assigned { border-color: rgba(79,140,255,.4); }
.rank-row.above { opacity: .55; }

/* sıra numarası */
.rank-no {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  background: var(--bg-4);
  color: var(--txt-dim);
  flex: 0 0 auto;
}

/* rütbe rozeti */
.rank-badge {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: 14px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--bg-4);
}
.rank-badge.gold {
  background: linear-gradient(135deg, rgba(255,176,32,.3), rgba(255,140,60,.2));
  border-color: rgba(255,176,32,.7);
  box-shadow: 0 0 0 2px rgba(255,176,32,.15);
}
.rank-badge.blue {
  background: linear-gradient(135deg, rgba(79,140,255,.3), rgba(123,92,255,.2));
  border-color: rgba(79,140,255,.65);
}
.rank-badge.cyan {
  background: linear-gradient(135deg, rgba(37,194,214,.3), rgba(79,140,255,.18));
  border-color: rgba(37,194,214,.65);
}
.rank-badge.green {
  background: linear-gradient(135deg, rgba(47,208,122,.28), rgba(37,194,214,.18));
  border-color: rgba(47,208,122,.6);
}
.rank-badge.purple {
  background: linear-gradient(135deg, rgba(168,85,247,.28), rgba(123,92,255,.18));
  border-color: rgba(168,85,247,.6);
}
.rank-badge.teal {
  background: linear-gradient(135deg, rgba(37,194,214,.24), rgba(47,208,122,.16));
  border-color: rgba(37,194,214,.55);
}

.rank-meta {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.rank-name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-title { font-size: 10.5px; color: var(--txt-mute); }

/* rütbe ver düğmesi */
.rank-btn {
  font-size: 10.5px; font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(79,140,255,.45);
  background: rgba(79,140,255,.12);
  color: #9dc0ff;
  flex: 0 0 auto;
  transition: background .14s, color .14s;
  white-space: nowrap;
}
.rank-btn:hover { background: rgba(79,140,255,.26); color: #c3d8ff; }
.rank-btn.revoke {
  border-color: rgba(255,59,92,.4);
  background: rgba(255,59,92,.1);
  color: #ff8095;
}
.rank-btn.revoke:hover { background: rgba(255,59,92,.24); color: #fff; }

/* ============================================================
   Rütbe seçim penceresi
   ============================================================ */
.rank-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
}
.rank-modal.hidden { display: none !important; }

.rank-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,7,12,.7);
  backdrop-filter: blur(3px);
}

.rank-modal-card {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--bg-2), #0f1420);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: rankIn .2s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes rankIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.rank-modal-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.rank-modal-ico { font-size: 19px; }
.rank-modal-title { font-size: 14.5px; font-weight: 700; }
.rank-modal-sub { font-size: 11.5px; color: var(--txt-mute); }
.rank-modal-head > div { flex: 1 1 auto; min-width: 0; }

.rank-pick-list {
  list-style: none; margin: 0; padding: 8px;
  display: flex; flex-direction: column; gap: 5px;
  max-height: 60vh; overflow-y: auto;
}
.rank-pick {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background .13s, border-color .13s;
}
.rank-pick:hover {
  background: var(--bg-4);
  border-color: rgba(79,140,255,.45);
}
.rank-pick .rank-name { font-size: 13.5px; }

@media (max-width: 560px) {
  .rank-btn { font-size: 10px; padding: 4px 8px; }
  .rank-row { padding: 7px; gap: 7px; }
  .rank-badge { width: 24px; height: 24px; font-size: 12px; }
}