/* ============================================================
   DerinGames — Neon katmani
   home.css'ten SONRA yuklenir ve uzerine biner.
   Logo kurallari (.logo, .logoIcon, .logoName, .logoAccent,
   .logoSlogan) bilerek disarida birakilmistir.
   ============================================================ */

:root{
  --neon-cyan:#00e5ff;
  --neon-magenta:#ff3df0;
  --neon-gold:#ffb300;
  --neon-green:#39ff9e;
  --neon-line:rgba(255,255,255,0.10);
  --neon-panel:rgba(10,12,30,0.72);
  --neon-panel-solid:#0a0c1e;

  /* Tema rengi — vitrinden degistirilir (progress.js :root uzerine yazar) */
  --neon-accent:#00e5ff;
  --neon-accent-rgb:0,229,255;
  --neon-accent-ink:#03141b;
  --neon-accent-hi:#4df0ff;
}

/* ── PERFORMANS ──
   Kaydirma takilmasinin kaynaklari olculerek bulundu ve giderildi.
   Hicbiri gorunumu degistirmiyor (header blur yaricapi haric). */

/* 18 oyun kartindaki backdrop-filter tamamen israfti: kart kendi
   stacking context'ini olusturuyor (position:relative + z-index:1),
   kart gorseli ise z-index:-2 ile kart arka planinin UZERINE cizilip
   karti tamamen kapliyor. Bulaniklastirilan katman hic gorunmuyordu:
   sifir gorsel fayda, her kaydirma karesinde 18 kez yeniden
   bulaniklastirma maliyeti. */
.card{backdrop-filter:none;-webkit-backdrop-filter:none}

/* Sonsuz gradient animasyonu background-position'i oynatiyordu.
   Bu ozellik GPU'da compose EDILEMEZ; her karede tum ekran yeniden
   boyaniyordu ve sayfa acik oldugu surece hic durmuyordu.
   Gradient duruyor, yalnizca 18 saniyelik yavas kaymasi kalkti. */
.bg{animation:none}

/* Tam ekran blur katmani. Altindaki radial-gradient'ler zaten yumusak
   gecisli, ustune blur olculebilir maliyet disinda bir sey katmiyor. */
.bgGlow{filter:none}

/* Sticky header her kaydirma karesinde arkasindaki yeni icerigi
   yeniden ornekliyor. Cam efekti korunur, yaricap yariya iner. */
.header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ── Logo olcusu ──
   Kullanici istegiyle masaustunde iki kademe buyutuldu. Renk, degrade
   ve bicim home.css'teki haliyle korunur; yalnizca olcu degisir.
   Mobilde eski olcude birakildi: header'da 22px'lik bos alan var,
   buyutulurse dil/menu dugmeleriyle cakisiyor. */
.logoIcon svg{width:40px;height:40px}
.logoName{font-size:21px}
.logoSlogan{font-size:12px}
@media (max-width:640px){
  .logoIcon svg{width:32px;height:32px}
  .logoName{font-size:17px}
  .logoSlogan{font-size:10px}
}

/* ── HUD: artik header'in icinde, ayri serit degil ── */
.headerLeft{
  display:flex;align-items:center;gap:14px;min-width:0;
}
.headerHud{
  display:flex;align-items:center;gap:8px;
}

/* Nav'daki ikon butonlari (vitrin / gorevler) */
.navIconBtn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  /* Cerceve olcusu sabit (width/height + flex-shrink:0); buyuyen
     yalnizca simgenin puntosu. overflow:hidden KULLANMA — bildirim
     noktasi kutunun disinda duruyor, kirpilir. */
  width:38px;height:36px;padding:0;flex-shrink:0;
  background:var(--neon-panel);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  font-size:22px;line-height:1;cursor:pointer;
  font-family:inherit;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.navIconBtn:hover{
  border-color:rgba(var(--neon-accent-rgb),0.6);
  box-shadow:0 0 14px rgba(var(--neon-accent-rgb),0.3);
}
#hudShopBtn{border-color:rgba(255,179,0,0.4)}
#hudShopBtn:hover{border-color:rgba(255,179,0,0.85);box-shadow:0 0 16px rgba(255,179,0,0.4)}
#hudTaskBtn{border-color:rgba(255,61,240,0.4)}
#hudTaskBtn:hover{border-color:rgba(255,61,240,0.85);box-shadow:0 0 16px rgba(255,61,240,0.4)}
.navIconBtn .hudDot{
  position:absolute;top:-3px;right:-3px;
  width:9px;height:9px;border:2px solid #04080f;
}
.hudChip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:999px;
  background:var(--neon-panel);
  border:1px solid rgba(255,255,255,0.12);
  font-size:12.5px;font-weight:700;color:rgba(232,244,255,0.9);
  /* backdrop-filter YOK: cipler zaten header'in blur'u uzerinde
     duruyor, ikinci kat gorunmuyor ama sticky katmanda her kaydirma
     karesinde yeniden hesaplaniyordu. */
  white-space:nowrap;
}
.hudChipCoin{
  border-color:rgba(255,179,0,0.55);
  box-shadow:0 0 12px rgba(255,179,0,0.22);
  color:#ffd66b;
}
.hudChipCoin .hudIcon{
  width:20px;height:20px;border-radius:50%;
  background:#2a1c04;border:1px solid var(--neon-gold);
  display:grid;place-items:center;font-size:11px;
}
.hudChipLevel{
  border-color:rgba(var(--neon-accent-rgb),0.5);
  box-shadow:0 0 12px rgba(var(--neon-accent-rgb),0.18);
}
.hudLevelText{color:var(--neon-accent-hi)}
.hudXpTrack{
  width:66px;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.08);
}
.hudXpFill{
  display:block;height:100%;width:0%;
  background:var(--neon-accent);
  box-shadow:0 0 8px rgba(var(--neon-accent-rgb),0.9);
  transition:width .5s cubic-bezier(.25,.8,.25,1);
}
.hudXpLabel{font-size:11px;color:rgba(232,244,255,0.55);font-weight:600}
.navIconBtn.hasClaim{
  border-color:rgba(57,255,158,0.75)!important;
  box-shadow:0 0 16px rgba(57,255,158,0.45)!important;
}
.hudDot{
  width:7px;height:7px;border-radius:50%;background:var(--neon-green);
  box-shadow:0 0 8px var(--neon-green);
}

/* Dar masaustunde once XP sayisi, sonra bar birakilir.
   1080 altinda takma adin metni de gizlenir (👤 ikonu kalir, dugme
   hala tiklanabilir); yoksa ad dugmesi HUD ciplerinin uzerine biniyor. */
@media (max-width:1080px){
  .hudXpLabel{display:none}
  #header-nickname{padding:8px 10px!important}
  #header-nickname span{display:none}
}
@media (max-width:900px){
  .hudXpTrack{display:none}
  .headerLeft{gap:10px}
}
/* Mobil menuye gecis esigi 640 -> 820.
   HUD header'a tasinip logo buyuyunce 640-820 arasi sikisiyordu:
   takma ad dugmesi logonun uzerine biniyordu. Bu araliкta da nav
   yerine hamburger gosterilir; nav ogeleri (vitrin/gorev dahil)
   mobil cekmecede zaten var. */
@media (max-width:820px){
  .nav{display:none}
  .mobileActions{display:flex;align-items:center;gap:12px}
  .mobileActions .lang-switcher{margin:0}
  .mobileMenuBtn{display:flex}
}
@media (max-width:640px){
  .headerLeft{gap:9px}
  .headerHud{gap:6px}
  .hudChip{padding:4px 9px;font-size:11.5px;gap:5px}
  .hudChipLevel{display:none}
}

/* ── Gunun oyunu vitrini ── */
.dayHero{
  position:relative;overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,61,240,0.55);
  box-shadow:0 0 26px rgba(255,61,240,0.25), 0 14px 34px rgba(0,0,0,0.5);
  /* Metin'in istegiyle kucultuldu: vitrin sayfanin ustunde daha az
     yer kaplasin, oyun izgarasi yukari gelsin. */
  min-height:158px;
  display:flex;flex-direction:column;justify-content:flex-end;
  margin:4px 0 14px;
}
.dayHeroImg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  transition:transform .6s cubic-bezier(.25,.8,.25,1);
}
.dayHero:hover .dayHeroImg{transform:scale(1.04)}
.dayHeroOverlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(4,5,13,0.94) 0%, rgba(4,5,13,0.72) 38%, rgba(4,5,13,0.18) 70%, transparent 100%);
}
.dayHeroContent{
  position:relative;z-index:2;
  padding:12px 16px 13px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.dayHeroBadge{
  display:inline-flex;align-items:center;gap:6px;
  /* 10px + 2px harf araligi okunmuyordu; punto buyudu, aralik daraldi. */
  font-size:13px;font-weight:800;letter-spacing:1.1px;
  padding:5px 14px;border-radius:999px;
  background:rgba(42,10,38,0.9);
  border:1px solid var(--neon-magenta);
  color:#ff8df5;
  box-shadow:0 0 12px rgba(255,61,240,0.5);
  text-transform:uppercase;
}
.dayHeroTitle{
  font-family:'Space Grotesk',sans-serif;
  font-size:21px;font-weight:700;color:#fff;
  text-shadow:0 0 14px rgba(255,61,240,0.45), 0 2px 6px rgba(0,0,0,0.7);
}
.dayHeroText{
  max-width:640px;
  font-size:12.5px;line-height:1.5;color:rgba(232,244,255,0.82);
  text-shadow:0 1px 4px rgba(0,0,0,0.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dayHeroActions{display:flex;gap:8px;margin-top:3px}
.dayHeroPlay{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;padding:8px 26px;border-radius:10px;
  font-weight:800;font-size:13.5px;
  background:var(--neon-magenta);color:#20031d;
  border:1px solid var(--neon-magenta);
  box-shadow:0 0 18px rgba(255,61,240,0.6);
  transition:background .2s,box-shadow .25s,transform .15s;
}
.dayHeroPlay:hover{
  background:#ff6ff5;
  box-shadow:0 0 28px rgba(255,61,240,0.85);
  transform:translateY(-1px);
}
.dayHeroInfo{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;padding:8px 16px;border-radius:10px;
  font-weight:800;font-size:12.5px;
  background:rgba(4,5,13,0.55);color:rgba(232,244,255,0.85);
  border:1px solid rgba(255,255,255,0.22);
  transition:background .2s,border-color .2s;
}
.dayHeroInfo:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.4)}
@media (max-width:720px){
  .dayHero{min-height:146px}
  .dayHeroTitle{font-size:18px}
  .dayHeroText{-webkit-line-clamp:2;font-size:12px}
  .dayHeroBadge{font-size:12px;letter-spacing:.9px}
}

/* ── Depolama uyarisi ── */
.storageNote{
  display:flex;align-items:flex-start;gap:10px;
  margin:4px 0 18px;padding:11px 14px;
  border-radius:12px;
  background:rgba(255,179,0,0.06);
  border:1px solid rgba(255,179,0,0.28);
  color:rgba(232,244,255,0.78);
  font-size:12.5px;line-height:1.55;
}
.storageNote .noteIcon{color:var(--neon-gold);flex-shrink:0;font-size:14px;line-height:1.4}
.storageNote a{color:#ffd66b;text-decoration:underline;text-underline-offset:2px}

/* ── Gorev paneli ── */
.taskOverlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(2,4,10,0.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:18px;
}
.taskOverlay.open{display:flex}
.taskPanel{
  width:min(430px,100%);max-height:88vh;overflow-y:auto;
  background:var(--neon-panel-solid);
  border:1px solid rgba(0,229,255,0.35);
  box-shadow:0 0 40px rgba(0,229,255,0.16), 0 24px 60px rgba(0,0,0,0.6);
  border-radius:16px;
}
.taskHead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;top:0;background:var(--neon-panel-solid);border-radius:16px 16px 0 0;
}
.taskHeadTitle{
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:#eafcff;
}
.taskClose{
  background:none;border:1px solid rgba(255,255,255,0.14);color:rgba(232,244,255,0.7);
  width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;
  display:grid;place-items:center;transition:all .2s;
}
.taskClose:hover{border-color:rgba(255,255,255,0.3);color:#fff}
.taskGroup{padding:13px 16px 4px}
.taskGroupHead{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;
}
.taskGroupTitle{font-size:11px;letter-spacing:2px;font-weight:800}
.taskGroupTitle.daily{color:#8ff6ff}
.taskGroupTitle.weekly{color:#ff8df5}
.taskTimer{font-size:11px;color:rgba(232,244,255,0.45);font-weight:600}
.taskItem{
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:11px;padding:11px 13px;margin-bottom:8px;
}
.taskItem.weekly{border-color:rgba(255,61,240,0.22);background:rgba(255,61,240,0.05)}
.taskItem.done{opacity:.55}
.taskItemTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.taskName{font-size:13px;color:rgba(232,244,255,0.92);font-weight:600;line-height:1.35}
.taskItem.done .taskName{text-decoration:line-through;color:rgba(232,244,255,0.5)}
.taskReward{font-size:12px;font-weight:800;color:#ffd66b;white-space:nowrap}
.taskProgRow{display:flex;align-items:center;gap:8px;margin-top:9px}
.taskTrack{
  flex:1;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,0.5);
}
.taskFill{display:block;height:100%;width:0%;transition:width .45s ease}
.taskFill.daily{background:var(--neon-cyan);box-shadow:0 0 7px rgba(0,229,255,0.85)}
.taskFill.weekly{background:var(--neon-magenta);box-shadow:0 0 7px rgba(255,61,240,0.85)}
.taskFill.full{background:var(--neon-green);box-shadow:0 0 7px rgba(57,255,158,0.85)}
.taskCount{font-size:11px;font-weight:700;color:rgba(232,244,255,0.6);min-width:30px;text-align:right}
.taskClaim{
  background:var(--neon-green);color:#032a1c;
  border:none;border-radius:999px;padding:3px 13px;
  font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 0 12px rgba(57,255,158,0.6);
  transition:transform .15s,box-shadow .25s;
}
.taskClaim:hover{transform:scale(1.05);box-shadow:0 0 18px rgba(57,255,158,0.85)}
.taskClaimed{font-size:11px;font-weight:700;color:rgba(57,255,158,0.75);white-space:nowrap}
.taskLevelBox{
  margin:12px 16px 16px;padding:11px 13px;border-radius:11px;
  background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.08);
}
.taskLevelTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.taskLevelLabel{font-size:11px;letter-spacing:1px;color:rgba(232,244,255,0.55);font-weight:700}
.taskLevelXp{font-size:11px;color:#8ff6ff;font-weight:700}
.taskLevelTrack{display:block;height:6px;border-radius:999px;overflow:hidden;background:rgba(0,0,0,0.6)}
.taskLevelFill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));
  box-shadow:0 0 9px rgba(0,229,255,0.55);
  transition:width .5s ease;
}
.taskFootNote{
  margin:0 16px 15px;padding:10px 12px;border-radius:10px;
  background:rgba(255,179,0,0.06);border:1px solid rgba(255,179,0,0.25);
  font-size:11.5px;line-height:1.55;color:rgba(232,244,255,0.7);
}
.taskFootNote strong{color:#ffd66b}

/* Tema degisiminde gecisler kapatilir: Chrome, transition'a dahil bir
   background-color'i custom property degisiminde yeniden hesaplamiyor
   (Oyna butonu ve menu CTA'si eski temada takili kaliyordu). */
body.temaDegisiyor, body.temaDegisiyor *{
  transition:none!important;
  animation-duration:0s!important;
}

/* ── Kozmetik vitrin ── */
.hudShopBtn{
  cursor:pointer;font-family:inherit;
  border-color:rgba(255,179,0,0.5);
  box-shadow:0 0 12px rgba(255,179,0,0.2);
  color:#ffd66b;
  transition:box-shadow .25s,border-color .25s;
}
.hudShopBtn:hover{
  border-color:rgba(255,179,0,0.85);
  box-shadow:0 0 18px rgba(255,179,0,0.45);
}
.shopPanel{border-color:rgba(255,179,0,0.35);box-shadow:0 0 40px rgba(255,179,0,0.14), 0 24px 60px rgba(0,0,0,0.6)}
.shopBalance{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:999px;
  background:rgba(255,179,0,0.1);border:1px solid rgba(255,179,0,0.45);
  color:#ffd66b;font-size:12.5px;font-weight:800;
}
.shopGroup{padding:13px 16px 4px}
.shopGroupTitle{
  font-size:11px;letter-spacing:2px;font-weight:800;color:#8ff6ff;margin-bottom:4px;
}
.shopGroupDesc{font-size:11.5px;color:rgba(232,244,255,0.5);margin-bottom:10px;line-height:1.45}
.shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.shopItem{
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:11px;padding:9px;
  display:flex;flex-direction:column;gap:7px;align-items:stretch;
  transition:border-color .2s;
}
.shopItem:hover{border-color:rgba(255,255,255,0.2)}
.shopItem.takili{border-color:var(--neon-green);box-shadow:0 0 12px rgba(57,255,158,0.28)}
.shopSwatch{
  height:34px;border-radius:8px;
  display:grid;place-items:center;
  font-size:17px;line-height:1;
  border:1px solid rgba(255,255,255,0.14);
}
.shopName{font-size:11.5px;font-weight:700;color:rgba(232,244,255,0.9);text-align:center;line-height:1.3}
.shopBtn{
  border:none;border-radius:8px;padding:6px 0;
  font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;
  transition:filter .2s,transform .15s;
}
.shopBtn:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.shopBtn.satinAl{background:var(--neon-gold);color:#2e1c00;box-shadow:0 0 10px rgba(255,179,0,0.45)}
.shopBtn.tak{background:rgba(255,255,255,0.1);color:rgba(232,244,255,0.9);border:1px solid rgba(255,255,255,0.2)}
.shopBtn.takiliBtn{background:rgba(57,255,158,0.16);color:#a8ffd6;border:1px solid rgba(57,255,158,0.5);cursor:default}
.shopBtn:disabled{background:rgba(255,255,255,0.05);color:rgba(232,244,255,0.3);cursor:not-allowed;box-shadow:none}
.shopFootNote{
  margin:6px 16px 15px;padding:10px 12px;border-radius:10px;
  background:rgba(255,179,0,0.06);border:1px solid rgba(255,179,0,0.25);
  font-size:11.5px;line-height:1.55;color:rgba(232,244,255,0.7);
}
.shopFootNote strong{color:#ffd66b}

/* Takma ad kozmetikleri */
.nickGlowCyan{color:#8ff6ff!important;text-shadow:0 0 10px rgba(0,229,255,0.85)}
.nickGlowMagenta{color:#ff8df5!important;text-shadow:0 0 10px rgba(255,61,240,0.85)}
.nickGlowGold{color:#ffd66b!important;text-shadow:0 0 10px rgba(255,179,0,0.85)}
.nickGlowGreen{color:#a8ffd6!important;text-shadow:0 0 10px rgba(57,255,158,0.85)}
.nickGlowRainbow{
  background:linear-gradient(90deg,#00e5ff,#39ff9e,#ffb300,#ff3df0,#00e5ff);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important;
  animation:nickAkis 6s linear infinite;
}
@keyframes nickAkis{0%{background-position:0% 50%}100%{background-position:300% 50%}}

@media (prefers-reduced-motion:reduce){
  .nickGlowRainbow{animation:none}
}

/* ── Coin kazanma bildirimi ── */
.coinToast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  z-index:9999;pointer-events:none;opacity:0;
  display:flex;align-items:center;gap:9px;
  padding:10px 18px;border-radius:999px;
  background:var(--neon-panel-solid);
  border:1px solid rgba(255,179,0,0.6);
  box-shadow:0 0 24px rgba(255,179,0,0.35);
  color:#ffd66b;font-size:13.5px;font-weight:800;
  transition:opacity .3s,transform .3s;
}
.coinToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Kategori butonlari ── */
.filterBtn{
  border:1px solid rgba(255,255,255,0.12)!important;
  background:var(--neon-panel)!important;
  color:rgba(232,244,255,0.8)!important;
  transition:border-color .25s,box-shadow .25s,color .25s!important;
}
.filterBtn:hover{
  border-color:rgba(var(--neon-accent-rgb),0.55)!important;
  box-shadow:0 0 14px rgba(var(--neon-accent-rgb),0.25)!important;
  color:#eafcff!important;
}
.filterBtn.active{
  background:var(--neon-accent)!important;
  border-color:var(--neon-accent)!important;
  color:var(--neon-accent-ink)!important;
  box-shadow:0 0 18px rgba(var(--neon-accent-rgb),0.6)!important;
}

/* ── Kartlar ── */
.card{
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 14px 34px rgba(0,0,0,0.5);
  min-height:405px;
  padding:20px;
}
.cardTitle{margin-top:14px}
.card:hover{
  border-color:rgba(var(--neon-accent-rgb),0.6);
  box-shadow:0 0 26px rgba(var(--neon-accent-rgb),0.28), 0 24px 56px rgba(0,0,0,0.55);
}
.cardFeatured{
  border-color:rgba(255,61,240,0.5);
  box-shadow:0 0 22px rgba(255,61,240,0.22), 0 14px 34px rgba(0,0,0,0.5);
}
.cardFeatured:hover{
  border-color:rgba(255,61,240,0.8);
  box-shadow:0 0 32px rgba(255,61,240,0.4), 0 24px 56px rgba(0,0,0,0.55);
}
.cardFeaturedBadge{
  background:rgba(42,10,38,0.9);
  border:1px solid var(--neon-magenta);
  color:#ff8df5;
  box-shadow:0 0 12px rgba(255,61,240,0.5);
}

/* Oyna — sayfadaki tek parlayan aksiyon.
   background kisayolu yerine longhand: home.css ayni elemente gradient
   veriyor ve kisayol kullanildiginda Chrome tema degisiminde rengi
   yeniden hesaplamiyor (buton eski temada kaliyordu). */
.cardBtn.playBtn{
  background-image:none;
  background-color:var(--neon-accent);
  color:var(--neon-accent-ink);
  border:1px solid var(--neon-accent);
  box-shadow:0 0 16px rgba(var(--neon-accent-rgb),0.5);
  text-shadow:none;
}
.cardBtn.playBtn:hover{
  filter:none;
  background-color:var(--neon-accent-hi);
  box-shadow:0 0 26px rgba(var(--neon-accent-rgb),0.8);
}
.cardBtn.btnAccent.playBtn{
  background-image:none;
  background-color:var(--neon-magenta);
  border-color:var(--neon-magenta);
  color:#20031d;
  box-shadow:0 0 16px rgba(255,61,240,0.5);
}
.cardBtn.btnAccent.playBtn:hover{
  background-color:#ff6ff5;
  box-shadow:0 0 26px rgba(255,61,240,0.8);
}

/* Kupa — altin cerceve */
.cardBtn.leaderboardBtn{
  background:rgba(255,179,0,0.08);
  border:1px solid rgba(255,179,0,0.5);
  box-shadow:0 0 10px rgba(255,179,0,0.2);
}
.cardBtn.leaderboardBtn:hover{
  background:rgba(255,179,0,0.16);
  box-shadow:0 0 18px rgba(255,179,0,0.45);
}

/* Bilgi — sessiz ikincil */
.cardBtn.infoBtn{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:none;
}
.cardBtn.infoBtn:hover{
  background:rgba(255,255,255,0.11);
  border-color:rgba(255,255,255,0.28);
  box-shadow:none;
}

/* Kart uzeri kisisel rekor seridi */
.cardRecord{
  display:flex;align-items:center;gap:8px;margin-top:2px;
}
.cardRecordTrack{
  flex:1;height:4px;border-radius:999px;overflow:hidden;
  background:rgba(0,0,0,0.55);
}
.cardRecordFill{
  display:block;height:100%;
  background:var(--neon-gold);
  box-shadow:0 0 7px rgba(255,179,0,0.85);
}
.cardRecordText{
  font-size:10.5px;font-weight:700;color:#ffd66b;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}
.cardRecordText.empty{color:rgba(232,244,255,0.4)}

/* ── Footer: Hizli Oyna listesi ──
   18 oyun tek sutunda footer'i asiri uzatiyordu; iki sutuna bolunur.
   Sutun genisligi de artirilir, yoksa isimler sikisir. */
.footerGrid{grid-template-columns:1.6fr 1fr 1.9fr 1.2fr}
.footerGames{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 16px;
  align-content:start;
}
.footerGames .footerLinksTitle{grid-column:1/-1;margin-bottom:0}
@media (max-width:980px){
  .footerGrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .footerGrid{grid-template-columns:1fr}
  .footerGames{gap:8px 12px}
}

/* ── Istatistik kutulari ── */
.metaItem{
  background:var(--neon-panel);
  border:1px solid rgba(255,255,255,0.1);
}
.metaItem:hover{border-color:rgba(0,229,255,0.45);box-shadow:0 0 14px rgba(0,229,255,0.15)}
.metaValue{color:#eafcff}

/* ── Ust menu CTA ── */
.navCta{
  background-image:none!important;
  background-color:var(--neon-accent)!important;
  color:var(--neon-accent-ink)!important;
  border:1px solid var(--neon-accent)!important;
  box-shadow:0 0 14px rgba(var(--neon-accent-rgb),0.45)!important;
}
.navCta:hover{
  background-color:var(--neon-accent-hi)!important;
  color:var(--neon-accent-ink)!important;
  box-shadow:0 0 22px rgba(var(--neon-accent-rgb),0.7)!important;
}

@media (prefers-reduced-motion:reduce){
  .hudXpFill,.taskFill,.taskLevelFill,.coinToast{transition:none}
}