/* =========================================================
   TENEZZÜL — Üyeler sayfası
   Oyun kartı tarzında üye kartları, arama ve rol filtreleri
   ========================================================= */

/* ---------- Sayfa başlığı ---------- */
.page-hero {
  position: relative;
  padding: 90px 0 50px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 7, 10, 0.55), var(--bg)),
    url('/assets/hero-bg.jpg') center 30% / cover no-repeat;
  opacity: 0.55;
}
.page-hero .section-title { font-size: clamp(42px, 7vw, 84px); }

/* Canlı sayaçlar */
.live-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14, 14, 19, 0.7);
  backdrop-filter: blur(10px);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.live-pill b { color: var(--text); font-size: 18px; }
.sync-note { margin-top: 14px; font-size: 13px; color: var(--dim); }

/* ---------- Araç çubuğu: arama + filtre (yapışkan) ---------- */
.toolbar {
  position: sticky;
  top: calc(var(--nav-h) + 10px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(12, 12, 16, 0.82);
  backdrop-filter: blur(16px);
}
.search {
  position: relative;
  flex: 1 1 280px;
}
.search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.search input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.search input::placeholder { color: var(--dim); }
.search input:focus { outline: none; border-color: rgba(255, 59, 79, 0.6); box-shadow: 0 0 0 4px rgba(195, 22, 47, 0.18); }
.toolbar .tabs { margin: 0; }
.tab .count { margin-left: 6px; opacity: 0.6; }

/* ---------- Üye kartları ---------- */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.member-card {
  --accent: var(--crimson); /* üyenin en yüksek rol rengi (JS ile ayarlanır) */
  position: relative;
  padding: 26px 20px 22px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 23, 30, 0.92), rgba(13, 12, 16, 0.96));
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  animation: fadeUp 0.5s var(--ease) both;
}
/* Hareketli degrade çerçeve (hover'da döner ve parlar) */
.member-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg), var(--line-strong), var(--accent), var(--line-strong) 40%, var(--line) 60%, var(--accent) 85%, var(--line-strong));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 0.4s;
}
.member-card:hover {
  /* Fareyi takip eden ışık (konum JS ile --mx / --my) + normal kart zemini */
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(26, 23, 30, 0.92), rgba(13, 12, 16, 0.96));
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 30px 60px -28px var(--accent), 0 0 40px -18px var(--accent);
}
.member-card:hover::before { opacity: 1; animation: borderSpin 3s linear infinite; }

/* Kart üstündeki ince ışık */
.member-card::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.8;
}

/* Ortak TENEZZÜL profil görseli */
.member-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
}
.member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6), 0 0 30px -6px var(--accent);
  transition: box-shadow 0.4s;
}
.member-card:hover .member-avatar img { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6), 0 0 44px -2px var(--accent); }
.member-avatar .status-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 16px;
  height: 16px;
  border: 3px solid #121015;
}

.member-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-username { margin-top: 2px; font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.member-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; min-height: 26px; }
.role-chip {
  --role: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--role) 45%, transparent);
  background: color-mix(in srgb, var(--role) 12%, transparent);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.role-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--role); flex-shrink: 0; }
.role-more { color: var(--muted); }

.member-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.member-status { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; font-weight: 600; }
.member-status.online { color: var(--online); }
.member-status.idle { color: var(--idle); }
.member-status.dnd { color: var(--dnd); }

/* Yüklenirken gösterilen iskelet kartlar */
.skeleton { height: 290px; border-radius: 20px; background: linear-gradient(100deg, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }

.load-more { display: flex; justify-content: center; margin-top: 36px; }

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes borderSpin { to { --angle: 360deg; } }
@keyframes shimmer { to { background-position: -300% 0; } }

@media (max-width: 620px) {
  .toolbar { position: static; }
  .members-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .member-card { padding: 20px 12px 16px; }
  .member-avatar { width: 76px; height: 76px; }
  .member-name { font-size: 17px; }
}