/* VOID Revision 8 — performance, compact shortcuts and micro transitions */
:root {
  --r8-card-height: 170px;
  --r8-card-gap: 14px;
}

/* Ağır, tam ekran blur animasyonlarını kaldır. Görünüm korunur, GPU yükü düşer. */
body:not(.admin-body)::after,
.admin-body::after {
  animation: none !important;
  will-change: auto !important;
  transform: none !important;
  filter: blur(72px) saturate(1.02) !important;
  opacity: .16 !important;
}
.page-glow {
  animation: none !important;
  will-change: auto !important;
  filter: blur(96px) !important;
  opacity: .012 !important;
}

/* Ekran altında kalan büyük bölümleri tarayıcı ihtiyaç olana kadar çizmez. */
.main-grid,
.home-news-section,
.live-rooms-section,
.quick-grid,
[data-void-chrome="footer"] {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}
.quick-grid { contain-intrinsic-size: 1px 360px; }

/* Kartlardaki gereksiz pahalı efektleri hafiflet. */
.panel,
.quick-card,
.live-room-card,
.fu-carousel,
.preferences-drawer__panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.quick-card,
.panel {
  box-shadow: 0 12px 34px rgba(0,0,0,.16) !important;
}

/* Dört kısa yol: kesin olarak 2 üst + 2 alt, daha küçük ve eşit. */
.quick-grid {
  display: grid !important;
  width: min(1040px, calc(100% - 32px)) !important;
  max-width: 1040px !important;
  margin: 14px auto 34px !important;
  padding: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, var(--r8-card-height)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: var(--r8-card-height) !important;
  gap: var(--r8-card-gap) !important;
  align-items: stretch !important;
}
.quick-grid > .quick-card {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--r8-card-height) !important;
  min-height: var(--r8-card-height) !important;
  padding: 18px 20px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  contain: layout paint style;
}
.quick-card > div {
  width: 52% !important;
  max-width: 52% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.quick-card h3 {
  margin: 0 0 7px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
.quick-card p {
  min-height: 0 !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}
.quick-card .badge-soon {
  margin-top: 9px !important;
  font-size: 8px !important;
}
.quick-visual-img {
  flex: 0 0 46% !important;
  width: 46% !important;
  max-width: 46% !important;
  height: 132px !important;
  object-fit: cover !important;
  object-position: center right !important;
  opacity: .82 !important;
}
.quick-card > b { right: 13px !important; bottom: 10px !important; }

/* HAXBALL çok az daha tok. */
.brand-wordmark--header .brand-wordmark__haxball {
  font-weight: 850 !important;
  opacity: .97 !important;
  text-shadow: 0 0 .01px currentColor;
}

/* Sayfa geçişi artık sadece kısa bir mikro yumuşama. */
html.void-page-loading::before,
html.void-page-leaving::before {
  background: rgba(2,6,12,.20) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  transition-duration: .09s !important;
}
html.void-page-loading::after,
html.void-page-leaving::after {
  content: "" !important;
  min-width: 0 !important;
  width: 24px !important;
  height: 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--void-primary) !important;
  box-shadow: 0 0 12px color-mix(in srgb,var(--void-primary) 40%,transparent) !important;
  animation: r8-loader .38s ease-in-out infinite alternate !important;
}
@keyframes r8-loader { from { transform: scaleX(.45); opacity:.45; } to { transform:scaleX(1); opacity:.9; } }

/* Sekme arka plandayken görsel hareketleri tamamen durdur. */
html.void-tab-hidden *,
html.void-tab-hidden *::before,
html.void-tab-hidden *::after {
  animation-play-state: paused !important;
}

@media (max-width: 760px) {
  :root { --r8-card-height: 154px; }
  .quick-grid {
    width: min(100% - 22px, 620px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: var(--r8-card-height) !important;
    gap: 10px !important;
  }
  .quick-visual-img { height: 118px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.void-page-loading::after,
  html.void-page-leaving::after { animation: none !important; }
}

/* R9 — Discord rol rengi ekip kartlarında doğrudan kullanılır. */
.staff-card { --staff-role-color:var(--void-primary); }
.staff-card__glow { background:radial-gradient(circle,color-mix(in srgb,var(--staff-role-color) 20%,transparent),transparent 70%) !important; }
.staff-card__avatar { border-color:color-mix(in srgb,var(--staff-role-color) 58%,transparent) !important; box-shadow:0 0 0 1px color-mix(in srgb,var(--staff-role-color) 18%,transparent),0 16px 38px rgba(0,0,0,.28); }
.staff-card__role { color:var(--staff-role-color) !important; }
.staff-filter button.is-active { background:var(--void-primary); color:#031016; }

/* R10 Discord ekip rol rozetleri */
.staff-card__roles{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}.staff-card__roles span{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--staff-role-color) 34%,transparent);border-radius:7px;background:color-mix(in srgb,var(--staff-role-color) 10%,transparent);font-size:11px;font-weight:700;color:var(--text-secondary,#cbd5e1)}

/* R11 Discord ekip rol hiyerarşisi */
.staff-filter button.is-empty{opacity:.48}
.staff-card__roles{justify-content:center}
.staff-card__roles span{white-space:nowrap}

/* R33 — tüm sayfalarda anasayfa ile aynı üst menü ölçeği */
.header-login-btn[data-auth-pending="1"] { display:none !important; }
@media (min-width: 981px) {
  .topbar {
    min-height:64px !important;
    height:64px !important;
    padding:0 18px !important;
    gap:16px !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
  }
  .topbar .logo-wrap {
    min-width:205px !important;
    width:auto !important;
    flex:0 0 auto !important;
  }
  .topbar .nav {
    gap:1px !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .topbar .nav__item {
    min-height:34px !important;
    height:34px !important;
    padding:0 6px !important;
    gap:5px !important;
    font-size:10.8px !important;
    line-height:1 !important;
    border-radius:5px !important;
    white-space:nowrap !important;
  }
  .topbar .nav__icon,
  .topbar .nav__icon img,
  .topbar .nav__icon svg {
    width:16px !important;
    height:16px !important;
    flex:0 0 16px !important;
  }
  .topbar .actions {
    gap:7px !important;
    flex:0 0 auto !important;
    align-items:center !important;
  }
  .profile-page .topbar .nav,
  .teams-page .topbar .nav,
  .team-detail-page .topbar .nav {
    gap:1px !important;
  }
}

/* Ekonomi > Kasalar alt menüsü */
.nav__group {
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.nav__item--parent {
  appearance:none;
  border:0;
  font-family:inherit;
}
.nav__caret {
  display:inline-grid;
  place-items:center;
  width:12px;
  font-size:10px;
  opacity:.62;
  transition:transform .18s ease;
}
.nav__group.is-open .nav__caret { transform:rotate(180deg); }
.nav__submenu {
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-5px);
  width:180px;
  padding:6px;
  border:1px solid color-mix(in srgb,var(--void-primary) 22%,rgba(255,255,255,.08));
  border-radius:7px;
  background:linear-gradient(155deg,rgba(7,15,27,.995),rgba(3,8,15,.995));
  box-shadow:0 18px 48px rgba(0,0,0,.46);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  z-index:10080;
}
.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu,
.nav__group.is-open .nav__submenu {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav__submenu-item {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:0 10px;
  border-radius:5px;
  color:color-mix(in srgb,var(--text) 82%,var(--muted));
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}
.nav__submenu-item:hover,
.nav__submenu-item.is-active {
  color:var(--text);
  background:var(--void-primary-a14);
}
.nav__submenu-item.is-active { box-shadow:inset 2px 0 0 var(--void-primary); }
.nav__submenu-item .nav__icon,
.nav__submenu-item .nav__icon svg,
.nav__submenu-item .nav__icon img { width:16px !important;height:16px !important; }

@media (max-width: 980px) {
  .nav__group { display:block; width:100%; }
  .nav__item--parent { width:100%; }
  .nav__submenu {
    position:static;
    width:100%;
    transform:none !important;
    margin:4px 0 6px;
    display:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
  }
  .nav__group.is-open .nav__submenu { display:block; }
}

/* ================================================================
   R34 — Tek tip üst menü / ekonomi sade alt menü / auth stabilitesi
   ================================================================ */
[data-void-stage-badge], .void-beta-badge { display:none !important; }
.topbar .header-login-btn[hidden] { display:none !important; }
.topbar .nav__caret svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav__group.is-open .nav__caret { transform:rotate(180deg); }

@media (min-width:981px) {
  .topbar {
    width:100% !important;
    min-height:60px !important;
    height:60px !important;
    padding:0 16px !important;
    gap:14px !important;
    border-bottom-color:rgba(255,255,255,.055) !important;
  }
  .topbar .logo-wrap { min-width:190px !important; }
  .brand-wordmark--header .brand-wordmark__void { font-size:21px !important; }
  .brand-wordmark--header .brand-wordmark__haxball { font-size:9px !important; letter-spacing:.19em !important; }
  .topbar .nav {
    display:flex !important;
    gap:2px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-height:60px !important;
  }
  .topbar .nav__item {
    position:relative !important;
    min-height:34px !important;
    height:34px !important;
    padding:0 7px !important;
    gap:5px !important;
    border:0 !important;
    border-radius:5px !important;
    background:transparent !important;
    box-shadow:none !important;
    font-size:10.5px !important;
    font-weight:700 !important;
    color:color-mix(in srgb,var(--text) 72%,var(--muted)) !important;
  }
  .topbar .nav__item:hover { color:var(--text) !important; background:rgba(255,255,255,.025) !important; }
  .topbar .nav__item.is-active,
  .topbar .nav__group.is-active > .nav__item {
    color:var(--text) !important;
    background:transparent !important;
  }
  .topbar .nav__item.is-active::after,
  .topbar .nav__group.is-active > .nav__item::after {
    content:'' !important;
    display:block !important;
    position:absolute !important;
    left:7px !important;
    right:7px !important;
    bottom:-13px !important;
    height:2px !important;
    border-radius:999px !important;
    background:var(--void-primary) !important;
    box-shadow:0 0 10px color-mix(in srgb,var(--void-primary) 30%,transparent) !important;
  }
  .topbar .nav__item--disabled { opacity:.52 !important; }
  .topbar .nav__icon,
  .topbar .nav__icon img,
  .topbar .nav__icon svg { width:15px !important; height:15px !important; flex:0 0 15px !important; }
  .topbar .nav__group { height:34px !important; }
  .topbar .nav__group .nav__item--parent { height:34px !important; }
  .topbar .nav__group .nav__caret { width:12px !important; margin-left:0 !important; opacity:.7 !important; }
  .topbar .actions { min-height:60px !important; gap:6px !important; }
  .topbar .void-header-badge,
  .topbar .header-icon-btn,
  .topbar .v4-auth__bell,
  .topbar .v4-auth__admin { height:34px !important; border-radius:5px !important; }
  .topbar .void-header-badge { padding:0 9px !important; font-size:8px !important; }
  .topbar .header-icon-btn { width:34px !important; min-width:34px !important; }
  .topbar .v4-auth__chip { min-height:36px !important; height:36px !important; border-radius:6px !important; }
  .topbar .v4-auth__avatar-shell { width:26px !important; height:26px !important; }
  .topbar .v4-auth__meta strong { font-size:10px !important; }
  .topbar .v4-auth__meta small { font-size:8px !important; }
  .topbar .header-login-btn { height:36px !important; min-width:84px !important; border-radius:5px !important; font-size:10px !important; }
}

/* Ekonomi: para ikonu / dolu blok yok; yalnızca etiket + aşağı ok. */
.topbar .nav__group:has(.nav__label:first-of-type) > .nav__item--parent { background:transparent !important; }
.topbar .nav__item--parent .nav__label { margin:0; }
.topbar .nav__submenu { width:160px; padding:5px; border-radius:6px; }
.topbar .nav__submenu-item { min-height:34px; border-radius:4px; font-size:10px; }

@media (max-width:980px) {
  .topbar .nav__item { min-height:40px !important; height:40px !important; border-radius:6px !important; }
  .topbar .nav__group { width:100%; }
}

/* R37 — kısa ve hafif sayfa geçişi */
html.void-page-loading::before,
html.void-page-leaving::before{
  background:rgba(2,6,12,.14)!important;
  -webkit-backdrop-filter:blur(1.5px)!important;
  backdrop-filter:blur(1.5px)!important;
  transition:opacity .10s ease!important;
}
html.void-page-loading::after,
html.void-page-leaving::after{
  content:"Yükleniyor"!important;
  width:auto!important;
  height:26px!important;
  min-width:82px!important;
  padding:0 11px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid color-mix(in srgb,var(--void-primary) 28%,rgba(255,255,255,.07))!important;
  border-radius:7px!important;
  background:rgba(5,12,20,.92)!important;
  color:#cbd7e2!important;
  box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
  font:800 9px Manrope,sans-serif!important;
  letter-spacing:.05em!important;
  animation:r37LoaderPulse .55s ease-in-out infinite alternate!important;
}
@keyframes r37LoaderPulse{from{opacity:.55;transform:translateY(1px)}to{opacity:.95;transform:translateY(0)}}

/* R39 — ortak chrome, mikro geçiş ve VOW Studio footer */
@media (min-width:981px){
  .topbar .logo-wrap{min-width:226px!important;margin-right:8px!important}
  .brand-wordmark--header .brand-wordmark__void{font-size:28px!important;letter-spacing:.07em!important}
  .brand-wordmark--header .brand-wordmark__haxball{font-size:12.5px!important;letter-spacing:.25em!important}
  .brand-wordmark--header .brand-wordmark__divider{height:25px!important}
  .topbar .nav{margin-left:8px!important;gap:2px!important}
  .topbar .nav__item{padding-inline:7px!important}
}
.topbar .nav__icon img{
  display:block!important;
  filter:brightness(0) invert(1)!important;
  opacity:.78!important;
  object-fit:contain!important;
}
.topbar .nav__item:hover .nav__icon img,
.topbar .nav__item.is-active .nav__icon img,
.topbar .nav__submenu-item:hover .nav__icon img,
.topbar .nav__submenu-item.is-active .nav__icon img{opacity:1!important}
.topbar .nav__icon--svg svg{fill:none!important;stroke:currentColor!important;color:inherit!important}
.nav__submenu{min-width:188px!important;border-radius:7px!important;background:rgba(5,11,18,.98)!important;box-shadow:0 18px 42px rgba(0,0,0,.34)!important}
.nav__submenu-item{min-height:38px!important;border-radius:5px!important;font-size:10.5px!important}

html.void-page-loading body{opacity:.985;transform:translateY(2px)}
html.void-page-leaving body{opacity:.92;transform:translateY(-2px);transition:opacity .105s ease,transform .105s ease}
html:not(.void-page-loading):not(.void-page-leaving) body{transition:opacity .14s ease,transform .14s ease}
html.void-local-switch .shell > :not(.topbar),
html.void-local-switch .admin-main > :not(.admin-head){animation:void-r39-local-switch .18s ease both}
@keyframes void-r39-local-switch{0%{opacity:.72;transform:translateY(3px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.void-local-switch .shell > :not(.topbar),html.void-local-switch .admin-main > :not(.admin-head){animation:none!important}}

.footer.footer--vow{
  width:100%;
  min-height:132px;
  display:grid!important;
  grid-template-columns:minmax(360px,1.35fr) minmax(310px,.8fr) auto;
  align-items:center!important;
  gap:34px!important;
  margin-top:36px;
  padding:22px 20px 24px!important;
  border-top:1px solid color-mix(in srgb,var(--void-primary) 24%,rgba(255,255,255,.05))!important;
  background:linear-gradient(180deg,rgba(3,8,14,.24),rgba(3,8,14,.72));
  text-align:left!important;
}
.footer-vow__left{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:24px;min-width:0}
.footer-vow__logo{display:flex;align-items:center;justify-content:flex-start;min-width:0}
.footer-vow__logo img{display:block;width:148px;height:auto;max-height:58px;object-fit:contain;filter:none!important}
.footer-vow__legal{max-width:590px!important;margin:0!important;color:color-mix(in srgb,var(--text) 58%,transparent)!important;font-size:10px!important;line-height:1.7!important;letter-spacing:.005em!important}
.footer-vow__nav{display:flex;align-items:center;justify-content:center;gap:0;white-space:nowrap}
.footer-vow__nav a{position:relative;padding:8px 16px;color:color-mix(in srgb,var(--text) 68%,transparent);font-size:10.5px;font-weight:650;text-decoration:none;transition:color .16s ease}
.footer-vow__nav a:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:1px;height:18px;background:rgba(255,255,255,.09);transform:translateY(-50%)}
.footer-vow__nav a:hover{color:var(--void-primary)}
.footer-vow__utility{display:flex;justify-content:flex-end;gap:8px}
.footer-vow__utility a{min-height:38px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid rgba(255,255,255,.075);border-radius:6px;background:rgba(255,255,255,.018);color:#9daab8;text-decoration:none;font-size:9px;font-weight:750;white-space:nowrap;transition:.16s ease}
.footer-vow__utility a b{color:var(--void-primary);font-size:13px}
.footer-vow__utility a:hover{border-color:var(--void-primary-a35);background:var(--void-primary-a08);color:#eef5fb;transform:translateY(-1px)}
@media(max-width:1100px){.footer.footer--vow{grid-template-columns:1fr;gap:18px}.footer-vow__left{grid-template-columns:135px 1fr}.footer-vow__nav{justify-content:flex-start}.footer-vow__utility{justify-content:flex-start}}
@media(max-width:680px){.footer.footer--vow{padding:22px 14px!important}.footer-vow__left{grid-template-columns:1fr;gap:12px}.footer-vow__logo img{width:132px}.footer-vow__nav{flex-wrap:wrap;justify-content:flex-start}.footer-vow__nav a{padding:7px 12px}.footer-vow__utility{flex-wrap:wrap}}

/* R39 — admin menüsü her panel sayfasında son katmanda aynı görünür. */
body.admin-body .admin-shell{grid-template-columns:238px minmax(0,1fr)!important;gap:18px!important;max-width:1560px!important;padding:18px clamp(14px,2.4vw,30px) 46px!important}
body.admin-body .admin-side{position:sticky!important;top:18px!important;max-height:calc(100vh - 36px)!important;min-height:calc(100vh - 36px)!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;gap:14px!important;padding:16px 13px!important;border-radius:9px!important;background:linear-gradient(180deg,rgba(7,14,23,.99),rgba(4,9,15,.99))!important;border:1px solid rgba(255,255,255,.065)!important;box-shadow:0 20px 54px rgba(0,0,0,.18)!important;overflow:hidden!important}
body.admin-body .admin-nav{display:grid!important;align-content:start!important;gap:4px!important;overflow-y:auto!important;min-height:0!important;padding:2px 2px 6px!important}
body.admin-body .admin-nav__item{min-height:40px!important;padding:0 10px!important;border:1px solid transparent!important;border-radius:6px!important;font-size:10.5px!important;font-weight:700!important;gap:9px!important}
body.admin-body .admin-nav__item:hover{border-color:rgba(255,255,255,.055)!important;background:rgba(255,255,255,.025)!important}
body.admin-body .admin-nav__item.is-active{border-color:color-mix(in srgb,var(--void-primary) 18%,rgba(255,255,255,.04))!important;background:color-mix(in srgb,var(--void-primary) 7%,rgba(255,255,255,.012))!important;box-shadow:inset 2px 0 0 var(--void-primary)!important}
body.admin-body .admin-nav__icon{width:29px!important;height:29px!important;display:grid!important;place-items:center!important;border-radius:5px!important;background:rgba(255,255,255,.022)!important;color:#8897a9!important;flex:0 0 29px!important}
body.admin-body .admin-nav__icon svg{width:16px!important;height:16px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.65!important}
body.admin-body .admin-side__foot{display:grid!important;gap:8px!important;padding-top:12px!important;border-top:1px solid rgba(255,255,255,.055)!important}
body.admin-body .admin-main{padding:0!important;gap:14px!important;min-width:0!important;max-width:none!important;width:auto!important;margin:0!important}
body.admin-body .admin-head{padding:6px 0 15px!important;border-bottom:1px solid rgba(255,255,255,.055)!important;align-items:center!important;margin-bottom:0!important}
html.admin-authorized #adminGate,html.admin-authorized #adminGateLogin{display:none!important}
@media(max-width:1080px){body.admin-body .admin-shell{grid-template-columns:1fr!important}body.admin-body .admin-side{position:relative!important;top:0!important;min-height:0!important;max-height:none!important;grid-template-rows:auto auto auto!important}body.admin-body .admin-nav{grid-auto-flow:column!important;grid-auto-columns:max-content!important;overflow-x:auto!important;overflow-y:hidden!important}body.admin-body .admin-nav__item{min-width:max-content!important}}

/* R42 — ortak Maç Merkezi/Topluluk dropdown hit-area ve ölçek */
@media(min-width:981px){
  .topbar .nav__group{padding-bottom:8px!important;margin-bottom:-8px!important}
  .topbar .nav__submenu{top:calc(100% + 2px)!important;width:205px!important;min-width:205px!important}
  .topbar .nav__item--parent{min-width:max-content!important}
}