/*
 * NEXUS PREMIUM — prestige layer
 * ------------------------------------------------------------------
 * NEXUS V3 (nexus-v3.css) + hub (nexus-hub.css) üzerine oturan,
 * hiçbir markup değiştirmeden bütün ürünü "zirve/premium" seviyeye
 * çıkaran ek katman. Yalnızca görsel + mikro-etkileşim; yapı bozulmaz.
 * prefers-reduced-motion ve klavye erişilebilirliği tam desteklenir.
 * ================================================================== */

:root {
  /* Prestij gölge yığını — çok katmanlı, gerçek derinlik */
  --pr-shadow-1: 0 1px 0 rgba(255,255,255,.05) inset;
  --pr-shadow-2:
      0 2px 4px rgba(0,0,0,.32),
      0 8px 18px -6px rgba(0,0,0,.55),
      0 28px 64px -28px rgba(0,0,0,.85);
  --pr-shadow-hot:
      0 1px 0 rgba(255,255,255,.08) inset,
      0 10px 30px -12px rgba(37,99,235,.55),
      0 30px 80px -34px rgba(56,189,248,.45);
  --pr-ring: 0 0 0 2px rgba(2,6,15,.9), 0 0 0 4px rgba(56,189,248,.65), 0 0 22px -4px rgba(56,189,248,.8);
  --pr-spring: cubic-bezier(.34,1.56,.64,1);
  --pr-ease: cubic-bezier(.22,1,.36,1);
  --pr-gold: linear-gradient(135deg,#fde68a,#f6b93b 46%,#c99a2e);
}

/* ---------- Tipografi cilası: OpenType + rakam hizası ---------- */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
}
.font-mono, [class*="font-mono"], .cd-num, .px-stat .v, .stat-card .text-3xl,
input[type="number"], .nx-figure, td.font-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -.01em;
}
h1, h2, .font-display { letter-spacing: -.025em; }

/* Rakam vurgusu — KPI/bakiye için premium degrade metin (opsiyonel sınıf) */
.nx-figure {
  background: linear-gradient(180deg,#ffffff 0%,#cfe4ff 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 18px rgba(56,189,248,.14);
}

/* ---------- Metin seçimi ---------- */
::selection { background: rgba(56,189,248,.28); color: #eaf6ff; }

/* ---------- Klavye erişimi: premium focus halkası (a11y) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--pr-ring);
  border-radius: 12px;
  position: relative; z-index: 2;
}

/* ---------- Premium kaydırma çubuğu ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(56,189,248,.55), rgba(139,92,246,.55));
  border: 2px solid rgba(2,6,15,.9);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#38bdf8,#8b5cf6); background-clip: padding-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(99,130,180,.5) transparent; }

/* ---------- Yüzey yükseltmesi: gerçek cam + spekular parıltı ---------- */
.bg-card, .glass-card, .stat-card, .px-stat, .u-card, .ea-stat,
.game-card, .og-card, .act-card, .aktif-panel {
  box-shadow: var(--pr-shadow-1), var(--pr-shadow-2) !important;
  transition: transform .38s var(--pr-ease), box-shadow .38s var(--pr-ease), border-color .38s var(--pr-ease) !important;
}
/* İnce üst kenar ışığı (specular).
   NOT: .px-stat/.stat-card/.ea-stat kendi ::before'unu sol aksan çubuğu için
   kullanıyor — onlara dokunmuyoruz (highlight'i ::after ile veriyoruz). */
.bg-card, .u-card, .game-card, .og-card { position: relative; }
.bg-card::before, .u-card::before, .game-card::before, .og-card::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: .6; pointer-events: none;
}
/* Stat kutularında sol aksan çubuğunu bozmadan üst ışığı ::after ile ekle */
.px-stat, .stat-card, .ea-stat { position: relative; }
.px-stat::after, .stat-card::after, .ea-stat::after {
  content: ""; position: absolute; left: 14%; right: 8%; top: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: .5; pointer-events: none;
}
.bg-card:hover, .glass-card:hover, .stat-card:hover, .px-stat:hover, .u-card:hover, .ea-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--pr-shadow-1), var(--pr-shadow-hot) !important;
}

/* ---------- Butonlar: fizik + parlaklık ---------- */
.btn-primary, .btn-secondary, .btn-success, .nx-hero-cta, .px-btn, .cmp-btn, .act-btn {
  transition: transform .22s var(--pr-spring), filter .22s var(--pr-ease), box-shadow .22s var(--pr-ease) !important;
  will-change: transform;
}
.btn-primary:active, .btn-secondary:active, .btn-success:active,
.nx-hero-cta:active, .px-btn:active, .cmp-btn:active, .act-btn:active {
  transform: translateY(1px) scale(.975) !important;
}
/* Tıklama dalgası (JS ile enjekte edilir) */
.nx-ripple-host { position: relative; overflow: hidden; }
.nx-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  pointer-events: none; z-index: 5; animation: nxRipple .62s var(--pr-ease) forwards;
}
@keyframes nxRipple { to { transform: scale(2.6); opacity: 0; } }

/* Manyetik CTA — transform JS'ten gelir, geçiş CSS'ten */
.nx-mag { transition: transform .28s var(--pr-spring); }

/* ---------- Girişler: premium odak ---------- */
.input-dark, .inp, input, select, textarea {
  transition: border-color .25s var(--pr-ease), box-shadow .25s var(--pr-ease), background .25s var(--pr-ease);
}
.input-dark:focus, .inp:focus,
input:focus:not([type="checkbox"]):not([type="radio"]), select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(56,189,248,.14), 0 0 24px -10px rgba(56,189,248,.7), inset 0 2px 4px rgba(0,0,0,.3) !important;
}

/* ---------- Rozet cilası ---------- */
.badge, .badge-tenant, .hub-nav-badge {
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- Skeleton shimmer (yükleme için opsiyonel) ---------- */
.nx-skeleton {
  position: relative; overflow: hidden;
  background: rgba(148,163,184,.08); border-radius: 12px;
}
.nx-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%); animation: nxShimmer 1.35s infinite;
}
@keyframes nxShimmer { to { transform: translateX(100%); } }

/* ---------- Sayfa yüklenme sinematiği ---------- */
body { opacity: 0; transition: opacity .5s var(--pr-ease); }
body.nx-ready, body.nx-premium-in { opacity: 1; }

/* ================================================================
 * KOMUT PALETİ (⌘K / Ctrl+K) — premium hızlı gezinme
 * ================================================================ */
.nxcmd-backdrop {
  position: fixed; inset: 0; z-index: 100000; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(2,5,12,.6); backdrop-filter: blur(10px) saturate(120%);
  padding: clamp(60px,12vh,150px) 16px 16px;
}
.nxcmd-backdrop.open { display: flex; animation: nxcmdFade .2s ease both; }
@keyframes nxcmdFade { from { opacity: 0; } }
.nxcmd-panel {
  width: min(620px, 100%);
  border-radius: 22px; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(16,25,46,.98), rgba(6,11,23,.99)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(56,189,248,.12), rgba(139,92,246,.1)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.95), 0 0 60px -30px rgba(56,189,248,.5);
  animation: nxcmdPop .34s var(--pr-spring) both;
}
@keyframes nxcmdPop { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.nxcmd-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(148,163,184,.12); }
.nxcmd-search i { color: #7dd3fc; font-size: 15px; }
.nxcmd-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #eaf1fb; font: 600 15px/1 var(--font-sans, sans-serif); letter-spacing: -.01em;
}
.nxcmd-search kbd {
  font: 700 10px/1 var(--font-mono, monospace); color: #93a4be;
  background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.18);
  border-radius: 6px; padding: 4px 7px;
}
.nxcmd-list { max-height: min(52vh, 440px); overflow-y: auto; padding: 8px; }
.nxcmd-empty { padding: 34px 18px; text-align: center; color: #64748b; font-size: 13px; font-weight: 600; }
.nxcmd-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; border-radius: 13px; cursor: pointer;
  color: #cbd7e6; text-align: left; border: 1px solid transparent; transition: .16s var(--pr-ease);
}
.nxcmd-item .ic {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
  background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.16); color: #7dd3fc; font-size: 14px;
}
.nxcmd-item .tx { flex: 1; min-width: 0; }
.nxcmd-item .tx b { display: block; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
.nxcmd-item .tx span { display: block; color: #64748b; font-size: 11px; font-weight: 600; margin-top: 1px; }
.nxcmd-item .go { color: #475569; font-size: 12px; opacity: 0; transition: .16s; }
.nxcmd-item.sel, .nxcmd-item:hover {
  background: linear-gradient(90deg, rgba(56,189,248,.12), rgba(139,92,246,.06));
  border-color: rgba(56,189,248,.24); transform: translateX(2px);
}
.nxcmd-item.sel .go { opacity: 1; color: #7dd3fc; }
.nxcmd-hint {
  display: flex; gap: 16px; justify-content: center; padding: 10px;
  border-top: 1px solid rgba(148,163,184,.1); color: #556173; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.nxcmd-hint kbd { font-family: var(--font-mono, monospace); background: rgba(148,163,184,.1); border-radius: 4px; padding: 2px 5px; margin: 0 2px; }

/* Küçük ekranda ⌘K ipucu gizli */
@media (max-width: 640px) { .nxcmd-hint { display: none; } }

/* ---------- Reduced motion: tüm süsleri sabitle ---------- */
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1 !important; }
  .nx-ripple { display: none !important; }
  .bg-card:hover, .stat-card:hover, .px-stat:hover, .u-card:hover, .ea-stat:hover { transform: none; }
  .nxcmd-panel, .nxcmd-backdrop.open { animation: none; }
  .nx-skeleton::after { animation: none; }
}

/* ================================================================
 * ANA SAYFA — ÇARPICI PREMIUM YENİDEN TASARIM
 * nexus-hub.css üzerine biner (en son yüklenir + !important).
 * ================================================================ */

/* --- HERO: canlı aurora + neon çerçeve + dev degrade başlık --- */
.hub-hero{
  min-height:auto!important;
  padding:clamp(1.5rem,3vw,2.6rem)!important;
  border:1px solid rgba(56,189,248,.18)!important;
  border-radius:30px!important;
  background:
    radial-gradient(680px circle at 18% 18%, rgba(56,189,248,.20), transparent 46%),
    radial-gradient(620px circle at 92% 12%, rgba(139,92,246,.20), transparent 44%),
    radial-gradient(700px circle at 78% 108%, rgba(251,146,60,.16), transparent 50%),
    linear-gradient(150deg,#0a1122 0%,#070c1a 52%,#0b0820 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 50px 130px -50px rgba(37,99,235,.75),
    0 0 0 1px rgba(255,255,255,.02)!important;
  overflow:hidden!important;
}
.hub-hero::before{
  content:""!important;position:absolute!important;inset:-40%!important;z-index:0!important;
  background:conic-gradient(from 120deg at 70% 40%, transparent 0 58%, rgba(56,189,248,.18) 66%, rgba(139,92,246,.12) 72%, transparent 82%)!important;
  animation:hubAurora 16s linear infinite!important;opacity:.9!important;
}
@keyframes hubAurora{to{transform:rotate(360deg)}}
.hub-hero::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;opacity:.5!important;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px)!important;
  background-size:46px 46px!important;
  -webkit-mask-image:radial-gradient(circle at 30% 30%, black, transparent 72%)!important;
  mask-image:radial-gradient(circle at 30% 30%, black, transparent 72%)!important;
}
/* Köşe HUD parantezleri */
.hub-hero-copy::before{
  content:"";position:absolute;left:-6px;top:-6px;width:34px;height:34px;
  border-top:2px solid rgba(56,189,248,.65);border-left:2px solid rgba(56,189,248,.65);border-radius:8px 0 0 0;
  filter:drop-shadow(0 0 8px rgba(56,189,248,.5));
}
.hub-live-tag{
  border:1px solid rgba(52,211,153,.35)!important;
  background:rgba(16,185,129,.1)!important;backdrop-filter:blur(8px)!important;
  box-shadow:0 0 26px -8px rgba(52,211,153,.6)!important;
}
.hub-hero h1{
  margin-top:.85rem!important;
  font-size:clamp(1.85rem,3.6vw,3.1rem)!important;line-height:1.04!important;letter-spacing:-.045em!important;
  text-shadow:0 4px 40px rgba(37,99,235,.35)!important;
}
.hub-hero h1 span{
  background:linear-gradient(100deg,#ffffff 0%,#7dd3fc 26%,#a78bfa 58%,#fb923c 100%)!important;
  background-size:220% auto!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  animation:hubText 6s ease-in-out infinite alternate!important;
  filter:drop-shadow(0 0 26px rgba(125,211,252,.28))!important;
}
@keyframes hubText{to{background-position:100% center}}

/* CTA: neon primary + parlama süpürmesi */
.hub-primary{
  position:relative!important;overflow:hidden!important;isolation:isolate!important;
  min-height:3.35rem!important;padding:0 1.5rem!important;font-size:.76rem!important;letter-spacing:.06em!important;
  background:linear-gradient(135deg,#a5f3fc,#38bdf8 46%,#6366f1)!important;color:#03111b!important;
  box-shadow:0 18px 44px -16px rgba(56,189,248,.95), inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.hub-primary::after{
  content:"";position:absolute;inset:-100% -30%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-120%) rotate(18deg);transition:transform .7s var(--pr-ease);
}
.hub-primary:hover::after{transform:translateX(220%) rotate(18deg)}
.hub-primary:hover{transform:translateY(-4px) scale(1.015)!important;box-shadow:0 26px 60px -18px rgba(56,189,248,1)!important}
.hub-secondary{
  min-height:3.35rem!important;padding:0 1.4rem!important;
  border:1px solid transparent!important;
  background:
    linear-gradient(#0b1120,#0b1120) padding-box,
    linear-gradient(135deg,rgba(167,139,250,.6),rgba(56,189,248,.35)) border-box!important;
  color:#e8eefc!important;
}
.hub-secondary:hover{transform:translateY(-4px)!important;box-shadow:0 20px 44px -22px rgba(167,139,250,.8)!important}

/* --- HIZLI İŞLEM KARTLARI: degrade üst şerit + neon hover --- */
.hub-quick{
  position:relative!important;overflow:hidden!important;
  border:1px solid rgba(148,163,184,.14)!important;border-radius:20px!important;
  background:linear-gradient(160deg,rgba(19,27,47,.92),rgba(8,13,26,.96))!important;
  padding:1rem 1rem .95rem!important;
  transition:transform .32s var(--pr-spring),box-shadow .32s var(--pr-ease),border-color .32s!important;
}
.hub-quick::before{
  content:""!important;position:absolute!important;left:0;right:0;top:0;height:3px!important;z-index:2;
  background:linear-gradient(90deg,var(--quick,#38bdf8),transparent 85%)!important;
  opacity:.9;
}
.hub-quick:hover{
  transform:translateY(-6px)!important;
  border-color:color-mix(in srgb,var(--quick,#38bdf8) 45%,transparent)!important;
  box-shadow:0 26px 60px -30px var(--quick,#38bdf8), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.hub-quick-icon{
  width:50px!important;height:50px!important;border-radius:15px!important;font-size:1.1rem!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--quick,#38bdf8) 22%,transparent),transparent)!important;
  border:1px solid color-mix(in srgb,var(--quick,#38bdf8) 40%,transparent)!important;
  box-shadow:0 0 24px -8px var(--quick,#38bdf8)!important;
  transition:transform .3s var(--pr-spring)!important;
}
.hub-quick:hover .hub-quick-icon{transform:scale(1.12) rotate(-5deg)!important}
.hub-quick strong{font-size:.82rem!important;letter-spacing:-.01em!important}
.hub-quick>i:last-child{transition:transform .3s var(--pr-ease)!important}
.hub-quick:hover>i:last-child{transform:translateX(5px)!important;color:var(--quick,#38bdf8)!important}

/* --- BÖLÜM BAŞLIKLARI: degrade kicker + daha iri h2 --- */
.hub-section-kicker{
  font-size:.6rem!important;letter-spacing:.18em!important;
  background:linear-gradient(90deg,#7dd3fc,#a78bfa)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.hub-section-head h2{font-size:clamp(1.2rem,2.2vw,1.7rem)!important;letter-spacing:-.03em!important}
.hub-section-head h2::after{
  content:"";display:block;width:52px;height:3px;margin-top:.5rem;border-radius:3px;
  background:linear-gradient(90deg,#38bdf8,#a78bfa);box-shadow:0 0 14px rgba(56,189,248,.6);
}

/* --- KARTLAR: premium cam + renk parıltısı --- */
.hub-sponsor-card, .hub-product, .hub-event-panel, .hub-market-intro, .hub-community-main, .hub-games-mini{
  border-radius:22px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -34px rgba(0,0,0,.9)!important;
  transition:transform .34s var(--pr-ease),box-shadow .34s var(--pr-ease),border-color .34s!important;
}
.hub-sponsor-card:hover, .hub-product:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 30px 70px -34px var(--sp,#38bdf8), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.hub-event-panel:hover{transform:translateY(-4px)!important;box-shadow:0 30px 70px -34px rgba(56,189,248,.5)!important}
.hub-sponsor-go, .hub-event-link, .hub-section-link{transition:.25s var(--pr-ease)!important}
.hub-sponsor-card:hover .hub-sponsor-go{transform:translateX(4px)}
.hub-section-link:hover{transform:translateX(3px);color:#7dd3fc!important}

/* --- Ödül marketi vitrin başlığı degrade --- */
.hub-market-intro h3, .hub-community-main h3, .hub-games-mini h3{letter-spacing:-.02em!important}

@media (prefers-reduced-motion: reduce){
  .hub-hero::before{animation:none!important}
  .hub-hero h1 span{animation:none!important}
  .hub-quick:hover,.hub-sponsor-card:hover,.hub-product:hover,.hub-event-panel:hover,.hub-primary:hover,.hub-secondary:hover{transform:none!important}
}

/* ================================================================
 * SON KAZANÇLAR ŞERİDİ (kayan)
 * ================================================================ */
.hub-ticker{
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.1rem;padding:.5rem .55rem .5rem .85rem;
  border-radius:16px;overflow:hidden;position:relative;
  border:1px solid rgba(56,189,248,.16);
  background:linear-gradient(90deg,rgba(11,17,34,.96),rgba(8,13,26,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 44px -34px rgba(56,189,248,.6);
}
.hub-ticker-label{
  flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .65rem;border-radius:11px;z-index:2;
  background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(251,146,60,.1));
  border:1px solid rgba(251,191,36,.3);color:#fcd34d;
  font-size:.54rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.hub-ticker-view{
  position:relative;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.hub-ticker-track{display:flex;align-items:center;gap:1rem;width:max-content}
.hub-ticker-track.is-loop{animation:hubTicker 42s linear infinite}
.hub-ticker:hover .hub-ticker-track.is-loop{animation-play-state:paused}
@keyframes hubTicker{to{transform:translateX(-50%)}}
.hub-win{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.28rem .7rem .28rem .3rem;
  border-radius:999px;background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.1);
}
.hub-win-av{
  width:26px;height:26px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,#38bdf8,#a78bfa);color:#03111b;font-size:.62rem;font-weight:900;
}
.hub-win-av img{width:100%;height:100%;object-fit:cover}
.hub-win-user{color:#e2e8f0;font-size:.62rem;font-weight:800}
.hub-win-amt{color:#6ee7b7;font-size:.62rem;font-weight:900;font-variant-numeric:tabular-nums}
.hub-win-ctx{color:#64748b;font-size:.54rem;font-weight:700}
.hub-win-ctx::before{content:"·";margin-right:.4rem;color:#475569}
@media(max-width:639px){
  .hub-ticker{gap:.5rem;padding-left:.55rem}
  .hub-ticker-label{font-size:.48rem;padding:.35rem .5rem}
  .hub-win-ctx{display:none}
}
@media (prefers-reduced-motion: reduce){.hub-ticker-track.is-loop{animation:none!important}}

/* ---------- Etkinlik geri sayımı ---------- */
.hub-cd{color:#7dd3fc!important;border-color:rgba(56,189,248,.28)!important;background:rgba(56,189,248,.07)!important}
.hub-cd.is-ended{color:#fb7185!important;border-color:rgba(251,113,133,.3)!important;background:rgba(251,113,133,.08)!important}

/* ---------- Popüler oyunlar — görselli slot kartları ---------- */
.hub-games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.hub-game{
  --g:#38bdf8;position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(16,25,46,.92),rgba(7,12,23,.96));border:1px solid rgba(148,163,184,.13);
  transition:transform .32s var(--pr-spring),box-shadow .32s var(--pr-ease),border-color .32s;
}
.hub-game::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:linear-gradient(90deg,var(--g),transparent 82%);opacity:.9}
.hub-game-art{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#05060d}
.hub-game-art img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--pr-ease)}
.hub-game-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,12,23,.92),rgba(7,12,23,.15) 55%,transparent)}
.hub-game-body{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .8rem .8rem;margin-top:-1.4rem;z-index:2}
.hub-game-name{display:flex;flex-direction:column;min-width:0}
.hub-game-name strong{color:#fff;font-size:.8rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-game-name small{color:#93a4be;font-size:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-top:.22rem}
.hub-game-play{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:color-mix(in srgb,var(--g) 20%,transparent);border:1px solid color-mix(in srgb,var(--g) 42%,transparent);
  color:var(--g);box-shadow:0 0 22px -8px var(--g);transition:transform .3s var(--pr-spring),background .3s,color .3s;
}
.hub-game-play svg{width:14px;height:14px;margin-left:1px}
.hub-game:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--g) 45%,transparent);box-shadow:0 28px 62px -32px var(--g),inset 0 1px 0 rgba(255,255,255,.06)}
.hub-game:hover .hub-game-art img{transform:scale(1.07)}
.hub-game:hover .hub-game-play{transform:scale(1.12);background:var(--g);color:#03111b;border-color:transparent}
@media(max-width:1023px){.hub-games-grid{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion: reduce){.hub-game:hover{transform:none}.hub-game:hover .hub-game-art img{transform:none}.hub-game:hover .hub-game-play{transform:none}}

/* ---------- Sidebar sosyal kartları (Telegram / Sohbet) ---------- */
.hub-community-box{padding:.6rem!important;display:flex;flex-direction:column;gap:.5rem}
.nx-social{
  position:relative;display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:14px;overflow:hidden;
  border:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(8,13,26,.94));
  transition:transform .25s var(--pr-ease),border-color .25s,box-shadow .25s;
}
.nx-social::after{content:"";position:absolute;width:82px;height:82px;right:-40px;top:-30px;border-radius:50%;filter:blur(30px);opacity:.32;transition:.3s}
.nx-social-tg::after{background:#0ea5e9}
.nx-social-chat::after{background:#10b981}
.nx-social-tg:hover{transform:translateY(-2px);border-color:rgba(14,165,233,.45);box-shadow:0 16px 32px -20px rgba(14,165,233,.9)}
.nx-social-chat:hover{transform:translateY(-2px);border-color:rgba(16,185,129,.45);box-shadow:0 16px 32px -20px rgba(16,185,129,.9)}
.nx-social-tg:hover::after,.nx-social-chat:hover::after{opacity:.5;transform:scale(1.2)}
.nx-social-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;color:#fff;font-size:.92rem;position:relative;z-index:1}
.nx-social-tg .nx-social-ic{background:linear-gradient(135deg,#38bdf8,#0284c7);box-shadow:0 6px 16px -6px rgba(14,165,233,.9)}
.nx-social-chat .nx-social-ic{background:linear-gradient(135deg,#34d399,#059669);box-shadow:0 6px 16px -6px rgba(16,185,129,.9)}
.nx-social-tx{flex:1;min-width:0;line-height:1.15;position:relative;z-index:1}
.nx-social-tx strong{display:block;color:#fff;font-size:.72rem;font-weight:800}
.nx-social-tx span{display:block;font-size:.46rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:.14rem}
.nx-social-tg .nx-social-tx span{color:#7dd3fc}
.nx-social-chat .nx-social-tx span{color:#6ee7b7}
.nx-social-go{color:#475569;font-size:.6rem;position:relative;z-index:1;transition:.25s}
.nx-social:hover .nx-social-go{transform:translate(2px,-2px)}
.nx-social-tg:hover .nx-social-go{color:#7dd3fc}
.nx-social-chat:hover .nx-social-go{color:#6ee7b7}

/* Hızlı erişim butonlarındaki SVG çizimler — tam ortalı */
.hub-quick-icon{display:grid!important;place-items:center!important;padding:0!important}
.hub-quick-icon svg{width:23px;height:23px;display:block;margin:auto}
.hub-quick-icon i{font-size:1.1rem}

/* ================================================================
 * SOL ÜST LOGO ALANI — glow + gradient çerçeve + alt başlık
 * ================================================================ */
aside#mainSidebar>a:first-child{
  height:auto!important;min-height:84px!important;padding-top:.7rem!important;padding-bottom:.7rem!important;
  position:relative;
}
aside#mainSidebar>a:first-child::after{
  content:"";position:absolute;left:1.4rem;right:1.4rem;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.4),rgba(139,92,246,.35),transparent);
}
aside#mainSidebar>a:first-child .rgb-ring{
  box-shadow:0 0 22px -4px rgba(139,92,246,.6),0 0 34px -12px rgba(56,189,248,.55);
  border-radius:9999px;
}
.nx-brand-sub{
  display:block;margin-top:.2rem;text-align:center;
  color:#5b6b86;font-size:.46rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}