/* =====================================================================
   AYICIK SAVASLARI - "Pelus Etiket" arayuz temasi
   Yon: sicak oyuncak kutusu. Krem kagit yuzeyler, kakao murekkep,
   kalin yuvarlak kenarlar ve sert kaydirilmis golgeler (etiket hissi).
   Menuler duz bir zemine degil, canli 3B diyoramanin uzerine oturur.
   ===================================================================== */
:root {
  /* yuzey ve murekkep */
  --krem:        #fff6e6;
  --krem-2:      #ffefd6;
  --kagit:       #fffaf1;
  --kakao:       #34210f;
  --kakao-2:     #6d5138;
  --kakao-3:     #9b7f63;

  /* aksanlar */
  --su:          #1a9ed9;
  --su-acik:     #79d7f7;
  --su-koyu:     #0d6f9c;
  --cilek:       #ff5062;
  --bal:         #ffb524;
  --bal-acik:    #ffd66b;
  --yaprak:      #4fb95f;
  --mor:         #a06bd8;

  /* takim */
  --mavi:        #3d9dff;
  --kirmizi:     #ff6a52;

  /* HUD (parlak sahne uzerinde okunakli koyu paneller) */
  --hud-zemin:   rgba(35, 22, 12, 0.80);
  --hud-kenar:   rgba(255, 236, 205, 0.22);
  --hud-metin:   #fff3e2;
  --hud-soluk:   #cdb49b;

  --r-buyuk: 26px;
  --r-orta:  18px;
  --r-kucuk: 12px;

  --et-golge:   0 5px 0 var(--kakao), 0 12px 22px rgba(40, 24, 12, .28);
  --et-golge-s: 0 3px 0 var(--kakao), 0 7px 14px rgba(40, 24, 12, .24);
  --kart-golge: 0 6px 0 rgba(52, 33, 15, .85), 0 18px 40px rgba(30, 18, 8, .38);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #101a22; color: var(--kakao);
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 700; user-select: none; touch-action: none;
}
h1, h2, h3, h4, .wordmark, .btn, kbd { font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; }

canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.gizli { display: none !important; }

/* kagit dokusu: krem yuzeylere hafif gren */
.doku::after, .ekran::after, .kart::after, .urun::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(rgba(120, 84, 48, .085) 1px, transparent 1px);
  background-size: 5px 5px; opacity: .55;
}

/* =====================================================================
   HUD
   ===================================================================== */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; color: var(--hud-metin); }

#vignette {
  position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(12, 60, 92, .82) 100%);
}
#soap {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at 25% 35%, rgba(255,255,255,.55) 0 8%, transparent 9%),
              radial-gradient(circle at 75% 60%, rgba(255,255,255,.5) 0 7%, transparent 8%),
              radial-gradient(circle at 50% 18%, rgba(255,255,255,.45) 0 5%, transparent 6%),
              radial-gradient(circle at 18% 80%, rgba(255,255,255,.4) 0 6%, transparent 7%),
              radial-gradient(circle at 88% 28%, rgba(255,255,255,.4) 0 5%, transparent 6%);
  backdrop-filter: blur(3px);
}
#hitflash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(26, 158, 217, 0) 38%, rgba(26, 158, 217, .5) 100%);
}
#yagmur {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
  background: linear-gradient(180deg, rgba(30, 70, 110, .34), rgba(30, 70, 110, .10));
}
#yagmur.aktif { opacity: 1; }

/* --- nisangah --- */
#crosshair {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  transition: transform .12s cubic-bezier(.18,.89,.32,1.28);
}
#crosshair .ch-c {
  position: absolute; left: 16px; top: 16px; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px rgba(30,18,8,.75);
}
#crosshair i {
  position: absolute; background: #fff; border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(30,18,8,.7);
}
#crosshair .ch-u { left: 16.5px; top: 0; width: 3px; height: 10px; }
#crosshair .ch-d { left: 16.5px; bottom: 0; width: 3px; height: 10px; }
#crosshair .ch-l { left: 0; top: 16.5px; width: 10px; height: 3px; }
#crosshair .ch-r { right: 0; top: 16.5px; width: 10px; height: 3px; }
#crosshair.genis { transform: scale(1.7); }

#hitmark {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  opacity: 0; font-size: 28px; line-height: 34px; text-align: center; color: #fff;
  text-shadow: 0 2px 0 rgba(30,18,8,.85);
}
#hitmark.goster { animation: hm .28s ease-out; }
#hitmark.olum { color: var(--bal-acik); }
@keyframes hm { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }

/* --- ust bar --- */
/* ---------------------------------------------------------------------
   UST BILDIRIM SERIDI - TEK SIRA

   Eskiden dikey yigindi (flex-direction: column): sayac, takim skorlari,
   siralama ve olay afisi alt alta diziliyordu. Her yeni bildirim seridi
   ASAGI dogru buyutuyordu; bir hava olayi basladiginda serit 262 px'e
   ciikip 720p ekranin %36'sini, 1024x640 dizustunde %41'ini kapliyor ve
   merkezdeki gorus alanina giriyordu.

   Yatay dizilim yukseklige degil GENISLIGE yayiliyor - ust kenarda ince
   bir serit kaliyor, oyun alani acik. `nowrap` sart: sarmaya izin verilse
   dar ekranda ikinci satira dusup ayni sorunu geri getirir; onun yerine
   parcalar kuculuyor (asagidaki dar ekran kurallari).
   --------------------------------------------------------------------- */
#topbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: row; align-items: center;
  flex-wrap: nowrap; gap: 10px; max-width: 96vw;
}
.panel {
  background: var(--hud-zemin); border: 2px solid var(--hud-kenar);
  backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(20, 12, 5, .4);
}
#timer {
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 34px; font-weight: 700; color: var(--hud-metin); letter-spacing: 1.5px;
  background: var(--hud-zemin); border: 2px solid var(--hud-kenar);
  padding: 3px 26px; border-radius: 22px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(20, 12, 5, .4);
}
#timer.az {
  color: #fff; background: linear-gradient(135deg, #e03a4c, #ff6a52);
  border-color: rgba(255, 222, 200, .5); animation: nabiz .75s infinite;
}
@keyframes nabiz { 50% { transform: scale(1.07); } }

#teamScores { display: flex; align-items: center; gap: 12px; }
#teamScores .ts {
  display: flex; align-items: center; gap: 10px; padding: 4px 18px; border-radius: 16px;
  background: var(--hud-zemin); backdrop-filter: blur(10px);
  border: 2px solid var(--hud-kenar); box-shadow: 0 6px 16px rgba(20,12,5,.34);
}
#teamScores .ts b { font-size: 26px; font-family: 'Baloo 2', 'Nunito', sans-serif; }
#teamScores .ts .ad { font-size: 12px; letter-spacing: 2px; font-weight: 800; }
#teamScores .t0 { color: var(--mavi); border-color: rgba(61,157,255,.5); }
#teamScores .t1 { color: var(--kirmizi); border-color: rgba(255,106,82,.5); }
#teamScores .ts-vs { color: var(--hud-soluk); font-weight: 800; }

#soloRank {
  color: var(--hud-metin); font-size: 13.5px; letter-spacing: .4px;
  background: var(--hud-zemin); border: 2px solid var(--hud-kenar);
  padding: 4px 16px; border-radius: 14px; backdrop-filter: blur(10px);
}
#soloRank b { color: var(--bal-acik); }

/* --- olay afisi --- */
#olayBanner {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 20px 7px 12px; border-radius: 20px;
  background: rgba(35, 22, 12, .88); border: 2px solid var(--olay-renk, var(--bal));
  box-shadow: 0 0 0 4px rgba(255, 181, 36, .16), 0 10px 26px rgba(20,12,5,.45);
  animation: olayGir .45s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes olayGir { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
#olayBanner .oi { font-size: 26px; }
#olayBanner .ob { display: flex; flex-direction: column; line-height: 1.15; }
#olayBanner .oad { font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 16px; letter-spacing: 2px; color: var(--olay-renk, var(--bal)); }
#olayBanner .ooz { font-size: 12px; font-style: normal; color: var(--hud-soluk); }
#olayBanner .osure {
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 20px; color: var(--hud-metin);
  min-width: 34px; text-align: right;
}
/* Uyari asamasi: olay henuz baslamadi, geri sayim var - dikkat cekici titresim */
#olayBanner.bekliyor {
  border-style: dashed;
  animation: olayGir .45s cubic-bezier(.18,.89,.32,1.28), uyariTitre 1s ease-in-out infinite;
}
#olayBanner.bekliyor .osure { color: var(--olay-renk, var(--bal)); }
@keyframes uyariTitre {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 181, 36, .16), 0 10px 26px rgba(20,12,5,.45); }
  50% { box-shadow: 0 0 0 8px rgba(255, 181, 36, .30), 0 10px 26px rgba(20,12,5,.45); }
}

/* --- sol alt panel --- */
#statPanel {
  position: absolute; left: 22px; bottom: 22px; width: 288px;
  background: var(--hud-zemin); border: 2px solid var(--hud-kenar);
  border-radius: var(--r-buyuk); padding: 14px 18px 12px; backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(20, 12, 5, .45);
}
.stat { margin-bottom: 11px; }
.etiket {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; letter-spacing: 1.6px; margin-bottom: 5px; font-weight: 800;
  color: var(--hud-soluk);
}
.stat-ikon { margin-right: 4px; font-size: 13px; }
.etiket b { font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 16px; color: var(--su-acik); }

.bar {
  position: relative; height: 20px; border-radius: 11px; background: rgba(12, 7, 3, .72);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55); overflow: hidden;
  border: 2px solid rgba(255, 236, 205, .14);
}
.bar i {
  position: absolute; inset: 2px auto 2px 2px; width: 0%; border-radius: 9px;
  transition: width .12s linear;
}
.wetbar i { background: linear-gradient(90deg, var(--su-koyu), var(--su-acik)); }
.wetbar.tehlikede i { background: linear-gradient(90deg, #d8323f, #ff8a52); animation: nabiz .55s infinite; }
.wetbar .tehlike {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,255,255,.16) 30px 32px);
}
.tankbar i { background: linear-gradient(90deg, var(--yaprak), var(--su-acik)); }
.tankbar.bos i { background: linear-gradient(90deg, #e08a17, #ff5a3c); }

#gunName {
  color: var(--hud-soluk); font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
  margin-top: 2px; padding-top: 7px; border-top: 1px solid rgba(255, 236, 205, .14);
}

/* --- guclendirici rozetleri --- */
#gucRozetler { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
#gucRozetler:empty { margin-top: 0; }
.gr {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px;
  border-radius: 12px; font-size: 12px; font-weight: 800; color: #2b1a0c;
  box-shadow: 0 3px 0 rgba(30,18,8,.55);
}
.gr .grs { font-family: 'Baloo 2', 'Nunito', sans-serif; opacity: .8; }
.gr.yildiz   { background: linear-gradient(135deg, var(--bal-acik), var(--bal)); }
.gr.kalp     { background: linear-gradient(135deg, #ffb3c0, #ff6b8a); }
.gr.mucevher { background: linear-gradient(135deg, #b6efff, #56cff0); }

/* --- sag alt panel --- */
#sidePanel {
  position: absolute; right: 22px; bottom: 22px; width: 194px;
  background: var(--hud-zemin); border: 2px solid var(--hud-kenar);
  border-radius: var(--r-buyuk); padding: 13px 16px; backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(20, 12, 5, .45);
}
#sidePanel .row {
  display: flex; justify-content: space-between; color: var(--hud-soluk);
  font-size: 13px; padding: 3px 0; font-weight: 700;
}
#sidePanel .row b { color: var(--hud-metin); font-weight: 800; }
#sidePanel .puan {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 236, 205, .16);
  color: var(--bal-acik); font-size: 14px;
}
#sidePanel .puan b { color: var(--bal-acik); font-size: 19px; font-family: 'Baloo 2', 'Nunito', sans-serif; }

/* --- mini harita --- */
#minimapWrap {
  position: absolute; right: 22px; top: 22px; width: 172px; height: 172px;
  border-radius: 50%; background: rgba(28, 18, 9, .82);
  border: 3px solid rgba(255, 236, 205, .28);
  box-shadow: 0 10px 28px rgba(20, 12, 5, .5);
}
#minimap { width: 100%; height: 100%; display: block; border-radius: 50%; }
.radar-scan {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%; overflow: hidden;
  background: conic-gradient(from 0deg at 50% 50%, rgba(121, 215, 247, .22) 0deg, transparent 62deg, transparent 360deg);
  animation: radarTurn 4.5s linear infinite;
}
@keyframes radarTurn { to { transform: rotate(360deg); } }
#bolgeAd {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  background: rgba(28, 18, 9, .92); border: 2px solid rgba(255, 236, 205, .24);
  color: var(--hud-metin); font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  padding: 2px 12px; border-radius: 10px; white-space: nowrap;
}

/* --- killfeed & bildirimler --- */
#killfeed { position: absolute; right: 22px; top: 214px; width: 310px; text-align: right; }
.kf {
  display: inline-block; background: rgba(35, 22, 12, .86); color: var(--hud-metin);
  padding: 6px 14px; border-radius: 14px; font-size: 13px; margin-bottom: 6px;
  border: 2px solid var(--hud-kenar); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(20,12,5,.36); animation: kfin .3s cubic-bezier(.18,.89,.32,1.28);
}
.kf .k { color: var(--su-acik); font-weight: 800; }
.kf .v { color: var(--kirmizi); font-weight: 800; }
.kf.ben { border-color: rgba(255, 214, 107, .6); }
.kf.ben .k { color: var(--bal-acik); }
.kf.altin { border-color: var(--bal); box-shadow: 0 0 0 3px rgba(255,181,36,.2), 0 6px 16px rgba(20,12,5,.36); }
@keyframes kfin { from { opacity: 0; transform: translateX(35px); } }

#scorePops { position: absolute; left: 50%; top: 56%; transform: translateX(-50%); text-align: center; }
.pop {
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 34px; font-weight: 700; color: var(--bal-acik);
  text-shadow: 0 3px 0 rgba(40,24,12,.8);
  animation: popup 1s ease-out forwards;
}
@keyframes popup {
  0% { opacity: 0; transform: translateY(18px) scale(.6); }
  25% { opacity: 1; transform: translateY(0) scale(1.15); }
  100% { opacity: 0; transform: translateY(-42px) scale(1); }
}

#seriToast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--bal), #ff8a3c); color: #35200c;
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 22px; letter-spacing: 1.5px;
  padding: 8px 26px; border-radius: 20px; border: 3px solid rgba(53,32,12,.75);
  box-shadow: 0 6px 0 rgba(53,32,12,.6), 0 14px 30px rgba(20,12,5,.4);
  animation: seriGir .5s cubic-bezier(.18,.89,.32,1.28);
  white-space: nowrap;
}
#seriToast small { display: block; font-size: 12px; font-family: 'Nunito', sans-serif; opacity: .75; letter-spacing: 0; }
@keyframes seriGir { from { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-6deg); } }

#hint {
  position: absolute; left: 50%; top: 63%; transform: translateX(-50%);
  background: rgba(35, 22, 12, .9); color: var(--hud-metin); padding: 9px 22px;
  border-radius: 16px; font-size: 14.5px; border: 2px solid var(--hud-kenar);
  box-shadow: 0 10px 26px rgba(20,12,5,.45); backdrop-filter: blur(10px); white-space: nowrap;
}
#hint kbd { background: var(--su-acik); color: #10333f; }

#channel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 124px; height: 124px; }
#channel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#channel circle { fill: none; stroke-width: 9; stroke-linecap: round; }
#channel .bg { stroke: rgba(28, 18, 9, .65); }
#channel .arc { stroke: var(--su-acik); stroke-dasharray: 264; stroke-dashoffset: 264; }
#chLabel {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: #fff; font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 14px;
  letter-spacing: 1.5px; text-shadow: 0 2px 0 rgba(30,18,8,.8);
}

#refillTag, #lowWater {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: #fff; padding: 8px 22px; border-radius: 18px; font-weight: 800; letter-spacing: 1px;
  border: 3px solid rgba(40,24,12,.6);
}
#refillTag { bottom: 152px; background: linear-gradient(135deg, var(--su-koyu), var(--su)); animation: nabiz 1s infinite; }
#lowWater  { bottom: 198px; background: linear-gradient(135deg, #d8323f, #ff7a3c); }

/* --- olum ekrani --- */
#deadScreen {
  position: absolute; inset: 0; background: rgba(24, 14, 6, .74); backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.dead-in { color: var(--hud-metin); }
.dead-emoji { font-size: 84px; animation: sallan 1.2s infinite; }
@keyframes sallan { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
#deadScreen h2 {
  margin: 8px 0; font-size: 44px; letter-spacing: 3px; color: var(--cilek);
  text-shadow: 0 3px 0 rgba(30,18,8,.7);
}
#deadScreen p { margin: 0 0 16px; font-size: 17px; color: var(--hud-soluk); }
.geri { font-size: 19px; }
.geri b { font-size: 36px; color: var(--bal-acik); font-family: 'Baloo 2', 'Nunito', sans-serif; }

/* =====================================================================
   DOKUNMATIK
   ===================================================================== */
#touch { display: none; position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#touch.aktif { display: block; }
#touch .tbtn {
  pointer-events: auto; position: absolute; border-radius: 50%;
  background: rgba(255, 246, 230, .3); backdrop-filter: blur(8px);
  border: 3px solid rgba(255, 246, 230, .55); box-shadow: 0 5px 0 rgba(30,18,8,.35);
  color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center;
}
#touch .tbtn.bas { background: rgba(255, 246, 230, .55); transform: translateY(4px); box-shadow: 0 1px 0 rgba(30,18,8,.35); }
#btnFire { right: 28px; bottom: 36px; width: 108px; height: 108px; font-size: 46px; border-color: var(--su-acik); }
#btnAction { right: 146px; bottom: 46px; width: 78px; height: 78px; }
#btnJump { right: 38px; bottom: 158px; width: 78px; height: 78px; }
#btnSprint { right: 150px; bottom: 154px; width: 70px; height: 70px; font-size: 28px; }
#stickBase {
  display: none; position: fixed; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border-radius: 50%; background: rgba(255, 246, 230, .18);
  border: 3px solid rgba(255, 246, 230, .38); pointer-events: none; z-index: 16;
}
#stickKnob {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; background: rgba(255, 246, 230, .7); box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

/* =====================================================================
   MENULER
   ===================================================================== */
#menu {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; overflow-x: hidden;
  display: flex; align-items: center; justify-content: center; padding: 26px;
}
#menu.gizli { display: none; }
#menuBg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24,14,6,.42) 0%, rgba(24,14,6,.20) 40%, rgba(24,14,6,.55) 100%);
  backdrop-filter: blur(4px) saturate(1.05);
}
/* ana ekranda diyorama net gorunsun: sadece okunabilirlik icin gradyan */
#menu.hero #menuBg {
  backdrop-filter: none;
  background:
    radial-gradient(ellipse 70% 90% at 22% 50%, rgba(28, 16, 6, .70) 0%, rgba(28, 16, 6, 0) 72%),
    linear-gradient(180deg, rgba(24,14,6,.30) 0%, rgba(24,14,6,0) 30%, rgba(24,14,6,.42) 100%);
}
#menu.oyunda #menuBg { background: rgba(22, 13, 5, .70); backdrop-filter: blur(12px); }

/* Menu bildirimi: HUD menulerde gizli oldugu icin oyun ici `#hint`
   burada gorunmez - menude gosterilecek uyarilar buraya duser. */
#menuToast {
  position: fixed; left: 50%; top: 26px; transform: translateX(-50%);
  z-index: 40; pointer-events: none; max-width: min(560px, 90vw);
  background: linear-gradient(140deg, var(--kagit), var(--krem-2));
  color: var(--kakao); font-weight: 800; font-size: 15px;
  padding: 12px 22px; border-radius: 18px; border: 3px solid var(--kakao);
  box-shadow: var(--et-golge); text-align: center;
  animation: toastGir .34s cubic-bezier(.18,.89,.32,1.28);
}
#menuToast b { color: #a76a00; }
#menuToast.hata { background: linear-gradient(140deg, #ffe0e0, #ffc9c9); }
@keyframes toastGir { from { opacity: 0; transform: translate(-50%, -18px) scale(.9); } }

/* Dil secici: her menu ekraninda sag ustte durur, ikizi Ayarlar'da.
   `#menu` gizlendiginde birlikte kaybolur - oyun icinde gorunmez. */
#dilSecici {
  position: fixed; top: 14px; right: 16px; z-index: 41;
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(140deg, var(--kagit), var(--krem-2));
  border: 3px solid var(--kakao); border-radius: 999px;
  padding: 5px 12px 5px 14px; box-shadow: var(--et-golge-s);
}
#dilSecici .dil-ikon { font-size: 15px; line-height: 1; }
#dilSecici select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; cursor: pointer; outline: none;
  font-family: inherit; font-weight: 800; font-size: 14px; color: var(--kakao);
  padding: 2px 15px 2px 0; max-width: 118px;
  /* kendi ok isareti: yerlesik ok appearance:none ile kayboluyor */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2334210f' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right center; background-size: 9px 6px;
}
#dilSecici select:focus-visible { text-decoration: underline; }
#dilSecici { transition: transform .16s ease; }
#dilSecici:hover { transform: translateY(-1px); }

/* yetersiz para: kart kisaca sarsilsin */
.urun.sallan { animation: urunSallan .4s ease; }
@keyframes urunSallan {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* --- kart tipi ekranlar --- */
.ekran {
  display: none; position: relative; width: 100%; max-width: 900px;
  background: linear-gradient(170deg, var(--kagit), var(--krem-2));
  border: 3px solid var(--kakao); border-radius: 32px;
  padding: 30px 34px 26px; box-shadow: var(--kart-golge);
  animation: ekranIn .3s cubic-bezier(.18,.89,.32,1.28);
}
.ekran.dar { max-width: 460px; }
.ekran.genis-ekran { max-width: 1120px; }
.ekran.aktif { display: block; }
@keyframes ekranIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }

/* "Nasil Oynanir" gibi uzun icerikli ekranlar kendi icinde kaydirsin -
   disaridaki #menu dikey ortalamasi uzun icerikte ust kismi kirpabiliyor. */
.ekran[data-ekran="nasil"] {
  max-height: min(720px, 88vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--kakao-3) transparent;
}
.ekran[data-ekran="nasil"]::-webkit-scrollbar { width: 10px; }
.ekran[data-ekran="nasil"]::-webkit-scrollbar-track { background: rgba(109,81,56,.10); border-radius: 6px; }
.ekran[data-ekran="nasil"]::-webkit-scrollbar-thumb { background: var(--kakao-3); border-radius: 6px; }
.ekran[data-ekran="nasil"]::-webkit-scrollbar-thumb:hover { background: var(--kakao-2); }

/* dikis izi: pelus hissi */
.ekran:not(.hero)::before {
  content: ''; position: absolute; inset: 9px; border-radius: 23px; pointer-events: none;
  border: 2px dashed rgba(109, 81, 56, .32);
}

.ekran h2 {
  margin: 0 0 18px; text-align: center; font-size: 30px; letter-spacing: 2.5px;
  color: var(--kakao); font-weight: 700;
}
.ekran h3.altbaslik {
  margin: 24px 0 12px; text-align: center; font-size: 14px; letter-spacing: 2.5px;
  color: var(--kakao-3); font-weight: 600;
}

/* =====================================================================
   ANA EKRAN (hero)
   ===================================================================== */
.ekran.hero {
  background: none; border: none; box-shadow: none; padding: 0;
  max-width: none; width: 100%; height: 100%; animation: none;
}
.ekran.hero::after { display: none; }
.hero-ic {
  position: absolute; left: clamp(24px, 6vw, 92px); top: 50%; transform: translateY(-50%);
  max-width: 560px; display: flex; flex-direction: column; gap: 26px;
  animation: heroIn .55s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes heroIn { from { opacity: 0; transform: translateY(calc(-50% + 26px)); } }

.marka-rozet {
  display: inline-block; background: var(--bal); color: #35200c;
  font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 20px; border: 2.5px solid var(--kakao);
  box-shadow: 0 3px 0 var(--kakao); transform: rotate(-2deg);
}
.wordmark {
  margin: 14px 0 0; display: flex; flex-direction: column; line-height: .86;
  font-weight: 700; color: var(--krem);
  -webkit-text-stroke: 5px var(--kakao); paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(52, 33, 15, .5);
}
.wordmark .w1 { font-size: clamp(52px, 9vw, 104px); letter-spacing: 1px; }
.wordmark .w2 {
  font-size: clamp(38px, 6.4vw, 74px); letter-spacing: 3px; color: var(--bal-acik);
  margin-left: .08em;
}
.damla-cizgi { display: flex; gap: 8px; margin-top: 14px; }
.damla-cizgi i {
  width: 54px; height: 9px; border-radius: 6px; background: var(--su-acik);
  border: 2.5px solid var(--kakao); box-shadow: 0 3px 0 rgba(52,33,15,.55);
}
.damla-cizgi i:nth-child(2) { width: 26px; background: var(--cilek); }
.damla-cizgi i:nth-child(3) { width: 14px; background: var(--yaprak); }

.marka-alt {
  margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 19px); color: var(--krem);
  text-shadow: 0 2px 6px rgba(20, 10, 2, .8); font-weight: 700;
}
.marka-alt b { color: var(--bal-acik); }

.hero-butonlar { display: flex; flex-direction: column; gap: 12px; max-width: 430px; }
.btn-sira { display: flex; gap: 12px; }
.btn-sira .btn { flex: 1; }

.hero-alt { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cip {
  background: rgba(28, 16, 6, .62); border: 2px solid rgba(255, 246, 230, .3);
  color: var(--krem); font-size: 13px; font-weight: 800; padding: 6px 14px;
  border-radius: 14px; backdrop-filter: blur(6px);
}
.cip.sessiz { color: rgba(255, 246, 230, .62); font-weight: 700; }
.cip.para-cip { color: var(--bal-acik); font-size: 15px; }
.cip.para-cip b { font-family: 'Baloo 2', 'Nunito', sans-serif; }

/* =====================================================================
   BUTONLAR (etiket / oyuncak dugmesi)
   ===================================================================== */
.btn {
  pointer-events: auto; cursor: pointer; position: relative;
  border: 3px solid var(--kakao); border-radius: var(--r-orta);
  padding: 13px 24px; font-size: 17px; font-weight: 600; letter-spacing: .6px;
  background: var(--kagit); color: var(--kakao);
  box-shadow: var(--et-golge-s);
  transition: transform .1s, box-shadow .1s, background .12s;
}
.btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--kakao), 0 12px 22px rgba(40,24,12,.3); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--kakao), 0 4px 10px rgba(40,24,12,.3); }
.btn.ince { padding: 10px 18px; font-size: 15px; }
.btn.birincil {
  background: linear-gradient(140deg, var(--bal-acik), var(--bal));
  color: #35200c; font-size: 19px;
}
.btn.birincil:hover { background: linear-gradient(140deg, #ffe28f, #ffc247); }
.btn.dev {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 28px; border-radius: 22px;
  background: linear-gradient(140deg, var(--bal-acik), #ff9c2e);
  color: #35200c; box-shadow: var(--et-golge);
}
.btn.dev:hover { background: linear-gradient(140deg, #ffe793, #ffab3d); transform: translateY(-3px); }
.btn.dev .btn-ana { font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 26px; letter-spacing: 2px; }
.btn.dev .btn-alt { font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 800; opacity: .72; letter-spacing: .5px; }
.btn.tehlike { background: linear-gradient(140deg, #ff8a80, var(--cilek)); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btnlar { display: flex; flex-direction: column; gap: 12px; max-width: 340px; margin: 0 auto; }
.btnlar.yatay { flex-direction: row; max-width: none; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* =====================================================================
   MOD KARTLARI
   ===================================================================== */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.kart {
  position: relative; cursor: pointer; background: var(--krem); border-radius: 24px;
  padding: 20px; text-align: center; border: 3px solid var(--kakao);
  box-shadow: 0 5px 0 rgba(52,33,15,.55);
  transition: transform .14s, box-shadow .14s, background .14s;
}
.kart:hover { transform: translateY(-4px); box-shadow: 0 9px 0 rgba(52,33,15,.55); }
.kart.secili { background: linear-gradient(160deg, #d8f2ff, #b3e5fb); box-shadow: 0 5px 0 var(--su-koyu), 0 0 0 4px rgba(26,158,217,.24); }
.kart-ikon { font-size: 42px; }
.kart h3 { margin: 6px 0; font-size: 21px; color: var(--kakao); }
.kart p { margin: 0; font-size: 13.5px; color: var(--kakao-2); line-height: 1.5; font-weight: 700; }
.etiketler { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.etiketler span {
  background: var(--kakao); color: var(--krem);
  padding: 3px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 800;
}

.secim { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sec {
  cursor: pointer; font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 15px; font-weight: 600;
  padding: 9px 24px; border-radius: 14px; background: var(--kagit);
  color: var(--kakao-2); border: 3px solid var(--kakao); box-shadow: 0 3px 0 var(--kakao);
  transition: .12s;
}
.sec:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--kakao); }
.sec.aktif { background: var(--yaprak); color: #fff; box-shadow: 0 3px 0 #2c7a38; }

/* --- donanim ozeti --- */
.donanim {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px;
}
.don-kart {
  display: flex; align-items: center; gap: 11px; background: var(--kagit);
  border: 3px solid var(--kakao); border-radius: 18px; padding: 9px 16px 9px 12px;
  box-shadow: 0 3px 0 var(--kakao); cursor: pointer; transition: .12s;
}
.don-kart:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--kakao); }
.don-nokta { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--kakao); }
.don-yazi { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.don-yazi small { font-size: 10.5px; letter-spacing: 1.6px; color: var(--kakao-3); font-weight: 800; }
.don-yazi b { font-size: 15px; color: var(--kakao); font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 600; }

/* =====================================================================
   DUKKAN
   ===================================================================== */
.dukkan-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dukkan-baslik h2 { margin: 0; }

.sekmeler { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.sekme {
  cursor: pointer; font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 15.5px; font-weight: 600;
  padding: 10px 22px; border-radius: 16px; background: var(--kagit);
  color: var(--kakao-2); border: 3px solid var(--kakao); box-shadow: 0 3px 0 var(--kakao);
  transition: .12s;
}
.sekme:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--kakao); }
.sekme.aktif { background: linear-gradient(140deg, var(--su-acik), var(--su)); color: #fff; }

.dukkan-govde { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
.dukkan-onizleme {
  background: linear-gradient(175deg, #cdeeff, #a7dcf6); border: 3px solid var(--kakao);
  border-radius: 24px; padding: 14px; text-align: center; position: relative;
  box-shadow: 0 5px 0 rgba(52,33,15,.5);
}
.onizleme-kutu {
  position: relative; width: 100%; height: 280px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 78%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 62%);
}
#shopCanvas { width: 100%; height: 100%; display: block; cursor: grab; }
#shopCanvas:active { cursor: grabbing; }
.onizleme-bilgi h3 { margin: 10px 0 2px; font-size: 21px; color: var(--kakao); }
.onizleme-bilgi p { margin: 0 0 6px; font-size: 13px; color: var(--kakao-2); font-weight: 700; }
.onizleme-ipucu { font-size: 11.5px; color: var(--su-koyu); font-weight: 800; letter-spacing: .4px; }

.izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
  max-height: 56vh; overflow-y: auto; padding: 4px 6px 6px 4px;
}
.izgara::-webkit-scrollbar { width: 10px; }
.izgara::-webkit-scrollbar-track { background: rgba(109,81,56,.12); border-radius: 6px; }
.izgara::-webkit-scrollbar-thumb { background: var(--kakao-3); border-radius: 6px; }

.urun {
  position: relative; background: var(--kagit); border-radius: 20px; padding: 15px;
  border: 3px solid var(--kakao); cursor: pointer; transition: .13s;
  box-shadow: 0 4px 0 rgba(52,33,15,.5);
}
.urun:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(52,33,15,.5); }
.urun.secili { background: linear-gradient(160deg, #dcf4ff, #b8e7fb); box-shadow: 0 4px 0 var(--su-koyu), 0 0 0 4px rgba(26,158,217,.22); }
.urun.kilitli { background: repeating-linear-gradient(135deg, #f3e9da 0 10px, #eee2d0 10px 20px); }
.urun .u-ust { display: flex; align-items: center; gap: 10px; }
.urun .u-nokta { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--kakao); }
.urun h4 { margin: 0; font-size: 16.5px; color: var(--kakao); font-weight: 600; }
.urun .u-ozet { margin: 8px 0 0; font-size: 12.5px; color: var(--kakao-2); line-height: 1.45; min-height: 36px; font-weight: 700; }
.urun .u-yetenek {
  margin-top: 8px; font-size: 11.5px; color: #23632e; background: #cdf0d3;
  padding: 3px 10px; border-radius: 9px; display: inline-block; font-weight: 800;
  border: 2px solid #7cc487;
}
.urun .u-alt { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.urun .u-fiyat { font-weight: 800; color: #a76a00; font-size: 14.5px; }
.urun .u-durum {
  font-size: 11.5px; font-weight: 800; padding: 4px 12px; border-radius: 10px;
  background: var(--kakao); color: var(--krem);
}
.urun.secili .u-durum { background: var(--su); color: #fff; }
.urun .u-stat { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.urun .u-stat span {
  font-size: 10.5px; background: rgba(109,81,56,.13); color: var(--kakao-2);
  padding: 3px 8px; border-radius: 8px; font-weight: 800;
}

/* =====================================================================
   NASIL OYNANIR
   ===================================================================== */
.nasil-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.nasil-kart {
  background: var(--kagit); border-radius: 20px; padding: 16px;
  border: 3px solid var(--kakao); box-shadow: 0 4px 0 rgba(52,33,15,.45);
}
.nasil-kart .ni { font-size: 32px; }
.nasil-kart h4 { margin: 4px 0 6px; color: var(--kakao); font-size: 18px; font-weight: 600; }
.nasil-kart p { margin: 0; font-size: 13px; color: var(--kakao-2); line-height: 1.5; font-weight: 700; }

.minik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.minik-kart {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  background: var(--kagit); border: 3px solid var(--kakao); border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 4px 0 rgba(52,33,15,.45);
}
.minik-kart .mi { grid-row: 1 / 3; font-size: 30px; text-align: center; }
.minik-kart b { font-size: 15.5px; color: var(--kakao); font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 600; }
.minik-kart i { font-size: 12.5px; color: var(--kakao-2); font-style: normal; font-weight: 700; line-height: 1.4; }
.minik-kart.guc-yildiz   { background: linear-gradient(150deg, #fff3d2, #ffe4a3); }
.minik-kart.guc-kalp     { background: linear-gradient(150deg, #ffe6ea, #ffcdd6); }
.minik-kart.guc-mucevher { background: linear-gradient(150deg, #ddf6ff, #b8e9fb); }
.minik-kart.olay-saganak  { background: linear-gradient(150deg, #e0efff, #c3ddf6); }
.minik-kart.olay-kuraklik { background: linear-gradient(150deg, #ffeed6, #ffdcae); }
.minik-kart.olay-altin    { background: linear-gradient(150deg, #fff6d5, #ffe89c); }

.tuslar { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 20px; font-size: 13px; color: var(--kakao-2); }
.tuslar div { background: rgba(109,81,56,.11); padding: 7px 14px; border-radius: 12px; font-weight: 800; }
kbd {
  background: var(--kakao); color: var(--krem); padding: 3px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600;
}

/* =====================================================================
   AYARLAR
   ===================================================================== */
.ayarlar { display: flex; flex-direction: column; gap: 11px; max-width: 540px; margin: 0 auto; }
.ayar {
  display: flex; align-items: center; gap: 14px; background: var(--kagit); padding: 12px 18px;
  border-radius: 16px; border: 3px solid var(--kakao); box-shadow: 0 3px 0 rgba(52,33,15,.4);
}
.ayar span { flex: 1; font-size: 15px; color: var(--kakao); font-weight: 800; }
.ayar input[type=range] { flex: 1.2; accent-color: var(--su); }
.ayar input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--su); }
.ayar select {
  font-family: inherit; font-size: 14.5px; font-weight: 800; padding: 7px 12px; border-radius: 11px;
  border: 3px solid var(--kakao); background: var(--krem); color: var(--kakao);
}
.ayar b { min-width: 46px; text-align: right; color: var(--su-koyu); font-weight: 800; }

/* =====================================================================
   SONUC
   ===================================================================== */
.sonuc-ust { text-align: center; }
.sonuc-alt { margin: -10px 0 16px; font-size: 16.5px; color: var(--kakao-2); font-weight: 700; }
.madalyalar { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.madalya {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 18px;
  background: linear-gradient(150deg, #fff4d6, #ffe295); border: 3px solid var(--kakao);
  box-shadow: 0 4px 0 rgba(52,33,15,.45);
}
.madalya .mi { font-size: 26px; }
.madalya .mt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.madalya .mt small { font-size: 10.5px; letter-spacing: 1.5px; color: var(--kakao-3); font-weight: 800; }
.madalya .mt b { font-size: 15px; color: var(--kakao); font-family: 'Baloo 2', 'Nunito', sans-serif; font-weight: 600; }

#skorTablo { max-height: 42vh; overflow-y: auto; border-radius: 16px; border: 3px solid var(--kakao); }
#skorTablo table { width: 100%; border-collapse: collapse; font-size: 14px; }
#skorTablo th {
  text-align: left; font-size: 11px; letter-spacing: 1.4px; color: var(--krem);
  padding: 9px 12px; background: var(--kakao); position: sticky; top: 0; font-weight: 800;
}
#skorTablo td { padding: 9px 12px; background: var(--kagit); color: var(--kakao); border-bottom: 2px solid rgba(109,81,56,.14); font-weight: 700; }
#skorTablo tr.ben td { background: linear-gradient(90deg, #d9f2ff, #eaf8ff); font-weight: 800; }
#skorTablo tr.t0 td:first-child { box-shadow: inset 6px 0 0 var(--mavi); }
#skorTablo tr.t1 td:first-child { box-shadow: inset 6px 0 0 var(--kirmizi); }
#skorTablo .say { text-align: right; }
.kazanc { text-align: center; margin-top: 16px; font-size: 18px; color: var(--kakao-2); font-weight: 800; }
.kazanc b { color: #a76a00; font-size: 27px; font-family: 'Baloo 2', 'Nunito', sans-serif; }

/* =====================================================================
   YUKLENIYOR & GERI SAYIM
   ===================================================================== */
#loading {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(ellipse at 50% 35%, #2c4a63 0%, #16283a 55%, #0d1824 100%);
  display: flex; align-items: center; justify-content: center;
}
#loading.bitti { opacity: 0; pointer-events: none; transition: opacity .6s; }
.yuk-ic { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.yuk-emoji { font-size: 76px; animation: zipla 1s infinite; }
@keyframes zipla { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-20px) scale(.94, 1.06); } }
.yuk-metin { font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 20px; color: var(--krem); letter-spacing: .8px; }
.yuk-bar {
  width: 280px; height: 16px; border-radius: 10px; background: rgba(255, 246, 230, .16);
  border: 3px solid rgba(255, 246, 230, .5); overflow: hidden;
}
.yuk-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--su-acik), var(--bal-acik)); transition: width .3s; }
.yuk-not { font-size: 12px; color: rgba(255, 246, 230, .5); font-weight: 700; letter-spacing: .5px; }

#countdown { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#cdText {
  font-family: 'Baloo 2', 'Nunito', sans-serif; font-size: 138px; font-weight: 700; color: var(--krem);
  -webkit-text-stroke: 8px var(--kakao); paint-order: stroke fill;
  text-shadow: 0 10px 0 rgba(52,33,15,.45);
  animation: cd .8s ease-out;
}
@keyframes cd {
  0% { transform: scale(.3) rotate(-9deg); opacity: 0; }
  35% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: .95; }
}

/* =====================================================================
   DUYARLI
   ===================================================================== */
@media (max-width: 980px) {
  .dukkan-govde { grid-template-columns: 1fr; }
  .dukkan-onizleme { max-width: 340px; margin: 0 auto 14px; }
}
@media (max-width: 820px) {
  #menu { padding: 16px; align-items: flex-start; }
  #dilSecici { top: 10px; right: 10px; padding: 4px 9px 4px 11px; gap: 5px; }
  #dilSecici select { font-size: 12.5px; max-width: 92px; }
  .ekran { padding: 22px 18px; border-radius: 26px; }
  .hero-ic { position: static; transform: none; max-width: none; padding: 18px 6px; gap: 20px;
             min-height: 100%; justify-content: center; }
  #menu.hero #menuBg { background: linear-gradient(180deg, rgba(24,14,6,.55), rgba(24,14,6,.75)); }
  .wordmark { -webkit-text-stroke-width: 4px; }
  #minimapWrap { width: 118px; height: 118px; top: 12px; right: 12px; }
  #bolgeAd { font-size: 10px; padding: 1px 8px; }
  #killfeed { top: 150px; width: 220px; right: 12px; }
  #statPanel { left: 12px; bottom: 12px; width: 226px; padding: 11px 14px; }
  #sidePanel { display: none; }
  #timer { font-size: 27px; }
  #olayBanner .ooz { display: none; }
  .izgara { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); max-height: none; }
}
@media (max-height: 560px) {
  #minimapWrap { display: none; }
  #killfeed { top: 70px; }
}

/* =====================================================================
   COK OYUNCULU & AG STYLES
   ===================================================================== */
.btn.online-btn {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #fff;
  border-color: #1e3a8a;
  box-shadow: 0 6px 0 #172554, 0 8px 20px rgba(37, 99, 235, 0.4);
}
.btn.online-btn:hover {
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
  transform: translateY(-2px) scale(1.02);
}

#netPing {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 24, 36, 0.75);
  border: 2px solid rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  color: #e0f2fe;
  backdrop-filter: blur(6px);
}
.ping-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.ping-dot.ping-orta { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.ping-dot.ping-kotu { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

#chatWrap {
  position: absolute;
  bottom: 24px;
  left: 280px;
  width: 320px;
  max-width: calc(100vw - 320px);
  z-index: 15;
  pointer-events: auto;
}
#chatLog {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 6px;
  pointer-events: none;
}
.chat-msg {
  background: rgba(16, 24, 36, 0.76);
  color: #fff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  backdrop-filter: blur(4px);
  animation: chatIn .2s ease-out;
  display: inline-block;
  align-self: flex-start;
}
@keyframes chatIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg b { color: #38bdf8; margin-right: 6px; }
.chat-msg.sistem { background: rgba(245, 158, 11, 0.85); color: #1e1b18; }
#chatInputBar {
  display: flex;
  gap: 6px;
  background: rgba(16, 24, 36, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 4px;
  border-radius: 12px;
}
#chatInput {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
  outline: none;
}
#btnSendChat {
  background: var(--su);
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* LOBI EKRANI */
.lobi-baslik-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 3px solid rgba(109, 81, 56, 0.2);
  padding-bottom: 12px;
}
.lobi-profil {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--kagit);
  border: 2px solid var(--kakao);
  padding: 4px 12px;
  border-radius: 14px;
}
.profil-etiket { font-weight: 800; font-size: 13px; color: var(--kakao-2); }
.lobi-profil input {
  background: var(--krem);
  border: 2px solid var(--kakao);
  border-radius: 8px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--kakao);
  width: 130px;
}

.lobi-govde {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  margin-bottom: 18px;
}
.lobi-aksiyon-paneli {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lobi-kutu {
  background: var(--kagit);
  border: 3px solid var(--kakao);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 0 rgba(52,33,15,.2);
}
.lobi-kutu h3 { margin-bottom: 12px; font-size: 17px; color: var(--kakao); }
.oda-form { display: flex; flex-direction: column; gap: 10px; }
.lobi-input-grup { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.lobi-input-grup span { font-size: 13px; font-weight: 800; color: var(--kakao-2); }
.lobi-input-grup input, .lobi-input-grup select {
  padding: 7px 10px;
  border-radius: 10px;
  border: 2px solid var(--kakao);
  background: var(--krem);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--kakao);
}
.cb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--kakao);
  cursor: pointer;
}
.cb-label input { width: 18px; height: 18px; accent-color: var(--su); }

.lobi-liste-paneli {
  background: var(--kagit);
  border: 3px solid var(--kakao);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 0 rgba(52,33,15,.2);
}
.liste-baslik-sira {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.canli-rozet {
  background: #22c55e;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 1px;
}
.oda-listesi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 44vh;
  overflow-y: auto;
}
.oda-karti {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--krem);
  border: 2px solid var(--kakao);
  border-radius: 14px;
  padding: 12px 16px;
  transition: transform .15s, border-color .15s;
}
.oda-karti:hover {
  transform: translateY(-2px);
  border-color: var(--su-koyu);
}
.ok-sol { text-align: left; }
.ok-ad { font-size: 16px; font-weight: 800; color: var(--kakao); }
.ok-detay { display: flex; gap: 8px; margin-top: 4px; }
.ok-etiket {
  background: rgba(109, 81, 56, 0.15);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 8px;
  color: var(--kakao-2);
}
.ok-etiket.dolu { background: #fee2e2; color: #dc2626; }
.ok-etiket.oyunda { background: #fef3c7; color: #d97706; }
.oda-bos {
  padding: 30px;
  color: var(--kakao-3);
  font-weight: 700;
  text-align: center;
  font-size: 15px;
}

/* ODA / BEKLEME EKRANI */
.oda-ust-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 3px solid rgba(109, 81, 56, 0.2);
  padding-bottom: 12px;
  text-align: left;
}
.oda-durum-rozet {
  background: var(--bal);
  color: var(--kakao);
  font-size: 13px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 14px;
  border: 2px solid var(--kakao);
}
.oda-takimlar-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.takim-karti {
  background: var(--kagit);
  border: 3px solid var(--kakao);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 0 rgba(52,33,15,.2);
}
.takim-karti.t-mavi { border-top: 6px solid #2563eb; }
.takim-karti.t-kirmizi { border-top: 6px solid #dc2626; }
.tk-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tk-ad { font-size: 16px; font-weight: 900; }
.t-mavi .tk-ad { color: #2563eb; }
.t-kirmizi .tk-ad { color: #dc2626; }

.oyuncu-listesi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
}
.oyuncu-karti {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--krem);
  border: 2px solid var(--kakao);
  border-radius: 12px;
  padding: 8px 12px;
}
.oyuncu-karti.ben {
  background: #e0f2fe;
  border-color: #0284c7;
}
.oy-bilgi { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.oy-durum { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.rozet-hazir { color: #16a34a; font-weight: 900; }
.rozet-bekliyor { color: #ca8a04; font-weight: 800; }
.rozet-host { color: #d97706; font-size: 14px; }

.oda-alt-govde {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}
.oda-sohbet-kutusu {
  background: var(--kagit);
  border: 3px solid var(--kakao);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sohbet-mesajlar {
  height: 110px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  text-align: left;
}
.sohbet-girdi-sira { display: flex; gap: 6px; }
.sohbet-girdi-sira input {
  flex: 1;
  background: var(--krem);
  border: 2px solid var(--kakao);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
}

.oda-yonetim-kutusu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.oda-donanim {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--kakao-2);
  background: var(--kagit);
  border: 2px solid var(--kakao);
  padding: 8px 16px;
  border-radius: 12px;
}

@media (max-width: 820px) {
  .lobi-govde { grid-template-columns: 1fr; }
  .oda-takimlar-izgara { grid-template-columns: 1fr; }
  .oda-alt-govde { grid-template-columns: 1fr; }
  #chatWrap { left: 12px; bottom: 85px; width: 260px; }
}

/* =====================================================================
   DOKUNMATIK HUD
   =====================================================================

   `body.dokunmatik` sinifini input.js, dokunmatik kontrolleri actigi anda
   ekliyor (bkz. _touchKipiAc). Ekran genisligine gore MEDIA QUERY
   KULLANILMIYOR - dar bir masaustu penceresi hala fare/klavye ile
   oynaniyor ve orada buyuk HUD dogru olan; belirleyici olan girdi kipi.

   ---------------------------------------------------------------------
   TASARIM KURALI: EKRANIN ORTASI OYUNUNDUR

   Masaustu duzeninde ipucu %63, skor balonlari %56, seri afisi %22
   yuksekliginde - yani tam bakis hattinin ustunde. Kucuk bir telefon
   ekraninda bunlar oyunun goruntusunu kapatiyordu.

   Burada hepsi UST BANDA toplaniyor (52-104 px arasi ince satirlar) ve
   punto kuculuyor. Ortada yalnizca artı imleci ve kanal halkasi kaliyor.

   ---------------------------------------------------------------------
   TASARIM KURALI 2: BASPARMAK BOLGELERI BOS KALIR

   Sol alt kose yon cubugunun, sag alt kose dugmelerin. Masaustundeki
   `#statPanel` (sol alt, 288 px) ve `#sidePanel` (sag alt, 194 px) tam
   oralara denk geliyordu - parmak paneli ortuyor, panel dokunusu yiyordu.
   Ikisi de ust koselere tasindi.
   ===================================================================== */

/* --- ust bar: dikey yigin yerine TEK SIRA --- */
body.dokunmatik #topbar {
  top: calc(4px + env(safe-area-inset-top));
  flex-direction: row;
  align-items: center;
  gap: 6px;
  max-width: 60vw;
}
body.dokunmatik #timer {
  font-size: 19px; padding: 1px 12px; border-radius: 13px; border-width: 1.5px;
}
body.dokunmatik #teamScores { gap: 5px; }
body.dokunmatik #teamScores .ts { padding: 1px 8px; gap: 5px; border-radius: 10px; border-width: 1.5px; }
body.dokunmatik #teamScores .ts b { font-size: 15px; }
body.dokunmatik #teamScores .ts .ad { font-size: 8.5px; letter-spacing: 1px; }
body.dokunmatik #soloRank { font-size: 10px; padding: 1px 9px; border-width: 1.5px; }
body.dokunmatik #olayBanner {
  padding: 3px 10px 3px 6px; gap: 6px; border-width: 1.5px; border-radius: 12px;
}
body.dokunmatik #olayBanner .oi { font-size: 15px; }
body.dokunmatik #olayBanner .oad { font-size: 10px; letter-spacing: 1px; }
body.dokunmatik #olayBanner .ooz { font-size: 8.5px; }
body.dokunmatik #olayBanner .osure { font-size: 11px; }

/* --- bildirim bandi: ust bar ile ayni sutunda, ince satirlar --- */
/* Ust uste binmesinler diye ayri satirlar; goz icin yine tek bir serit. */
body.dokunmatik #seriToast {
  top: calc(38px + env(safe-area-inset-top));
  font-size: 13px; letter-spacing: .8px; padding: 2px 14px;
  border-radius: 12px; border-width: 2px;
  box-shadow: 0 3px 0 rgba(53,32,12,.55), 0 6px 14px rgba(20,12,5,.35);
}
body.dokunmatik #seriToast small { display: inline; font-size: 9.5px; margin-left: 7px; }

body.dokunmatik #hint {
  top: calc(64px + env(safe-area-inset-top));
  bottom: auto;
  font-size: 11px; padding: 4px 12px; border-radius: 11px; border-width: 1.5px;
  max-width: 78vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.dokunmatik #scorePops { top: calc(88px + env(safe-area-inset-top)); }
body.dokunmatik .pop { font-size: 19px; text-shadow: 0 2px 0 rgba(40,24,12,.8); }

/* Depo/islaklik uyarilari da yukari: alt kenar dugmelerin. */
body.dokunmatik #refillTag,
body.dokunmatik #lowWater {
  bottom: auto; top: calc(88px + env(safe-area-inset-top));
  font-size: 11px; padding: 3px 12px; border-width: 2px; border-radius: 12px;
}
body.dokunmatik #lowWater { top: calc(112px + env(safe-area-inset-top)); }

/* --- sol ust: islaklik + depo (hayati bilgi) --- */
body.dokunmatik #statPanel {
  left: calc(6px + env(safe-area-inset-left));
  top: calc(4px + env(safe-area-inset-top));
  bottom: auto;
  width: 132px; padding: 6px 8px 5px; border-radius: 12px; border-width: 1.5px;
}
body.dokunmatik .stat { margin-bottom: 5px; }
body.dokunmatik .etiket { font-size: 8px; letter-spacing: .6px; margin-bottom: 2px; }
body.dokunmatik .stat-ikon { font-size: 9px; }
body.dokunmatik #statPanel .bar { height: 7px; }
body.dokunmatik #gunName { font-size: 9px; margin-top: 2px; }
body.dokunmatik #gucRozetler { gap: 4px; margin-top: 5px; }
body.dokunmatik #gucRozetler .gr { font-size: 9px; padding: 1px 6px; }

/* --- sol ust: yalnizca puan, islaklik panelinin YANINDA --- */
/*
   Parcalama/asist/kurutma dokumu mac ortasinda karar degistirmiyor;
   skor tablosu zaten Tab'da ve mac sonunda tam haliyle var.

   TUZAK: bu kutu once `#statPanel`in ALTINA konmustu (top: 92px). Ama
   statPanel'in yuksekligi sabit degil - toplanan guclendirici rozetleri
   (#gucRozetler) icine geliyor ve panel uzuyor. Sonucta "Puan" kutusu
   silah adinin uzerine biniyordu. Yan yana dizince yukseklik bagimliligi
   tamamen ortadan kalkiyor.
*/
body.dokunmatik #sidePanel {
  right: auto; bottom: auto;
  left: calc(144px + env(safe-area-inset-left));
  top: calc(4px + env(safe-area-inset-top));
  width: auto; padding: 3px 10px; border-radius: 11px; border-width: 1.5px;
}
body.dokunmatik #sidePanel .row:not(.puan) { display: none; }
body.dokunmatik #sidePanel .puan {
  margin-top: 0; padding-top: 0; border-top: 0; font-size: 10px; gap: 8px;
}
body.dokunmatik #sidePanel .puan b { font-size: 14px; }

/* --- sag ust: kucuk radar --- */
body.dokunmatik #minimapWrap {
  right: calc(6px + env(safe-area-inset-right));
  top: calc(4px + env(safe-area-inset-top));
  width: 84px; height: 84px; border-width: 2px;
}
body.dokunmatik #bolgeAd { font-size: 8.5px; padding: 1px 7px; bottom: -9px; border-width: 1.5px; }

/* --- sag ust (alti): kucuk oldurme akisi --- */
body.dokunmatik #killfeed {
  right: calc(6px + env(safe-area-inset-right));
  top: calc(96px + env(safe-area-inset-top));
  width: min(44vw, 260px);
}
body.dokunmatik .kf {
  font-size: 9.5px; padding: 2px 8px; border-radius: 9px;
  border-width: 1.5px; margin-bottom: 3px;
}

/* --- merkez: yalnizca imlec ve kanal halkasi --- */
body.dokunmatik #channel { width: 78px; height: 78px; }
body.dokunmatik #channel circle { stroke-width: 7; }
body.dokunmatik #chLabel { font-size: 9px; }

/* --- sohbet: yon cubuguna denk gelmesin --- */
body.dokunmatik #chatWrap {
  left: calc(6px + env(safe-area-inset-left));
  bottom: auto; top: calc(126px + env(safe-area-inset-top));
  width: 42vw;
}
body.dokunmatik #chatLog { max-height: 72px; font-size: 10px; }

/* --- dokunmatik dugmeler: guvenli alan ve alcak ekran uyumu --- */
body.dokunmatik #btnFire   { right: calc(18px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
body.dokunmatik #btnAction { right: calc(126px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); }
body.dokunmatik #btnJump   { right: calc(28px + env(safe-area-inset-right)); bottom: calc(132px + env(safe-area-inset-bottom)); }
body.dokunmatik #btnSprint { right: calc(130px + env(safe-area-inset-right)); bottom: calc(128px + env(safe-area-inset-bottom)); }

/* Alcak ekran (yatay telefon): dugme kumesi ekranin yarisini yemesin. */
@media (max-height: 460px) {
  body.dokunmatik #btnFire   { width: 82px; height: 82px; font-size: 34px; }
  body.dokunmatik #btnAction { width: 58px; height: 58px; font-size: 24px; right: calc(108px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); }
  body.dokunmatik #btnJump   { width: 58px; height: 58px; font-size: 24px; bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.dokunmatik #btnSprint { width: 54px; height: 54px; font-size: 21px; right: calc(106px + env(safe-area-inset-right)); bottom: calc(104px + env(safe-area-inset-bottom)); }
  body.dokunmatik #stickBase { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  body.dokunmatik #stickKnob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  body.dokunmatik #chatWrap { display: none; }
}

/* --- alcak ekran (yatay telefon): radar gizliyken kose oldurme akisinin --- */
/*
   Yukaridaki `@media (max-height: 560px)` kurali radari zaten gizliyor.
   Bosalan sag ust koseyi oldurme akisina veriyoruz: boylece akis merkez
   gorus bandindan (ekranin orta %44'u) tamamen cikiyor. Genislik sinirli,
   cunku 30vw yatay telefonda merkez bandina tasiyordu.
*/
@media (max-height: 560px) {
  body.dokunmatik #killfeed {
    top: calc(4px + env(safe-area-inset-top));
    width: min(28vw, 210px);
  }
}

/* Baslangic geri sayimi: mobilde ekranin yarisini kaplamasin. Gecici bir
   oge oldugu icin ortada kalabilir, ama puntosu kucultuluyor. */
body.dokunmatik #cdText {
  font-size: 76px; -webkit-text-stroke-width: 5px; text-shadow: 0 6px 0 rgba(52,33,15,.45);
}

/* =====================================================================
   DAR VE ALCAK EKRAN DUZELTMELERI
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) YATAY TASMA
   Uc ayri yerde ayni kok sebep vardi: flex/grid cocuklarinin varsayilan
   `min-width: auto` degeri, ogenin KENDI ICERIGINDEN dar olmasini
   engelliyor. Kapsayici daralinca oge kuculemiyor ve disari tasiyor.

   Bu ozellikle kotu, cunku `#menu` yatayda kaydirilamiyor
   (overflow-x: hidden): tasan kisim kirpiliyor ve dugmelere ERISILEMIYOR.
   320 px'de olculen tasmalar: .lobi-profil +42, .oda-sohbet-kutusu +43,
   #setSensV +20.
   --------------------------------------------------------------------- */
.lobi-profil { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.lobi-profil input { min-width: 0; flex: 1 1 110px; }

.oda-sohbet-kutusu { min-width: 0; max-width: 100%; }
.sohbet-mesajlar { min-width: 0; }
.sohbet-girdi-sira { min-width: 0; flex-wrap: wrap; }
.sohbet-girdi-sira input { min-width: 0; flex: 1 1 120px; }

.ayar { flex-wrap: wrap; min-width: 0; }
.ayar span { min-width: 0; }
.ayar input[type=range] { min-width: 0; }

/* Genel emniyet: izgara ve esnek kutu cocuklari daralabilsin. */
.lobi-govde > *, .oda-takimlar-izgara > *, .oda-alt-govde > *, .dukkan-govde > * {
  min-width: 0;
}

/* ---------------------------------------------------------------------
   2) ANA EKRAN DIKEYDE SIGSIN

   `.hero-ic` masaustunde mutlak konumlu ve dikeyde ortalanmis
   (top: 50% + translateY(-50%)). Icerik ekrandan uzun oldugunda hem
   yukaridan hem asagidan tasiyor - ustteki kisim kaydirma baslangicinin
   USTUNDE kaldigi icin hicbir sekilde gorulemiyor.

   Alcak ekranlarda (yatay telefon) da akisa donuyor; boylece en kotu
   durumda kaydirilabilir kaliyor.

   Olculen dikey tasma: 320x568'de +215 px, 844x390'da +149 px.
   Asagidaki kompakt olculer bunlari kapatiyor.
   --------------------------------------------------------------------- */
@media (max-height: 560px) {
  .hero-ic {
    position: static; transform: none; max-width: none;
    padding: 14px 6px; min-height: 100%; justify-content: center;
  }
  #menu.hero #menuBg {
    background: linear-gradient(180deg, rgba(24,14,6,.55), rgba(24,14,6,.75));
  }
}

@media (max-width: 430px), (max-height: 560px) {
  #menu { padding: 12px; }

  .hero-ic { gap: 12px; }

  .marka-rozet { font-size: 10px; letter-spacing: 1.8px; padding: 3px 10px; border-width: 2px; }

  .wordmark { margin-top: 6px; -webkit-text-stroke-width: 3.5px; text-shadow: 0 5px 0 rgba(52,33,15,.5); }
  .wordmark .w1 { font-size: clamp(34px, 10vw, 54px); }
  .wordmark .w2 { font-size: clamp(26px, 7.2vw, 40px); letter-spacing: 2px; }

  .damla-cizgi { margin-top: 6px; gap: 6px; }
  .damla-cizgi i { height: 6px; width: 38px; border-width: 2px; }
  .damla-cizgi i:nth-child(2) { width: 20px; }
  .damla-cizgi i:nth-child(3) { width: 11px; }

  .marka-alt { margin-top: 6px; font-size: 12.5px; }

  .hero-butonlar { gap: 8px; max-width: none; }
  .btn.dev { padding: 9px 18px; border-radius: 16px; }
  .btn.dev .btn-ana { font-size: 19px; letter-spacing: 1.2px; }
  .btn.dev .btn-alt { font-size: 10px; }
  .btn-sira { gap: 8px; }

  .hero-alt { gap: 6px; }
  .cip { font-size: 11px; padding: 4px 10px; border-radius: 11px; }
  .cip.para-cip { font-size: 12.5px; }
}

/* Cok dar telefonlarda ek sikilastirma (320 px sinifi cihazlar). */
@media (max-width: 360px) {
  .wordmark .w1 { font-size: 38px; }
  .wordmark .w2 { font-size: 28px; }
  .marka-alt { font-size: 11.5px; }
  .btn.dev .btn-ana { font-size: 17px; }
  .ekran { padding: 16px 12px; border-radius: 20px; }
}

/* Orta boy ekranlarda (1280x720 gibi) ana ekran birkac piksel tasiyordu:
   mutlak konumlu `.hero-ic` dikeyde ortalanirken alt kenari `#menu`
   yuksekligini biraz asiyor. Hafif bir sikilastirma yetiyor. */
@media (max-height: 780px) {
  .hero-ic { gap: 18px; }
  .wordmark { margin-top: 8px; }
  .marka-alt { margin-top: 8px; }
  .damla-cizgi { margin-top: 8px; }
}

/* 320 px sinifi cihazlarda son sikilastirma. Damla cizgisi tamamen
   dekoratif oldugu icin burada gizleniyor - islevsel hicbir sey
   kaybedilmiyor, buna karsilik dugmeler ekrana giriyor. */
@media (max-width: 360px) {
  #menu { padding: 8px; }
  .hero-ic { gap: 8px; }
  .damla-cizgi { display: none; }
  .wordmark { margin-top: 2px; }
  .marka-alt { margin-top: 4px; font-size: 11px; line-height: 1.25; }
  .btn { padding: 9px 16px; font-size: 14.5px; border-width: 2.5px; }
  .btn.ince { padding: 7px 12px; font-size: 13px; }
  .btn.dev { padding: 7px 14px; }
  .btn.dev .btn-alt { font-size: 9.5px; }
}

/* --- ust serit parcalari: yatay dizilime uygun olculer --- */
#timer { font-size: 26px; padding: 2px 18px; border-radius: 18px; }
#teamScores { gap: 8px; }
#teamScores .ts { padding: 3px 12px; gap: 7px; }
#teamScores .ts b { font-size: 20px; }
#teamScores .ts .ad { font-size: 10.5px; letter-spacing: 1.4px; }
#soloRank { font-size: 12px; padding: 3px 12px; white-space: nowrap; }
#olayBanner { padding: 5px 14px 5px 9px; gap: 9px; }
#olayBanner .oi { font-size: 20px; }
#olayBanner .oad { font-size: 13px; letter-spacing: 1.4px; }
#olayBanner .ooz { font-size: 11px; }
#netPing { white-space: nowrap; }

/* Dar masaustu / dizustu: serit yan panellerin altina girmesin.
   Olay afisinin aciklama satiri once feda edilir - ad ve sure kalir. */
@media (max-width: 1200px) {
  #olayBanner .ooz { display: none; }
  #soloRank { font-size: 11px; padding: 2px 10px; }
  #timer { font-size: 23px; padding: 2px 14px; }
}
@media (max-width: 1000px) {
  #netPing { display: none !important; }
  #teamScores .ts .ad { display: none; }
}

/* Dar dizustu (<=1100 px): serit sag ustteki radarin altina giriyordu.
   Parcalar biraz daha kuculuyor - serit ortada, radar kosede kaliyor. */
@media (max-width: 1100px) {
  #topbar { gap: 7px; }
  #timer { font-size: 20px; padding: 1px 11px; border-radius: 14px; }
  #teamScores { gap: 6px; }
  #teamScores .ts { padding: 2px 9px; gap: 5px; }
  #teamScores .ts b { font-size: 17px; }
  #soloRank { font-size: 10.5px; padding: 2px 8px; }
  #olayBanner { padding: 4px 10px 4px 7px; gap: 7px; }
  #olayBanner .oi { font-size: 16px; }
  #olayBanner .oad { font-size: 11px; letter-spacing: 1px; }
  #olayBanner .osure { font-size: 11px; padding: 1px 7px; }
}