/* Defuse Craft — HUD.  Referans 1920x1080 (ekran goruntuleri); --o olcek,
   --fp yazi pikseli (BlokFont 11 px = 1 piksel, keskinlik icin tam/yarim). */
:root { --o: 1; --fp: 2; --d: 1; --kt: #8fbaf0; --t: #efc56a;
  /* --yk: en kucuk yazi boyu.  Arayuz 1920x1080'e gore --o ile kuculuyor; kucuk
     ekranda 5.5 px tabanli yazilar 5-7 px'e iniyordu (okunmuyordu). */
  --yk: 10px;
  /* guvenli alan (iPhone centigi / ev cubugu): viewport-fit=cover ile kenar
     ogeleri centigin altina kaciyordu */
  --gl: env(safe-area-inset-left, 0px); --gr: env(safe-area-inset-right, 0px);
  --gu: env(safe-area-inset-top, 0px); --ga: env(safe-area-inset-bottom, 0px); }
body.dokunmatik { --yk: 11px; }
* { box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Sayfa HIC kaymaz / esnemez: body sabit, tasma gizli, iOS lastik bant yok. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #000;
  font-family: BlokFont, monospace; color: #fff; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }
body { position: fixed; inset: 0; }
button { touch-action: manipulation; }
/* YAZI ALANI (oyuncu adi): iOS'ta user-select:none olan giris kutusuna imlec
   konmuyor, kopyala / yapistir calismiyordu. */
input[type=text], textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* iOS 16 px altindaki giris kutusuna odaklaninca sayfayi buyutuyor (geri donmuyor) */
body.dokunmatik input[type=text] { font-size: max(16px, calc(var(--fp) * 11px)) !important; }
#sahne { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
img, canvas.px { image-rendering: pixelated; image-rendering: crisp-edges; }
/* iPad / iOS: resim ve tuval surukle-birak ile tutulup "Kopyala / Kaydet" balonu acmasin */
img, canvas { -webkit-user-drag: none; user-drag: none; }
.gizli { display: none !important; }
.gl { text-shadow: calc(var(--fp) * 1px) calc(var(--fp) * 1px) 0 rgba(0,0,0,.55); }

/* HUD dokunmatik dugmelerin (20) USTUNDE cizilir ama tiklamayi gecirir
   (pointer-events: none): TAB ile acilan skor tablosu dugmelerin altinda kaliyordu. */
#hud { position: fixed; inset: 0; z-index: 21; pointer-events: none; font-size: calc(var(--fp) * 11px); line-height: 1.15; }
#hud .yazi-k { font-size: calc(var(--fp) * 11px); }
#hud .yazi-o { font-size: calc(var(--fp) * 16.5px); }
#hud .yazi-b { font-size: calc(var(--fp) * 27.5px); }

/* ── ust bar ── */
#ust { position: absolute; top: var(--gu); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--o) * 8px); align-items: flex-start; }
.kafalar { display: flex; gap: calc(var(--o) * 6px); padding-top: calc(var(--o) * 5px); }
.kafa { width: calc(var(--o) * 42px); position: relative; }
.kafa .yuz { width: calc(var(--o) * 42px); height: calc(var(--o) * 42px); border: calc(var(--o) * 3px) solid #999; display: block; background: #222; }
.kafa .yuz.olu { filter: saturate(.2); }
.kafa .cubuk { height: calc(var(--o) * 3px); margin-top: calc(var(--o) * 4px); background: rgba(255,255,255,.18); }
.kafa .cubuk i { display: block; height: 100%; background: #fff; }
.kafa .cubuk.dusuk i { background: #ff4a4a; }
.kafa .ks { font-size: max(var(--yk), calc(var(--fp) * 5.5px)); text-align: center; color: #fff; margin-top: calc(var(--o) * 2px); min-height: calc(var(--o) * 10px); }
#ust .orta { display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 3px); }
#ust .sure { background: rgba(28,40,66,.72); min-width: calc(var(--o) * 120px); height: calc(var(--o) * 44px); display: flex; align-items: center; justify-content: center; font-size: calc(var(--fp) * 16.5px); }
#ust .sure.kirmizi { color: #ff4a4a; }
#ust .sure img { height: calc(var(--o) * 26px); }
#ust .skorlar { display: flex; gap: calc(var(--o) * 3px); }
#ust .skorlar b { background: rgba(28,40,66,.62); width: calc(var(--o) * 58px); height: calc(var(--o) * 40px); display: flex; align-items: center; justify-content: center; font-size: calc(var(--fp) * 16.5px); font-weight: normal; }
#ust .skorlar .kt { color: var(--kt); } #ust .skorlar .t { color: var(--t); }
#ust .hayatta { display: flex; gap: calc(var(--o) * 30px); font-size: max(var(--yk), calc(var(--fp) * 5.5px)); color: #cfd6e0; }

/* ── radar ── */
#radar-kutu { position: absolute; left: calc(var(--o) * 36px + var(--gl)); top: calc(var(--o) * 36px + var(--gu)); width: calc(var(--o) * 288px); height: calc(var(--o) * 288px); }
#radar-kutu canvas { width: 100%; height: 100%; }
#radar-kutu.buyuk { width: calc(var(--o) * 300px); height: calc(var(--o) * 300px); left: calc(var(--o) * 30px + var(--gl)); top: calc(var(--o) * 30px + var(--gu)); }

/* ── akis ── */
#akis { position: absolute; right: calc(var(--o) * 30px + var(--gr)); top: calc(var(--o) * 64px + var(--gu)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--o) * 6px); }
#akis .satir { background: rgba(20,24,30,.62); border-radius: calc(var(--o) * 4px); padding: calc(var(--o) * 4px) calc(var(--o) * 10px); display: flex; align-items: center; gap: calc(var(--o) * 8px); font-size: calc(var(--fp) * 11px); border: calc(var(--o) * 2px) solid transparent; }
#akis .satir.ben { border-color: #d8343d; }
#akis .satir img, #akis .satir canvas { height: calc(var(--o) * 20px); }
#akis .kt { color: var(--kt); } #akis .t { color: var(--t); }

/* ── sohbet ── */
#sohbet { position: absolute; left: var(--gl); bottom: calc(var(--o) * 88px + var(--ga)); width: calc(var(--o) * 750px); background: rgba(0,0,0,.42); padding: calc(var(--o) * 2px) calc(var(--o) * 6px); display: flex; flex-direction: column; font-size: calc(var(--fp) * 11px); }
#sohbet:empty { display: none; }
#sohbet .s { white-space: nowrap; overflow: hidden; }
#sohbet .gri { color: #b8b8b8; } #sohbet .yesil { color: #6dff6d; } #sohbet .kt { color: var(--kt); } #sohbet .t { color: var(--t); }

/* ── alt ── */
#para { position: absolute; left: calc(var(--o) * 34px + var(--gl)); bottom: calc(var(--o) * 26px + var(--ga)); display: flex; align-items: center; gap: calc(var(--o) * 8px); font-size: calc(var(--fp) * 27.5px / 1.25); }
#para img { height: calc(var(--o) * 34px); }
/* can / cephane EKRAN ORTASINA gore (1920'de eski yerleri).  Soldan sabit uzaklik
   genis ekranda (telefon 19.5:9) cephaneyi amblemin ustune bindiriyordu. */
#can-kutu { position: absolute; left: calc(50% - var(--o) * 382px); bottom: calc(var(--o) * 16px + var(--ga)); display: flex; align-items: flex-end; gap: calc(var(--o) * 18px); }
#yelek { position: relative; width: calc(var(--o) * 48px); height: calc(var(--o) * 56px); }
#yelek img { width: 100%; height: 100%; }
#yelek span { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: max(var(--yk), calc(var(--fp) * 5.5px)); }
#can { font-size: calc(var(--fp) * 27.5px / 1.25); position: relative; }
#can i { position: absolute; left: 0; bottom: calc(var(--o) * -9px); height: calc(var(--o) * 5px); background: #fff; }
#can.dusuk { color: #ff5555; } #can.dusuk i { background: #ff5555; }
#amblem-kutu { position: absolute; left: 50%; bottom: calc(var(--o) * 14px + var(--ga)); transform: translateX(-50%); display: flex; align-items: center; }
#amblem-kutu .cizgi { width: calc(var(--o) * 150px); height: calc(var(--o) * 3px); background: linear-gradient(90deg, transparent, rgba(255,255,255,.85)); }
#amblem-kutu .cizgi.sag { background: linear-gradient(270deg, transparent, rgba(255,255,255,.85)); }
#amblem { width: calc(var(--o) * 80px); height: calc(var(--o) * 80px); border: calc(var(--o) * 3px) solid #5b8fd9; padding: calc(var(--o) * 8px); background: rgba(20,30,50,.35); }
#amblem img { width: 100%; height: 100%; }
#izle-kutu { position: absolute; left: 50%; bottom: calc(var(--o) * 14px + var(--ga)); transform: translateX(-50%); border: calc(var(--o) * 3px) solid #e7e24a; background: rgba(0,0,0,.5); display: flex; align-items: center; gap: calc(var(--o) * 14px); padding-right: calc(var(--o) * 18px); min-width: calc(var(--o) * 400px); }
#izle-kutu img { width: calc(var(--o) * 72px); height: calc(var(--o) * 72px); }
#cephane { position: absolute; left: calc(50% + var(--o) * 228px); bottom: calc(var(--o) * 26px + var(--ga)); display: flex; align-items: baseline; gap: calc(var(--o) * 16px); }
#cephane .sar { font-size: calc(var(--fp) * 27.5px / 1.25); }
#cephane .ayrac { width: calc(var(--o) * 4px); height: calc(var(--o) * 40px); background: #fff; align-self: center; }
#cephane .yed { font-size: calc(var(--fp) * 11px); }
#cephane.bos .sar { color: #ff5555; }

#silahlar { position: absolute; right: calc(var(--o) * 36px + var(--gr)); bottom: calc(var(--o) * 28px + var(--ga)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--o) * 14px); }
#silahlar .slot { display: flex; flex-direction: column; align-items: flex-end; opacity: .45; }
#silahlar .slot.secili { opacity: 1; }
#silahlar .slot .ad { font-size: max(var(--yk), calc(var(--fp) * 5.5px)); margin-top: calc(var(--o) * 3px); }
#silahlar .bombalar { display: flex; gap: calc(var(--o) * 14px); }
#silahlar canvas { image-rendering: pixelated; }

/* ── nisangah ── */
#nisangah { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#nisangah i { position: absolute; background: var(--nr, #4dff6a); box-shadow: 0 0 0 1px rgba(0,0,0,.55); }
#nisangah .nokta { width: 2px; height: 2px; left: -1px; top: -1px; }

#vurus-isaret { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#vurus-isaret i { position: absolute; width: 10px; height: 2px; background: #fff; }

/* ── ortalar ── */
#afis { position: absolute; left: 50%; top: calc(var(--o) * 165px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#afis .kutu { width: calc(var(--o) * 465px); height: calc(var(--o) * 104px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--o) * 10px); font-size: calc(var(--fp) * 22px); }
#afis .kutu i { width: 70%; height: calc(var(--o) * 4px); display: block; }
#afis .kutu.won { background: rgba(38,150,118,.78); color: #74f5bd; } #afis .kutu.won i { background: #3fdc9a; }
#afis .kutu.lost { background: rgba(160,26,52,.8); color: #ff5a70; } #afis .kutu.lost i { background: #ff3050; }
#mvp { position: absolute; left: 50%; top: calc(var(--o) * 310px); transform: translateX(-50%); width: calc(var(--o) * 1130px); height: calc(var(--o) * 104px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--o) * 6px); }
#mvp.T { background: linear-gradient(90deg, rgba(220,150,40,.25), rgba(225,152,42,.75) 30%, rgba(225,152,42,.75) 70%, rgba(220,150,40,.25)); }
#mvp.KT { background: linear-gradient(90deg, rgba(60,120,190,.25), rgba(64,128,196,.75) 30%, rgba(64,128,196,.75) 70%, rgba(60,120,190,.25)); }
#mvp b { font-size: calc(var(--fp) * 16.5px); font-weight: normal; }
#yari-afis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--o) * 32px); background: linear-gradient(rgba(255,240,210,.35), rgba(255,240,210,0) 45%); gap: calc(var(--o) * 18px); }
#yari-afis img { width: calc(var(--o) * 80px); height: calc(var(--o) * 80px); border: calc(var(--o) * 4px) solid #fff; padding: calc(var(--o) * 6px); background: rgba(40,40,40,.5); }
#yari-afis b { font-size: calc(var(--fp) * 22px); font-weight: normal; }

#ipucu { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); background: rgba(0,0,0,.5); padding: calc(var(--o) * 6px) calc(var(--o) * 14px); font-size: calc(var(--fp) * 11px); white-space: nowrap; }
#ilerleme { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: calc(var(--o) * 420px); display: flex; flex-direction: column; gap: calc(var(--o) * 6px); align-items: center; }
#ilerleme .bar { width: 100%; height: calc(var(--o) * 14px); background: rgba(0,0,0,.55); border: calc(var(--o) * 2px) solid rgba(255,255,255,.7); }
#ilerleme .bar i { display: block; height: 100%; background: #ffd24a; }
#uyari { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); font-size: calc(var(--fp) * 16.5px); color: #ff5a5a; }
#olum-bilgi { position: absolute; left: 50%; top: 72%; transform: translateX(-50%); background: rgba(0,0,0,.55); padding: calc(var(--o) * 8px) calc(var(--o) * 18px); display: flex; align-items: center; gap: calc(var(--o) * 12px); }

#flas { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#hasar-kirmizi { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 55%, rgba(200,0,0,.45) 100%); }
/* vurulma yonu: nisangah cevresinde donen kirmizi yay */
#hasar-yon { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#hasar-yon i { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none;
  transform-origin: 0 0; }
#hasar-yon i::before { content: ''; position: absolute; left: calc(var(--o) * -70px); top: calc(var(--o) * -160px);
  width: calc(var(--o) * 140px); height: calc(var(--o) * 60px);
  background: radial-gradient(ellipse at 50% 108%, rgba(255,60,50,.98) 20%, rgba(255,40,40,.55) 55%, rgba(255,40,40,0) 78%);
  clip-path: polygon(50% 0, 88% 62%, 100% 100%, 0 100%, 12% 62%);
  filter: drop-shadow(0 0 calc(var(--o) * 4px) rgba(0,0,0,.7)); }
#durbun { position: fixed; inset: 0; pointer-events: none; }

/* ── skor tablosu ── */
#skor-tablo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--o) * 1150px); background: rgba(40,40,40,.9); padding: calc(var(--o) * 14px) calc(var(--o) * 16px) calc(var(--o) * 24px); font-size: calc(var(--fp) * 11px); }
#skor-tablo .ust { display: flex; justify-content: space-between; color: #d0d0d0; margin-bottom: calc(var(--o) * 26px); }
#skor-tablo table { width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--o) * 4px); }
#skor-tablo th { color: #bdbdbd; font-weight: normal; text-align: center; padding-bottom: calc(var(--o) * 6px); }
#skor-tablo td { background: rgba(80,80,80,.55); text-align: center; height: calc(var(--o) * 32px); color: #e8e8e8; }
#skor-tablo td.ad { text-align: left; padding-left: calc(var(--o) * 10px); display: flex; align-items: center; gap: calc(var(--o) * 10px); background: rgba(80,80,80,.55); }
#skor-tablo td.ad img { width: calc(var(--o) * 22px); height: calc(var(--o) * 22px); border: calc(var(--o) * 2px) solid; }
#skor-tablo tr.olu td { color: #8a8a8a; }
#skor-tablo tr.ben td { background: rgba(110,110,110,.7); }
#skor-tablo .takim-skor { width: calc(var(--o) * 90px); vertical-align: top; background: none; }
#skor-tablo .takim-skor b { display: flex; align-items: center; justify-content: center; width: calc(var(--o) * 90px); height: calc(var(--o) * 90px); background: rgba(90,90,90,.8); font-size: calc(var(--fp) * 22px); font-weight: normal; margin-bottom: calc(var(--o) * 14px); }
#skor-tablo .ayrac td { background: none; height: calc(var(--o) * 40px); color: #c8c8c8; }

/* ── menuler (Minecraft dugme dili) ── */
/* KATMAN SIRASI: sahne/HUD < dokunmatik kontroller (20) < satin alma (25-26)
   < duraklat / mac sonu (30) < portre uyarisi (40) < seviye kutlamasi (45)
   < yukleme (50) < reklam (60).  Eskiden duraklat, mac sonu ve satin alma
   dokunmatik katmanin ALTINDA kaliyordu: telefonda dugmelerine basilamiyordu. */
.mc-panel { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: calc(var(--o) * 14px); background: rgba(10,10,14,.55); pointer-events: auto; font-size: calc(var(--fp) * 11px); }
.mc-baslik { font-size: calc(var(--fp) * 11px); margin-bottom: calc(var(--o) * 16px); }
.mc-btn { font-family: BlokFont, monospace; font-size: calc(var(--fp) * 11px); color: #fff; width: calc(var(--o) * 456px); height: calc(var(--o) * 46px); background: #6f6f6f; border: calc(var(--o) * 3px) solid #1c1c1c; box-shadow: inset calc(var(--o) * 3px) calc(var(--o) * 3px) 0 #aaa, inset calc(var(--o) * -3px) calc(var(--o) * -3px) 0 #4a4a4a; text-shadow: calc(var(--fp) * 1px) calc(var(--fp) * 1px) 0 #3a3a3a; cursor: pointer; }
.mc-btn:hover { background: #7f89bf; box-shadow: inset calc(var(--o) * 3px) calc(var(--o) * 3px) 0 #b9c3f4, inset calc(var(--o) * -3px) calc(var(--o) * -3px) 0 #56608c; }
.mc-btn.yarim { width: calc(var(--o) * 222px); }
.mc-btn.pasif { opacity: .5; pointer-events: none; }
.mc-satir { display: flex; gap: calc(var(--o) * 12px); }

/* ── duraklat menusu (ana menuyle ayni piksel dil) ── */
#duraklat { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: calc(8px + var(--gu)) calc(8px + var(--gr)) calc(8px + var(--ga)) calc(8px + var(--gl)); }
#duraklat .kutu { display: flex; flex-direction: column; gap: calc(var(--o) * 12px); margin: auto 0; flex: none;
  padding: calc(var(--o) * 24px) calc(var(--o) * 28px); min-width: min(calc(var(--o) * 620px), 100%); max-width: 100%; }
#duraklat h2 { margin: 0 0 calc(var(--o) * 6px); font-weight: normal; font-size: calc(var(--fp) * 16.5px); letter-spacing: calc(var(--o) * 2px); }
#duraklat .pbtn.buyuk { font-size: calc(var(--fp) * 16.5px); padding: calc(var(--o) * 14px); }
#duraklat .satir { display: flex; align-items: center; gap: calc(var(--o) * 12px); font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); color: #aeb6c2; }
#duraklat .satir > span:first-child { min-width: calc(var(--o) * 190px); max-width: 48%; flex: none; text-align: right; }
#duraklat .satir input[type=range] { flex: 1; accent-color: #efc56a; }
#duraklat .satir .deger { color: var(--t); min-width: calc(var(--o) * 56px); }
#duraklat .ipucu { color: #8e97a5; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); max-width: calc(var(--o) * 620px); line-height: 1.6; }
@media (max-width: 820px), (max-height: 560px) {
  #duraklat .kutu { min-width: 0; width: min(92vw, 640px); padding: 14px; gap: 8px; }
  #duraklat .pbtn.buyuk { padding: 10px; }
  #duraklat .satir > span:first-child { min-width: 30%; flex: none; }
}

/* ── mac sonu ekrani: TEK SUTUN (sonuc, skor, odul, skor tablosu, sayac,
   dugmeler).  Hicbir oge mutlak konumlu degil -> ust uste binme olmaz; kisa
   ekranda panel kayar.  Ilk/son ogenin auto kenar boslugu: sigarsa ortalar,
   sigmazsa ustten baslar (flex "center" ustu kesip kaydirilamaz yapiyordu). */
#son { justify-content: flex-start; gap: calc(var(--o) * 10px); cursor: pointer; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: calc(var(--o) * 24px + var(--gu)) calc(12px + var(--gr)) calc(var(--o) * 20px + var(--ga)) calc(12px + var(--gl)); }
#son > * { flex: none; max-width: 100%; }
#son > :first-child { margin-top: auto; }
#son > :last-child { margin-bottom: auto; }
#son .sonuc { font-size: calc(var(--fp) * 44px); letter-spacing: calc(var(--o) * 6px); line-height: 1; }
#son .skorlar { display: flex; align-items: center; gap: calc(var(--o) * 14px); font-size: calc(var(--fp) * 33px); line-height: 1; }
#son .skorlar b { font-weight: normal; }
#son .skorlar i { color: #9aa3b0; font-style: normal; }
#son .skorlar .t { color: var(--t); } #son .skorlar .kt { color: var(--kt); }
#son .odul { color: #efc56a; font-size: calc(var(--fp) * 11px); text-align: center; }
#son .tablo-yer { width: 100%; display: flex; justify-content: center; }
#son #skor-tablo { position: relative; left: auto; top: auto; transform: none; width: min(calc(var(--o) * 1150px), 100%); }
#son .sayac { color: #cfd6e0; font-size: calc(var(--fp) * 16.5px); text-align: center;
  background: rgba(8,11,17,.75); padding: calc(var(--o) * 8px) calc(var(--o) * 22px); }
#son .sayac span { color: var(--t); font-size: calc(var(--fp) * 27.5px); }
#son .ipucu { color: #8e97a5; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); text-align: center; }
#son .pbtn { min-width: calc(var(--o) * 240px); font-size: calc(var(--fp) * 11px); }
#son .mc-satir { flex-wrap: wrap; justify-content: center; }
/* alt serit (sayac + dugmeler + ipucu): panel kaysa da ekranin altinda sabit kalir */
#son .son-alt { position: sticky; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 10px); }
/* kisa ekran (telefon yatay): basliklar kuculur, dokunma ipucu gizlenir, alt serit tek satir */
@media (max-height: 560px) {
  #son { gap: 6px; padding-bottom: 0; }
  #son .son-alt { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%;
    padding: 6px 8px calc(6px + var(--ga)); background: rgba(8,11,17,.88); }
  #son .pbtn.buyuk { padding: 6px 14px; }
  #son .sonuc { font-size: calc(var(--fp) * 27.5px); }
  #son .skorlar { font-size: calc(var(--fp) * 22px); }
  #son .sayac { font-size: calc(var(--fp) * 11px); padding: 4px 14px; }
  #son .sayac span { font-size: calc(var(--fp) * 16.5px); }
  #son .ipucu { display: none; }
  #son .pbtn { padding: 8px 16px; min-width: 0; }
}

/* ── satin alma ── */
/* ── satin alma (B): piksel butonlu, fare + tus ── */
#satin { z-index: 26; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(var(--o) * 1280px), 96vw);
  max-height: 92vh; overflow: auto; padding: calc(var(--o) * 18px); pointer-events: auto; font-size: calc(var(--fp) * 11px); }
#satin .baslik { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--o) * 14px); margin-bottom: calc(var(--o) * 14px); }
#satin .baslik .para { color: #8fd08a; font-size: calc(var(--fp) * 16.5px); }
#satin .baslik .sure { color: #9aa6b4; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); margin-left: auto; }
#satin .sutunlar { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--o) * 10px); }
/* Sutun basligi TIKLANABILIR: fareyle de sutun secilir (klavye sarti yok). */
#satin .sutun .sbaslik { width: 100%; margin: 0 0 calc(var(--o) * 8px); font-family: inherit; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.6));
  color: #cfd8e3; letter-spacing: calc(var(--o) * 1px); display: flex; align-items: center; gap: calc(var(--o) * 6px);
  background: rgba(255,255,255,.04); border: calc(var(--o) * 2px) solid transparent; cursor: pointer;
  padding: calc(var(--o) * 5px) calc(var(--o) * 6px); text-align: left; }
#satin .sutun .sbaslik:hover { background: rgba(255,255,255,.1); border-color: #6b7686; }
#satin .sutun .sbaslik kbd { background: rgba(0,0,0,.45); border: calc(var(--o) * 2px) solid #4a5260; padding: 0 calc(var(--o) * 5px);
  font-family: inherit; color: var(--t); }
#satin .sutun.aktif .sbaslik { color: var(--t); border-color: var(--t); }
#satin .baslik .hizli { font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); padding: calc(var(--o) * 6px) calc(var(--o) * 10px); }
#satin .baslik .kapat { font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.8)); padding: calc(var(--o) * 4px) calc(var(--o) * 10px); }
/* panel disi: tiklayinca kapanir (fare/dokunmatik) */
#satin-perde { z-index: 25; position: fixed; inset: 0; background: rgba(6,8,12,.45); pointer-events: auto; }
#satin-perde.gizli { display: none !important; }
#satin .urun { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--o) * 4px);
  width: 100%; margin-bottom: calc(var(--o) * 8px); min-height: calc(var(--o) * 104px); position: relative;
  font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); text-align: left; }
#satin .urun { cursor: pointer; }
#satin .urun:hover { filter: brightness(1.3); }
#satin .urun:active { transform: translateY(calc(var(--o) * 1px)); }
#satin .urun.pasif { opacity: .4; cursor: not-allowed; }
#satin .urun.var { outline: calc(var(--o) * 3px) solid #6dff6d; outline-offset: calc(var(--o) * -3px); }
#satin .urun canvas, #satin .urun img { height: auto; max-width: 100%; align-self: center; }
#satin .urun .fiyat { color: #8fd08a; }
#satin .urun kbd { position: absolute; right: calc(var(--o) * 8px); top: calc(var(--o) * 6px); color: #d7dee8;
  font-family: inherit; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.4)); }
#satin .alt { margin-top: calc(var(--o) * 10px); color: #9aa6b4; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); display: flex; justify-content: space-between; }

/* ekranda "B — Satin Al" dugmesi (fare/dokunmatik icin de tiklanir) */
#satin-ipucu { position: fixed; left: 50%; bottom: calc(var(--d) * 150px); transform: translateX(-50%); pointer-events: auto;
  font-size: calc(var(--fp) * 11px); display: flex; align-items: center; gap: calc(var(--o) * 8px); }
#satin-ipucu.gizli { display: none !important; }

@media (max-width: 820px) {
  #satin .sutunlar { grid-template-columns: repeat(3, 1fr); }
  #satin .urun { min-height: calc(var(--o) * 84px); }
  #satin .baslik { flex-wrap: wrap; gap: calc(var(--o) * 8px); }
  #satin .baslik .hizli, #satin .baslik .kapat { padding: calc(var(--o) * 8px) calc(var(--o) * 12px); }
}

/* ── ana menu ── */
/* ══ ANA MENU (CS semasi + piksel arayuz) ══════════════════════════
   Sol: ikon USTTE, adi ALTTA dikey sekmeler.  Sag ust: profil karti
   (rutbe rozeti + seviye + istatistik + kazanim).  Sag alt: BASLAT.
   Magaza kartlari NADIRLIK rengine gore (--nr degiskeni). */
#menu { position: fixed; inset: 0; pointer-events: auto; font-size: calc(var(--fp) * 11px);
  display: flex; flex-direction: column; background: linear-gradient(rgba(6,9,14,.5), rgba(6,9,14,.12) 30%, rgba(6,9,14,.72)); }

#menu > .ust { display: flex; align-items: flex-start; gap: calc(var(--o) * 10px); padding: calc(var(--o) * 14px) calc(var(--o) * 22px);
  background: linear-gradient(rgba(8,11,17,.92), rgba(8,11,17,.35)); }
#menu .marka { display: flex; align-items: center; gap: calc(var(--o) * 10px); padding-top: calc(var(--o) * 8px); }
#menu .marka i { width: calc(var(--o) * 7px); height: calc(var(--o) * 30px); background: var(--t); display: block; }
#menu .marka b { font-weight: normal; font-size: calc(var(--fp) * 16.5px); color: #f3e1a8; letter-spacing: calc(var(--o) * 2px); }

/* sag ust profil karti */
/* DIKKAT: `border` kisayolu border-image'i de sifirlar (ppanel dokusu gider,
   dugme tarayicinin beyaz zeminine duser).  Yalniz border-style. */
#menu .kart { margin-left: auto; display: flex; gap: calc(var(--o) * 14px); align-items: center; cursor: pointer;
  padding: calc(var(--o) * 12px) calc(var(--o) * 16px); border-style: none; background: none; font-family: inherit; color: #fff; text-align: left; }
#menu .kart:hover { filter: brightness(1.15); }
/* seviye rozeti: yazi KUTUYA gore (iki haneli seviye 44 px kutuya 41 px yaziyla
   sigmiyor, dar ekranda karttan soldan kesiliyordu) */
#menu .rozet { --rb: max(calc(var(--o) * 66px), 40px); width: var(--rb); height: var(--rb); border: max(2px, calc(var(--o) * 4px)) solid var(--t);
  display: flex; align-items: center; justify-content: center; font-size: min(calc(var(--fp) * 27.5px), calc(var(--rb) * .55));
  background: rgba(0,0,0,.45); flex: none; overflow: hidden; line-height: 1; }
#menu .rozet.buyuk { --rb: max(calc(var(--o) * 92px), 52px); }
#menu .kart .bilgi { display: flex; flex-direction: column; gap: calc(var(--o) * 4px); min-width: calc(var(--o) * 330px); }
#menu .kart .satirbir { display: flex; align-items: baseline; gap: calc(var(--o) * 12px); }
#menu .kart .ad { font-size: calc(var(--fp) * 16.5px); }
#menu .kart .kredi { margin-left: auto; color: var(--t); }
#menu .kart .rutbe { font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); }
#menu .cipler { display: flex; gap: calc(var(--o) * 6px); flex-wrap: wrap; margin-top: calc(var(--o) * 4px); }
#menu .cip { background: rgba(255,255,255,.07); padding: calc(var(--o) * 3px) calc(var(--o) * 8px);
  font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); color: #9aa3b0; }
#menu .cip b { color: #fff; font-weight: normal; }
#menu .xp { height: calc(var(--o) * 10px); background: rgba(0,0,0,.55); border: calc(var(--o) * 2px) solid rgba(255,255,255,.18); }
#menu .xp i { display: block; height: 100%; background: linear-gradient(#efc56a, #b98c2c); }
#menu .xp.genis { width: calc(var(--o) * 420px); height: calc(var(--o) * 14px); }
#menu .xpy { font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.4)); color: #9aa3b0; margin-top: calc(var(--o) * 5px); }

/* govde: sol dikey sekme + icerik */
#menu .govde { flex: 1; display: flex; gap: calc(var(--o) * 16px); padding: calc(var(--o) * 16px) calc(var(--o) * 22px); overflow: hidden; }
#menu .yan { display: flex; flex-direction: column; gap: calc(var(--o) * 10px); width: max(calc(var(--o) * 150px), 84px); flex: none; }
#menu .yanSekme .et { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
#menu .yanSekme { display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 6px);
  padding: calc(var(--o) * 12px) calc(var(--o) * 6px); font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); letter-spacing: calc(var(--o) * 1px); position: relative; }
#menu .yanSekme .im { display: flex; width: calc(var(--o) * 60px); height: calc(var(--o) * 60px); align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); border: calc(var(--o) * 2px) solid rgba(255,255,255,.12); }
#menu .yanSekme .im canvas { width: calc(var(--o) * 46px); height: calc(var(--o) * 46px); }
#menu .yanSekme:hover .im { border-color: rgba(255,255,255,.35); }
#menu .yanSekme.basili::before { content: ''; position: absolute; left: calc(var(--o) * -6px); top: calc(var(--o) * 8px);
  bottom: calc(var(--o) * 8px); width: calc(var(--o) * 6px); background: var(--t); }
#menu .icerik { flex: 1; display: flex; overflow: hidden; }

/* sayfa paneli */
#menu .sayfa { flex: 1; padding: calc(var(--o) * 16px); display: flex; flex-direction: column; gap: calc(var(--o) * 10px); overflow: hidden; }
#menu .sbaslik { display: flex; align-items: center; gap: calc(var(--o) * 14px); }
#menu .sbaslik h2 { margin: 0; font-weight: normal; font-size: calc(var(--fp) * 16.5px); letter-spacing: calc(var(--o) * 2px); }
#menu .sbaslik .kredi { color: var(--t); }
#menu .sbaslik .kapat { margin-left: auto; padding: calc(var(--o) * 8px) calc(var(--o) * 14px); }
#menu .ikili { flex: 1; display: flex; gap: calc(var(--o) * 16px); overflow: hidden; }
#menu .bolum { flex: 1; display: flex; flex-direction: column; gap: calc(var(--o) * 8px); overflow-y: auto; }
#menu .bolum.liste { flex: none; width: calc(var(--o) * 430px); }
#menu .etiket { color: #8e97a5; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); letter-spacing: calc(var(--o) * 1px); }
#menu .veri { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--o) * 10px);
  padding: calc(var(--o) * 6px) calc(var(--o) * 4px); border-bottom: calc(var(--o) * 2px) solid rgba(255,255,255,.07);
  font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); color: #aeb6c2; }
#menu .veri b { color: #fff; font-weight: normal; }
#menu .satir { display: flex; align-items: center; gap: calc(var(--o) * 10px); font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); color: #aeb6c2; }
/* etiket en az bu kadar (satirlar hizali), uzun dilde (RU tek uzun kelime) icerik kadar genisler */
#menu .satir > span:first-child { min-width: max(calc(var(--o) * 150px), 96px); max-width: 48%; flex: none; text-align: right; }
#menu .satir .deger { color: var(--t); }
#menu .sec-grup { display: flex; gap: calc(var(--o) * 6px); flex-wrap: wrap; }
#menu .sec-grup .pbtn, #menu .suzgec .pbtn { padding: calc(var(--o) * 6px) calc(var(--o) * 12px); font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.4)); }
#menu .pgiris { background: rgba(0,0,0,.5); border: calc(var(--o) * 2px) solid #4a5260; color: #fff; font-family: inherit;
  font-size: calc(var(--fp) * 11px); padding: calc(var(--o) * 8px) calc(var(--o) * 10px); width: calc(var(--o) * 300px); }
#menu input[type=range] { width: calc(var(--o) * 240px); accent-color: #efc56a; }

/* silah seridi + suzgec */
#menu .silahSerit { display: flex; gap: calc(var(--o) * 4px); flex-wrap: wrap; }
#menu .seritBtn { background: rgba(255,255,255,.05); border: calc(var(--o) * 2px) solid transparent; cursor: pointer;
  padding: calc(var(--o) * 4px) calc(var(--o) * 6px); display: flex; align-items: center; }
#menu .seritBtn canvas { height: calc(var(--o) * 18px); }
#menu .seritBtn:hover { background: rgba(255,255,255,.12); }
#menu .seritBtn.aktif { border-color: var(--t); background: rgba(239,197,106,.15); }
#menu .suzgec { display: flex; gap: calc(var(--o) * 5px); flex-wrap: wrap; }

/* kaplama izgarasi (magaza / envanter) */
#menu .izgara { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(96px, calc(var(--o) * 210px)), 1fr));
  gap: calc(var(--o) * 10px); overflow-y: auto; overflow-x: hidden; align-content: start; padding-right: calc(var(--o) * 4px); }
#menu .deriKart { min-width: 0; }
#menu .deriKart .ad, #menu .deriKart .alt { overflow-wrap: anywhere; }
#menu .deriKart { position: relative; display: flex; flex-direction: column; gap: calc(var(--o) * 4px); cursor: pointer;
  padding: calc(var(--o) * 10px); border: calc(var(--o) * 3px) solid var(--nr); font-family: inherit; color: #fff; text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--nr) 32%, #10141c), #10141c 70%); }
#menu .deriKart::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--o) * 5px); background: var(--nr); }
#menu .deriKart:hover { filter: brightness(1.2); }
#menu .deriKart.aktif { outline: calc(var(--o) * 3px) solid #fff; outline-offset: calc(var(--o) * -3px); }
/* onizleme resmi kartin kendi kutusunda kalir: dar ekranda tam genislige
   buyuyup alttaki ada / komsu kartlara tasiyordu */
#menu .deriKart .on { display: flex; align-items: center; justify-content: center; height: max(44px, calc(var(--o) * 64px)); overflow: hidden; }
#menu .deriKart .on canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
#menu .deriKart .ad { font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.6)); }
#menu .deriKart .alt { display: flex; justify-content: space-between; gap: calc(var(--o) * 8px); font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); }
#menu .deriKart .fiyat { color: #8fd08a; }

/* onizleme sutunu */
#menu .onizle { flex: none; width: calc(var(--o) * 430px); display: flex; flex-direction: column; gap: calc(var(--o) * 8px);
  padding: calc(var(--o) * 12px); background: linear-gradient(160deg, color-mix(in srgb, var(--nr) 18%, rgba(10,14,20,.6)), rgba(10,14,20,.6) 65%);
  border: calc(var(--o) * 2px) solid color-mix(in srgb, var(--nr) 60%, transparent); }
#menu .onizle .deriAd { font-size: calc(var(--fp) * 11px); }
/* VITRIN: tuval MUTLAK konumlu — boyutu kutudan gelir, kutuya geri beslenmez.
   Eskiden tuvalin kendi piksel boyu kutunun yuksekligini belirliyordu; her
   karede boyut(clientWidth, clientHeight) ile buyuyup dar ekranda 1500 px'e
   (Retina'da katlanarak) sisiyordu. */
#menu .vitrin { flex: 1; min-height: calc(var(--o) * 200px); position: relative; }
#menu #vitrin-yuva { position: absolute; inset: 0; }
#menu .vitrin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#menu .bolum h3, #menu .onizle h3 { margin: 0; font-weight: normal; font-size: calc(var(--fp) * 16.5px); }
/* ozellik cubuklari IZGARA: etiket sutunu en uzun etiket kadar (RU "Скорострельность"
   sabit 110 px'e sigmiyordu), cubuklar hizali kalir */
#menu .ozellik { display: grid; grid-template-columns: max-content 1fr; column-gap: calc(var(--o) * 8px); row-gap: calc(var(--o) * 5px); align-items: center; }
#menu .ozellik .o { display: contents; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.4)); color: #aeb6c2; }
#menu .ozellik .o span { text-align: right; }
#menu .ozellik .veri { grid-column: 1 / -1; }
#menu .ozellik .cubuk { flex: 1; height: calc(var(--o) * 9px); background: rgba(255,255,255,.1); }
#menu .ozellik .cubuk i { display: block; height: 100%; background: var(--t); }
#menu .magaza-alt { margin-top: auto; display: flex; gap: calc(var(--o) * 10px); }
#menu .magaza-alt .pbtn { flex: 1; }

/* silah listesi (envanterde eski liste kullanilmiyor ama profil/diger icin kalir) */
#menu .grup { margin-top: calc(var(--o) * 8px); font-size: max(var(--yk), calc(var(--fp) * 5.5px)); letter-spacing: calc(var(--o) * 2px); color: #8e97a5; }
#menu .silah-sat { display: flex; align-items: center; gap: calc(var(--o) * 10px); width: 100%; background: none; border: 0;
  color: #cfd6e0; font-family: inherit; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); padding: calc(var(--o) * 7px) calc(var(--o) * 10px); cursor: pointer; text-align: left; }
#menu .silah-sat:hover { background: rgba(255,255,255,.08); color: #fff; }
#menu .silah-sat.aktif { background: rgba(239,197,106,.15); color: #fff; }
#menu .silah-sat canvas { height: calc(var(--o) * 20px); }
#menu .deri-im { width: calc(var(--o) * 16px); height: calc(var(--o) * 16px); display: inline-block; border: calc(var(--o) * 2px) solid rgba(0,0,0,.5); }

/* rank + kazanimlar */
#menu .rank-ust { display: flex; align-items: center; gap: calc(var(--o) * 20px); }
#menu .merdiven { display: flex; flex-wrap: wrap; gap: calc(var(--o) * 8px); }
#menu .basamak { padding: calc(var(--o) * 8px) calc(var(--o) * 12px); background: rgba(255,255,255,.05);
  border: calc(var(--o) * 2px) solid transparent; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); color: #9aa3b0; }
#menu .basamak b { display: block; font-weight: normal; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); }
#menu .basamak.aktif { border-color: var(--t); background: rgba(239,197,106,.12); }
#menu .kazanimlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--o) * 260px), 1fr));
  gap: calc(var(--o) * 8px); overflow-y: auto; }
#menu .kz { padding: calc(var(--o) * 8px) calc(var(--o) * 10px); background: rgba(255,255,255,.04);
  border-left: calc(var(--o) * 4px) solid #4a5260; color: #6f7883; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); }
#menu .kz b { display: block; font-weight: normal; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.5)); }
#menu .kz.acik { color: #cfd6e0; border-left-color: var(--t); background: rgba(239,197,106,.1); }
#menu .kz.acik b { color: var(--t); }

/* alt: BASLAT */
#menu > .alt { display: flex; justify-content: flex-end; padding: 0 calc(var(--o) * 22px) calc(var(--o) * 20px); }
#menu .baslat { display: flex; align-items: center; gap: calc(var(--o) * 16px); font-size: calc(var(--fp) * 27.5px);
  letter-spacing: calc(var(--o) * 4px); padding: calc(var(--o) * 20px) calc(var(--o) * 56px); }
#menu .baslat .im { display: flex; }
#menu .baslat .im canvas { width: calc(var(--o) * 44px); height: calc(var(--o) * 44px); }

/* dar ekran (telefon) */
@media (max-width: 820px) {
  #menu > .ust { flex-direction: column; align-items: stretch; padding: calc(var(--o) * 8px); gap: calc(var(--o) * 8px); }
  #menu .kart { margin-left: 0; }
  #menu .kart .bilgi { min-width: 0; flex: 1; }
  #menu .govde { flex-direction: column; padding: calc(var(--o) * 8px); gap: calc(var(--o) * 8px); }
  #menu .yan { flex-direction: row; width: auto; gap: calc(var(--o) * 6px); }
  #menu .yanSekme { flex: 1; padding: calc(var(--o) * 6px) calc(var(--o) * 4px); font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.2)); }
  #menu .yanSekme .im { width: calc(var(--o) * 40px); height: calc(var(--o) * 40px); }
  #menu .yanSekme .im canvas { width: calc(var(--o) * 32px); height: calc(var(--o) * 32px); }
  /* KUCUK EKRAN (telefon): kaplama izgarasi 0 yukseklige eziliyordu ve
     sayfa kaydirilamiyordu — izgara kendi alanini alir ve kayar, onizleme
     sutunu sabit yukseklikte altta durur. */
  #menu .ikili { flex-direction: column; overflow: auto; }
  #menu .ikili > .izgara { flex: 1 1 auto; min-height: calc(var(--d) * 300px); overflow-y: auto; }
  #menu .ikili > .onizle { flex: 0 0 auto; }
  #menu .sayfa { overflow: auto; -webkit-overflow-scrolling: touch; }
  #menu .onizle, #menu .bolum.liste { width: auto; }
  #menu .izgara { grid-template-columns: repeat(auto-fill, minmax(calc(var(--d) * 300px), 1fr)); }
  #menu .vitrin { flex: none; height: clamp(120px, 34vh, calc(var(--d) * 300px)); min-height: 0; }
  #menu > .alt { padding: calc(var(--o) * 8px); }
  #menu .baslat { font-size: calc(var(--fp) * 22px); padding: calc(var(--o) * 14px); width: 100%; justify-content: center; }
}

/* ── dokunmatik kontroller (telefon / tablet) ──────────────────────
   Block Strike duzeni: SOLDA joystick, SAGDA yuvarlak beyaz ikonlu
   dugmeler.  Olcek --d (dokunma olcegi = kisa kenar / 780): telefonda
   ekran yuksekligi daima ~780 "d birimi", genisligi 1040..1800 — yerlesim
   bu kutuya gore, kenarlara capali ve CAKISMASIZ kuruldu (olculdu):
     sag sutun   silah yuvalari 96, ust 18..530
     sag ust     menu / skor (yuvalarin solunda), sepet radarin saginda
     ates 200    sag 150 alt 190  ·  dolum sag 250 alt 420  ·  nisan sag 380 alt 300
     kullan      sag 400 alt 150  ·  comel sag 220 alt 30   ·  zipla 150 sag 30 alt 30
   #dokun guvenli alana (centik / ev cubugu) CEKILI: icindeki hicbir sey
   centigin altina kacmaz.  Joystick koordinatlari dokunmatik.js'te bu
   kutuya gore cevrilir. */
#dokun { position: fixed; top: var(--gu); left: var(--gl); right: var(--gr); bottom: var(--ga); z-index: 20; touch-action: none; }
#dokun.gizli { display: none !important; }

/* joystick: her zaman gorunur taban + parmakla tasinan halka */
#dokun .cubuk { position: absolute; width: calc(var(--d) * 250px); height: calc(var(--d) * 250px);
  margin: calc(var(--d) * -125px) 0 0 calc(var(--d) * -125px);
  border: calc(var(--d) * 5px) solid rgba(255,255,255,.55); border-radius: 50%;
  background: rgba(10,14,20,.28); opacity: .55; pointer-events: none; transition: opacity .12s; }
#dokun .cubuk.acik { opacity: 1; }
#dokun .cubuk i { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * 104px); height: calc(var(--d) * 104px);
  margin: calc(var(--d) * -52px) 0 0 calc(var(--d) * -52px); background: rgba(255,255,255,.82);
  border: calc(var(--d) * 4px) solid rgba(0,0,0,.35); border-radius: 50%; }

/* yuvarlak dugme temeli (.pbtn dokusunu `border` ile bilerek eziyor: yuvarlak) */
#dokun .dok { position: absolute; width: calc(var(--d) * 112px); height: calc(var(--d) * 112px); padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(14,18,24,.42); border: calc(var(--d) * 4px) solid rgba(255,255,255,.8);
  color: #fff; font-family: BlokFont, monospace; font-size: max(var(--yk), calc(var(--d) * 30px));
  box-shadow: 0 calc(var(--d) * 3px) calc(var(--d) * 8px) rgba(0,0,0,.4); transform: none !important; }
#dokun .dok canvas { width: calc(var(--d) * 58px); height: calc(var(--d) * 58px); pointer-events: none; }
#dokun .dok.basili { background: rgba(255,255,255,.72); border-color: #fff; }
#dokun .dok.basili canvas { filter: invert(1); }

/* ATES: sag orta, en buyuk hedef; cevresinde nisan / dolum / kullan / comel */
#dokun .ates { right: calc(var(--d) * 150px); bottom: calc(var(--d) * 190px); width: calc(var(--d) * 200px); height: calc(var(--d) * 200px);
  background: rgba(14,18,24,.34); }
#dokun .ates canvas { width: calc(var(--d) * 104px); height: calc(var(--d) * 104px); }
#dokun .nisan { right: calc(var(--d) * 380px); bottom: calc(var(--d) * 300px); }
#dokun .dolum { right: calc(var(--d) * 250px); bottom: calc(var(--d) * 420px); }
#dokun .kullan { right: calc(var(--d) * 400px); bottom: calc(var(--d) * 150px); }
#dokun .comel { right: calc(var(--d) * 220px); bottom: calc(var(--d) * 30px); }
#dokun .zipla { right: calc(var(--d) * 30px); bottom: calc(var(--d) * 30px); width: calc(var(--d) * 150px); height: calc(var(--d) * 150px); }
#dokun .zipla canvas { width: calc(var(--d) * 76px); height: calc(var(--d) * 76px); }

/* SILAH YUVALARI: sag kenarda dikey serit (Block Strike'taki gibi) */
#dokun .yuva { right: calc(var(--d) * 18px); width: calc(var(--d) * 96px); height: calc(var(--d) * 96px); }
#dokun .yuva canvas { width: calc(var(--d) * 72px); height: auto; max-height: calc(var(--d) * 52px); }
#dokun .y1 { top: calc(var(--d) * 18px); } #dokun .y2 { top: calc(var(--d) * 122px); }
#dokun .y3 { top: calc(var(--d) * 226px); } #dokun .y4 { top: calc(var(--d) * 330px); }
#dokun .y5 { top: calc(var(--d) * 434px); }
#dokun .yuva.secili { background: rgba(255,255,255,.3); border-color: #ffd24a; }

/* ust dugmeler: menu + skor yuvalarin solunda, SEPET radarin saginda */
#dokun .menu { right: calc(var(--d) * 132px); top: calc(var(--d) * 18px); width: calc(var(--d) * 96px); height: calc(var(--d) * 96px); }
#dokun .skor { right: calc(var(--d) * 244px); top: calc(var(--d) * 18px); width: calc(var(--d) * 96px); height: calc(var(--d) * 96px); }
#dokun .sepet { left: calc(var(--o) * 340px); top: calc(var(--d) * 18px); width: calc(var(--d) * 96px); height: calc(var(--d) * 96px); }
#dokun .sepet.gizli, #dokun .yuva.gizli { display: none; }

/* ── DOKUNMATIK HUD: dugmelerle cakismasin ─────────────────────────
   Sag alttaki silah listesi dugmelerin altinda kaliyordu (yuvalar zaten
   silahlari gosteriyor); cephane amblemin, para ve sohbet joystick'in,
   oldurme akisi silah yuvalarinin ustune biniyordu. */
body.dokunmatik #silahlar, body.dokunmatik #amblem-kutu { display: none !important; }
body.dokunmatik #para { left: calc(var(--o) * 36px + var(--gl)); top: calc(var(--o) * 334px + var(--gu)); bottom: auto;
  font-size: calc(var(--fp) * 16.5px); }
body.dokunmatik #para img { height: calc(var(--fp) * 14px); }
body.dokunmatik #sohbet { left: calc(var(--o) * 36px + var(--gl)); top: calc(var(--o) * 334px + var(--fp) * 22px + 6px + var(--gu)); bottom: auto;
  width: min(calc(var(--d) * 640px), 30vw); background: rgba(0,0,0,.32); }
body.dokunmatik #sohbet .s:nth-last-child(n+5) { display: none; }
body.dokunmatik #sohbet .s { text-overflow: ellipsis; }
body.dokunmatik #akis { right: calc(var(--d) * 370px + var(--gr)); top: calc(var(--d) * 130px + var(--gu)); max-width: 30vw; }
body.dokunmatik #akis .satir:nth-child(n+4) { display: none; }
body.dokunmatik #can-kutu { left: auto; right: calc(50% + 10px); bottom: calc(var(--d) * 14px + var(--ga)); }
body.dokunmatik #cephane { left: calc(50% + 10px); bottom: calc(var(--d) * 20px + var(--ga)); }
body.dokunmatik #izle-kutu { bottom: calc(var(--d) * 110px + var(--ga)); min-width: 0; }
body.dokunmatik #duraklat .ipucu { display: none; }

#perde { position: fixed; inset: 0; background: #1b1b20; display: flex; align-items: center; justify-content: center; font-size: 22px; z-index: 50; font-family: monospace; }
#tikla { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(0,0,0,.35); cursor: pointer; font-size: calc(var(--fp) * 16.5px); }

/* ── portre uyarisi (dokunmatik): FPS yatayda oynanir ───────────── */
#yon-uyari { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,.92); pointer-events: auto; font-size: calc(var(--fp) * 11px); }
#yon-uyari.gizli { display: none !important; }
#yon-uyari .kutu { display: flex; flex-direction: column; align-items: center; gap: calc(var(--d) * 18px);
  padding: calc(var(--d) * 26px) calc(var(--d) * 34px); text-align: center; color: #fff; }
#yon-uyari .don { font-size: calc(var(--d) * 90px); line-height: 1; color: var(--t);
  animation: yatir 1.8s ease-in-out infinite; }
@keyframes yatir { 0%, 40% { transform: rotate(0deg); } 60%, 100% { transform: rotate(90deg); } }

/* Dokunmatikte klavye ipuclari anlamsiz: kbd rozetleri gizlenir. */
body.dokunmatik #satin-ipucu kbd, body.dokunmatik #satin .urun kbd,
body.dokunmatik #satin .sutun .sbaslik kbd, body.dokunmatik #dokun .skor .etiket { display: none; }
body.dokunmatik #satin .alt { display: none; }
body.dokunmatik #satin-ipucu button { padding: calc(var(--d) * 10px) calc(var(--d) * 18px); font-size: max(var(--yk), calc(var(--fp) * 8px)); }
body.dokunmatik #satin { width: min(calc(var(--d) * 1280px), 96vw); }
/* Dokunmatikte satin alma SEPET dugmesinden acilir: ekran ortasindaki
   "B - Satin Al" ipucu gereksiz (klavye yok). */
body.dokunmatik #satin-ipucu { display: none !important; }

/* ══ SANDIK (kasa) ═════════════════════════════════════════════════ */
#menu .kasalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--o) * 300px), 1fr));
  gap: calc(var(--o) * 14px); overflow-y: auto; align-content: start; padding-right: calc(var(--o) * 4px); }
#menu .kasaKart { display: flex; flex-direction: column; gap: calc(var(--o) * 8px); padding: calc(var(--o) * 12px);
  border: calc(var(--o) * 3px) solid var(--nr);
  background: linear-gradient(160deg, color-mix(in srgb, var(--nr) 26%, #10141c), #10141c 72%); }
#menu .kasaKart .ust { display: flex; justify-content: space-between; align-items: baseline; }
#menu .kasaKart .ust b { font-size: calc(var(--fp) * 11px); }
#menu .kasaKart .fiyat { color: #8fd08a; }
#menu .kasaKart .onizleme { display: flex; gap: calc(var(--o) * 4px); }
#menu .kasaKart .mini { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: rgba(0,0,0,.35); border-bottom: calc(var(--o) * 3px) solid var(--nr); padding: calc(var(--o) * 3px); }
#menu .kasaKart .mini canvas { width: 100%; height: auto; }
#menu .kasaKart .oranlar { display: flex; flex-wrap: wrap; gap: calc(var(--o) * 4px) calc(var(--o) * 10px);
  font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.25)); }

/* donen serit */
#menu .kasaSerit { position: relative; overflow: hidden; margin: calc(var(--o) * 20px) 0;
  padding: calc(var(--o) * 10px) 0; background: rgba(0,0,0,.45);
  border-top: calc(var(--o) * 3px) solid #2d3540; border-bottom: calc(var(--o) * 3px) solid #2d3540; }
#menu .kasaSerit .ic { display: flex; gap: calc(var(--o) * 10px); will-change: transform; }
#menu .serit-kart { flex: 0 0 auto; width: calc(var(--o) * 190px); height: calc(var(--o) * 130px);
  display: flex; align-items: center; justify-content: center; padding: calc(var(--o) * 6px);
  border: calc(var(--o) * 3px) solid var(--nr);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nr) 30%, #10141c), #10141c 78%); }
#menu .serit-kart .im { width: 100%; display: flex; align-items: center; justify-content: center; }
#menu .serit-kart canvas { width: 100%; height: auto; }
#menu .kasaSerit .im-cizgi { position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--o) * 4px);
  margin-left: calc(var(--o) * -2px); background: #ffd24a; box-shadow: 0 0 calc(var(--o) * 10px) #ffd24a; }

/* sonuc */
#menu .kasaSonuc { display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 10px);
  padding: calc(var(--o) * 18px); text-align: center; }
#menu .kasaSonuc .parla { padding: calc(var(--o) * 10px) calc(var(--o) * 24px); border: calc(var(--o) * 4px) solid var(--nr);
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--nr) 38%, transparent), transparent 70%);
  box-shadow: 0 0 calc(var(--o) * 26px) color-mix(in srgb, var(--nr) 55%, transparent); animation: kasaParla .5s ease-out; }
#menu .kasaSonuc .parla canvas { width: calc(var(--o) * 420px); max-width: 60vw; height: auto; }
#menu .kasaSonuc .ad { font-size: calc(var(--fp) * 16.5px); }
#menu .kasaSonuc .durum { color: #cfd6e0; }
#menu .kasaSonuc .dugmeler { display: flex; gap: calc(var(--o) * 10px); flex-wrap: wrap; justify-content: center; }
@keyframes kasaParla { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ══ GUNLUK GOREVLER ═══════════════════════════════════════════════ */
#menu .gorevler { display: flex; flex-direction: column; gap: calc(var(--o) * 8px); overflow-y: auto; }
#menu .gorevSat { display: flex; align-items: center; gap: calc(var(--o) * 12px); padding: calc(var(--o) * 10px);
  background: rgba(255,255,255,.04); border-left: calc(var(--o) * 4px) solid #4a5260; }
#menu .gorevSat.bitti { border-left-color: #8fd08a; background: rgba(143,208,138,.1); }
#menu .gorevSat .bilgi { flex: 1; display: flex; flex-direction: column; gap: calc(var(--o) * 4px); }
#menu .gorevSat .bilgi b { font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.6)); }
#menu .gorevSat .cubuk { height: calc(var(--o) * 10px); background: rgba(0,0,0,.45); }
#menu .gorevSat .cubuk i { display: block; height: 100%; background: #8fd08a; }
#menu .gorevSat .odul { color: #efc56a; text-align: right; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); }
#menu .gorevSat .alindi { color: #8fd08a; font-size: calc(var(--fp) * 16.5px); }
#menu .gorevSat .bekle { color: #6b7686; }
#menu .seri { display: flex; align-items: center; gap: calc(var(--o) * 12px); margin-top: calc(var(--o) * 12px);
  padding: calc(var(--o) * 12px); background: rgba(255,255,255,.05); border: calc(var(--o) * 2px) solid #4a5260; }
#menu .seri .bilgi { flex: 1; display: flex; flex-direction: column; gap: calc(var(--o) * 6px); }
#menu .seri .noktalar { display: flex; gap: calc(var(--o) * 6px); }
#menu .seri .noktalar i { width: calc(var(--o) * 22px); height: calc(var(--o) * 22px); background: rgba(0,0,0,.45);
  border: calc(var(--o) * 2px) solid #4a5260; }
#menu .seri .noktalar i.dolu { background: #efc56a; border-color: #efc56a; }
/* sekme rozeti (bekleyen odul) */
#menu .yanSekme { position: relative; }
/* (profil rozeti `#menu .rozet` genisligi ve altin cercevesi buraya da siziyordu:
   bildirim rozeti genis, cerceveli bir seride donusuyordu) */
#menu .yanSekme .rozet { position: absolute; right: calc(var(--o) * 6px); top: calc(var(--o) * 6px); padding: 0 3px; width: auto; border: 0;
  min-width: max(16px, calc(var(--o) * 22px)); height: max(16px, calc(var(--o) * 22px)); display: flex; align-items: center; justify-content: center;
  background: #e04b4b; color: #fff; font-style: normal; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); }

/* Sandik / gorev: dokunmatikte --d olcegi (dar ekranda okunakli kalsin) */
body.dokunmatik #menu .kasalar { grid-template-columns: repeat(auto-fill, minmax(calc(var(--d) * 340px), 1fr)); gap: calc(var(--d) * 14px); }
body.dokunmatik #menu .kasaKart { padding: calc(var(--d) * 12px); gap: calc(var(--d) * 8px); }
body.dokunmatik #menu .serit-kart { width: calc(var(--d) * 200px); height: calc(var(--d) * 140px); }
body.dokunmatik #menu .kasaSerit .ic { gap: calc(var(--d) * 10px); }
body.dokunmatik #menu .kasaSonuc .parla canvas { width: calc(var(--d) * 520px); }
body.dokunmatik #menu .gorevSat { padding: calc(var(--d) * 12px); gap: calc(var(--d) * 12px); }
body.dokunmatik #menu .gorevSat .cubuk { height: calc(var(--d) * 12px); }
body.dokunmatik #menu .seri .noktalar i { width: calc(var(--d) * 26px); height: calc(var(--d) * 26px); }


/* ══════════════════════════════════════════════════════════════════
   CANLI ARAYUZ — dikkat ceken hareket
   Kural: yalniz transform / opacity / filter animasyonu (GPU'da ucuz,
   yerlesim yeniden hesaplanmaz).  Hareketler KISA ve DUZENLI; cocuk
   oyuncunun gozu "neye basacagini" hemen bulsun diye ana dugme (BASLAT)
   nabiz atar, ikincil dugmeler yalniz uzerine gelince tepki verir.
   ══════════════════════════════════════════════════════════════════ */

/* ── ortak piksel dugme tepkisi ── */
.pbtn { transition: transform .08s ease-out, filter .12s ease-out; }
.pbtn:hover { filter: brightness(1.22); transform: translateY(calc(var(--o) * -2px)); }
.pbtn:active { transform: translateY(calc(var(--o) * 1px)) scale(.985); filter: brightness(.95); }
.pbtn.yesil:hover { filter: brightness(1.3) saturate(1.15); }

/* ── BASLAT: nabiz + isik supurgesi (ekrandaki en onemli dugme) ── */
#menu .baslat { position: relative; overflow: hidden; animation: nabiz 2.6s ease-in-out infinite; }
#menu .baslat::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); animation: supur 3.4s ease-in-out infinite; pointer-events: none; }
#menu .baslat:hover { animation-play-state: paused; filter: brightness(1.25); }
@keyframes nabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes supur { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* ── sol sekmeler: renkli, canli ── */
#menu .yanSekme { transition: transform .12s ease-out, background .15s; overflow: visible; }
#menu .yanSekme .im { transition: transform .15s ease-out, border-color .15s, box-shadow .15s;
  border-color: color-mix(in srgb, var(--sr, #ffffff) 45%, transparent); }
#menu .yanSekme:hover { transform: translateX(calc(var(--o) * 5px)); }
#menu .yanSekme:hover .im { transform: scale(1.08); border-color: var(--sr, #fff);
  box-shadow: 0 0 calc(var(--o) * 14px) color-mix(in srgb, var(--sr, #fff) 55%, transparent); }
#menu .yanSekme.basili { background: linear-gradient(90deg, color-mix(in srgb, var(--sr, #fff) 26%, transparent), transparent 85%); }
#menu .yanSekme.basili .im { border-color: var(--sr, #fff); background: color-mix(in srgb, var(--sr, #fff) 18%, rgba(0,0,0,.4));
  box-shadow: 0 0 calc(var(--o) * 16px) color-mix(in srgb, var(--sr, #fff) 45%, transparent); }
#menu .yanSekme.basili .im canvas { animation: ikonZipla 2.2s ease-in-out infinite; }
#menu .yanSekme.basili::before { background: var(--sr, var(--t)); box-shadow: 0 0 calc(var(--o) * 10px) var(--sr, var(--t)); }
@keyframes ikonZipla { 0%, 82%, 100% { transform: translateY(0); } 88% { transform: translateY(calc(var(--o) * -4px)); } 94% { transform: translateY(0); } }

/* bekleyen odul rozeti: dikkat cekici nabiz */
#menu .yanSekme .rozet { animation: rozetNabiz 1.1s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--o) * 10px) rgba(224,75,75,.9); }
@keyframes rozetNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ── kartlar (kaplama / sandik): kaldir + nadirlik parlamasi ── */
#menu .deriKart, #menu .kasaKart { transition: transform .13s ease-out, box-shadow .18s, filter .15s; }
#menu .deriKart:hover, #menu .kasaKart:hover { transform: translateY(calc(var(--o) * -5px));
  box-shadow: 0 calc(var(--o) * 6px) calc(var(--o) * 20px) color-mix(in srgb, var(--nr) 45%, transparent); }
#menu .deriKart.aktif { animation: kartParla 2.2s ease-in-out infinite; }
@keyframes kartParla {
  0%, 100% { box-shadow: 0 0 calc(var(--o) * 6px) color-mix(in srgb, var(--nr) 35%, transparent); }
  50% { box-shadow: 0 0 calc(var(--o) * 20px) color-mix(in srgb, var(--nr) 85%, transparent); }
}
/* sandik "Ac" dugmesi de nabiz atar (sayfanin ana eylemi) */
#menu .kasaKart .pbtn.yesil { animation: nabiz 2.6s ease-in-out infinite; }

/* gorev satiri bitince yesil parlama */
#menu .gorevSat.bitti { animation: gorevParla 2s ease-in-out infinite; }
@keyframes gorevParla {
  0%, 100% { box-shadow: inset calc(var(--o) * 3px) 0 0 #8fd08a; }
  50% { box-shadow: inset calc(var(--o) * 3px) 0 0 #8fd08a, 0 0 calc(var(--o) * 14px) rgba(143,208,138,.45); }
}

/* profil kartindaki XP cubugu: ilerleyen parlama */
#menu .xp { position: relative; overflow: hidden; }
#menu .xp::after { content: ''; position: absolute; inset: 0; left: -40%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: supur 4s linear infinite; }

/* ── HUD: durum degisince goz alan hareket ── */
#can.dusuk { animation: canNabiz .85s ease-in-out infinite; }
@keyframes canNabiz { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.07); filter: drop-shadow(0 0 calc(var(--o) * 8px) rgba(224,60,60,.9)); } }
#cephane.az .sar { color: #ffcf4a; animation: cephaneYanip .8s steps(2, jump-none) infinite; }
@keyframes cephaneYanip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#ust .sure.kirmizi { animation: sureNabiz .8s ease-in-out infinite; }
@keyframes sureNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
#akis .satir { animation: akisGir .22s ease-out; }
@keyframes akisGir { from { transform: translateX(calc(var(--o) * 40px)); opacity: 0; } to { transform: none; opacity: 1; } }
#para.artti, #menu .kredi.artti { animation: sayiPop .5s ease-out; }
@keyframes sayiPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); filter: brightness(1.5); } 100% { transform: scale(1); } }
#uyari:not(.gizli) { animation: uyariGir .25s ease-out; }
@keyframes uyariGir { from { transform: translate(-50%, calc(var(--o) * -14px)); opacity: 0; } to { opacity: 1; } }

/* ── SEVIYE ATLAMA kutlamasi ── */
#seviye-kutlama { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,.72); pointer-events: auto; font-size: calc(var(--fp) * 11px); }
#seviye-kutlama.gizli { display: none !important; }
#seviye-kutlama .kutu { display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 14px);
  padding: calc(var(--o) * 26px) calc(var(--o) * 40px); text-align: center; color: #fff;
  animation: kutlamaGir .45s cubic-bezier(.2,1.4,.5,1); }
#seviye-kutlama .rozet { width: calc(var(--o) * 120px); height: calc(var(--o) * 120px); display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--fp) * 33px); border: calc(var(--o) * 5px) solid var(--nr, #efc56a); color: var(--nr, #efc56a);
  background: radial-gradient(circle, color-mix(in srgb, var(--nr, #efc56a) 30%, transparent), transparent 70%);
  animation: kartParla 1.4s ease-in-out infinite; }
#seviye-kutlama h2 { margin: 0; font-size: calc(var(--fp) * 22px); color: #ffd24a; animation: nabiz 1.4s ease-in-out infinite; }
@keyframes kutlamaGir { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* hareketi azalt: erisilebilirlik (sistem ayari) */
@media (prefers-reduced-motion: reduce) {
  #menu .baslat, #menu .baslat::after, #menu .kasaKart .pbtn.yesil, #menu .deriKart.aktif,
  #menu .gorevSat.bitti, #menu .xp::after, #can.dusuk, #cephane.az .sar, #ust .sure.kirmizi,
  #menu .yanSekme.basili .im canvas, #menu .yanSekme .rozet, #seviye-kutlama h2, #seviye-kutlama .rozet { animation: none !important; }
}

/* ══ ODULLU REKLAM (portal SDK'si) ═══════════════════════════════════
   Once ODUL yazar ve video izlenecegini soyler; onay olmadan oynatmaz. */
#reklam { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,.86); pointer-events: auto; font-size: calc(var(--fp) * 11px); color: #fff; }
#reklam.gizli { display: none !important; }
#reklam .kutu { display: flex; flex-direction: column; align-items: center; gap: calc(var(--o) * 12px);
  padding: calc(var(--o) * 24px) calc(var(--o) * 32px); text-align: center; max-width: 92vw;
  animation: kutlamaGir .3s cubic-bezier(.2,1.3,.5,1); }
#reklam .rbaslik { font-size: calc(var(--fp) * 16.5px); color: #ffd24a; }
#reklam .odul { font-size: calc(var(--fp) * 22px); color: #8fd08a; animation: nabiz 1.6s ease-in-out infinite; }
#reklam .aciklama { color: #cfd6e0; max-width: calc(var(--o) * 560px); }
#reklam .kalan { color: #9aa6b4; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.3)); }
#reklam .dugmeler { display: flex; gap: calc(var(--o) * 10px); flex-wrap: wrap; justify-content: center; }
/* mac oncesi reklam beklenirken kisa "yukleniyor" perdesi (reklam acilinca kalkar;
   portalin reklam kutusu z 99 ile bunun da ustunde) */
#reklam-bekle { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,12,.55); pointer-events: auto; font-size: calc(var(--fp) * 16.5px); color: #cfd6e0; }
#reklam-bekle.gizli { display: none !important; }

/* menu icindeki reklam satiri */
#menu .reklamSatir { display: flex; align-items: center; gap: calc(var(--o) * 12px); padding: calc(var(--o) * 10px) calc(var(--o) * 12px);
  margin-bottom: calc(var(--o) * 8px); background: linear-gradient(90deg, rgba(255,210,74,.14), transparent 75%);
  border: calc(var(--o) * 2px) solid rgba(255,210,74,.5); }
#menu .reklamSatir .bilgi { flex: 1; display: flex; flex-direction: column; gap: calc(var(--o) * 3px); }
#menu .reklamSatir .bilgi b { color: #ffd24a; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.6)); }
#menu .reklamSatir .bilgi span { color: #9aa6b4; font-size: max(var(--yk), calc(var(--fp) * 5.5px * 1.25)); }
body.dokunmatik #menu .reklamSatir { padding: calc(var(--d) * 12px); }

/* Sol sekmeler: her sekme KENDI RENGINDE yasar (pasifken soluk, aktifken
   parlak) — renksiz gorunum kullanicinin sikayetiydi. */
#menu .yanSekme { color: color-mix(in srgb, var(--sr, #fff) 70%, #cfd6e0);
  border-left: calc(var(--o) * 4px) solid color-mix(in srgb, var(--sr, #fff) 40%, transparent); }
#menu .yanSekme .im { background: linear-gradient(160deg, color-mix(in srgb, var(--sr, #fff) 22%, rgba(0,0,0,.45)), rgba(0,0,0,.5)); }
#menu .yanSekme:hover { color: var(--sr, #fff); border-left-color: var(--sr, #fff); }
#menu .yanSekme.basili { color: #fff; border-left-color: var(--sr, #fff); }
#menu .yanSekme.basili .im { transform: scale(1.06); }

/* ══ DIL SECICI (ana menu ust cubugu) ══════════════════════════════ */
#menu .dilSec { display: flex; gap: calc(var(--o) * 6px); align-self: center; margin-left: calc(var(--o) * 14px); }
#menu .dilBtn { display: flex; align-items: center; gap: calc(var(--o) * 8px); cursor: pointer;
  padding: calc(var(--o) * 7px) calc(var(--o) * 12px); font-family: inherit; color: #cfd6e0;
  font-size: max(var(--yk), calc(var(--fp) * 5.5px * 2)); background: rgba(10,14,20,.6);
  border: calc(var(--o) * 2px) solid rgba(255,255,255,.18); transition: transform .1s ease-out, border-color .12s, filter .12s; }
#menu .dilBtn b { font-weight: normal; letter-spacing: calc(var(--o) * 1px); }
#menu .dilBtn span { display: flex; }
#menu .dilBtn canvas { width: calc(var(--o) * 42px); height: calc(var(--o) * 32px); image-rendering: pixelated;
  box-shadow: 0 0 0 calc(var(--o) * 1px) rgba(0,0,0,.6); }
#menu .dilBtn:hover { transform: translateY(calc(var(--o) * -2px)); border-color: rgba(255,255,255,.5); filter: brightness(1.15); }
#menu .dilBtn.aktif { color: #fff; border-color: #ffd24a; background: rgba(255,210,74,.16);
  box-shadow: 0 0 calc(var(--o) * 10px) rgba(255,210,74,.45); }
body.dokunmatik #menu .dilBtn { padding: calc(var(--d) * 8px) calc(var(--d) * 12px); gap: calc(var(--d) * 8px); }
body.dokunmatik #menu .dilBtn canvas { width: calc(var(--d) * 36px); height: calc(var(--d) * 27px); }
@media (max-width: 820px) { #menu .dilSec { margin-left: 0; align-self: flex-start; } }

/* ══ DOKUNMATIK: parmak hedefleri ═══════════════════════════════════
   Arayuz --o ile kuculdugu icin telefonda bazi dugmeler 13-27 px kaliyordu
   (satin alma ✕ 13x14, "Hizli Alim" 15 px, kaydiraclar 16 px).  Parmak icin
   en az ~36 px: yukseklik alt siniri, icerik ortalanir. */
body.dokunmatik .pbtn, body.dokunmatik #satin .sutun .sbaslik { min-height: 36px; }
body.dokunmatik .pbtn:not(.dok) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
body.dokunmatik #satin .urun { align-items: flex-start; justify-content: flex-start; }
body.dokunmatik #menu .yanSekme { flex-direction: column; }
body.dokunmatik #menu .baslat { display: flex; }
body.dokunmatik #satin .baslik .kapat { min-width: 44px; }
body.dokunmatik input[type=range] { min-height: 32px; }
body.dokunmatik #menu .dilBtn { min-height: 36px; }
body.dokunmatik #menu .sbaslik .kapat { min-width: 44px; }
body.dokunmatik #menu .seritBtn { min-width: 40px; min-height: 36px; justify-content: center; }
body.dokunmatik #menu .seritBtn canvas { height: 16px; }
body.dokunmatik #menu .pgiris { min-height: 40px; width: min(100%, 320px); }
body.dokunmatik #menu .suzgec .pbtn, body.dokunmatik #menu .sec-grup .pbtn { min-width: 40px; }

/* ══ KISA EKRAN (telefon yatay, <= 520 px) ═════════════════════════
   Menu basligi + BASLAT satiri sayfaya ~130 px birakiyordu (magaza izgarasi
   70 px'e eziliyordu).  Sekme acikken ikisi gizlenir; sayfa ✕ ile kapaninca
   geri gelir.  Silah seridi / suzgec tek satirda yana kayar. */
@media (max-height: 520px) {
  #menu.sayfali > .ust, #menu.sayfali > .alt { display: none; }
  #menu .govde { padding-top: calc(6px + var(--gu)); padding-bottom: calc(6px + var(--ga)); }
  #menu .silahSerit, #menu .suzgec { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; flex: none;
    touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #menu .silahSerit::-webkit-scrollbar, #menu .suzgec::-webkit-scrollbar { display: none; }
  #menu .silahSerit > *, #menu .suzgec > * { flex: none; }
  #menu .sayfa { padding: 8px; gap: 6px; }
  #menu .sbaslik h2 { font-size: calc(var(--fp) * 11px); }
}
/* menu kenarlari guvenli alanda (centik) */
#menu { padding: var(--gu) var(--gr) var(--ga) var(--gl); }
/* kaydirilan listeler parmakla kayabilsin */
#menu .izgara, #menu .bolum, #menu .sayfa, #menu .kasalar, #menu .gorevler, #menu .kazanimlar, #menu .ikili, #satin { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }