/* VOID Revision 5 — logo, panel navigation, refined background, VIP members and layout polish */

:root {
  --r5-surface: rgba(5, 10, 19, .92);
  --r5-surface-strong: rgba(7, 14, 25, .97);
  --r5-line: color-mix(in srgb, var(--void-primary) 14%, rgba(255,255,255,.07));
  --r5-shadow: 0 20px 60px rgba(0, 0, 0, .24);
}

/* Profesyonel, yumuşak ve dairesel ışık lekesi oluşturmayan arka plan. */
html { background: #02060b; }
body {
  background:
    linear-gradient(132deg, color-mix(in srgb, var(--void-primary) 4%, transparent) 0%, transparent 27%),
    linear-gradient(228deg, color-mix(in srgb, var(--void-secondary, #9b3bff) 4.5%, transparent) 0%, transparent 29%),
    repeating-linear-gradient(118deg, rgba(255,255,255,.008) 0 1px, transparent 1px 86px),
    linear-gradient(180deg, #030711 0%, #050a13 48%, #02060b 100%) !important;
  background-attachment: fixed !important;
}
body::before {
  opacity: .10 !important;
  background-size: 104px 104px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 92%) !important;
}
body::after {
  opacity: .24 !important;
  background:
    linear-gradient(104deg, transparent 0 36%, rgba(255,255,255,.012) 47%, transparent 60%),
    linear-gradient(256deg, transparent 0 40%, color-mix(in srgb,var(--void-primary) 2.2%,transparent) 52%, transparent 67%) !important;
}
.page-glow { opacity: .018 !important; filter: blur(135px) !important; }

/* Eski VOID | HAXBALL görünümü; yalnızca çok hafif büyütüldü. */
.topbar .logo-wrap {
  min-width: 176px !important;
  flex: 0 0 auto !important;
}
.brand-wordmark--header {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 3px 0 !important;
  background: none !important;
  filter: drop-shadow(0 0 calc(11px * var(--void-glow-level)) color-mix(in srgb,var(--void-primary) 33%,transparent)) !important;
}
.brand-wordmark--header .brand-wordmark__void,
.brand-wordmark--header .brand-wordmark__haxball {
  background: linear-gradient(105deg, color-mix(in srgb,var(--void-primary) 74%,white), var(--void-primary) 55%, color-mix(in srgb,var(--void-secondary,#9b3bff) 58%,var(--void-primary))) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-style: normal !important;
}
.brand-wordmark--header .brand-wordmark__void {
  font-family: "Orbitron", "Manrope", sans-serif !important;
  font-size: 26.5px !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  letter-spacing: .075em !important;
}
.brand-wordmark--header .brand-wordmark__divider {
  display: block !important;
  width: 1px !important;
  height: 28px !important;
  background: linear-gradient(180deg,transparent,color-mix(in srgb,var(--void-primary) 70%,transparent),transparent) !important;
  box-shadow: 0 0 10px color-mix(in srgb,var(--void-primary) 34%,transparent) !important;
}
.brand-wordmark--header .brand-wordmark__haxball {
  font-family: "Manrope", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .28em !important;
  opacity: .93 !important;
}

/* Ayarlar göstergesi daha görünür ancak hâlâ sade. */
.header-icon-btn--settings::after {
  width: 7px !important;
  height: 7px !important;
  inset: auto 2px 2px auto !important;
  opacity: .72 !important;
  box-shadow: 0 0 0 2px #050b14, 0 0 8px rgba(0,230,118,.58), 0 0 15px rgba(0,230,118,.22) !important;
  animation: r5-settings-pulse 1.75s ease-in-out infinite !important;
}
@keyframes r5-settings-pulse {
  0%, 100% { opacity: .48; transform: scale(.82); box-shadow:0 0 0 2px #050b14,0 0 5px rgba(0,230,118,.34); }
  45% { opacity: 1; transform: scale(1.08); box-shadow:0 0 0 2px #050b14,0 0 11px rgba(0,230,118,.85),0 0 20px rgba(0,230,118,.28); }
  70% { opacity: .68; transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .header-icon-btn--settings::after { animation: none !important; opacity: .78 !important; }
}

/* Alt kısa yollar: dengeli 2x2, eşit ölçü ve daha net hiyerarşi. */
.quick-grid {
  width: calc(100% - 28px) !important;
  max-width: 1160px !important;
  margin: 6px auto 34px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  overflow: visible !important;
  padding: 0 !important;
}
.quick-card {
  min-width: 0 !important;
  min-height: 205px !important;
  height: 100% !important;
  padding: 24px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb,var(--void-primary) 16%,rgba(255,255,255,.075)) !important;
  background: linear-gradient(145deg,rgba(7,14,25,.97),rgba(3,8,15,.96)) !important;
  box-shadow: 0 15px 42px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}
.quick-card::before {
  background: linear-gradient(90deg,rgba(3,7,13,.99) 0%,rgba(3,7,13,.88) 44%,rgba(3,7,13,.20) 78%) !important;
}
.quick-card::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 30%);
}
.quick-card > div {
  max-width: 56% !important;
  min-height: 130px !important;
  justify-content: flex-end !important;
}
.quick-card h3 {
  min-height: 0 !important;
  margin: 0 0 9px !important;
  font-size: 14px !important;
  line-height: 1.28 !important;
}
.quick-card p {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}
.quick-card .badge-soon { margin-top: 12px !important; }
.quick-card > b { position:absolute !important; left:24px !important; bottom:18px !important; font-size:18px !important; }
.quick-visual-img {
  width: 68% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center right !important;
  opacity: .82 !important;
}
.quick-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb,var(--void-primary) 38%,rgba(255,255,255,.08)) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.25),0 0 24px color-mix(in srgb,var(--void-primary) 8%,transparent) !important;
}

/* Canlı oda bağlantı ve oyuncu metrikleri daha okunaklı. */
.live-room-card__stats { gap: 8px !important; }
.live-room-card__stat {
  min-height: 29px !important;
  padding: 6px 8px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  color: color-mix(in srgb,var(--text) 88%,transparent) !important;
}
.live-room-card__stat-icon { font-size: 12px !important; opacity: .82 !important; }
.live-room-card__stat [data-room-players],
.live-room-card__stat [data-room-ping] { font-size: 10.5px !important; letter-spacing: .01em !important; }

/* VIP aktif üyeler vitrini. */
.vip-members {
  margin-top: 18px !important;
  padding: 22px !important;
  border-radius: 9px !important;
  border: 1px solid var(--r5-line) !important;
  background: linear-gradient(145deg,rgba(7,14,25,.96),rgba(3,8,15,.95)) !important;
  box-shadow: var(--r5-shadow) !important;
}
.vip-members__head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.vip-members__head h2 { margin:4px 0 5px; font-size:20px; }
.vip-members__head p { margin:0; color:var(--muted); font-size:11px; }
.vip-members__count {
  padding:7px 10px;
  border:1px solid var(--r5-line);
  border-radius:5px;
  color:var(--void-primary);
  background:color-mix(in srgb,var(--void-primary) 5%,transparent);
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.vip-members__grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:9px;
}
.vip-member {
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:7px;
  background:rgba(255,255,255,.018);
  color:var(--text);
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
  overflow:hidden;
}
.vip-member::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:var(--vip-member-color,#ffba18);
  box-shadow:0 0 12px color-mix(in srgb,var(--vip-member-color,#ffba18) 45%,transparent);
}
.vip-member--elite { --vip-member-color:#ffba18; }
.vip-member--ultra { --vip-member-color:#a763ff; }
.vip-member--prime { --vip-member-color:#ffd35a; }
.vip-member:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--vip-member-color) 38%,rgba(255,255,255,.07)); background:rgba(255,255,255,.027); }
.vip-member__avatar { width:46px; height:46px; border-radius:6px; overflow:hidden; border:1px solid color-mix(in srgb,var(--vip-member-color) 35%,rgba(255,255,255,.08)); background:#07101b; }
.vip-member__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.vip-member__identity { min-width:0; display:grid; gap:3px; }
.vip-member__identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.vip-member__identity small { color:var(--vip-member-color); font-size:8px; font-weight:800; }
.vip-member__remaining { grid-column:2; color:#8795a8; font-size:7.5px; }
.vip-members__empty { grid-column:1/-1; padding:24px; text-align:center; color:var(--muted); font-size:10px; border:1px dashed rgba(255,255,255,.07); border-radius:7px; }

/* Yönetim paneli: temiz, net ve bütün sayfalarda aynı kabuk. */
.admin-body {
  background:
    linear-gradient(132deg,color-mix(in srgb,var(--void-primary) 3.5%,transparent),transparent 30%),
    linear-gradient(180deg,#02060b,#050a13 52%,#02060b) !important;
}
.admin-shell {
  grid-template-columns: 238px minmax(0,1fr) !important;
  gap: 18px !important;
  max-width: 1600px !important;
  padding: 18px clamp(12px,2vw,24px) 40px !important;
}
.admin-side {
  top:18px !important;
  min-height:calc(100vh - 36px) !important;
  padding:18px 14px !important;
  border:1px solid rgba(255,255,255,.065) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(8,16,29,.97),rgba(3,8,15,.98)) !important;
  box-shadow:0 22px 65px rgba(0,0,0,.25) !important;
}
.admin-side__brand { padding:4px 8px 13px !important; border-bottom:1px solid rgba(255,255,255,.055); }
.admin-side__tag { margin:13px 9px 7px !important; color:#65758a !important; }
.admin-nav { gap:5px !important; }
.admin-nav__item {
  min-height:44px !important;
  padding:8px 10px !important;
  border:1px solid transparent !important;
  border-radius:7px !important;
  color:#8f9db0 !important;
}
.admin-nav__item:hover { background:rgba(255,255,255,.025) !important; color:#eef4fc !important; border-color:rgba(255,255,255,.05) !important; }
.admin-nav__item.is-active {
  color:#f4f8ff !important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--void-primary) 12%,transparent),rgba(255,255,255,.012)) !important;
  border-color:color-mix(in srgb,var(--void-primary) 21%,rgba(255,255,255,.055)) !important;
  box-shadow:inset 3px 0 0 var(--void-primary) !important;
}
.admin-nav__icon {
  width:29px !important;
  height:29px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:6px !important;
  background:rgba(255,255,255,.025) !important;
}
.admin-nav__item.is-active .admin-nav__icon { color:var(--void-primary); background:color-mix(in srgb,var(--void-primary) 8%,transparent) !important; }
.admin-side__foot { margin-top:auto; padding:13px 7px 0; border-top:1px solid rgba(255,255,255,.055); }
.admin-main { padding:6px 4px 30px !important; gap:16px !important; }
.admin-head {
  padding:17px 19px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:10px !important;
  background:linear-gradient(145deg,rgba(8,16,28,.94),rgba(3,8,15,.91)) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.15) !important;
}
.admin-head h1 { font-size:25px !important; }
.admin-head p { font-size:10px !important; line-height:1.6 !important; }
.admin-panel {
  padding:18px !important;
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.065) !important;
  background:linear-gradient(145deg,rgba(8,16,28,.96),rgba(3,8,15,.96)) !important;
  box-shadow:0 16px 50px rgba(0,0,0,.16) !important;
}
.admin-panel__head { padding-bottom:11px; border-bottom:1px solid rgba(255,255,255,.05); }
.admin-panel__head h2 { font-size:14px !important; }
.admin-grid--editor { grid-template-columns:minmax(260px,340px) minmax(0,1fr) !important; }
.admin-list { gap:6px !important; }
.admin-list__item { padding:11px !important; border-radius:6px !important; }
.admin-form { gap:14px !important; }
.admin-form input,
.admin-form select,
.admin-form textarea {
  border-radius:6px !important;
  background:#040a13 !important;
  border-color:rgba(255,255,255,.075) !important;
}
.admin-form input:hover,
.admin-form select:hover,
.admin-form textarea:hover { border-color:rgba(255,255,255,.12) !important; }
.admin-table-wrap { border:1px solid rgba(255,255,255,.055); border-radius:7px !important; background:rgba(0,0,0,.12); }
.admin-table th { background:rgba(255,255,255,.018); }
.admin-table tbody tr:hover { background:color-mix(in srgb,var(--void-primary) 4%,transparent) !important; }
.admin-overview { gap:9px !important; }
.admin-overview-card { border-radius:8px !important; }
.admin-gate { border-radius:10px !important; box-shadow:var(--r5-shadow); }

@media (max-width: 1080px) {
  .admin-shell { grid-template-columns:1fr !important; }
  .admin-side { position:static !important; min-height:auto !important; }
  .admin-nav { display:flex !important; overflow-x:auto !important; }
  .admin-nav__item { min-width:max-content !important; }
  .admin-grid--editor { grid-template-columns:1fr !important; }
}
@media (max-width: 760px) {
  .brand-wordmark--header .brand-wordmark__void { font-size:21px !important; }
  .brand-wordmark--header .brand-wordmark__haxball,
  .brand-wordmark--header .brand-wordmark__divider { display:none !important; }
  .quick-grid { grid-template-columns:1fr !important; width:calc(100% - 20px) !important; }
  .quick-card { min-height:180px !important; }
  .vip-members__head { align-items:flex-start; flex-direction:column; }
}